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.

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.
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.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
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.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.

Methods

Name	Description
Header	Configures the component to header.
Footer	Configures the component to footer.
Render	Renders the component's root HTML element.

Method

TaskBoardCard.Render

public HTMLElement Render()

Renders the component's root HTML element.

Sample

task-board-sample.cs

using H5.Core;
using Tesserae;
using static H5.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);
        }
    }
}

TaskBoard

Description

API reference

TaskBoard

Constructors

TaskBoard

Properties

TaskBoard.Margin

TaskBoard.Padding

Methods

TaskBoard.AddColumn

TaskBoard.Columns

TaskBoard.ReadOnly

TaskBoard.OnColumnDrop

TaskBoard.OnColumnUpdate

TaskBoard.RowMode

TaskBoard.Render

TaskBoardColumn

Constructors

TaskBoardColumn

Properties

TaskBoardColumn.IsReadOnly

Methods

TaskBoardColumn.OnCardDrop

TaskBoardColumn.OnCardAdd

TaskBoardColumn.OnCardRemove

TaskBoardColumn.OnCardUpdate

TaskBoardColumn.Cards

TaskBoardColumn.AddCard

TaskBoardColumn.Render

TaskBoardCard

Constructors

TaskBoardCard

Methods

TaskBoardCard.Header

TaskBoardCard.Footer

TaskBoardCard.Render

Sample

See also