Tesserae - Task Board

TaskBoard

Description

A board for managing tasks

TaskBoard provides a Trello-like interface with draggable columns and cards. Use it for Kanban boards and task management.

Sample

task-board-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var board = TaskBoard()
                .OnColumnDrop(e => console.log($"Column dropped: oldIndex={e.oldIndex}, newIndex={e.newIndex}"))
                .OnColumnUpdate(e => console.log($"Column updated: oldIndex={e.oldIndex}, newIndex={e.newIndex}"))
                .Columns(
                    TaskBoardColumn("To Do")
                        .OnCardAdd(e => console.log("Card added to To Do"))
                        .OnCardRemove(e => console.log("Card removed from To Do"))
                        .OnCardDrop(e => console.log("Card dropped in To Do"))
                        .OnCardUpdate(e => console.log("Card updated in To Do"))
                        .Cards(
                            TaskBoardCard(TextBlock("Research user needs and identify key personas for the upcoming sprint."))
                                .Header(HStack().JustifyContent(ItemJustify.Between).Width(100.percent()).Children(
                                    Badge("Design").Primary(),
                                    TextBlock("T-101").Small().Secondary()
                                ))
                                .Footer(HStack().JustifyContent(ItemJustify.Between).Width(100.percent()).Children(
                                    Icon(UIcons.Comment).Small().Class("tss-text-secondary").Tooltip("3 Comments"),
                                    Avatar(initials: "JD").Size(AvatarSize.XSmall)
                                )),
                            TaskBoardCard(TextBlock("Draft UI mockups")),
                            TaskBoardCard(TextBlock("Setup project repo"))
                                .Footer(HStack().JustifyContent(ItemJustify.End).Width(100.percent()).Children(
                                    Avatar(initials: "KL").Size(AvatarSize.XSmall)
                                ))
                        ),
                    TaskBoardColumn("In Progress")
                        .OnCardAdd(e => console.log("Card added to In Progress"))
                        .OnCardRemove(e => console.log("Card removed from In Progress"))
                        .OnCardDrop(e => console.log("Card dropped in In Progress"))
                        .OnCardUpdate(e => console.log("Card updated in In Progress"))
                        .Cards(
                            TaskBoardCard(TextBlock("Implement TaskBoard component").SemiBold())
                                .Header(HStack().JustifyContent(ItemJustify.Between).Width(100.percent()).Children(
                                    Badge("Feature").Danger(),
                                    TextBlock("T-102").Small().Secondary()
                                ))
                                .Footer(HStack().JustifyContent(ItemJustify.Between).Width(100.percent()).Children(
                                    HStack().Children(Icon(UIcons.PaperclipVertical).Small().Class("tss-text-secondary").Tooltip("2 Attachments")),
                                    Avatar(initials: "MW").Size(AvatarSize.XSmall)
                                )),
                            TaskBoardCard(TextBlock("Add Playwright tests"))
                                .Header(Badge("Testing").Success())
                        ),
                    TaskBoardColumn("Done")
                        .OnCardAdd(e => console.log("Card added to Done"))
                        .OnCardRemove(e => console.log("Card removed from Done"))
                        .OnCardDrop(e => console.log("Card dropped in Done"))
                        .OnCardUpdate(e => console.log("Card updated in Done"))
                        .Cards(
                            TaskBoardCard(TextBlock("Create project plan"))
                                .Footer(HStack().JustifyContent(ItemJustify.Between).Width(100.percent()).Children(
                                    TextBlock("Approved").Small().Success(),
                                    Avatar(initials: "AS").Size(AvatarSize.XSmall).Presence(AvatarPresence.Online)
                                )),
                            TaskBoardCard(TextBlock("Initial meeting"))
                        )
                );

            var toggle = IconToggle(
                IconToggleItem(UIcons.TableColumns, "Column Mode", false),
                IconToggleItem(UIcons.TableRows, "Row Mode", true)
            );
            toggle.AsObservable().Observe(isRowMode => board.RowMode(isRowMode));

            var readOnlyToggle = Toggle("Read Only").OnChange((s, e) => board.ReadOnly(s.IsChecked));

            var component = VStack().WS().Children(
                HStack().Children(toggle, readOnlyToggle),
                board.Height(600.px())
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

API reference

class

TaskBoard

public class TaskBoard : IComponent, IHasMarginPadding

A kanban-style board with named columns and draggable cards.

Namespace: Tesserae
Implements: IComponent, IHasMarginPadding

Constructors

Name	Description
TaskBoard	Initializes a new instance of this class.

Constructor

TaskBoard

public TaskBoard()

Initializes a new instance of this class.

Properties

Name	Description
Margin	Gets or sets the CSS margin of the component.
Padding	Gets or sets the CSS padding of the component.

Property

TaskBoard.Margin

public string Margin { get ; set ; }

Gets or sets the CSS margin of the component.

Property

TaskBoard.Padding

public string Padding { get ; set ; }

Gets or sets the CSS padding of the component.

Methods

Name	Description
AddColumn	Adds the given column to the component.
Columns	Defines the columns of the grid (track sizes).
ReadOnly	Configures the read only on the component.
ReorderColumns	Whether the columns themselves can be dragged into another order (on by default). Turn it off for a board whose columns are a fixed workflow; the cards still move between them.
StretchColumns	Makes the columns share the board's width instead of each being 300px wide, down to 220px each before the board scrolls - so a board with a handful of columns shows all of them. Has no effect in `RowMode`.
OnColumnDrop	Registers a callback invoked when the column drop event fires.
OnColumnUpdate	Registers a callback invoked when the column update event fires.
RowMode	Configures the row mode on the component.
Render	Renders the component's root HTML element.

Method

TaskBoard.AddColumn

public TaskBoard AddColumn(TaskBoardColumn column)

Adds the given column to the component.

Method

TaskBoard.Columns

public TaskBoard Columns(params TaskBoardColumn[] columns)

Defines the columns of the grid (track sizes).

Method

TaskBoard.ReadOnly

public TaskBoard ReadOnly(bool isReadOnly = true)

Configures the read only on the component.

Method

TaskBoard.ReorderColumns

public TaskBoard ReorderColumns(bool reorderColumns = true)

Whether the columns themselves can be dragged into another order (on by default). Turn it off for a board whose columns are a fixed workflow; the cards still move between them.

Method

TaskBoard.StretchColumns

public TaskBoard StretchColumns(bool stretchColumns = true)

Makes the columns share the board's width instead of each being 300px wide, down to 220px each before the board scrolls - so a board with a handful of columns shows all of them. Has no effect in RowMode.

Method

TaskBoard.OnColumnDrop

public TaskBoard OnColumnDrop(Action<SortableEvent> onColumnDrop)

Registers a callback invoked when the column drop event fires.

Method

TaskBoard.OnColumnUpdate

public TaskBoard OnColumnUpdate(Action<SortableEvent> onColumnUpdate)

Registers a callback invoked when the column update event fires.

Method

TaskBoard.RowMode

public TaskBoard RowMode(bool isRowMode = true)

Configures the row mode on the component.

Method

TaskBoard.Render

public HTMLElement Render()

Renders the component's root HTML element.

class

TaskBoardColumn

public class TaskBoardColumn : IComponent

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
TaskBoardColumn	Initializes a new instance of this class.

Constructor

TaskBoardColumn

public TaskBoardColumn(string title, string sortableGroup = "taskboard")

Initializes a new instance of this class.

Properties

Name	Description
IsReadOnly	Returns a value indicating whether the component is read only.

Property

TaskBoardColumn.IsReadOnly

public bool IsReadOnly { get ; internal set ; }

Returns a value indicating whether the component is read only.

Methods

Name	Description
AcceptDrops	Whether a card dragged from another column of the same group may be dropped here. A column that refuses drops still lets its own cards be reordered and dragged out, unless they are `Locked`.
HeaderCommands	Places components on the right of the column's header, beside its title - a count, a badge, an add button. Replaces whatever was there.
OnCardDrop	Registers a callback invoked when the card drop event fires.
OnCardAdd	Registers a callback invoked when the card add event fires.
OnCardRemove	Registers a callback invoked when the card remove event fires.
OnCardUpdate	Registers a callback invoked when the card update event fires.
Cards	Configures the component to cards.
AddCard	Adds the given card to the component.
Render	Renders the component's root HTML element.

Method

TaskBoardColumn.AcceptDrops

public TaskBoardColumn AcceptDrops(bool acceptDrops = true)

Whether a card dragged from another column of the same group may be dropped here. A column that refuses drops still lets its own cards be reordered and dragged out, unless they are Locked.

Method

TaskBoardColumn.HeaderCommands

public TaskBoardColumn HeaderCommands(params IComponent[] commands)

Places components on the right of the column's header, beside its title - a count, a badge, an add button. Replaces whatever was there.

Method

TaskBoardColumn.OnCardDrop

public TaskBoardColumn OnCardDrop(Action<SortableEvent> onCardDrop)

Registers a callback invoked when the card drop event fires.

Method

TaskBoardColumn.OnCardAdd

public TaskBoardColumn OnCardAdd(Action<SortableEvent> onCardAdd)

Registers a callback invoked when the card add event fires.

Method

TaskBoardColumn.OnCardRemove

public TaskBoardColumn OnCardRemove(Action<SortableEvent> onCardRemove)

Registers a callback invoked when the card remove event fires.

Method

TaskBoardColumn.OnCardUpdate

public TaskBoardColumn OnCardUpdate(Action<SortableEvent> onCardUpdate)

Registers a callback invoked when the card update event fires.

Method

TaskBoardColumn.Cards

public TaskBoardColumn Cards(params TaskBoardCard[] cards)

Configures the component to cards.

Method

TaskBoardColumn.AddCard

public TaskBoardColumn AddCard(TaskBoardCard card)

Adds the given card to the component.

Method

TaskBoardColumn.Render

public HTMLElement Render()

Renders the component's root HTML element.

class

TaskBoardCard

public class TaskBoardCard : IComponent

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
TaskBoardCard	Initializes a new instance of this class.

Constructor

TaskBoardCard

public TaskBoardCard(IComponent content)

Initializes a new instance of this class.

Properties

Name	Description
IsLocked	Returns whether the card is `Locked`.

Property

TaskBoardCard.IsLocked

public bool IsLocked

Returns whether the card is Locked.

Methods

Name	Description
Locked	Keeps the card where it is: it cannot be dragged to another place or column, while its own content stays clickable. The other cards of its column can still be dragged around it.
Header	Configures the component to header.
Footer	Configures the component to footer.
Render	Renders the component's root HTML element.

Method

TaskBoardCard.Locked

public TaskBoardCard Locked(bool isLocked = true)

Keeps the card where it is: it cannot be dragged to another place or column, while its own content stays clickable. The other cards of its column can still be dragged around it.

Method

TaskBoardCard.Render

public HTMLElement Render()

Renders the component's root HTML element.

TaskBoard

Description

Sample

API reference

Constructors

TaskBoard

Properties

TaskBoard.Margin

TaskBoard.Padding

Methods

TaskBoard.AddColumn

TaskBoard.Columns

TaskBoard.ReadOnly

TaskBoard.ReorderColumns

TaskBoard.StretchColumns

TaskBoard.OnColumnDrop

TaskBoard.OnColumnUpdate

TaskBoard.RowMode

TaskBoard.Render

Constructors

TaskBoardColumn

Properties

TaskBoardColumn.IsReadOnly

Methods

TaskBoardColumn.AcceptDrops

TaskBoardColumn.HeaderCommands

TaskBoardColumn.OnCardDrop

TaskBoardColumn.OnCardAdd

TaskBoardColumn.OnCardRemove

TaskBoardColumn.OnCardUpdate

TaskBoardColumn.Cards

TaskBoardColumn.AddCard

TaskBoardColumn.Render

Constructors

TaskBoardCard

Properties

TaskBoardCard.IsLocked

Methods

TaskBoardCard.Locked

TaskBoardCard.Header

TaskBoardCard.Footer

TaskBoardCard.Render

See also