A record’s tasks in a context panel: each task as a row with its status, title, date and assignee.
Installation
import { Tasks } from "@o/pipeline/experimental/blocks/tasks";Usage
Pass the tasks as items, in order. A finished task shows ticked and struck through, and the count is the open ones. Each task’s done state is controlled with completed, or left to the block with defaultCompleted; ticking a box calls onCompletedChange either way, where the app saves it. Without onCompletedChange, the checkboxes are read-only.
Give each task a link (the app’s router link) and the whole row opens it. The checkbox, date, assignee and action sit above the link and stay clickable.
Record
Where a list mixes tasks from several records, give each a record: its icon or logo and name, before the title. It sits above the row’s link, so the app’s button there opens that record.
Empty
With no tasks, the block is one row: its title, a placeholder, and the + when onAdd is passed.
See all
With seeAll, the block shows limit rows (4 by default), and with more, “See all” calls onSeeAll, where the app opens the full list. Without seeAll, every row shows and limit and onSeeAll can’t be passed.
Folded
The header folds the rows. Folded, its caret shows; open, the caret shows while the header is hovered, pressed or focused. open, defaultOpen and onOpenChange control it, and the block stores nothing, so the app persists it. With collapsible={false} the rows always show and those props can’t be passed.
Loading
A loading block is the block itself inside a loading SkeletonGroup, with placeholder rows; the count shows as a skeleton. Show the empty row only once the data has loaded with nothing in it.