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

package/src/react/TaskEditor.tsx

@@ -0,0 +1,485 @@
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react';
+import type { Task, TaskPriority, TaskStatus } from '@baack-software/baack-ts-client';
+import { Building2, FileText, Link2, Trash2, UserRound, X } from 'lucide-react';
+import { wouldCreateCycle } from '../blockers.ts';
+import { resolveConflicts, type TaskConflict, type TaskField } from '../conflicts.ts';
+import { isEmptyChange } from '../draft.ts';
+import { TaskConflictError } from '../errors.ts';
+import { withoutRef, withRef } from '../refs.ts';
+import { isOpen, TASK_PRIORITIES, TASK_STATUSES, workflowStages } from '../tasks.ts';
+import { fromLocalInput, toLocalInput } from '../time.ts';
+import type { TaskInput, TaskListField } from '../types.ts';
+import { priorityCopy, statusCopy, useCopy, type TaskCopyName } from './copy.tsx';
+import { ChoiceSelect, Field, NONE } from './fields.tsx';
+import { nameOf, PersonAvatar, StatusBadge, Timestamp, type Named, type TaskDirectory } from './parts.tsx';
+import { Alert, AlertDescription } from './ui/alert.tsx';
+import { Button } from './ui/button.tsx';
+import { Input } from './ui/input.tsx';
+import { Separator } from './ui/separator.tsx';
+import { Textarea } from './ui/textarea.tsx';
+import { ChangedElsewhere, TaskConflicts } from './TaskConflicts.tsx';
+
+export interface TaskEditorProps {
+  task: Task;
+  directory: TaskDirectory;
+  /**
+   * Sends a change. Rejections are shown in the editor. A `TaskConflictError` (from `TaskStore.update`, or
+   * `TaskClient.update` with `base: task`) opens a panel to choose, field by field, between this person's value and
+   * the other one; the choices are sent as another change. Without the store, update `task` to the error's `current`
+   * so that change is checked against what the person now sees.
+   */
+  onChange: (changes: TaskInput) => Promise<unknown>;
+  /** Fields someone else changed while this person was editing, shown as a note. */
+  changedElsewhere?: readonly (TaskField | TaskListField)[] | undefined;
+  onDismissChangedElsewhere?: (() => void) | undefined;
+  onDelete?: (() => Promise<unknown>) | undefined;
+  onClose?: (() => void) | undefined;
+  /** Shown while a change is being saved. */
+  saving?: boolean;
+  /** The activity log, usually a `TaskActivity`. */
+  activity?: ReactNode;
+  /** Focus the heading when the editor opens, for keyboard and screen reader users. Default true. */
+  focusOnOpen?: boolean;
+}
+
+/**
+ * Every field of a task, saved as it changes: selects at once, text when it loses focus. Blockers can be added
+ * and removed, related records are listed, and the activity log goes below.
+ */
+export function TaskEditor({
+  task,
+  directory,
+  onChange,
+  onDelete,
+  onClose,
+  saving,
+  activity,
+  focusOnOpen = true,
+  changedElsewhere,
+  onDismissChangedElsewhere,
+}: TaskEditorProps) {
+  const copy = useCopy();
+  const ids = useId();
+  const heading = useRef<HTMLHeadingElement>(null);
+  const [error, setError] = useState<string | undefined>();
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const stages = (directory.workflows ?? []).flatMap((workflow) => workflow.stages ?? []);
+  const [conflict, setConflict] = useState<{ conflicts: TaskConflict[]; changes: TaskInput } | undefined>();
+
+  useEffect(() => {
+    if (focusOnOpen) heading.current?.focus();
+    setError(undefined);
+    setConfirmDelete(false);
+    setConflict(undefined);
+  }, [task.urn, focusOnOpen]);
+
+  const save = async (changes: TaskInput) => {
+    setError(undefined);
+    try {
+      await onChange(changes);
+    } catch (failure) {
+      if (failure instanceof TaskConflictError) {
+        // Builds on a conflict already open, so choices cover every field this person changed.
+        setConflict((open) => ({
+          conflicts: [
+            ...(open?.conflicts.filter((c) => !failure.conflicts.some((f) => f.field === c.field)) ?? []),
+            ...failure.conflicts,
+          ],
+          changes: { ...open?.changes, ...changes },
+        }));
+        return;
+      }
+      const detail = failure instanceof Error && failure.name === 'TaskValidationError' ? failure.message : undefined;
+      setError(detail ? `${copy('editor_save_failed')} ${detail}` : copy('editor_save_failed'));
+    }
+  };
+
+  const others = directory.tasks.filter((t) => t.urn !== task.urn);
+  const blockerChoices = others.filter(
+    (t) =>
+      isOpen(t) &&
+      !task.blockedBy?.some((b) => b.urn === t.urn) &&
+      !wouldCreateCycle(directory.tasks, task.urn, t.urn),
+  );
+
+  return (
+    <article aria-labelledby={`${ids}-heading`} className="grid gap-4">
+      <header className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <p className="text-muted-foreground text-xs">{copy('editor_label')}</p>
+          <h2
+            id={`${ids}-heading`}
+            ref={heading}
+            tabIndex={-1}
+            className="text-lg leading-snug font-bold break-words outline-none"
+          >
+            {task.title}
+          </h2>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <span aria-live="polite" className="text-muted-foreground text-xs">
+            {saving ? copy('editor_saving') : ''}
+          </span>
+          {onClose && (
+            <Button variant="ghost" size="icon-sm" onClick={onClose} aria-label={copy('editor_close')}>
+              <X aria-hidden="true" />
+            </Button>
+          )}
+        </div>
+      </header>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {conflict && (
+        <TaskConflicts
+          conflicts={conflict.conflicts}
+          directory={directory}
+          onResolve={(choices) => {
+            const resolved = resolveConflicts(conflict.changes, choices);
+            setConflict(undefined);
+            if (!isEmptyChange(resolved)) void save(resolved);
+          }}
+          onDiscard={() => setConflict(undefined)}
+        />
+      )}
+
+      {changedElsewhere && changedElsewhere.length > 0 && (
+        <ChangedElsewhere fields={changedElsewhere} onDismiss={onDismissChangedElsewhere} />
+      )}
+
+      <TextField
+        key={`title-${task.urn}`}
+        id={`${ids}-title`}
+        label={copy('field_title')}
+        value={task.title}
+        onCommit={(title) => save({ title })}
+        required
+      />
+
+      <div className="grid grid-cols-2 gap-x-3 gap-y-3">
+        <Field id={`${ids}-status`} label={copy('field_status')}>
+          <ChoiceSelect
+            id={`${ids}-status`}
+            value={task.status}
+            choices={TASK_STATUSES.map((status) => ({ value: status, label: copy(statusCopy(status)) }))}
+            onChange={(status) => save({ status: status as TaskStatus })}
+          />
+        </Field>
+        <Field id={`${ids}-priority`} label={copy('field_priority')}>
+          <ChoiceSelect
+            id={`${ids}-priority`}
+            value={task.priority}
+            choices={[...TASK_PRIORITIES]
+              .reverse()
+              .map((priority) => ({ value: priority, label: copy(priorityCopy(priority)) }))}
+            onChange={(priority) => save({ priority: priority as TaskPriority })}
+          />
+        </Field>
+        <Field id={`${ids}-assignee`} label={copy('field_assignee')}>
+          <ChoiceSelect
+            id={`${ids}-assignee`}
+            value={task.assignee?.urn ?? NONE}
+            choices={[
+              { value: NONE, label: copy('option_unassigned') },
+              ...withCurrent(directory.people, task.assignee, directory).map((person) => ({
+                value: person.urn,
+                label: person.name,
+                icon: <PersonAvatar person={person} />,
+              })),
+            ]}
+            onChange={(urn) => save({ assignee: urn === NONE ? null : { urn } })}
+          />
+        </Field>
+        <Field id={`${ids}-project`} label={copy('field_project')}>
+          <ChoiceSelect
+            id={`${ids}-project`}
+            value={task.project?.urn ?? NONE}
+            choices={[
+              { value: NONE, label: copy('option_no_project') },
+              ...withCurrent(directory.projects, task.project, directory).map((project) => ({
+                value: project.urn,
+                label: project.name,
+              })),
+            ]}
+            onChange={(urn) => save({ project: urn === NONE ? null : { urn } })}
+          />
+        </Field>
+        {(directory.workflows?.length || task.workflowStage) && (
+          <Field id={`${ids}-stage`} label={copy('field_stage')}>
+            <ChoiceSelect
+              id={`${ids}-stage`}
+              value={task.workflowStage?.urn ?? NONE}
+              choices={[
+                { value: NONE, label: copy('option_no_stage') },
+                // A stage of a workflow the directory doesn't have still shows.
+                ...(task.workflowStage && !stages.some((stage) => stage.urn === task.workflowStage?.urn)
+                  ? [{ value: task.workflowStage.urn, label: nameOf(directory, task.workflowStage) }]
+                  : []),
+              ]}
+              groups={(directory.workflows ?? []).map((workflow) => ({
+                label: workflow.name,
+                choices: workflowStages(workflow).map((stage) => ({ value: stage.urn, label: stage.name })),
+              }))}
+              onChange={(urn) => save({ workflowStage: urn === NONE ? null : { urn } })}
+            />
+          </Field>
+        )}
+        <DueField key={`due-${task.urn}`} id={`${ids}-due`} task={task} onCommit={(dueTimestamp) => save({ dueTimestamp })} />
+        <div className="text-muted-foreground grid content-end gap-1 pb-1 text-xs">
+          <span>{copy('field_updated')}</span>
+          <Timestamp value={task.updatedTimestamp} className="text-foreground" />
+        </div>
+      </div>
+
+      <TextField
+        key={`description-${task.urn}`}
+        id={`${ids}-description`}
+        label={copy('field_description')}
+        value={task.description}
+        onCommit={(description) => save({ description })}
+        multiline
+      />
+
+      <section aria-labelledby={`${ids}-blockers`} className="grid gap-2">
+        <h3 id={`${ids}-blockers`} className="text-xs font-semibold tracking-wide uppercase">
+          {copy('blockers_heading')}
+        </h3>
+        {(task.blockedBy?.length ?? 0) === 0 ? (
+          <p className="text-muted-foreground text-sm">{copy('blockers_none')}</p>
+        ) : (
+          <ul className="grid gap-1.5">
+            {task.blockedBy.map((blocker) => {
+              const known = directory.tasks.find((t) => t.urn === blocker.urn);
+              const name = nameOf(directory, blocker);
+              return (
+                <li key={blocker.urn} className="flex items-center gap-2 text-sm">
+                  {known && <StatusBadge status={known.status} />}
+                  <span className="min-w-0 flex-1 truncate">{name}</span>
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    aria-label={copy('blockers_remove', { name })}
+                    onClick={() => save({ blockedBy: withoutRef(task.blockedBy, blocker) })}
+                  >
+                    <X aria-hidden="true" />
+                  </Button>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+        {blockerChoices.length > 0 && (
+          <ChoiceSelect
+            key={`add-blocker-${task.blockedBy?.length ?? 0}`}
+            value={NONE}
+            label={copy('blockers_add')}
+            choices={[
+              { value: NONE, label: copy('blockers_add') },
+              ...blockerChoices.map((t) => ({ value: t.urn, label: t.title })),
+            ]}
+            onChange={(urn) => urn !== NONE && save({ blockedBy: withRef(task.blockedBy, urn) })}
+          />
+        )}
+      </section>
+
+      <Related task={task} directory={directory} onChange={save} />
+
+      {activity && (
+        <>
+          <Separator />
+          {activity}
+        </>
+      )}
+
+      {onDelete && (
+        <>
+          <Separator />
+          {confirmDelete ? (
+            <div role="alertdialog" aria-labelledby={`${ids}-delete`} className="grid gap-2">
+              <p id={`${ids}-delete`} className="text-sm">
+                {copy('task_delete_confirm')}
+              </p>
+              <div className="flex gap-2">
+                <Button variant="destructive" size="sm" onClick={() => onDelete().catch(() => setError(copy('editor_save_failed')))}>
+                  <Trash2 aria-hidden="true" />
+                  {copy('task_delete')}
+                </Button>
+                <Button variant="ghost" size="sm" autoFocus onClick={() => setConfirmDelete(false)}>
+                  {copy('task_delete_cancel')}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <Button variant="ghost" size="sm" className="text-destructive justify-self-start" onClick={() => setConfirmDelete(true)}>
+              <Trash2 aria-hidden="true" />
+              {copy('task_delete')}
+            </Button>
+          )}
+        </>
+      )}
+    </article>
+  );
+}
+
+/** The directory's choices, plus the current value when the directory doesn't list it, so it still shows. */
+function withCurrent(
+  choices: readonly { urn: string; name: string }[],
+  current: { urn: string; name?: string | null } | null | undefined,
+  directory: TaskDirectory,
+) {
+  if (!current || choices.some((choice) => choice.urn === current.urn)) return choices;
+  return [...choices, { urn: current.urn, name: nameOf(directory, current) }];
+}
+
+/** A text input or textarea that saves when it loses focus (or on Enter for a single line), if the value changed. */
+function TextField({
+  id,
+  label,
+  value,
+  onCommit,
+  multiline,
+  required,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onCommit: (value: string) => void;
+  multiline?: boolean;
+  required?: boolean;
+}) {
+  const [draft, setDraft] = useState(value);
+  useEffect(() => setDraft(value), [value]);
+  const commit = () => {
+    if (draft === value) return;
+    if (required && !draft.trim()) return setDraft(value);
+    onCommit(draft);
+  };
+  return (
+    <Field id={id} label={label}>
+      {multiline ? (
+        <Textarea id={id} rows={5} value={draft} onChange={(e) => setDraft(e.target.value)} onBlur={commit} />
+      ) : (
+        <Input
+          id={id}
+          value={draft}
+          required={required}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') commit();
+            if (e.key === 'Escape') setDraft(value);
+          }}
+        />
+      )}
+    </Field>
+  );
+}
+
+function DueField({ id, task, onCommit }: { id: string; task: Task; onCommit: (due: string | null) => void }) {
+  const copy = useCopy();
+  const value = toLocalInput(task.dueTimestamp);
+  const [draft, setDraft] = useState(value);
+  useEffect(() => setDraft(value), [value]);
+  const commit = (next: string) => {
+    if (next === value) return;
+    onCommit(fromLocalInput(next) ?? null);
+  };
+  return (
+    <Field id={id} label={copy('field_due')}>
+      <Input
+        id={id}
+        type="datetime-local"
+        className="h-7 text-sm"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={(e) => commit(e.target.value)}
+      />
+    </Field>
+  );
+}
+
+type AssociationField = 'associatedTasks' | 'associatedIdentities' | 'associatedCompanies' | 'associatedEntities';
+
+/** The kinds of related item, in the order they're shown, with their icon and the heading for adding one. */
+const ASSOCIATIONS = [
+  { field: 'associatedIdentities', Icon: UserRound, heading: 'related_people' },
+  { field: 'associatedCompanies', Icon: Building2, heading: 'related_companies' },
+  { field: 'associatedEntities', Icon: FileText, heading: 'related_entities' },
+  { field: 'associatedTasks', Icon: Link2, heading: 'related_tasks' },
+] as const satisfies readonly { field: AssociationField; Icon: unknown; heading: TaskCopyName }[];
+
+/** The people, companies, content and tasks the task is associated with, each removable, and a picker to add more. */
+function Related({
+  task,
+  directory,
+  onChange,
+}: {
+  task: Task;
+  directory: TaskDirectory;
+  onChange: (changes: TaskInput) => void;
+}) {
+  const copy = useCopy();
+  const ids = useId();
+  const items = ASSOCIATIONS.flatMap(({ field, Icon }) => (task[field] ?? []).map((item) => ({ field, item, Icon })));
+  const offered: Record<AssociationField, readonly Named[]> = {
+    associatedIdentities: directory.people,
+    associatedCompanies: directory.companies ?? [],
+    associatedEntities: directory.entities ?? [],
+    associatedTasks: directory.tasks.filter((t) => t.urn !== task.urn).map((t) => ({ urn: t.urn, name: t.title })),
+  };
+  const groups = ASSOCIATIONS.map(({ field, heading }) => ({
+    label: copy(heading),
+    choices: offered[field]
+      .filter((choice) => !(task[field] ?? []).some((item) => item.urn === choice.urn))
+      .map((choice) => ({ value: `${field} ${choice.urn}`, label: choice.name })),
+  }));
+  return (
+    <section aria-labelledby={`${ids}-related`} className="grid gap-2">
+      <h3 id={`${ids}-related`} className="text-xs font-semibold tracking-wide uppercase">
+        {copy('related_heading')}
+      </h3>
+      {items.length === 0 ? (
+        <p className="text-muted-foreground text-sm">{copy('related_none')}</p>
+      ) : (
+        <ul className="flex flex-wrap gap-1.5 text-xs">
+          {items.map(({ field, item, Icon }) => {
+            const name = nameOf(directory, item as { urn: string; name?: string | null });
+            return (
+              <li key={`${field} ${item.urn}`} className="bg-muted inline-flex items-center gap-1 rounded py-0.5 ps-1.5 pe-0.5">
+                <Icon aria-hidden="true" className="size-3" />
+                {name}
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  className="size-5"
+                  aria-label={copy('related_remove', { name })}
+                  onClick={() => onChange({ [field]: withoutRef(task[field], item) })}
+                >
+                  <X aria-hidden="true" />
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {groups.some((group) => group.choices.length > 0) && (
+        <ChoiceSelect
+          key={`add-related-${items.length}`}
+          value={NONE}
+          label={copy('related_add')}
+          choices={[{ value: NONE, label: copy('related_add') }]}
+          groups={groups}
+          onChange={(value) => {
+            if (value === NONE) return;
+            const [field, urn] = value.split(' ') as [AssociationField, string];
+            onChange({ [field]: withRef(task[field], urn) });
+          }}
+        />
+      )}
+    </section>
+  );
+}

package/src/react/TaskFilters.tsx

@@ -0,0 +1,122 @@
+import { useId } from 'react';
+import type { TaskPriority, TaskStatus } from '@baack-software/baack-ts-client';
+import { Search, X } from 'lucide-react';
+import { urnOf } from '../refs.ts';
+import { TASK_PRIORITIES, TASK_STATUSES, type TaskFilter } from '../tasks.ts';
+import { priorityCopy, statusCopy, useCopy } from './copy.tsx';
+import { ANY, ChoiceSelect, Field, NONE } from './fields.tsx';
+import type { TaskDirectory } from './parts.tsx';
+import { Button } from './ui/button.tsx';
+import { Input } from './ui/input.tsx';
+import { Toggle } from './ui/toggle.tsx';
+
+export interface TaskFiltersProps {
+  value: TaskFilter;
+  onChange: (filter: TaskFilter) => void;
+  directory: TaskDirectory;
+  /** The signed-in person, for "Assigned to me". */
+  me?: string | undefined;
+}
+
+function first(list: readonly unknown[] | undefined): string {
+  const value = list?.[0];
+  if (value === undefined) return ANY;
+  if (value === null) return NONE;
+  return urnOf(value as string | { urn: string });
+}
+
+function without<K extends keyof TaskFilter>(filter: TaskFilter, key: K): TaskFilter {
+  const { [key]: _removed, ...rest } = filter;
+  return rest;
+}
+
+/**
+ * A toolbar of filters: text search, status, priority, assignee, project and open only. Controlled: pass the filter
+ * and apply it with `filterTasks` or `selectTasks`.
+ */
+export function TaskFilters({ value, onChange, directory, me }: TaskFiltersProps) {
+  const copy = useCopy();
+  const ids = useId();
+  const any = { value: ANY, label: copy('filter_any') };
+
+  const set = <K extends keyof TaskFilter>(key: K, next: TaskFilter[K] | undefined) =>
+    onChange(next === undefined ? without(value, key) : { ...value, [key]: next });
+  const pick = (selected: string) => (selected === ANY ? undefined : selected === NONE ? [null] : [selected]);
+  const active = Object.keys(value).length > 0;
+
+  return (
+    <div role="search" aria-label={copy('filter_label')} className="flex flex-wrap items-end gap-3">
+      <div className="relative min-w-48 flex-1">
+        <Search aria-hidden="true" className="text-muted-foreground absolute top-1/2 left-2.5 size-4 -translate-y-1/2" />
+        <Input
+          type="search"
+          aria-label={copy('filter_search')}
+          placeholder={copy('filter_search')}
+          value={value.text ?? ''}
+          onChange={(event) => set('text', event.target.value || undefined)}
+          className="pl-8"
+        />
+      </div>
+      <Field id={`${ids}-status`} label={copy('field_status')} className="w-36">
+        <ChoiceSelect
+          id={`${ids}-status`}
+          value={first(value.status)}
+          choices={[any, ...TASK_STATUSES.map((status) => ({ value: status, label: copy(statusCopy(status)) }))]}
+          onChange={(selected) => set('status', selected === ANY ? undefined : [selected as TaskStatus])}
+        />
+      </Field>
+      <Field id={`${ids}-priority`} label={copy('field_priority')} className="w-32">
+        <ChoiceSelect
+          id={`${ids}-priority`}
+          value={first(value.priority)}
+          choices={[
+            any,
+            ...[...TASK_PRIORITIES].reverse().map((priority) => ({ value: priority, label: copy(priorityCopy(priority)) })),
+          ]}
+          onChange={(selected) => set('priority', selected === ANY ? undefined : [selected as TaskPriority])}
+        />
+      </Field>
+      <Field id={`${ids}-assignee`} label={copy('field_assignee')} className="w-44">
+        <ChoiceSelect
+          id={`${ids}-assignee`}
+          value={first(value.assignee)}
+          choices={[
+            any,
+            ...(me ? [{ value: me, label: copy('filter_mine') }] : []),
+            { value: NONE, label: copy('option_unassigned') },
+            ...directory.people.filter((p) => p.urn !== me).map((p) => ({ value: p.urn, label: p.name })),
+          ]}
+          onChange={(selected) => set('assignee', pick(selected))}
+        />
+      </Field>
+      {directory.projects.length > 0 && (
+        <Field id={`${ids}-project`} label={copy('field_project')} className="w-44">
+          <ChoiceSelect
+            id={`${ids}-project`}
+            value={first(value.project)}
+            choices={[
+              any,
+              { value: NONE, label: copy('option_no_project') },
+              ...directory.projects.map((p) => ({ value: p.urn, label: p.name })),
+            ]}
+            onChange={(selected) => set('project', pick(selected))}
+          />
+        </Field>
+      )}
+      <Toggle
+        variant="outline"
+        size="sm"
+        pressed={value.open === true}
+        onPressedChange={(pressed) => set('open', pressed ? true : undefined)}
+      >
+        {copy('filter_open')}
+      </Toggle>
+      {active && (
+        <Button variant="ghost" size="sm" onClick={() => onChange({})}>
+          <X aria-hidden="true" />
+          {copy('filter_clear')}
+        </Button>
+      )}
+    </div>
+  );
+}