components/approval-sheet/approval-sheet.ts

Functions

Imports

It imports components/dialog/dialog.ts. Imported by components/approval-sheet/approval-sheet.react.tsx.

Source

1// The approval sheet: several waiting gates approved together in one modal dialog. The sheet
2// is the shared dialog (../dialog/dialog.ts does the opening, focus, Cancel, Esc while busy
3// and the return of focus); this module adds the Approve count that follows the checkboxes,
4// the pending and error states and the approval event. No framework; the React wrapper uses
5// the same pure functions.
6
7import { isBusy, openDialog, setDialogBusy, wireDialog } from "../dialog/dialog.ts";
8
9// "Approve 2 gates", "Approve 1 gate"; while in flight, "Approving 2 gates".
10export function approveLabel(n: number, pending = false): string {
11  return `${pending ? "Approving" : "Approve"} ${n} ${n === 1 ? "gate" : "gates"}`;
12}
13
14// The sheet's title: "2 gates are waiting", "1 gate is waiting".
15export function titleText(n: number): string {
16  return n === 1 ? "1 gate is waiting" : `${n} gates are waiting`;
17}
18
19export interface GateChoice {
20  id: string;
21  comment: string;
22}
23
24const part = <T extends Element = HTMLElement>(dialog: Element, name: string) => dialog.querySelector<T>(`[data-cap-part='${name}']`);
25
26// The gates checked in a sheet, each with its comment (trimmed; empty when none).
27export function selection(dialog: Element): GateChoice[] {
28  return [...dialog.querySelectorAll<HTMLInputElement>("input[data-cap-part='include']")]
29    .filter((i) => i.checked)
30    .map((i) => ({
31      id: i.value,
32      comment: i.closest("fieldset")?.querySelector<HTMLTextAreaElement>("[data-cap-part='comment']")?.value.trim() ?? "",
33    }));
34}
35
36export function isPending(dialog: Element): boolean {
37  return dialog.getAttribute("aria-busy") === "true" || part(dialog, "approve")?.getAttribute("aria-busy") === "true";
38}
39
40// Brings the Approve button's label, its disabled-with-reason state and the reason in
41// line with the checkboxes.
42export function update(dialog: Element): void {
43  const n = selection(dialog).length;
44  const approve = part(dialog, "approve");
45  const label = part(dialog, "approve-label");
46  const none = part(dialog, "none");
47  if (label) label.textContent = approveLabel(n, isPending(dialog));
48  if (approve) {
49    if (n === 0) {
50      approve.setAttribute("aria-disabled", "true");
51      if (none?.id) approve.setAttribute("aria-describedby", none.id);
52    } else {
53      approve.removeAttribute("aria-disabled");
54      approve.removeAttribute("aria-describedby");
55    }
56  }
57  if (none) none.hidden = n !== 0;
58}
59
60// While a request is in flight: Approve shows its spinner and "Approving", Cancel and the
61// gates are held, and Esc and the backdrop do nothing (the dialog is busy).
62export function setPending(dialog: Element, on: boolean): void {
63  const approve = part(dialog, "approve");
64  if (dialog instanceof HTMLDialogElement) setDialogBusy(dialog, on);
65  if (approve) {
66    if (on) {
67      approve.setAttribute("aria-busy", "true");
68      if (!approve.querySelector(".cap-btn-spinner")) {
69        const spin = document.createElement("span");
70        spin.className = "cap-btn-spinner";
71        spin.setAttribute("aria-hidden", "true");
72        approve.prepend(spin);
73      }
74    } else {
75      approve.removeAttribute("aria-busy");
76      approve.querySelector(".cap-btn-spinner")?.remove();
77    }
78  }
79  for (const gate of dialog.querySelectorAll<HTMLFieldSetElement>("fieldset.cap-approval-gate")) gate.disabled = on;
80  if (on) setError(dialog, null);
81  update(dialog);
82}
83
84// Shows what went wrong, beside the buttons, as an alert; null clears it.
85export function setError(dialog: Element, message: string | null): void {
86  const box = part(dialog, "error");
87  const text = part(dialog, "error-text");
88  if (!box) return;
89  if (message === null) {
90    box.hidden = true;
91    return;
92  }
93  if (text) text.textContent = message;
94  box.hidden = false;
95}
96
97export interface ApproveDetail {
98  gates: GateChoice[];
99}
100
101const attached = new WeakMap<HTMLDialogElement, () => void>();
102
103// Wires one sheet: the shared dialog's rules, then the count, the submit and the approval
104// event. Idempotent. Returns a function that detaches it.
105function attach(dialog: HTMLDialogElement): () => void {
106  const had = attached.get(dialog);
107  if (had) return had;
108  const unwire = wireDialog(dialog);
109  update(dialog);
110  const onChange = () => update(dialog);
111  const onSubmit = (e: SubmitEvent) => {
112    e.preventDefault();
113    const gates = selection(dialog);
114    if (gates.length === 0 || isPending(dialog) || isBusy(dialog)) return;
115    dialog.dispatchEvent(new CustomEvent<ApproveDetail>("cap-approve", { bubbles: true, detail: { gates } }));
116  };
117  const form = dialog.querySelector("form");
118  dialog.addEventListener("change", onChange);
119  form?.addEventListener("submit", onSubmit);
120  const detach = () => {
121    dialog.removeEventListener("change", onChange);
122    form?.removeEventListener("submit", onSubmit);
123    unwire();
124    attached.delete(dialog);
125  };
126  attached.set(dialog, detach);
127  return detach;
128}
129
130// Opens the sheet as a modal dialog. Focus starts on Cancel (its autofocus, and the
131// destructive rule); `opener` gets focus back when the sheet closes.
132export function open(dialog: HTMLDialogElement, opener?: HTMLElement | null): void {
133  attach(dialog);
134  update(dialog);
135  openDialog(dialog, opener ?? document.activeElement);
136}
137
138// Closes the sheet unless a request is in flight.
139export function close(dialog: HTMLDialogElement): void {
140  if (!isPending(dialog)) dialog.close();
141}
142
143// Attaches to every <dialog data-cap="approval-sheet"> under root, and to any button with
144// data-cap-opens="<the dialog's id>". Approving dispatches a bubbling "cap-approve" event on
145// the dialog with { gates }; the app calls setPending(dialog, true), then closes the sheet
146// or calls setError(dialog, "...") and setPending(dialog, false).
147export function enhance(root: ParentNode = document): () => void {
148  const undo: Array<() => void> = [];
149  for (const dialog of root.querySelectorAll<HTMLDialogElement>("dialog[data-cap='approval-sheet']")) {
150    if (!attached.has(dialog)) undo.push(attach(dialog));
151  }
152
153  const onOpen = (e: MouseEvent) => {
154    const btn = (e.target as Element).closest<HTMLElement>("[data-cap-opens]");
155    if (!btn) return;
156    const dialog = document.getElementById(btn.dataset.capOpens ?? "");
157    if (dialog instanceof HTMLDialogElement && dialog.dataset.cap === "approval-sheet") open(dialog, btn);
158  };
159  document.addEventListener("click", onOpen);
160  undo.push(() => document.removeEventListener("click", onOpen));
161  return () => undo.forEach((f) => f());
162}