@skillcdn/console 0.1.8 → 0.1.10

package/src/components/goals.tsx

@@ -0,0 +1,264 @@
+import { type FormEvent, type ReactNode, useState } from "react";
+import {
+  GOAL_STATES,
+  type GoalState,
+  MAX_BODY_LENGTH,
+  MAX_TITLE_LENGTH,
+  type RestGoal,
+  type RestGoalInput,
+  type RestTask,
+  TASK_STATES,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Markdown } from "./markdown.js";
+import { TaskList } from "./task-list.js";
+import { Button, Day, DueBadge, GoalStateBadge, PersonChip, ProgressBar, Time } from "./ui.js";
+
+// The roadmap of a project (ADR-0019): its goals, each with the day it is meant to be reached
+// by and how far its tasks are, read from the board as it stands. The list, one goal with its
+// tasks, and the form an owner sets one with. Each takes its data as props and nothing from
+// the network; what people wrote is shown as text, never as HTML.
+
+/** A goal's day on the calendar's terms: reached or let go, it is a plain fact; else it may be late. */
+const dueState = (goal: RestGoal) =>
+  goal.state === "done" ? "done" : goal.state === "dropped" ? "dropped" : "ready";
+
+export interface GoalListProps {
+  readonly goals: readonly RestGoal[];
+  readonly goalHref: (goal: RestGoal) => string;
+  /** The day to count from; the browser's today when left out. */
+  readonly today?: string | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function GoalList(props: GoalListProps) {
+  const words = useWords().roadmap;
+  if (props.goals.length === 0) {
+    return <>{props.empty ?? null}</>;
+  }
+  return (
+    <ul className="sc-goals" aria-label={words.title}>
+      {props.goals.map((goal) => (
+        <li key={goal.id} className={`sc-goal sc-goal-${goal.state}`}>
+          <div className="sc-goal-head">
+            <a className="sc-goal-title" href={props.goalHref(goal)}>
+              {goal.title}
+            </a>
+            <GoalStateBadge state={goal.state} />
+            {goal.dueOn !== null && (
+              <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
+            )}
+          </div>
+          <ProgressBar counts={goal.taskCounts} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export interface GoalFormProps {
+  /** The goal to change; left out, the form sets a new one. */
+  readonly goal?: RestGoal | undefined;
+  readonly busy?: boolean | undefined;
+  readonly error?: string | undefined;
+  readonly onSubmit: (input: RestGoalInput) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+export function GoalForm(props: GoalFormProps) {
+  const words = useWords();
+  const form = words.roadmap.form;
+  const { goal } = props;
+  const [title, setTitle] = useState(goal?.title ?? "");
+  const [body, setBody] = useState(goal?.body ?? "");
+  const [state, setState] = useState<GoalState>(goal?.state ?? "planned");
+  const [dueOn, setDueOn] = useState(goal?.dueOn ?? "");
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    props.onSubmit({ title: title.trim(), body, state, dueOn: dueOn === "" ? null : dueOn });
+  };
+
+  return (
+    <form className="sc-form" onSubmit={submit}>
+      <label className="sc-field">
+        <span className="sc-field-label">{form.title}</span>
+        <input
+          className="sc-input"
+          value={title}
+          maxLength={MAX_TITLE_LENGTH}
+          required
+          onChange={(event) => setTitle(event.target.value)}
+        />
+      </label>
+      <label className="sc-field">
+        <span className="sc-field-label">{form.body}</span>
+        <textarea
+          className="sc-input sc-textarea"
+          value={body}
+          maxLength={MAX_BODY_LENGTH}
+          rows={4}
+          placeholder={form.bodyPlaceholder}
+          onChange={(event) => setBody(event.target.value)}
+        />
+      </label>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{form.state}</span>
+          <select
+            className="sc-input"
+            value={state}
+            onChange={(event) => setState(event.target.value as GoalState)}
+          >
+            {GOAL_STATES.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.goalState[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.dueOn}</span>
+          <input
+            className="sc-input"
+            type="date"
+            value={dueOn}
+            onChange={(event) => setDueOn(event.target.value)}
+          />
+        </label>
+      </div>
+      {props.error !== undefined && (
+        <p className="sc-form-error" role="alert">
+          {props.error}
+        </p>
+      )}
+      <div className="sc-form-actions">
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={props.busy === true || title.trim() === ""}
+        >
+          {goal === undefined ? form.set : words.common.save}
+        </Button>
+        {props.onCancel !== undefined && (
+          <Button variant="ghost" onClick={props.onCancel}>
+            {words.common.cancel}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}
+
+export interface GoalViewProps {
+  readonly goal: RestGoal;
+  /** The tasks of the board; those that work towards the goal are shown, by state. */
+  readonly tasks: readonly RestTask[];
+  readonly taskHref: (task: RestTask) => string;
+  /** Where a document of the project is read, by its path, for the links in what was written. */
+  readonly docHref?: ((path: string) => string) | undefined;
+  readonly today?: string | undefined;
+  /** Where the goal is changed; left out, it cannot be changed from here. */
+  readonly editHref?: string | undefined;
+  /** Called when an owner moves the goal to another state from here. */
+  readonly onMove?: ((goal: RestGoal, state: GoalState) => void) | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+export function GoalView(props: GoalViewProps) {
+  const words = useWords();
+  const roadmap = words.roadmap;
+  const { goal } = props;
+  const towards = props.tasks.filter((task) => task.goalId === goal.id);
+  return (
+    <div className="sc-task sc-goal-view">
+      <header className="sc-task-header">
+        <h1 className="sc-task-title">{goal.title}</h1>
+        <div className="sc-task-badges">
+          <GoalStateBadge state={goal.state} />
+          {goal.dueOn !== null && (
+            <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
+          )}
+        </div>
+      </header>
+      <div className="sc-task-body">
+        <div className="sc-task-main">
+          <ProgressBar counts={goal.taskCounts} />
+          {goal.body.length > 0 ? (
+            <Markdown source={goal.body} docHref={props.docHref} />
+          ) : (
+            <p className="sc-muted">{roadmap.nothingMore}</p>
+          )}
+          <section className="sc-task-section" aria-label={roadmap.tasks}>
+            <h2 className="sc-section-title">{roadmap.tasks}</h2>
+            {towards.length === 0 ? (
+              <p className="sc-muted">{roadmap.noTasks}</p>
+            ) : (
+              TASK_STATES.map((state) => {
+                const inState = towards.filter((task) => task.state === state);
+                return inState.length === 0 ? null : (
+                  <div key={state} className="sc-goal-tasks">
+                    <h3 className="sc-goal-tasks-state">
+                      {words.vocabulary.state[state]}{" "}
+                      <span className="sc-column-count">{inState.length}</span>
+                    </h3>
+                    <TaskList tasks={inState} taskHref={props.taskHref} today={props.today} />
+                  </div>
+                );
+              })
+            )}
+          </section>
+        </div>
+        <aside className="sc-task-aside" aria-label={words.task.facts}>
+          <dl className="sc-facts">
+            <div>
+              <dt>{roadmap.state}</dt>
+              <dd>
+                {props.onMove === undefined ? (
+                  words.vocabulary.goalState[goal.state]
+                ) : (
+                  <select
+                    className="sc-input"
+                    aria-label={roadmap.state}
+                    value={goal.state}
+                    disabled={props.busy === true}
+                    onChange={(event) => props.onMove?.(goal, event.target.value as GoalState)}
+                  >
+                    {GOAL_STATES.map((state) => (
+                      <option key={state} value={state}>
+                        {words.vocabulary.goalState[state]}
+                      </option>
+                    ))}
+                  </select>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt>{roadmap.target}</dt>
+              <dd>
+                {goal.dueOn === null ? (
+                  <span className="sc-muted">{roadmap.noTarget}</span>
+                ) : (
+                  <Day day={goal.dueOn} />
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt>{roadmap.setBy}</dt>
+              <dd>
+                <PersonChip person={goal.createdBy} /> <Time iso={goal.createdAt} />
+              </dd>
+            </div>
+          </dl>
+          {props.editHref !== undefined && (
+            <div className="sc-task-actions">
+              <a className="sc-button sc-button-secondary" href={props.editHref}>
+                {words.common.edit}
+              </a>
+            </div>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}

package/src/components/task-form.tsx

@@ -5,6 +5,8 @@ import {
   MAX_LINKS,
   MAX_TITLE_LENGTH,
   MAX_URL_LENGTH,
+  type RestCategory,
+  type RestGoal,
   type RestPerson,
   type RestTask,
   type RestTaskInput,
@@ -15,6 +17,8 @@ import { useWords } from "../i18n/index.js";
 import { Button } 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.
 
 export interface TaskFormProps {
   readonly people: readonly RestPerson[];
@@ -22,6 +26,10 @@ export interface TaskFormProps {
   readonly task?: RestTask | undefined;
   /** The tasks a new one may be part of. */
   readonly parents?: readonly RestTask[] | 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;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
   readonly onSubmit: (input: RestTaskInput) => void;
@@ -43,6 +51,10 @@ export function TaskForm(props: TaskFormProps) {
   const [priority, setPriority] = useState(task?.priority ?? "normal");
   const [assigneeId, setAssigneeId] = useState(task?.assignee?.id ?? "");
   const [parentId, setParentId] = useState(task?.parentId ?? "");
+  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[]>(
     task?.links.map((link) => ({ url: link.url, label: link.label ?? "" })) ?? [],
   );
@@ -56,6 +68,10 @@ export function TaskForm(props: TaskFormProps) {
       priority,
       assigneeId: assigneeId === "" ? null : assigneeId,
       parentId: parentId === "" ? null : parentId,
+      category: category === "" ? null : category,
+      goalId: goalId === "" ? null : goalId,
+      startsOn: startsOn === "" ? null : startsOn,
+      dueOn: dueOn === "" ? null : dueOn,
       links: links
         .filter((link) => link.url.trim().length > 0)
         .map((link) => ({
@@ -66,6 +82,12 @@ export function TaskForm(props: TaskFormProps) {
   };
 
   const parents = (props.parents ?? []).filter((candidate) => candidate.id !== task?.id);
+  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 (
     <form className="sc-form" onSubmit={submit}>
@@ -134,6 +156,61 @@ export function TaskForm(props: TaskFormProps) {
             ))}
           </select>
         </label>
+        {categories.length > 0 && (
+          <label className="sc-field">
+            <span className="sc-field-label">{form.category}</span>
+            <select
+              className="sc-input"
+              value={category}
+              onChange={(event) => setCategory(event.target.value)}
+            >
+              <option value="">{form.noCategory}</option>
+              {categories.map((candidate) => (
+                <option key={candidate.key} value={candidate.key}>
+                  {candidate.name}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+      </div>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{form.startsOn}</span>
+          <input
+            className="sc-input"
+            type="date"
+            value={startsOn}
+            onChange={(event) => setStartsOn(event.target.value)}
+          />
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.dueOn}</span>
+          <input
+            className="sc-input"
+            type="date"
+            value={dueOn}
+            min={startsOn === "" ? undefined : startsOn}
+            onChange={(event) => setDueOn(event.target.value)}
+          />
+        </label>
+        {goals.length > 0 && (
+          <label 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>
+        )}
         {parents.length > 0 && (
           <label className="sc-field">
             <span className="sc-field-label">{form.partOf}</span>
@@ -214,7 +291,7 @@ export function TaskForm(props: TaskFormProps) {
         <Button
           type="submit"
           variant="primary"
-          disabled={props.busy === true || title.trim() === ""}
+          disabled={props.busy === true || title.trim() === "" || !datesInOrder}
         >
           {task === undefined ? form.write : words.common.save}
         </Button>

package/src/components/task-list.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import type { RestTask } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Avatar, Badge, CategoryBadge, DueBadge, StateBadge } 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,
+// in one line. Takes its data as props and nothing from the network.
+
+export interface TaskListProps {
+  readonly tasks: readonly RestTask[];
+  readonly taskHref: (task: RestTask) => string;
+  /** Whether each row says the task's state: where the rows are not grouped by it. */
+  readonly showState?: boolean | undefined;
+  /** What the row says the task belongs to, where tasks of several projects are listed together. */
+  readonly projectOf?: ((task: RestTask) => string | undefined) | undefined;
+  /** The day to count due days from; the browser's today when left out. */
+  readonly today?: string | undefined;
+  readonly label?: string | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function TaskList(props: TaskListProps) {
+  const words = useWords();
+  if (props.tasks.length === 0) {
+    return <>{props.empty ?? null}</>;
+  }
+  return (
+    <ul className="sc-task-rows" aria-label={props.label}>
+      {props.tasks.map((task) => {
+        const project = props.projectOf?.(task);
+        return (
+          <li key={task.id} className="sc-task-row">
+            <a className="sc-task-row-title" href={props.taskHref(task)}>
+              <span className="sc-card-number">#{task.number}</span> {task.title}
+            </a>
+            {project !== undefined && <span className="sc-task-row-project">{project}</span>}
+            <span className="sc-task-row-meta">
+              {task.category !== null && <CategoryBadge category={task.category} />}
+              {props.showState === true && <StateBadge state={task.state} />}
+              {task.openDecisions > 0 && (
+                <Badge tone="warning" title={words.board.decisionsTitle}>
+                  {words.board.decisions(task.openDecisions)}
+                </Badge>
+              )}
+              {task.openRuns > 0 && (
+                <Badge tone="accent" title={words.board.agentAtWorkTitle}>
+                  {words.board.agentAtWork}
+                </Badge>
+              )}
+              {task.dueOn !== null && (
+                <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+              )}
+              {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
+            </span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/components/task-view.tsx

@@ -1,17 +1,20 @@
 import type {
   RestAnswerInput,
   RestArtifact,
+  RestCategory,
   RestDecision,
   RestDecisionInput,
   RestDecisionPatch,
   RestEvent,
+  RestGoal,
   RestPerson,
   RestRun,
   RestTask,
   RestTaskInput,
   TaskState,
 } from "../api.js";
-import { useWords } from "../i18n/index.js";
+import { formatDay } from "../dates.js";
+import { useLanguage, useWords } from "../i18n/index.js";
 import type { TaskFormKind } from "../router.js";
 import { TASK_STATES } from "../vocabulary.js";
 import { DecisionForm } from "./decision-form.js";
@@ -20,12 +23,13 @@ import { EventFeed } from "./event-feed.js";
 import { Markdown } from "./markdown.js";
 import { RunList } from "./runs.js";
 import { TaskForm } from "./task-form.js";
-import { PersonChip, PriorityBadge, StateBadge, Time } from "./ui.js";
+import { CategoryBadge, DueBadge, PersonChip, PriorityBadge, StateBadge, Time } from "./ui.js";
 
 // One task: what it is, who it is on, what it links to, the agents at work on it, the decisions
 // about it, the tasks that are part of it, everything that happened to it, and the ways to
 // change it. Takes its data as props and nothing from the network; which of its forms is open
-// is told by the page, since each form has an address of its own (ADR-0010).
+// is told by the page, since each form has an address of its own (ADR-0010). The facts beside
+// the text say only what is set: a plan, a category or a goal the task has none of is not a row.
 
 export interface TaskViewProps {
   readonly task: RestTask;
@@ -37,13 +41,21 @@ export interface TaskViewProps {
   readonly runs?: readonly RestRun[] | undefined;
   /** Everything that happened to the task, oldest first, when the page has read it. */
   readonly history?: readonly RestEvent[] | undefined;
+  /** The categories of the workspace, for the form. */
+  readonly categories?: readonly RestCategory[] | undefined;
+  /** The goals of the project, for the form and for naming the one the task works towards. */
+  readonly goals?: readonly RestGoal[] | undefined;
   readonly taskHref: (task: RestTask) => string;
   /** Where a decision is answered, for a run that waits for one. */
   readonly decisionHref?: ((decisionId: string) => string) | undefined;
+  /** Where a goal of the roadmap is read. */
+  readonly goalHref?: ((goalId: string) => string) | undefined;
   /** Where a file a run handed in is read. */
   readonly fileHref?: ((artifact: RestArtifact) => string) | undefined;
   /** Where a document of the project is read, by its path, for the links in what was written. */
   readonly docHref?: ((path: string) => string) | undefined;
+  /** The day to count due days from; the browser's today when left out. */
+  readonly today?: string | undefined;
   /** The form open on the page, if one: the task edited, or a decision raised about it. */
   readonly form?: TaskFormKind | undefined;
   /** Where each form is opened; left out, the forms cannot be opened from here. */
@@ -65,6 +77,7 @@ export interface TaskViewProps {
 
 export function TaskView(props: TaskViewProps) {
   const words = useWords();
+  const { tag } = useLanguage();
   const { task } = props;
   const parent =
     task.parentId === null
@@ -74,6 +87,11 @@ export function TaskView(props: TaskViewProps) {
   const about = props.decisions.filter((decision) => decision.taskId === task.id);
   const runs = (props.runs ?? []).filter((run) => run.taskId === task.id);
   const tasksById = new Map(props.tasks.map((candidate) => [candidate.id, candidate]));
+  const goal =
+    task.goalId === null
+      ? undefined
+      : props.goals?.find((candidate) => candidate.id === task.goalId);
+  const day = (value: string) => formatDay(value, tag);
 
   if (props.form === "edit") {
     return (
@@ -85,6 +103,8 @@ export function TaskView(props: TaskViewProps) {
           people={props.people}
           task={task}
           parents={props.tasks}
+          categories={props.categories}
+          goals={props.goals}
           busy={props.busy}
           error={props.error}
           onSubmit={(input) => props.onChange(task, input)}
@@ -110,7 +130,11 @@ export function TaskView(props: TaskViewProps) {
         </h1>
         <div className="sc-task-badges">
           <StateBadge state={task.state} />
+          {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>
       </header>
       <div className="sc-task-body">
@@ -226,6 +250,26 @@ export function TaskView(props: TaskViewProps) {
               <dt>{words.task.form.priority}</dt>
               <dd>{words.vocabulary.priority[task.priority]}</dd>
             </div>
+            {task.category !== null && (
+              <div>
+                <dt>{words.task.category}</dt>
+                <dd>
+                  <CategoryBadge category={task.category} />
+                </dd>
+              </div>
+            )}
+            {task.goalId !== null && (
+              <div>
+                <dt>{words.task.goal}</dt>
+                <dd>
+                  {props.goalHref === undefined ? (
+                    (goal?.title ?? task.goalId)
+                  ) : (
+                    <a href={props.goalHref(task.goalId)}>{goal?.title ?? task.goalId}</a>
+                  )}
+                </dd>
+              </div>
+            )}
             <div>
               <dt>{words.task.owner}</dt>
               <dd>
@@ -242,6 +286,33 @@ export function TaskView(props: TaskViewProps) {
                 )}
               </dd>
             </div>
+            {(task.startsOn !== null || task.dueOn !== null) && (
+              <div>
+                <dt>{words.task.plan}</dt>
+                <dd>
+                  {words.task.planned(
+                    task.startsOn === null ? undefined : day(task.startsOn),
+                    task.dueOn === null ? undefined : day(task.dueOn),
+                  )}
+                </dd>
+              </div>
+            )}
+            {task.startedAt !== null && (
+              <div>
+                <dt>{words.task.started}</dt>
+                <dd>
+                  <Time iso={task.startedAt} />
+                </dd>
+              </div>
+            )}
+            {task.doneAt !== null && (
+              <div>
+                <dt>{words.task.done}</dt>
+                <dd>
+                  <Time iso={task.doneAt} />
+                </dd>
+              </div>
+            )}
             <div>
               <dt>{words.task.written}</dt>
               <dd>