@skillcdn/console 0.3.1 → 0.4.0

package/src/components/task-form.tsx

@@ -1,10 +1,11 @@
-import { type FormEvent, useState } from "react";
+import { type FormEvent, type ReactNode, useState } from "react";
 import {
   MAX_BODY_LENGTH,
   MAX_LINK_LABEL_LENGTH,
   MAX_LINKS,
   MAX_TITLE_LENGTH,
   MAX_URL_LENGTH,
+  MAX_WORKERS,
   type RestCategory,
   type RestGoal,
   type RestPerson,
@@ -14,22 +15,33 @@ import {
   TASK_STATES,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Button, personName } from "./ui.js";
+import { Picker, type PickerSearch } from "./picker.js";
+import { Button, GoalStateBadge, PersonChip, personName, StateBadge } from "./ui.js";
 
 // Writing a task, or changing one. The bounds are the package's, said before a request is made.
 // The plan is two days (ADR-0019); what happened to the task is the board's to keep, not a
-// field here.
+// field here. The workers are any number of the people (ADR-0037); the task this one is part of
+// and the goal it works towards are found by searching, a page at a time, never offered whole.
+
+/** What words find among the tasks of the project, a page at a time. */
+export type TaskSearch = PickerSearch<RestTask>;
+/** What words find among the open goals of the project, a page at a time. */
+export type GoalSearch = PickerSearch<RestGoal>;
 
 export interface TaskFormProps {
   readonly people: readonly RestPerson[];
   /** The task to change; left out, the form writes a new one. */
   readonly task?: RestTask | undefined;
-  /** The tasks a new one may be part of. */
-  readonly parents?: readonly RestTask[] | undefined;
+  /** The task this one is part of, as it stands, for the form to show it; the search finds another. */
+  readonly parent?: RestTask | undefined;
+  /** Left out, a task cannot be made part of one here. */
+  readonly findTasks?: TaskSearch | undefined;
   /** The categories of the workspace, to sort the task into one. */
   readonly categories?: readonly RestCategory[] | undefined;
-  /** The goals of the project, for the task to work towards one. */
-  readonly goals?: readonly RestGoal[] | undefined;
+  /** The goal the task works towards, as it stands, for the form to show it; the search finds another. */
+  readonly goal?: RestGoal | undefined;
+  /** Left out, no goal is offered. */
+  readonly findGoals?: GoalSearch | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
   readonly onSubmit: (input: RestTaskInput) => void;
@@ -41,6 +53,25 @@ interface LinkDraft {
   readonly label: string;
 }
 
+/** A task as a picker names one: its number and its title, with its state. */
+export function taskLabel(task: RestTask): ReactNode {
+  return (
+    <>
+      <span className="sc-card-number">#{task.number}</span> {task.title}{" "}
+      <StateBadge state={task.state} />
+    </>
+  );
+}
+
+/** A goal as a picker names one: its title, with its state. */
+export function goalLabel(goal: RestGoal): ReactNode {
+  return (
+    <>
+      {goal.title} <GoalStateBadge state={goal.state} />
+    </>
+  );
+}
+
 export function TaskForm(props: TaskFormProps) {
   const words = useWords();
   const form = words.task.form;
@@ -49,10 +80,16 @@ export function TaskForm(props: TaskFormProps) {
   const [body, setBody] = useState(task?.body ?? "");
   const [state, setState] = useState(task?.state ?? "idea");
   const [priority, setPriority] = useState(task?.priority ?? "normal");
-  const [assigneeId, setAssigneeId] = useState(task?.assignee?.id ?? "");
-  const [parentId, setParentId] = useState(task?.parentId ?? "");
+  const [workerIds, setWorkerIds] = useState<readonly string[]>(
+    task?.workers.map((worker) => worker.id) ?? [],
+  );
+  // What is chosen is kept by id, so that a parent or a goal the page has not read back yet is
+  // kept as it is rather than dropped; the one chosen here is kept whole, to be shown.
+  const [parentId, setParentId] = useState<string | null>(task?.parentId ?? null);
+  const [parentChosen, setParentChosen] = useState<RestTask | undefined>(undefined);
+  const [goalId, setGoalId] = useState<string | null>(task?.goalId ?? null);
+  const [goalChosen, setGoalChosen] = useState<RestGoal | undefined>(undefined);
   const [category, setCategory] = useState(task?.category?.key ?? "");
-  const [goalId, setGoalId] = useState(task?.goalId ?? "");
   const [startsOn, setStartsOn] = useState(task?.startsOn ?? "");
   const [dueOn, setDueOn] = useState(task?.dueOn ?? "");
   const [links, setLinks] = useState<readonly LinkDraft[]>(
@@ -66,10 +103,10 @@ export function TaskForm(props: TaskFormProps) {
       body,
       state,
       priority,
-      assigneeId: assigneeId === "" ? null : assigneeId,
-      parentId: parentId === "" ? null : parentId,
+      workerIds: [...workerIds],
+      parentId,
       category: category === "" ? null : category,
-      goalId: goalId === "" ? null : goalId,
+      goalId,
       startsOn: startsOn === "" ? null : startsOn,
       dueOn: dueOn === "" ? null : dueOn,
       links: links
@@ -81,12 +118,33 @@ export function TaskForm(props: TaskFormProps) {
     });
   };
 
-  const parents = (props.parents ?? []).filter((candidate) => candidate.id !== task?.id);
+  // A worker is one of the people, or one the task had who is no longer among them.
+  const personOf = (id: string): RestPerson | undefined =>
+    props.people.find((person) => person.id === id) ??
+    task?.workers.find((worker) => worker.id === id);
+  const chosenWorkers = workerIds.flatMap((id) => {
+    const person = personOf(id);
+    return person === undefined ? [] : [person];
+  });
+  const otherPeople = props.people.filter((person) => !workerIds.includes(person.id));
+  const parent =
+    parentId === null
+      ? undefined
+      : parentChosen?.id === parentId
+        ? parentChosen
+        : props.parent?.id === parentId
+          ? props.parent
+          : undefined;
+  const goal =
+    goalId === null
+      ? undefined
+      : goalChosen?.id === goalId
+        ? goalChosen
+        : props.goal?.id === goalId
+          ? props.goal
+          : undefined;
+  const held = <span className="sc-muted">&hellip;</span>;
   const categories = props.categories ?? [];
-  // A goal let go is not offered, unless the task is on it already.
-  const goals = (props.goals ?? []).filter(
-    (goal) => goal.state !== "dropped" || goal.id === task?.goalId,
-  );
   const datesInOrder = startsOn === "" || dueOn === "" || startsOn <= dueOn;
 
   return (
@@ -142,21 +200,6 @@ export function TaskForm(props: TaskFormProps) {
             ))}
           </select>
         </label>
-        <label className="sc-field">
-          <span className="sc-field-label">{form.assignee}</span>
-          <select
-            className="sc-input"
-            value={assigneeId}
-            onChange={(event) => setAssigneeId(event.target.value)}
-          >
-            <option value="">{words.common.nobody}</option>
-            {props.people.map((person) => (
-              <option key={person.id} value={person.id}>
-                {personName(person)}
-              </option>
-            ))}
-          </select>
-        </label>
         {categories.length > 0 && (
           <label className="sc-field">
             <span className="sc-field-label">{form.category}</span>
@@ -175,6 +218,44 @@ export function TaskForm(props: TaskFormProps) {
           </label>
         )}
       </div>
+      <fieldset className="sc-field sc-workers-field">
+        <legend className="sc-field-label">{form.workers}</legend>
+        <div className="sc-chips">
+          {chosenWorkers.map((person) => (
+            <span key={person.id} className="sc-chip">
+              <PersonChip person={person} />
+              <button
+                type="button"
+                className="sc-chip-remove"
+                aria-label={`${words.common.remove}: ${personName(person)}`}
+                onClick={() => setWorkerIds(workerIds.filter((id) => id !== person.id))}
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </span>
+          ))}
+          {chosenWorkers.length === 0 && <span className="sc-muted">{words.common.nobody}</span>}
+          {otherPeople.length > 0 && workerIds.length < MAX_WORKERS && (
+            <select
+              className="sc-input sc-chip-add"
+              aria-label={form.addWorker}
+              value=""
+              onChange={(event) => {
+                if (event.target.value !== "") {
+                  setWorkerIds([...workerIds, event.target.value]);
+                }
+              }}
+            >
+              <option value="">{form.addWorker}</option>
+              {otherPeople.map((person) => (
+                <option key={person.id} value={person.id}>
+                  {personName(person)}
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+      </fieldset>
       <div className="sc-field-row">
         <label className="sc-field">
           <span className="sc-field-label">{form.startsOn}</span>
@@ -195,39 +276,44 @@ export function TaskForm(props: TaskFormProps) {
             onChange={(event) => setDueOn(event.target.value)}
           />
         </label>
-        {goals.length > 0 && (
-          <label className="sc-field">
+        {props.findGoals !== undefined && (
+          <div className="sc-field">
             <span className="sc-field-label">{form.goal}</span>
-            <select
-              className="sc-input"
-              value={goalId}
-              onChange={(event) => setGoalId(event.target.value)}
-            >
-              <option value="">{form.noGoal}</option>
-              {goals.map((goal) => (
-                <option key={goal.id} value={goal.id}>
-                  {goal.title}
-                </option>
-              ))}
-            </select>
-          </label>
+            <Picker
+              value={goal}
+              held={goalId === null ? undefined : held}
+              search={props.findGoals}
+              keyOf={(candidate) => candidate.id}
+              render={goalLabel}
+              label={form.goal}
+              placeholder={form.searchGoals}
+              disabled={props.busy}
+              onChange={(chosen) => {
+                setGoalChosen(chosen);
+                setGoalId(chosen?.id ?? null);
+              }}
+            />
+          </div>
         )}
-        {parents.length > 0 && (
-          <label className="sc-field">
+        {props.findTasks !== undefined && (
+          <div className="sc-field">
             <span className="sc-field-label">{form.partOf}</span>
-            <select
-              className="sc-input"
-              value={parentId}
-              onChange={(event) => setParentId(event.target.value)}
-            >
-              <option value="">{words.common.nothing}</option>
-              {parents.map((candidate) => (
-                <option key={candidate.id} value={candidate.id}>
-                  #{candidate.number} {candidate.title}
-                </option>
-              ))}
-            </select>
-          </label>
+            <Picker
+              value={parent}
+              held={parentId === null ? undefined : held}
+              search={props.findTasks}
+              keyOf={(candidate) => candidate.id}
+              render={taskLabel}
+              label={form.partOf}
+              placeholder={form.searchTasks}
+              disabled={props.busy}
+              exclude={(candidate) => candidate.id === task?.id}
+              onChange={(chosen) => {
+                setParentChosen(chosen);
+                setParentId(chosen?.id ?? null);
+              }}
+            />
+          </div>
         )}
       </div>
       <fieldset className="sc-field sc-links">

package/src/components/task-list.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { RestTask } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { ShowMore, usePaged } from "./paged.js";
-import { Avatar, Badge, CategoryBadge, DueBadge, StateBadge } from "./ui.js";
+import { Badge, CategoryBadge, DueBadge, StateBadge, Workers } from "./ui.js";
 
 // A list of tasks as rows, where the board's columns are not the point: the calendar's late
 // and unscheduled tasks, a goal's tasks, a person's own work. Each row says what a card says,
@@ -45,14 +45,14 @@ export function TaskList(props: TaskListProps) {
                 {task.category !== null && <CategoryBadge category={task.category} />}
                 {props.showState === true && <StateBadge state={task.state} />}
                 {task.openDecisions > 0 && (
-                  <Badge tone="warning" title={words.board.decisionsTitle}>
+                  <Badge tone="warning" kind="count" title={words.board.decisionsTitle}>
                     {words.board.decisions(task.openDecisions)}
                   </Badge>
                 )}
                 {task.dueOn !== null && (
                   <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
                 )}
-                {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
+                <Workers workers={task.workers} size="sm" />
               </span>
             </li>
           );

package/src/components/task-view.tsx

@@ -21,7 +21,7 @@ import { type CommentDraft, TaskThread } from "./comments.js";
 import { DecisionForm } from "./decision-form.js";
 import { EventFeed } from "./event-feed.js";
 import { Markdown } from "./markdown.js";
-import { TaskForm } from "./task-form.js";
+import { type GoalSearch, TaskForm, type TaskSearch } from "./task-form.js";
 import {
   Badge,
   Button,
@@ -44,8 +44,13 @@ import {
 export interface TaskViewProps {
   readonly task: RestTask;
   readonly people: readonly RestPerson[];
-  /** Every task of the board, for the breakdown and for what this one may be part of. */
+  /** The current tasks of the board, for the breakdown and for naming what this one is part of. */
   readonly tasks: readonly RestTask[];
+  /** The task this one is part of, when the page has it: one put away is not among `tasks`. Left out, it is looked for among them. */
+  readonly parent?: RestTask | undefined;
+  /** What words find among the tasks and the open goals of the project, for the form (ADR-0037); left out, the form offers neither. */
+  readonly findTasks?: TaskSearch | undefined;
+  readonly findGoals?: GoalSearch | undefined;
   readonly decisions: readonly RestDecision[];
   /** The runs of the board, or of this task; the ones on this task are shown. */
   readonly runs?: readonly RestRun[] | undefined;
@@ -97,9 +102,10 @@ export function TaskView(props: TaskViewProps) {
   const { tag } = useLanguage();
   const { task } = props;
   const parent =
-    task.parentId === null
+    props.parent ??
+    (task.parentId === null
       ? undefined
-      : props.tasks.find((candidate) => candidate.id === task.parentId);
+      : props.tasks.find((candidate) => candidate.id === task.parentId));
   const subtasks = props.tasks.filter((candidate) => candidate.parentId === task.id);
   const about = props.decisions.filter((decision) => decision.taskId === task.id);
   const runs = (props.runs ?? []).filter((run) => run.taskId === task.id);
@@ -119,9 +125,11 @@ export function TaskView(props: TaskViewProps) {
         <TaskForm
           people={props.people}
           task={task}
-          parents={props.tasks}
+          parent={parent}
+          findTasks={props.findTasks}
           categories={props.categories}
-          goals={props.goals}
+          goal={goal}
+          findGoals={props.findGoals}
           busy={props.busy}
           error={props.error}
           onSubmit={(input) => props.onChange(task, input)}
@@ -134,26 +142,56 @@ export function TaskView(props: TaskViewProps) {
   return (
     <div className="sc-task">
       <header className="sc-task-header">
-        {parent !== undefined && (
-          <p className="sc-task-parent">
-            {words.task.partOf}{" "}
-            <a href={props.taskHref(parent)}>
-              #{parent.number} {parent.title}
-            </a>
-          </p>
-        )}
-        <h1 className="sc-task-title">
-          <span className="sc-card-number">#{task.number}</span> {task.title}
-        </h1>
-        <div className="sc-task-badges">
-          <StateBadge state={task.state} />
-          {task.archivedAt !== null && <Badge tone="neutral">{words.task.archived}</Badge>}
-          {task.category !== null && <CategoryBadge category={task.category} />}
-          <PriorityBadge priority={task.priority} />
-          {task.dueOn !== null && (
-            <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+        <div className="sc-task-heading">
+          {parent !== undefined && (
+            <p className="sc-task-parent">
+              {words.task.partOf}{" "}
+              <a href={props.taskHref(parent)}>
+                #{parent.number} {parent.title}
+              </a>
+            </p>
           )}
+          <h1 className="sc-task-title">
+            <span className="sc-card-number">#{task.number}</span> {task.title}
+          </h1>
+          <div className="sc-task-badges">
+            <StateBadge state={task.state} />
+            {task.archivedAt !== null && <Badge tone="neutral">{words.task.archived}</Badge>}
+            {task.category !== null && <CategoryBadge category={task.category} />}
+            <PriorityBadge priority={task.priority} />
+            {task.dueOn !== null && (
+              <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+            )}
+          </div>
         </div>
+        {props.formHref !== undefined && (
+          <div className="sc-task-actions">
+            <a className="sc-button sc-button-secondary" href={props.formHref("edit")}>
+              {words.common.edit}
+            </a>
+            <a className="sc-button sc-button-secondary" href={props.formHref("ask")}>
+              {words.task.raiseDecision}
+            </a>
+            {props.onArchive !== undefined && task.archivedAt === null && (
+              <Button
+                variant="secondary"
+                disabled={props.busy === true}
+                onClick={() => props.onArchive?.(task)}
+              >
+                {words.task.archive}
+              </Button>
+            )}
+            {props.onRestore !== undefined && task.archivedAt !== null && (
+              <Button
+                variant="secondary"
+                disabled={props.busy === true}
+                onClick={() => props.onRestore?.(task)}
+              >
+                {words.task.restore}
+              </Button>
+            )}
+          </div>
+        )}
       </header>
       <div className="sc-task-body">
         <div className="sc-task-main">
@@ -185,7 +223,6 @@ export function TaskView(props: TaskViewProps) {
             <section className="sc-task-section" aria-label={words.task.raiseDecision}>
               <h2 className="sc-section-title">{words.task.raiseDecision}</h2>
               <DecisionForm
-                tasks={props.tasks}
                 taskId={task.id}
                 busy={props.busy}
                 onSubmit={props.onRaiseDecision}
@@ -289,12 +326,18 @@ export function TaskView(props: TaskViewProps) {
               </dd>
             </div>
             <div>
-              <dt>{words.task.assignee}</dt>
+              <dt>{words.task.workers}</dt>
               <dd>
-                {task.assignee === null ? (
+                {task.workers.length === 0 ? (
                   <span className="sc-muted">{words.common.nobody}</span>
                 ) : (
-                  <PersonChip person={task.assignee} />
+                  <ul className="sc-worker-list">
+                    {task.workers.map((worker) => (
+                      <li key={worker.id}>
+                        <PersonChip person={worker} />
+                      </li>
+                    ))}
+                  </ul>
                 )}
               </dd>
             </div>
@@ -346,34 +389,6 @@ export function TaskView(props: TaskViewProps) {
               </dd>
             </div>
           </dl>
-          {props.formHref !== undefined && (
-            <div className="sc-task-actions">
-              <a className="sc-button sc-button-secondary" href={props.formHref("edit")}>
-                {words.common.edit}
-              </a>
-              <a className="sc-button sc-button-secondary" href={props.formHref("ask")}>
-                {words.task.raiseDecision}
-              </a>
-              {props.onArchive !== undefined && task.archivedAt === null && (
-                <Button
-                  variant="secondary"
-                  disabled={props.busy === true}
-                  onClick={() => props.onArchive?.(task)}
-                >
-                  {words.task.archive}
-                </Button>
-              )}
-              {props.onRestore !== undefined && task.archivedAt !== null && (
-                <Button
-                  variant="secondary"
-                  disabled={props.busy === true}
-                  onClick={() => props.onRestore?.(task)}
-                >
-                  {words.task.restore}
-                </Button>
-              )}
-            </div>
-          )}
         </aside>
       </div>
     </div>