@baack-software/baack-ts-tasks 0.0.0-stage → 0.0.1

package/src/react/TaskView.tsx

@@ -0,0 +1,291 @@
+import { useEffect, useId, useMemo, useState } from 'react';
+import type { Task } from '@baack-software/baack-ts-client';
+import { Columns3, Plus, Rows3 } from 'lucide-react';
+import { cn } from 'cn';
+import { selectTasks, type TaskStore } from '../store.ts';
+import { byPriorityThenDue, byUrgency, type TaskFilter, type TaskGrouping } from '../tasks.ts';
+import { useCopy } from './copy.tsx';
+import { ChoiceSelect } from './fields.tsx';
+import { useMediaQuery, useTaskDirectory, useTaskStore } from './hooks.ts';
+import { TaskActivity } from './TaskActivity.tsx';
+import { TaskBoard, TaskTable } from './TaskBoard.tsx';
+import { TaskCreateForm } from './TaskCreateForm.tsx';
+import { TaskEditor } from './TaskEditor.tsx';
+import { TaskFilters } from './TaskFilters.tsx';
+import type { TaskDirectory } from './parts.tsx';
+import { Alert, AlertDescription } from './ui/alert.tsx';
+import { Button } from './ui/button.tsx';
+import { Sheet, SheetContent, SheetTitle } from './ui/sheet.tsx';
+import { Skeleton } from './ui/skeleton.tsx';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.tsx';
+
+export type TaskLayout = 'board' | 'table';
+
+export interface TaskViewProps {
+  store: TaskStore;
+  /** The signed-in person's identity URN, for "Assigned to me". */
+  me?: string | undefined;
+  /** Starting layout. Default board. */
+  layout?: TaskLayout;
+  /**
+   * Starting board columns. Default status. `workflow` has a column per workflow; `workflowStage` shows the first
+   * workflow's stages. Each column is sorted open first, then by priority, due date and title.
+   */
+  groupBy?: TaskGrouping;
+  /** Starting filter. */
+  filter?: TaskFilter;
+  /** Opens this task on load, e.g. from the URL. */
+  selected?: string | undefined;
+  /** Told when the open task changes, e.g. to put it in the URL. */
+  onSelect?: ((urn: string | undefined) => void) | undefined;
+  /** Companies and content to offer as related items, which the store doesn't load. */
+  related?: Pick<TaskDirectory, 'companies' | 'entities'> | undefined;
+}
+
+const GROUPINGS: readonly Exclude<TaskGrouping, 'workflow' | 'workflowStage'>[] = [
+  'status',
+  'priority',
+  'assignee',
+  'project',
+];
+/** Prefixes a workflow URN in the grouping choice. */
+const STAGE = 'stage:';
+
+/**
+ * The full task view: a filterable board or table of a company's tasks, with the open task's editor and activity log
+ * beside it, and a form for new tasks. Loads the store when it hasn't been loaded.
+ */
+export function TaskView({
+  store,
+  me,
+  layout: initialLayout = 'board',
+  groupBy: initialGroupBy = 'status',
+  filter: initialFilter = {},
+  selected: initialSelected,
+  onSelect,
+  related,
+}: TaskViewProps) {
+  const copy = useCopy();
+  const ids = useId();
+  const state = useTaskStore(store);
+  const loaded = useTaskDirectory(state);
+  const directory = useMemo(
+    () => ({ ...loaded, companies: related?.companies, entities: related?.entities }),
+    [loaded, related?.companies, related?.entities],
+  );
+  const [layout, setLayout] = useState<TaskLayout>(initialLayout);
+  const [groupBy, setGroupBy] = useState<TaskGrouping>(initialGroupBy);
+  const [workflowUrn, setWorkflowUrn] = useState<string | undefined>();
+  const workflow = directory.workflows?.find((w) => w.urn === workflowUrn) ?? directory.workflows?.[0];
+  const [filter, setFilter] = useState<TaskFilter>(initialFilter);
+  const [selected, setSelected] = useState<string | undefined>(initialSelected);
+  const [creating, setCreating] = useState(false);
+  const [announcement, setAnnouncement] = useState('');
+
+  useEffect(() => {
+    if (store.getState().status === 'idle') store.load().catch(() => undefined);
+  }, [store]);
+
+  const task = selected ? state.byUrn.get(selected) : undefined;
+  const logs = selected ? state.logs.get(selected) : undefined;
+
+  useEffect(() => {
+    if (selected && store.getState().logs.get(selected) === undefined && store.get(selected)) {
+      store.loadLogs(selected).catch(() => undefined);
+    }
+  }, [store, selected, task !== undefined]);
+
+  const itemId = (urn: string) => `${ids}-task-${urn}`;
+  const select = (urn: string | undefined) => {
+    setSelected(urn);
+    setCreating(false);
+    onSelect?.(urn);
+  };
+  const close = () => {
+    const from = selected;
+    select(undefined);
+    if (from) requestAnimationFrame(() => document.getElementById(itemId(from))?.focus());
+  };
+
+  const wide = useMediaQuery('(min-width: 64rem)');
+  const visible = useMemo(() => selectTasks(state, filter, byUrgency), [state, filter]);
+  const list = {
+    tasks: visible,
+    directory,
+    selected,
+    itemId,
+    onOpen: (t: Task) => select(t.urn),
+  };
+
+  const panel = (
+    <>
+      {creating ? (
+        <TaskCreateForm
+          directory={directory}
+          onCancel={() => setCreating(false)}
+          onCreate={async (input) => {
+            const created = await store.create(input);
+            setAnnouncement(created.title);
+            select(created.urn);
+          }}
+        />
+      ) : (
+        task && (
+          <TaskEditor
+            task={task}
+            directory={directory}
+            saving={state.saving.has(task.urn)}
+            onChange={(changes) => store.update(task.urn, changes)}
+            onDelete={async () => {
+              await store.delete(task.urn);
+              select(undefined);
+            }}
+            onClose={close}
+            changedElsewhere={state.changedElsewhere.get(task.urn)}
+            onDismissChangedElsewhere={() => store.dismissChangedElsewhere(task.urn)}
+            activity={
+              <TaskActivity
+                logs={logs?.logs ?? []}
+                directory={directory}
+                loading={logs?.status === 'loading'}
+                onLoadMore={logs?.after ? () => store.loadMoreLogs(task.urn).catch(() => undefined) : undefined}
+                onComment={(text, replyTo) =>
+                  store.comment(task.urn, text, replyTo ? { replyTo: replyTo.urn } : {})
+                }
+              />
+            }
+          />
+        )
+      )}
+    </>
+  );
+
+  return (
+    <div className="grid gap-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <h2 className="mr-auto text-xl font-bold">
+          {copy('tasks_heading')}
+          {state.status === 'ready' && (
+            <span className="text-muted-foreground ml-2 text-sm font-normal tabular-nums">
+              {visible.length === 1 ? copy('tasks_count_one') : copy('tasks_count', { count: visible.length })}
+            </span>
+          )}
+        </h2>
+        <ToggleGroup
+          type="single"
+          variant="outline"
+          size="sm"
+          spacing={0}
+          value={layout}
+          onValueChange={(value) => value && setLayout(value as TaskLayout)}
+          aria-label={copy('tasks_view')}
+        >
+          <ToggleGroupItem value="board">
+            <Columns3 aria-hidden="true" />
+            {copy('tasks_view_board')}
+          </ToggleGroupItem>
+          <ToggleGroupItem value="table">
+            <Rows3 aria-hidden="true" />
+            {copy('tasks_view_table')}
+          </ToggleGroupItem>
+        </ToggleGroup>
+        {layout === 'board' && (
+          <div className="w-36">
+            <ChoiceSelect
+              value={groupBy === 'workflowStage' && workflow ? `${STAGE}${workflow.urn}` : groupBy}
+              label={copy('tasks_group_by')}
+              choices={[
+                ...GROUPINGS.map((grouping) => ({ value: grouping, label: copy(`tasks_group_${grouping}`) })),
+                // Workflows as columns, then one choice per workflow for its stages as columns.
+                ...(directory.workflows?.length ? [{ value: 'workflow', label: copy('tasks_group_workflow') }] : []),
+                ...(directory.workflows ?? []).map((w) => ({
+                  value: `${STAGE}${w.urn}`,
+                  label: copy('tasks_group_stages', { workflow: w.name }),
+                })),
+              ]}
+              onChange={(value) => {
+                if (value.startsWith(STAGE)) {
+                  setGroupBy('workflowStage');
+                  setWorkflowUrn(value.slice(STAGE.length));
+                } else setGroupBy(value as TaskGrouping);
+              }}
+            />
+          </div>
+        )}
+        <Button
+          size="sm"
+          onClick={() => {
+            setSelected(undefined);
+            setCreating(true);
+          }}
+        >
+          <Plus aria-hidden="true" />
+          {copy('tasks_new')}
+        </Button>
+      </div>
+
+      <TaskFilters value={filter} onChange={setFilter} directory={directory} me={me} />
+
+      <div
+        className={cn(
+          'grid grid-cols-1 items-start gap-4',
+          (creating || task) && wide && 'grid-cols-[minmax(0,1fr)_minmax(22rem,28rem)]',
+        )}
+      >
+        <div className="min-w-0">
+          {state.status === 'error' && (
+            <Alert variant="destructive">
+              <AlertDescription className="flex flex-wrap items-center gap-2">
+                {copy('tasks_load_failed')}
+                <Button variant="outline" size="sm" onClick={() => store.load().catch(() => undefined)}>
+                  {copy('tasks_retry')}
+                </Button>
+              </AlertDescription>
+            </Alert>
+          )}
+          {(state.status === 'loading' || state.status === 'idle') && state.tasks.length === 0 ? (
+            <div aria-busy="true" className="grid gap-2">
+              <span className="sr-only">{copy('tasks_loading')}</span>
+              {[0, 1, 2].map((row) => (
+                <Skeleton key={row} className="h-16 w-full" />
+              ))}
+            </div>
+          ) : state.status === 'ready' && visible.length === 0 ? (
+            <p className="text-muted-foreground rounded-xl border border-dashed p-8 text-center text-sm">
+              {state.tasks.length === 0 ? copy('tasks_none') : copy('tasks_empty')}
+            </p>
+          ) : layout === 'board' ? (
+            <TaskBoard {...list} groupBy={groupBy} workflow={workflow} sort={byPriorityThenDue} />
+          ) : (
+            <TaskTable {...list} />
+          )}
+        </div>
+
+        {(creating || task) && wide && (
+          <aside className="bg-card sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto rounded-xl border p-4">
+            {panel}
+          </aside>
+        )}
+      </div>
+      {!wide && (
+        <Sheet open={creating || task !== undefined} onOpenChange={(open) => !open && (creating ? setCreating(false) : close())}>
+          <SheetContent
+            side="right"
+            showCloseButton={false}
+            aria-describedby={undefined}
+            className="w-full overflow-y-auto p-4 sm:max-w-md"
+            // The editor and form focus their own heading or first field, and closing focuses the task's card.
+            onOpenAutoFocus={(event) => event.preventDefault()}
+            onCloseAutoFocus={(event) => event.preventDefault()}
+          >
+            <SheetTitle className="sr-only">{creating ? copy('tasks_new') : copy('editor_label')}</SheetTitle>
+            {panel}
+          </SheetContent>
+        </Sheet>
+      )}
+      <p aria-live="polite" className="sr-only">
+        {announcement}
+      </p>
+    </div>
+  );
+}

package/src/react/TasksAbout.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import type { Task } from '@baack-software/baack-ts-client';
+import { CircleCheck, Plus } from 'lucide-react';
+import { selectTasks, type TaskStore } from '../store.ts';
+import { byUrgency, isOpen, type TaskFilter } from '../tasks.ts';
+import type { Ref } from '../types.ts';
+import { useCopy } from './copy.tsx';
+import { useTaskDirectory, useTaskStore } from './hooks.ts';
+import { DueDate, nameOf, PersonAvatar, StatusBadge } from './parts.tsx';
+import { Alert, AlertDescription } from './ui/alert.tsx';
+import { Button } from './ui/button.tsx';
+import { Input } from './ui/input.tsx';
+import { Skeleton } from './ui/skeleton.tsx';
+
+/** What a page is about, and so which tasks it shows. */
+export type TaskSubjectKind = 'identity' | 'company' | 'entity' | 'task' | 'project';
+
+export interface TaskSubject {
+  kind: TaskSubjectKind;
+  urn: string;
+}
+
+export interface TasksAboutProps {
+  store: TaskStore;
+  /** The person, company, content, task or project the page is about. */
+  about: TaskSubject;
+  /** Opens a task, e.g. in the full task view. Without it, titles aren't links. */
+  onOpen?: ((task: Task) => void) | undefined;
+  /** The heading's level, to fit the page's outline. Default 2. */
+  headingLevel?: 2 | 3 | 4;
+}
+
+/** The new task's fields that tie it to the subject. */
+function subjectFields(about: TaskSubject): { project: Ref } | Record<string, Ref[]> {
+  const ref = { urn: about.urn };
+  switch (about.kind) {
+    case 'project':
+      return { project: ref };
+    case 'identity':
+      return { associatedIdentities: [ref] };
+    case 'company':
+      return { associatedCompanies: [ref] };
+    case 'entity':
+      return { associatedEntities: [ref] };
+    case 'task':
+      return { associatedTasks: [ref] };
+  }
+}
+
+/**
+ * The tasks about one thing, for a console page about it: open tasks, most urgent first, then completed ones on
+ * request, and a quick-add whose task is related to it. The API can't search by association yet, so this filters the
+ * store's tasks; share one store across a page's panels. Loads the store when it hasn't been loaded.
+ */
+export function TasksAbout({ store, about, onOpen, headingLevel = 2 }: TasksAboutProps) {
+  const copy = useCopy();
+  const ids = useId();
+  const state = useTaskStore(store);
+  const directory = useTaskDirectory(state);
+  const input = useRef<HTMLInputElement>(null);
+  const [title, setTitle] = useState('');
+  const [adding, setAdding] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [showDone, setShowDone] = useState(false);
+
+  useEffect(() => {
+    if (store.getState().status === 'idle') store.load().catch(() => undefined);
+  }, [store]);
+
+  const filter: TaskFilter = about.kind === 'project' ? { project: [about.urn] } : { relatedTo: about.urn };
+  const tasks = useMemo(() => selectTasks(state, filter, byUrgency), [state, about.kind, about.urn]);
+  const open = tasks.filter(isOpen);
+  const done = tasks.filter((task) => !isOpen(task));
+  const Heading = `h${headingLevel}` as const;
+
+  const add = async () => {
+    if (!title.trim()) return;
+    setAdding(true);
+    setFailed(false);
+    try {
+      await store.create({ title: title.trim(), ...subjectFields(about) });
+      setTitle('');
+    } catch {
+      setFailed(true);
+    } finally {
+      setAdding(false);
+      input.current?.focus();
+    }
+  };
+
+  return (
+    <section aria-labelledby={`${ids}-heading`} className="bg-card grid gap-3 rounded-xl border p-4">
+      <Heading id={`${ids}-heading`} className="flex items-baseline gap-2 text-base font-semibold">
+        {copy('about_heading')}{' '}
+        {state.status === 'ready' && (
+          <span className="text-muted-foreground text-sm font-normal tabular-nums">
+            {copy('about_open_count', { count: open.length })}
+          </span>
+        )}
+      </Heading>
+
+      <form
+        className="flex gap-2"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void add();
+        }}
+      >
+        <Input
+          ref={input}
+          value={title}
+          onChange={(event) => setTitle(event.target.value)}
+          placeholder={copy('about_add_placeholder')}
+          aria-label={copy('about_add_label')}
+          disabled={adding}
+          className="h-8"
+        />
+        <Button type="submit" size="sm" disabled={adding || !title.trim()}>
+          <Plus aria-hidden="true" />
+          {copy('about_add')}
+        </Button>
+      </form>
+      {failed && (
+        <Alert variant="destructive">
+          <AlertDescription>{copy('about_add_failed')}</AlertDescription>
+        </Alert>
+      )}
+
+      {state.status === 'error' && (
+        <Alert variant="destructive">
+          <AlertDescription className="flex flex-wrap items-center gap-2">
+            {copy('tasks_load_failed')}
+            <Button variant="outline" size="sm" onClick={() => store.load().catch(() => undefined)}>
+              {copy('tasks_retry')}
+            </Button>
+          </AlertDescription>
+        </Alert>
+      )}
+      {(state.status === 'loading' || state.status === 'idle') && state.tasks.length === 0 ? (
+        <div aria-busy="true" className="grid gap-2">
+          <span className="sr-only">{copy('tasks_loading')}</span>
+          {[0, 1].map((row) => (
+            <Skeleton key={row} className="h-10 w-full" />
+          ))}
+        </div>
+      ) : (
+        state.status !== 'error' && (
+          <>
+            {open.length === 0 ? (
+              <p className="text-muted-foreground text-sm">{copy('about_none')}</p>
+            ) : (
+              <TaskRows tasks={open} store={store} onOpen={onOpen} directory={directory} />
+            )}
+            {done.length > 0 && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="justify-self-start"
+                  aria-expanded={showDone}
+                  aria-controls={`${ids}-done`}
+                  onClick={() => setShowDone(!showDone)}
+                >
+                  {showDone ? copy('about_hide_done') : copy('about_show_done', { count: done.length })}
+                </Button>
+                <div id={`${ids}-done`} hidden={!showDone}>
+                  {showDone && <TaskRows tasks={done} store={store} onOpen={onOpen} directory={directory} />}
+                </div>
+              </>
+            )}
+          </>
+        )
+      )}
+    </section>
+  );
+}
+
+function TaskRows({
+  tasks,
+  store,
+  onOpen,
+  directory,
+}: {
+  tasks: readonly Task[];
+  store: TaskStore;
+  onOpen: ((task: Task) => void) | undefined;
+  directory: ReturnType<typeof useTaskDirectory>;
+}) {
+  const copy = useCopy();
+  return (
+    <ul className="divide-border grid divide-y">
+      {tasks.map((task) => {
+        const assignee = task.assignee ? { urn: task.assignee.urn, name: nameOf(directory, task.assignee) } : null;
+        return (
+          <li key={task.urn} className="flex min-w-0 items-center gap-2 py-2 text-sm">
+            {isOpen(task) ? (
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                aria-label={copy('about_complete', { name: task.title })}
+                onClick={() => store.setStatus(task.urn, 'COMPLETED').catch(() => undefined)}
+              >
+                <CircleCheck aria-hidden="true" />
+              </Button>
+            ) : (
+              <StatusBadge status={task.status} />
+            )}
+            {onOpen ? (
+              <button
+                type="button"
+                onClick={() => onOpen(task)}
+                className="hover:text-primary min-w-0 flex-1 truncate text-left font-medium hover:underline"
+              >
+                {task.title}
+              </button>
+            ) : (
+              <span className="min-w-0 flex-1 truncate font-medium">{task.title}</span>
+            )}
+            <DueDate task={task} />
+            <PersonAvatar person={assignee} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}