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

package/src/react/TaskConflicts.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import type { TaskPriority, TaskStatus } from '@baack-software/baack-ts-client';
+import { TriangleAlert } from 'lucide-react';
+import { cn } from 'cn';
+import type { ConflictChoices, TaskConflict, TaskField, TaskFieldValue } from '../conflicts.ts';
+import { parseTimestamp } from '../time.ts';
+import type { Ref, TaskListField } from '../types.ts';
+import { priorityCopy, statusCopy, useCopy, type TaskCopyName } from './copy.tsx';
+import { nameOf, type TaskDirectory } from './parts.tsx';
+import { Alert, AlertDescription } from './ui/alert.tsx';
+import { Button } from './ui/button.tsx';
+import { Label } from './ui/label.tsx';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group.tsx';
+
+const FIELD_COPY: Record<TaskField | TaskListField, TaskCopyName> = {
+  title: 'field_title',
+  description: 'field_description',
+  status: 'field_status',
+  priority: 'field_priority',
+  dueTimestamp: 'field_due',
+  assignee: 'field_assignee',
+  project: 'field_project',
+  workflowStage: 'field_stage',
+  blockedBy: 'blockers_heading',
+  blocking: 'field_blocking',
+  associatedTasks: 'related_heading',
+  associatedEntities: 'related_heading',
+  associatedIdentities: 'related_heading',
+  associatedCompanies: 'related_heading',
+};
+
+/** The copy name of a field's label. */
+export const fieldCopy = (field: TaskField | TaskListField): TaskCopyName => FIELD_COPY[field];
+
+export interface TaskConflictsProps {
+  conflicts: readonly TaskConflict[];
+  directory: TaskDirectory;
+  /** Saves with the choices made. Fields left on "keep mine" are saved again; "use theirs" drops the change. */
+  onResolve: (choices: ConflictChoices) => void;
+  /** Keeps everything the other person saved, dropping this person's conflicting changes. */
+  onDiscard: () => void;
+}
+
+/**
+ * Shown when someone else changed the same fields while this person was editing: each field with both values, and a
+ * choice to keep mine or use theirs. Takes focus when it appears.
+ */
+export function TaskConflicts({ conflicts, directory, onResolve, onDiscard }: TaskConflictsProps) {
+  const copy = useCopy();
+  const ids = useId();
+  const heading = useRef<HTMLHeadingElement>(null);
+  const [choices, setChoices] = useState<ConflictChoices>({});
+
+  useEffect(() => {
+    setChoices({});
+    heading.current?.focus();
+  }, [conflicts]);
+
+  return (
+    <section
+      role="alertdialog"
+      aria-labelledby={`${ids}-heading`}
+      aria-describedby={`${ids}-intro`}
+      className="grid gap-3 rounded-lg border border-amber-500/50 bg-amber-500/5 p-3"
+    >
+      <div className="grid gap-1">
+        <h3
+          id={`${ids}-heading`}
+          ref={heading}
+          tabIndex={-1}
+          className="flex items-center gap-1.5 text-sm font-semibold outline-none"
+        >
+          <TriangleAlert aria-hidden="true" className="size-4 text-amber-600 dark:text-amber-400" />
+          {copy('conflict_heading')}
+        </h3>
+        <p id={`${ids}-intro`} className="text-muted-foreground text-sm">
+          {copy('conflict_intro')}
+        </p>
+      </div>
+
+      {conflicts.map((conflict) => {
+        const id = `${ids}-${conflict.field}`;
+        const choice = choices[conflict.field] ?? 'mine';
+        return (
+          <div key={conflict.field} className="grid gap-1.5">
+            <p id={id} className="text-xs font-semibold tracking-wide uppercase">
+              {copy(fieldCopy(conflict.field))}
+            </p>
+            <RadioGroup
+              aria-labelledby={id}
+              value={choice}
+              onValueChange={(value) => setChoices({ ...choices, [conflict.field]: value as 'mine' | 'theirs' })}
+              className="gap-1.5"
+            >
+              {(['mine', 'theirs'] as const).map((side) => (
+                <Label
+                  key={side}
+                  htmlFor={`${id}-${side}`}
+                  className={cn(
+                    'bg-card items-start gap-2.5 rounded-md border p-2 font-normal',
+                    choice === side && 'border-primary',
+                  )}
+                >
+                  {/* The choice names the radio and the value describes it, so they're read apart. */}
+                  <RadioGroupItem
+                    id={`${id}-${side}`}
+                    value={side}
+                    aria-labelledby={`${id}-${side}-label`}
+                    aria-describedby={`${id}-${side}-value`}
+                    className="mt-0.5"
+                  />
+                  <span className="grid min-w-0 gap-0.5">
+                    <span id={`${id}-${side}-label`} className="font-medium">
+                      {copy(side === 'mine' ? 'conflict_mine' : 'conflict_theirs')}
+                    </span>
+                    <FieldValue
+                      id={`${id}-${side}-value`}
+                      field={conflict.field}
+                      value={conflict[side]}
+                      directory={directory}
+                    />
+                  </span>
+                </Label>
+              ))}
+            </RadioGroup>
+          </div>
+        );
+      })}
+
+      <div className="flex flex-wrap gap-2">
+        <Button size="sm" onClick={() => onResolve(choices)}>
+          {copy('conflict_save')}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onDiscard}>
+          {copy('conflict_discard')}
+        </Button>
+      </div>
+    </section>
+  );
+}
+
+/** A field's value as the reader would say it: names for references, labels for status and priority. */
+function FieldValue({
+  id,
+  field,
+  value,
+  directory,
+}: {
+  id: string;
+  field: TaskField;
+  value: TaskFieldValue;
+  directory: TaskDirectory;
+}) {
+  const copy = useCopy();
+  const empty = value == null || value === '';
+  let text: string;
+  switch (field) {
+    case 'status':
+      text = empty ? copy('value_empty') : copy(statusCopy(value as TaskStatus));
+      break;
+    case 'priority':
+      text = empty ? copy('value_empty') : copy(priorityCopy(value as TaskPriority));
+      break;
+    case 'assignee':
+      text = empty ? copy('option_unassigned') : nameOf(directory, value as Ref);
+      break;
+    case 'project':
+      text = empty ? copy('option_no_project') : nameOf(directory, value as Ref);
+      break;
+    case 'workflowStage':
+      text = empty ? copy('value_empty') : nameOf(directory, value as Ref);
+      break;
+    case 'dueTimestamp': {
+      const due = parseTimestamp(value as string | null | undefined);
+      text = due ? due.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' }) : copy('due_none');
+      break;
+    }
+    default:
+      text = empty ? copy('value_empty') : (value as string);
+  }
+  return (
+    <span
+      id={id}
+      className={cn(
+        'text-muted-foreground text-sm break-words',
+        field === 'description' && 'max-h-32 overflow-y-auto whitespace-pre-wrap',
+        empty && 'italic',
+      )}
+    >
+      {text}
+    </span>
+  );
+}
+
+export interface ChangedElsewhereProps {
+  fields: readonly (TaskField | TaskListField)[];
+  onDismiss?: (() => void) | undefined;
+}
+
+/** A note that someone else changed other fields while this person was editing, which were kept. */
+export function ChangedElsewhere({ fields, onDismiss }: ChangedElsewhereProps) {
+  const copy = useCopy();
+  const names = [...new Set(fields.map((field) => copy(fieldCopy(field))))];
+  const list = new Intl.ListFormat(undefined, { type: 'conjunction' }).format(names);
+  return (
+    <Alert>
+      <AlertDescription className="flex flex-wrap items-center justify-between gap-2">
+        <span>{copy('changed_elsewhere', { fields: list })}</span>
+        {onDismiss && (
+          <Button size="xs" variant="ghost" onClick={onDismiss}>
+            {copy('changed_elsewhere_dismiss')}
+          </Button>
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+}

package/src/react/TaskCreateForm.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import type { TaskPriority } from '@baack-software/baack-ts-client';
+import { Plus, X } from 'lucide-react';
+import type { DraftInput } from '../draft.ts';
+import { TASK_PRIORITIES } from '../tasks.ts';
+import { fromLocalInput } from '../time.ts';
+import { priorityCopy, useCopy } from './copy.tsx';
+import { ChoiceSelect, Field, NONE } from './fields.tsx';
+import { PersonAvatar, 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 { Textarea } from './ui/textarea.tsx';
+
+export type NewTask = Omit<DraftInput, 'owner'>;
+
+export interface TaskCreateFormProps {
+  directory: TaskDirectory;
+  onCreate: (task: NewTask) => Promise<unknown>;
+  onCancel?: (() => void) | undefined;
+  /** Starting values, e.g. the project or assignee the view is filtered to. */
+  initial?: Partial<NewTask>;
+}
+
+/** A form for a new task: title (required), description, priority, assignee, project and due date. */
+export function TaskCreateForm({ directory, onCreate, onCancel, initial }: TaskCreateFormProps) {
+  const copy = useCopy();
+  const ids = useId();
+  const title = useRef<HTMLInputElement>(null);
+  const [values, setValues] = useState({
+    title: initial?.title ?? '',
+    description: initial?.description ?? '',
+    priority: initial?.priority ?? ('NONE' as TaskPriority),
+    assignee: initial?.assignee?.urn ?? NONE,
+    project: initial?.project?.urn ?? NONE,
+    due: '',
+  });
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => title.current?.focus(), []);
+
+  const set = <K extends keyof typeof values>(key: K, value: (typeof values)[K]) =>
+    setValues((current) => ({ ...current, [key]: value }));
+
+  return (
+    <form
+      aria-labelledby={`${ids}-heading`}
+      className="grid gap-4"
+      onSubmit={async (event) => {
+        event.preventDefault();
+        if (!values.title.trim()) return;
+        setSending(true);
+        setFailed(false);
+        const due = fromLocalInput(values.due);
+        try {
+          await onCreate({
+            ...initial,
+            title: values.title.trim(),
+            description: values.description,
+            priority: values.priority,
+            ...(values.assignee === NONE ? {} : { assignee: { urn: values.assignee } }),
+            ...(values.project === NONE ? {} : { project: { urn: values.project } }),
+            ...(due === undefined ? {} : { dueTimestamp: due }),
+          });
+        } catch {
+          setFailed(true);
+        } finally {
+          setSending(false);
+        }
+      }}
+    >
+      <header className="flex items-center justify-between gap-2">
+        <h2 id={`${ids}-heading`} className="text-lg font-bold">
+          {copy('create_heading')}
+        </h2>
+        {onCancel && (
+          <Button type="button" variant="ghost" size="icon-sm" onClick={onCancel} aria-label={copy('create_cancel')}>
+            <X aria-hidden="true" />
+          </Button>
+        )}
+      </header>
+      {failed && (
+        <Alert variant="destructive">
+          <AlertDescription>{copy('create_failed')}</AlertDescription>
+        </Alert>
+      )}
+      <Field id={`${ids}-title`} label={copy('field_title')}>
+        <Input
+          ref={title}
+          id={`${ids}-title`}
+          required
+          maxLength={1024}
+          value={values.title}
+          onChange={(e) => set('title', e.target.value)}
+        />
+      </Field>
+      <Field id={`${ids}-description`} label={copy('field_description')}>
+        <Textarea
+          id={`${ids}-description`}
+          rows={4}
+          value={values.description}
+          onChange={(e) => set('description', e.target.value)}
+        />
+      </Field>
+      <div className="grid grid-cols-2 gap-3">
+        <Field id={`${ids}-priority`} label={copy('field_priority')}>
+          <ChoiceSelect
+            id={`${ids}-priority`}
+            value={values.priority}
+            choices={[...TASK_PRIORITIES]
+              .reverse()
+              .map((priority) => ({ value: priority, label: copy(priorityCopy(priority)) }))}
+            onChange={(priority) => set('priority', priority as TaskPriority)}
+          />
+        </Field>
+        <Field id={`${ids}-due`} label={copy('field_due')}>
+          <Input
+            id={`${ids}-due`}
+            type="datetime-local"
+            className="h-7 text-sm"
+            value={values.due}
+            onChange={(e) => set('due', e.target.value)}
+          />
+        </Field>
+        <Field id={`${ids}-assignee`} label={copy('field_assignee')}>
+          <ChoiceSelect
+            id={`${ids}-assignee`}
+            value={values.assignee}
+            choices={[
+              { value: NONE, label: copy('option_unassigned') },
+              ...directory.people.map((person) => ({
+                value: person.urn,
+                label: person.name,
+                icon: <PersonAvatar person={person} />,
+              })),
+            ]}
+            onChange={(urn) => set('assignee', urn)}
+          />
+        </Field>
+        <Field id={`${ids}-project`} label={copy('field_project')}>
+          <ChoiceSelect
+            id={`${ids}-project`}
+            value={values.project}
+            choices={[
+              { value: NONE, label: copy('option_no_project') },
+              ...directory.projects.map((project) => ({ value: project.urn, label: project.name })),
+            ]}
+            onChange={(urn) => set('project', urn)}
+          />
+        </Field>
+      </div>
+      <div className="flex gap-2">
+        <Button type="submit" disabled={!values.title.trim() || sending}>
+          <Plus aria-hidden="true" />
+          {copy('create_submit')}
+        </Button>
+        {onCancel && (
+          <Button type="button" variant="ghost" onClick={onCancel}>
+            {copy('create_cancel')}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}