dev_agent
966beb4862
Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com> Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
1216 lines
42 KiB
TypeScript
1216 lines
42 KiB
TypeScript
/**
|
||
* Definitions ("Tasks") tab — list + edit sheet with icon picker
|
||
* (design/ADMIN-SPEC.md §3.1–3.3).
|
||
*/
|
||
import {
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
type KeyboardEvent as ReactKeyboardEvent,
|
||
type ReactNode,
|
||
} from "react";
|
||
import { ApiForbiddenError } from "../api/client";
|
||
import {
|
||
ApiRequestError,
|
||
createDefinition,
|
||
deleteDefinition,
|
||
fetchChildren,
|
||
fetchDefinitions,
|
||
previewOccurrences,
|
||
updateDefinition,
|
||
type AdminChild,
|
||
type DefinitionCreateBody,
|
||
type DefinitionDeleteResult,
|
||
type DefinitionEditBody,
|
||
type DefinitionRule,
|
||
type QuestDefinition,
|
||
type WindowEntry,
|
||
type WindowName,
|
||
} from "../api/definitions";
|
||
import {
|
||
MONTH_SHORT,
|
||
WEEKDAY_DISPLAY_ORDER,
|
||
WEEKDAY_SHORT,
|
||
WINDOW_LABELS,
|
||
WINDOW_ORDER,
|
||
assigneeSummary,
|
||
occurrenceLabel,
|
||
recurrenceSummary,
|
||
windowSummary,
|
||
} from "./format";
|
||
import {
|
||
CheckGlyph,
|
||
ChevronDownGlyph,
|
||
ChevronRightGlyph,
|
||
PlusGlyph,
|
||
TaskGlyph,
|
||
} from "./glyphs";
|
||
import {
|
||
DEFINITION_ICONS,
|
||
DefinitionIcon,
|
||
FA_DEFINITION_ICONS,
|
||
emojiIconKey,
|
||
emojiIconText,
|
||
faIconKey,
|
||
faIconName,
|
||
faTextProblem,
|
||
faTypedIconKey,
|
||
findDefinitionIcon,
|
||
lucideIconKey,
|
||
normalizeDefinitionIconName,
|
||
searchFaIcons,
|
||
} from "./definitionIcons";
|
||
import { GlyphSvg } from "../icons/GlyphSvg";
|
||
import { weekdayOf } from "../schedule/cycle";
|
||
import { useAppTimezone } from "../time/AppTimezone";
|
||
import { todayIn } from "../time/zone";
|
||
import "./DefinitionsTab.css";
|
||
|
||
/** ADMIN-SPEC §1: every scroll column ends with 92px so content clears the tab bar. */
|
||
export const SCROLL_BOTTOM_PADDING = "92px";
|
||
|
||
type Repeats = "daily" | "weekly" | "monthly" | "yearly" | "custom";
|
||
|
||
const REPEATS_OPTIONS: { value: Repeats; label: string }[] = [
|
||
{ value: "daily", label: "Daily" },
|
||
{ value: "weekly", label: "Weekly" },
|
||
{ value: "monthly", label: "Monthly" },
|
||
{ value: "yearly", label: "Yearly" },
|
||
{ value: "custom", label: "Custom" },
|
||
];
|
||
|
||
const REPEATS_BY_RULE: Record<DefinitionRule["rule_type"], Repeats> = {
|
||
daily: "daily",
|
||
weekly: "weekly",
|
||
monthly_day: "monthly",
|
||
monthly_weekday: "monthly",
|
||
yearly: "yearly",
|
||
custom_days: "custom",
|
||
};
|
||
|
||
/** How many upcoming dates the edit sheet previews. */
|
||
const PREVIEW_COUNT = 5;
|
||
|
||
/** Font Awesome search results per page; only one page is ever mounted. */
|
||
const FA_RESULTS_PAGE = 40;
|
||
|
||
/** Quiet period after the last rule edit before the preview is requested. */
|
||
const PREVIEW_DEBOUNCE_MS = 300;
|
||
|
||
const WEEKDAY_LONG = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
|
||
|
||
interface Draft {
|
||
title: string;
|
||
/**
|
||
* The stored icon key (`lucide:`, `fa:` or `emoji:`); a legacy value
|
||
* outside the curated sets is kept until replaced.
|
||
*/
|
||
icon: string | null;
|
||
/** The emoji field's text; typing in it sets `icon` to `emoji:<text>`. */
|
||
emoji: string;
|
||
/**
|
||
* The Font Awesome search text; typing an exact Free Solid name sets
|
||
* `icon` to `fa:<name>`, and picking a search result keeps the text.
|
||
*/
|
||
faText: string;
|
||
assigneeIds: number[];
|
||
repeats: Repeats;
|
||
interval: string;
|
||
weekdays: number[];
|
||
dayOfMonth: string;
|
||
month: string;
|
||
/** An existing "nth weekday" monthly rule, kept while Repeats stays Monthly. */
|
||
monthlyWeekday: { nth: number; weekday: number } | null;
|
||
windows: WindowName[];
|
||
dueTimes: Record<WindowName, string>;
|
||
skipOnAway: boolean;
|
||
startDate: string;
|
||
endDate: string | null;
|
||
}
|
||
|
||
type LoadState =
|
||
| { kind: "loading" }
|
||
| { kind: "error"; message: string }
|
||
| { kind: "ready"; definitions: QuestDefinition[]; children: AdminChild[] };
|
||
|
||
/** `null` = closed, `"new"` = creating, a definition = editing it. */
|
||
type SheetTarget = null | "new" | QuestDefinition;
|
||
|
||
function emptyDueTimes(): Record<WindowName, string> {
|
||
return { morning: "", afternoon: "", evening: "" };
|
||
}
|
||
|
||
/** Draft defaults take `today` ("YYYY-MM-DD") in the application timezone. */
|
||
function newDraft(activeChildren: AdminChild[], today: string): Draft {
|
||
const [, month, day] = today.split("-").map(Number);
|
||
return {
|
||
title: "",
|
||
icon: null,
|
||
emoji: "",
|
||
faText: "",
|
||
assigneeIds: activeChildren.length === 1 ? [activeChildren[0].id] : [],
|
||
repeats: "daily",
|
||
interval: "1",
|
||
weekdays: [weekdayOf(today)],
|
||
dayOfMonth: String(day),
|
||
month: String(month),
|
||
monthlyWeekday: null,
|
||
windows: [],
|
||
dueTimes: emptyDueTimes(),
|
||
// Mirrors the API's create default: no instance on an away day.
|
||
skipOnAway: true,
|
||
startDate: today,
|
||
endDate: null,
|
||
};
|
||
}
|
||
|
||
function draftFrom(definition: QuestDefinition, activeChildren: AdminChild[], today: string): Draft {
|
||
const { rule } = definition;
|
||
const [, month, day] = today.split("-").map(Number);
|
||
const active = new Set(activeChildren.map((child) => child.id));
|
||
const dueTimes = emptyDueTimes();
|
||
for (const w of definition.windows) dueTimes[w.window] = w.due_time ?? "";
|
||
const fa = findDefinitionIcon(definition.icon);
|
||
return {
|
||
title: definition.title,
|
||
icon: definition.icon,
|
||
emoji: emojiIconText(definition.icon),
|
||
// A Free Solid icon outside the quick picks opens as its search result.
|
||
faText: fa?.kind === "fa" && !FA_DEFINITION_ICONS.includes(fa) ? fa.name : "",
|
||
// Inactive children cannot be submitted (the API rejects them with 422).
|
||
assigneeIds: definition.assignees.map((a) => a.id).filter((id) => active.has(id)),
|
||
repeats: REPEATS_BY_RULE[rule.rule_type],
|
||
interval: String(rule.interval),
|
||
weekdays:
|
||
rule.rule_type === "weekly" || rule.rule_type === "custom_days"
|
||
? [...(rule.weekday_set ?? [])]
|
||
: [weekdayOf(today)],
|
||
dayOfMonth: String(rule.day_of_month ?? day),
|
||
month: String(rule.month ?? month),
|
||
monthlyWeekday:
|
||
rule.rule_type === "monthly_weekday"
|
||
? { nth: rule.nth_weekday ?? 1, weekday: rule.nth_weekday_weekday ?? 0 }
|
||
: null,
|
||
windows: WINDOW_ORDER.filter((w) => definition.windows.some((d) => d.window === w)),
|
||
dueTimes,
|
||
skipOnAway: definition.skip_on_away,
|
||
startDate: rule.start_date,
|
||
endDate: rule.end_date,
|
||
};
|
||
}
|
||
|
||
function parseWhole(value: string, min: number, max: number): number | null {
|
||
if (!/^\d+$/.test(value.trim())) return null;
|
||
const n = Number(value);
|
||
return n >= min && n <= max ? n : null;
|
||
}
|
||
|
||
/** Build the request rule from the draft, or return a message naming what to fix. */
|
||
function buildRule(draft: Draft): DefinitionRule | string {
|
||
const interval = parseWhole(draft.interval, 1, 999);
|
||
if (interval === null) return "Interval must be a whole number of at least 1.";
|
||
if (draft.startDate === "") return "Pick a start date.";
|
||
const rule: DefinitionRule = {
|
||
rule_type: "daily",
|
||
interval,
|
||
weekday_set: null,
|
||
day_of_month: null,
|
||
nth_weekday: null,
|
||
nth_weekday_weekday: null,
|
||
month: null,
|
||
start_date: draft.startDate,
|
||
end_date: draft.endDate,
|
||
};
|
||
switch (draft.repeats) {
|
||
case "daily":
|
||
return rule;
|
||
case "weekly":
|
||
case "custom":
|
||
if (draft.weekdays.length === 0) return "Pick at least one day.";
|
||
return {
|
||
...rule,
|
||
rule_type: draft.repeats === "weekly" ? "weekly" : "custom_days",
|
||
weekday_set: [...draft.weekdays].sort((a, b) => a - b),
|
||
};
|
||
case "monthly": {
|
||
if (draft.monthlyWeekday) {
|
||
return {
|
||
...rule,
|
||
rule_type: "monthly_weekday",
|
||
nth_weekday: draft.monthlyWeekday.nth,
|
||
nth_weekday_weekday: draft.monthlyWeekday.weekday,
|
||
};
|
||
}
|
||
const day = parseWhole(draft.dayOfMonth, 1, 31);
|
||
if (day === null) return "Day of month must be 1 to 31.";
|
||
return { ...rule, rule_type: "monthly_day", day_of_month: day };
|
||
}
|
||
case "yearly": {
|
||
const month = parseWhole(draft.month, 1, 12);
|
||
const day = parseWhole(draft.dayOfMonth, 1, 31);
|
||
if (month === null || day === null) return "Pick a month and a day (1 to 31).";
|
||
return { ...rule, rule_type: "yearly", month, day_of_month: day };
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* `keepsAssignees`: an edit whose active selection is unchanged sends no
|
||
* assignee list, so an empty selection is fine when inactive children remain.
|
||
*/
|
||
function buildBody(draft: Draft, keepsAssignees = false): DefinitionCreateBody | string {
|
||
const title = draft.title.trim();
|
||
if (!title) return "Give the task a title.";
|
||
if (draft.assigneeIds.length === 0 && !keepsAssignees) return "Assign at least one child.";
|
||
if (draft.windows.length === 0) return "Pick at least one window.";
|
||
if (draft.emoji && draft.icon === null) {
|
||
return "Enter a single emoji (no spaces or < > &), or clear the emoji field.";
|
||
}
|
||
if (draft.faText.trim() && draft.icon === null) return faTextProblem(draft.faText);
|
||
const rule = buildRule(draft);
|
||
if (typeof rule === "string") return rule;
|
||
const windows: WindowEntry[] = WINDOW_ORDER.filter((w) => draft.windows.includes(w)).map(
|
||
(w) => [w, draft.dueTimes[w] || null],
|
||
);
|
||
return {
|
||
title,
|
||
icon: draft.icon,
|
||
rule,
|
||
assignee_child_ids: [...draft.assigneeIds],
|
||
windows,
|
||
skip_on_away: draft.skipOnAway,
|
||
};
|
||
}
|
||
|
||
function saveErrorMessage(error: unknown): string {
|
||
if (error instanceof ApiForbiddenError) return error.message;
|
||
if (error instanceof ApiRequestError && error.detail) return error.detail;
|
||
return "The task could not be saved. Check your connection and try again.";
|
||
}
|
||
|
||
function deleteErrorMessage(error: unknown): string {
|
||
if (error instanceof ApiForbiddenError) return error.message;
|
||
if (error instanceof ApiRequestError && error.detail) return error.detail;
|
||
return "The task could not be deleted. Check your connection and try again.";
|
||
}
|
||
|
||
function toggle<T>(list: T[], value: T): T[] {
|
||
return list.includes(value) ? list.filter((item) => item !== value) : [...list, value];
|
||
}
|
||
|
||
function sameIds(a: number[], b: number[]): boolean {
|
||
return a.length === b.length && a.every((id) => b.includes(id));
|
||
}
|
||
|
||
const FOCUSABLE =
|
||
'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [href], [tabindex]:not([tabindex="-1"])';
|
||
|
||
/* ── List ───────────────────────────────────────────────────────────── */
|
||
|
||
function FilterChips({
|
||
options,
|
||
filter,
|
||
onChange,
|
||
}: {
|
||
options: AdminChild[];
|
||
filter: number | "all";
|
||
onChange: (filter: number | "all") => void;
|
||
}) {
|
||
const chips: { key: number | "all"; label: string }[] = [
|
||
{ key: "all", label: "All" },
|
||
...options.map((child) => ({ key: child.id, label: child.display_name })),
|
||
];
|
||
return (
|
||
<div className="defs-chips" role="group" aria-label="Filter by child">
|
||
{chips.map((chip) => (
|
||
<button
|
||
key={chip.key}
|
||
type="button"
|
||
className={chip.key === filter ? "defs-chip defs-chip--active" : "defs-chip"}
|
||
aria-pressed={chip.key === filter}
|
||
onClick={() => onChange(chip.key)}
|
||
>
|
||
{chip.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DefinitionRow({
|
||
definition,
|
||
activeChildren,
|
||
editing,
|
||
onOpen,
|
||
}: {
|
||
definition: QuestDefinition;
|
||
activeChildren: AdminChild[];
|
||
editing: boolean;
|
||
onOpen: () => void;
|
||
}) {
|
||
let meta = [
|
||
assigneeSummary(definition.assignees, activeChildren),
|
||
recurrenceSummary(definition.rule),
|
||
windowSummary(definition.windows),
|
||
].join(" · ");
|
||
if (!definition.is_active) meta += " · inactive";
|
||
let className = "defs-row";
|
||
if (!definition.is_active) className += " defs-row--inactive";
|
||
if (editing) className += " defs-row--editing";
|
||
return (
|
||
<li>
|
||
<button
|
||
type="button"
|
||
className={className}
|
||
data-testid={`definition-${definition.id}`}
|
||
aria-expanded={editing}
|
||
onClick={onOpen}
|
||
>
|
||
<span className="defs-row-glyph">
|
||
<DefinitionIcon name={definition.icon} />
|
||
</span>
|
||
<span className="defs-row-text">
|
||
<span className="defs-row-title">{definition.title}</span>
|
||
<span className="defs-row-meta">{editing ? "Editing" : meta}</span>
|
||
</span>
|
||
<span className="defs-row-chevron">
|
||
{editing ? <ChevronDownGlyph /> : <ChevronRightGlyph />}
|
||
</span>
|
||
</button>
|
||
</li>
|
||
);
|
||
}
|
||
|
||
/* ── Edit sheet ─────────────────────────────────────────────────────── */
|
||
|
||
type PreviewState =
|
||
| { kind: "idle" }
|
||
| { kind: "ready"; ruleKey: string; dates: string[] }
|
||
| { kind: "error"; ruleKey: string; message: string };
|
||
|
||
/**
|
||
* The next few dates the backend would materialize for the draft's rule.
|
||
* `ruleKey` is the built rule serialized (null while the draft is invalid), so
|
||
* the request only goes out when the rule itself changes — debounced, and a
|
||
* superseded request's late response is dropped by its effect's cleanup.
|
||
* A result is tagged with the rule it answers and only shown while that rule
|
||
* is still the draft's, so a changed rule never shows the previous dates.
|
||
*/
|
||
function OccurrencePreview({ ruleKey }: { ruleKey: string | null }) {
|
||
const [preview, setPreview] = useState<PreviewState>({ kind: "idle" });
|
||
|
||
useEffect(() => {
|
||
if (ruleKey === null) {
|
||
setPreview({ kind: "idle" });
|
||
return;
|
||
}
|
||
let cancelled = false;
|
||
const timer = setTimeout(() => {
|
||
previewOccurrences(JSON.parse(ruleKey) as DefinitionRule, { count: PREVIEW_COUNT })
|
||
.then((dates) => {
|
||
if (!cancelled) setPreview({ kind: "ready", ruleKey, dates });
|
||
})
|
||
.catch((error: unknown) => {
|
||
if (cancelled) return;
|
||
const detail =
|
||
error instanceof ApiForbiddenError ||
|
||
(error instanceof ApiRequestError && error.detail)
|
||
? `: ${error.message}`
|
||
: ".";
|
||
setPreview({
|
||
kind: "error",
|
||
ruleKey,
|
||
message: `Upcoming dates unavailable${detail}`,
|
||
});
|
||
});
|
||
}, PREVIEW_DEBOUNCE_MS);
|
||
return () => {
|
||
cancelled = true;
|
||
clearTimeout(timer);
|
||
};
|
||
}, [ruleKey]);
|
||
|
||
if (preview.kind === "idle" || preview.ruleKey !== ruleKey) return null;
|
||
if (preview.kind === "error") {
|
||
return (
|
||
<p className="defs-hint defs-preview defs-preview--error" data-testid="occurrence-preview">
|
||
{preview.message}
|
||
</p>
|
||
);
|
||
}
|
||
let text: string;
|
||
if (preview.dates.length === 0) {
|
||
text = "No upcoming dates in the next year.";
|
||
} else {
|
||
const labels = preview.dates.map(occurrenceLabel);
|
||
// A full page means the rule keeps going past the last shown date.
|
||
if (preview.dates.length >= PREVIEW_COUNT) labels.push("…");
|
||
text = `Next: ${labels.join(" · ")}`;
|
||
}
|
||
return (
|
||
<p className="defs-hint defs-preview" data-testid="occurrence-preview" aria-live="polite">
|
||
{text}
|
||
</p>
|
||
);
|
||
}
|
||
|
||
function Field({ label, id, children }: { label: string; id: string; children: ReactNode }) {
|
||
return (
|
||
<div className="defs-field" role="group" aria-labelledby={id}>
|
||
<span className="defs-label" id={id}>
|
||
{label}
|
||
</span>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EditSheet({
|
||
target,
|
||
activeChildren,
|
||
onCancel,
|
||
onSaved,
|
||
onDeleted,
|
||
}: {
|
||
target: "new" | QuestDefinition;
|
||
activeChildren: AdminChild[];
|
||
onCancel: () => void;
|
||
onSaved: () => void;
|
||
onDeleted: (result: DefinitionDeleteResult) => void;
|
||
}) {
|
||
const timeZone = useAppTimezone();
|
||
const [draft, setDraft] = useState<Draft>(() => {
|
||
const today = todayIn(timeZone);
|
||
return target === "new" ? newDraft(activeChildren, today) : draftFrom(target, activeChildren, today);
|
||
});
|
||
// The active selection as loaded: while it is unchanged, the PATCH omits
|
||
// assignee_child_ids, because the API replaces the whole set and inactive
|
||
// children cannot be sent back.
|
||
const [originalActiveIds] = useState(() => draft.assigneeIds);
|
||
// The icon as loaded: while it is unchanged, the PATCH omits `icon` (absent
|
||
// means unchanged), because a legacy value read back as `lucide:<old>` would
|
||
// fail the API's strict icon validation if sent back.
|
||
const [originalIcon] = useState(() => draft.icon);
|
||
const inactiveAssignees =
|
||
target === "new"
|
||
? []
|
||
: target.assignees.filter((a) => !activeChildren.some((child) => child.id === a.id));
|
||
const [pickerOpen, setPickerOpen] = useState(false);
|
||
const faResults = useMemo(() => searchFaIcons(draft.faText), [draft.faText]);
|
||
const [faPage, setFaPage] = useState(0);
|
||
const faStart = faPage * FA_RESULTS_PAGE;
|
||
const faEnd = Math.min(faStart + FA_RESULTS_PAGE, faResults.length);
|
||
const noIcon = draft.icon === null && !draft.emoji && !draft.faText.trim();
|
||
const [saving, setSaving] = useState(false);
|
||
const [confirming, setConfirming] = useState(false);
|
||
const [confirmingDelete, setConfirmingDelete] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
// A ref, not state: two taps in one frame must not both see `saving === false`.
|
||
const inFlight = useRef(false);
|
||
const sheetRef = useRef<HTMLDivElement>(null);
|
||
const titleRef = useRef<HTMLHeadingElement>(null);
|
||
const confirmRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Modal focus: move in on open, hand back to the trigger on close.
|
||
useEffect(() => {
|
||
const trigger = document.activeElement as HTMLElement | null;
|
||
titleRef.current?.focus();
|
||
return () => {
|
||
if (trigger && trigger.isConnected) trigger.focus();
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (confirming || confirmingDelete) confirmRef.current?.focus();
|
||
}, [confirming, confirmingDelete]);
|
||
|
||
function onKeyDown(event: ReactKeyboardEvent<HTMLDivElement>) {
|
||
if (event.key === "Escape") {
|
||
event.preventDefault();
|
||
if (!inFlight.current) onCancel();
|
||
return;
|
||
}
|
||
if (event.key !== "Tab" || !sheetRef.current) return;
|
||
const focusable = Array.from(sheetRef.current.querySelectorAll<HTMLElement>(FOCUSABLE));
|
||
if (focusable.length === 0) return;
|
||
const first = focusable[0];
|
||
const last = focusable[focusable.length - 1];
|
||
const current = document.activeElement;
|
||
const outside = !focusable.includes(current as HTMLElement);
|
||
if (event.shiftKey && (current === first || outside)) {
|
||
event.preventDefault();
|
||
last.focus();
|
||
} else if (!event.shiftKey && (current === last || outside)) {
|
||
event.preventDefault();
|
||
first.focus();
|
||
}
|
||
}
|
||
|
||
const update = (patch: Partial<Draft>) => setDraft((d) => ({ ...d, ...patch }));
|
||
|
||
const selectedAssignees = activeChildren
|
||
.filter((child) => draft.assigneeIds.includes(child.id))
|
||
.map((child) => ({ id: child.id, display_name: child.display_name }));
|
||
const orderedWindows = WINDOW_ORDER.filter((w) => draft.windows.includes(w));
|
||
const previewRule = buildRule(draft);
|
||
const previewKey = typeof previewRule === "string" ? null : JSON.stringify(previewRule);
|
||
|
||
async function save(confirmed = false) {
|
||
if (inFlight.current) return;
|
||
const keepsAssignees = target !== "new" && sameIds(draft.assigneeIds, originalActiveIds);
|
||
const body = buildBody(draft, keepsAssignees);
|
||
if (typeof body === "string") {
|
||
setError(body);
|
||
setConfirming(false);
|
||
return;
|
||
}
|
||
if (target !== "new" && !keepsAssignees && inactiveAssignees.length > 0 && !confirmed) {
|
||
setError(null);
|
||
setConfirming(true);
|
||
return;
|
||
}
|
||
setConfirming(false);
|
||
inFlight.current = true;
|
||
setSaving(true);
|
||
setError(null);
|
||
try {
|
||
if (target === "new") {
|
||
await createDefinition(body);
|
||
} else {
|
||
const edit: DefinitionEditBody = { ...body };
|
||
if (keepsAssignees) delete edit.assignee_child_ids;
|
||
if (draft.icon === originalIcon) delete edit.icon;
|
||
await updateDefinition(target.id, edit);
|
||
}
|
||
onSaved();
|
||
} catch (err) {
|
||
setError(saveErrorMessage(err));
|
||
inFlight.current = false;
|
||
setSaving(false);
|
||
}
|
||
}
|
||
|
||
async function remove() {
|
||
if (target === "new" || inFlight.current) return;
|
||
setConfirmingDelete(false);
|
||
inFlight.current = true;
|
||
setSaving(true);
|
||
setError(null);
|
||
try {
|
||
onDeleted(await deleteDefinition(target.id));
|
||
} catch (err) {
|
||
setError(deleteErrorMessage(err));
|
||
inFlight.current = false;
|
||
setSaving(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="defs-sheet-layer">
|
||
<div
|
||
className="defs-scrim"
|
||
data-testid="sheet-scrim"
|
||
onClick={() => {
|
||
if (!inFlight.current) onCancel();
|
||
}}
|
||
/>
|
||
<div
|
||
ref={sheetRef}
|
||
className="defs-sheet"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="defs-sheet-title"
|
||
onKeyDown={onKeyDown}
|
||
>
|
||
<div className="defs-grabber" aria-hidden="true" />
|
||
<h3 className="defs-sheet-title" id="defs-sheet-title" ref={titleRef} tabIndex={-1}>
|
||
{target === "new" ? "New task" : "Edit task"}
|
||
</h3>
|
||
<div className="defs-fields">
|
||
<Field label="Title" id="defs-label-title">
|
||
<input
|
||
className="defs-input"
|
||
aria-labelledby="defs-label-title"
|
||
value={draft.title}
|
||
onChange={(e) => update({ title: e.target.value })}
|
||
/>
|
||
</Field>
|
||
|
||
<Field label="Icon" id="defs-label-icon">
|
||
<div className="defs-icon-grid" role="radiogroup" aria-labelledby="defs-label-icon">
|
||
<button
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={noIcon}
|
||
aria-label="No icon"
|
||
className={noIcon ? "defs-icon defs-icon--on" : "defs-icon"}
|
||
onClick={() => update({ icon: null, emoji: "", faText: "" })}
|
||
>
|
||
<TaskGlyph size={18} />
|
||
</button>
|
||
{DEFINITION_ICONS.map((icon) => {
|
||
const { name, label } = icon;
|
||
const on = normalizeDefinitionIconName(draft.icon) === name;
|
||
return (
|
||
<button
|
||
key={name}
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={on}
|
||
aria-label={label}
|
||
data-icon-option={name}
|
||
className={on ? "defs-icon defs-icon--on" : "defs-icon"}
|
||
onClick={() => update({ icon: lucideIconKey(name), emoji: "", faText: "" })}
|
||
>
|
||
<GlyphSvg icon={icon} size={18} />
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<span className="defs-sublabel" id="defs-label-icon-fa">
|
||
Font Awesome
|
||
</span>
|
||
<input
|
||
className="defs-input"
|
||
type="search"
|
||
aria-label="Search Font Awesome icons"
|
||
placeholder="Search or type an icon name, e.g. dog"
|
||
value={draft.faText}
|
||
onChange={(e) => {
|
||
setFaPage(0);
|
||
update({ faText: e.target.value, icon: faTypedIconKey(e.target.value), emoji: "" });
|
||
}}
|
||
/>
|
||
{draft.faText.trim() && draft.icon === null ? (
|
||
<p className="defs-hint defs-hint--error" role="alert">
|
||
{faTextProblem(draft.faText)}
|
||
</p>
|
||
) : null}
|
||
{draft.faText.trim() ? (
|
||
faResults.length > 0 ? (
|
||
<>
|
||
<div
|
||
className="defs-icon-grid defs-icon-grid--results"
|
||
role="radiogroup"
|
||
aria-label="Font Awesome search results"
|
||
>
|
||
{faResults.slice(faStart, faEnd).map((icon) => {
|
||
const { name, label } = icon;
|
||
const on = faIconName(draft.icon) === name;
|
||
return (
|
||
<button
|
||
key={name}
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={on}
|
||
aria-label={label}
|
||
data-icon-option={faIconKey(name)}
|
||
className={
|
||
on ? "defs-icon defs-icon-result defs-icon--on" : "defs-icon defs-icon-result"
|
||
}
|
||
onClick={() => update({ icon: faIconKey(name), emoji: "" })}
|
||
>
|
||
<GlyphSvg icon={icon} size={18} />
|
||
<span className="defs-icon-label">{label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<p className="defs-hint">
|
||
Showing {faStart + 1}–{faEnd} of {faResults.length}
|
||
</p>
|
||
{faResults.length > FA_RESULTS_PAGE ? (
|
||
<div className="defs-show-more">
|
||
{faPage > 0 ? (
|
||
<button type="button" className="defs-retry" onClick={() => setFaPage((page) => page - 1)}>
|
||
Previous
|
||
</button>
|
||
) : null}
|
||
{faEnd < faResults.length ? (
|
||
<button type="button" className="defs-retry" onClick={() => setFaPage((page) => page + 1)}>
|
||
Show more
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</>
|
||
) : null
|
||
) : (
|
||
<div className="defs-icon-grid" role="radiogroup" aria-labelledby="defs-label-icon-fa">
|
||
{FA_DEFINITION_ICONS.map((icon) => {
|
||
const { name, label } = icon;
|
||
const on = faIconName(draft.icon) === name;
|
||
return (
|
||
<button
|
||
key={name}
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={on}
|
||
aria-label={label}
|
||
data-icon-option={faIconKey(name)}
|
||
className={on ? "defs-icon defs-icon--on" : "defs-icon"}
|
||
onClick={() => update({ icon: faIconKey(name), emoji: "", faText: "" })}
|
||
>
|
||
<GlyphSvg icon={icon} size={18} />
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
<label className="defs-due">
|
||
<span>Emoji</span>
|
||
<input
|
||
className="defs-input"
|
||
aria-label="Emoji"
|
||
placeholder="e.g. 🐶"
|
||
value={draft.emoji}
|
||
onChange={(e) =>
|
||
update({ emoji: e.target.value, icon: emojiIconKey(e.target.value), faText: "" })
|
||
}
|
||
/>
|
||
</label>
|
||
</Field>
|
||
|
||
<Field label="Assigned children" id="defs-label-children">
|
||
<button
|
||
type="button"
|
||
className="defs-select-row"
|
||
aria-expanded={pickerOpen}
|
||
aria-labelledby="defs-label-children defs-children-summary"
|
||
onClick={() => setPickerOpen((open) => !open)}
|
||
>
|
||
<span id="defs-children-summary">
|
||
{selectedAssignees.length > 0
|
||
? assigneeSummary(selectedAssignees, activeChildren)
|
||
: "Choose children"}
|
||
</span>
|
||
{pickerOpen ? <ChevronDownGlyph /> : <ChevronRightGlyph />}
|
||
</button>
|
||
{pickerOpen ? (
|
||
<ul className="defs-picker" aria-label="Children">
|
||
{activeChildren.map((child) => {
|
||
const checked = draft.assigneeIds.includes(child.id);
|
||
return (
|
||
<li key={child.id}>
|
||
<button
|
||
type="button"
|
||
role="checkbox"
|
||
aria-checked={checked}
|
||
className="defs-picker-option"
|
||
onClick={() => update({ assigneeIds: toggle(draft.assigneeIds, child.id) })}
|
||
>
|
||
<span>{child.display_name}</span>
|
||
<span className="defs-picker-check">{checked ? <CheckGlyph /> : null}</span>
|
||
</button>
|
||
</li>
|
||
);
|
||
})}
|
||
{inactiveAssignees.map((assignee) => (
|
||
<li
|
||
key={assignee.id}
|
||
className="defs-picker-option defs-picker-option--locked"
|
||
aria-disabled="true"
|
||
data-testid={`inactive-assignee-${assignee.id}`}
|
||
>
|
||
<span>{assignee.display_name}</span>
|
||
<span className="defs-picker-note">Inactive</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
) : null}
|
||
{inactiveAssignees.length > 0 ? (
|
||
<p className="defs-hint">
|
||
Also assigned (inactive): {inactiveAssignees.map((a) => a.display_name).join(", ")}.
|
||
Kept unless you change the selection.
|
||
</p>
|
||
) : null}
|
||
</Field>
|
||
|
||
<Field label="Repeats" id="defs-label-repeats">
|
||
<div className="defs-repeats">
|
||
<select
|
||
className="defs-input"
|
||
aria-label="Repeats"
|
||
value={draft.repeats}
|
||
onChange={(e) =>
|
||
update({
|
||
repeats: e.target.value as Repeats,
|
||
// Leaving Monthly drops a carried nth-weekday rule for good.
|
||
monthlyWeekday: e.target.value === "monthly" ? draft.monthlyWeekday : null,
|
||
})
|
||
}
|
||
>
|
||
{REPEATS_OPTIONS.map((option) => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<label className="defs-interval">
|
||
<span>Every</span>
|
||
<input
|
||
className="defs-input"
|
||
type="number"
|
||
min={1}
|
||
aria-label="Interval"
|
||
value={draft.interval}
|
||
onChange={(e) => update({ interval: e.target.value })}
|
||
/>
|
||
</label>
|
||
</div>
|
||
{draft.repeats === "weekly" || draft.repeats === "custom" ? (
|
||
<div className="defs-weekdays" role="group" aria-label="Days">
|
||
{WEEKDAY_DISPLAY_ORDER.map((day) => (
|
||
<button
|
||
key={day}
|
||
type="button"
|
||
aria-pressed={draft.weekdays.includes(day)}
|
||
aria-label={WEEKDAY_LONG[day]}
|
||
className={
|
||
draft.weekdays.includes(day) ? "defs-day defs-day--on" : "defs-day"
|
||
}
|
||
onClick={() => update({ weekdays: toggle(draft.weekdays, day) })}
|
||
>
|
||
{WEEKDAY_SHORT[day].charAt(0)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
{draft.repeats === "monthly" && draft.monthlyWeekday ? (
|
||
<p className="defs-hint">
|
||
{recurrenceSummary({
|
||
rule_type: "monthly_weekday",
|
||
interval: parseWhole(draft.interval, 1, 999) ?? 1,
|
||
weekday_set: null,
|
||
day_of_month: null,
|
||
nth_weekday: draft.monthlyWeekday.nth,
|
||
nth_weekday_weekday: draft.monthlyWeekday.weekday,
|
||
month: null,
|
||
start_date: draft.startDate,
|
||
end_date: draft.endDate,
|
||
})}
|
||
</p>
|
||
) : null}
|
||
{draft.repeats === "yearly" ? (
|
||
<select
|
||
className="defs-input"
|
||
aria-label="Month"
|
||
value={draft.month}
|
||
onChange={(e) => update({ month: e.target.value })}
|
||
>
|
||
{MONTH_SHORT.map((label, index) => (
|
||
<option key={label} value={String(index + 1)}>
|
||
{label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
) : null}
|
||
{(draft.repeats === "monthly" && !draft.monthlyWeekday) || draft.repeats === "yearly" ? (
|
||
<input
|
||
className="defs-input"
|
||
type="number"
|
||
min={1}
|
||
max={31}
|
||
aria-label="Day of month"
|
||
value={draft.dayOfMonth}
|
||
onChange={(e) => update({ dayOfMonth: e.target.value })}
|
||
/>
|
||
) : null}
|
||
<OccurrencePreview ruleKey={previewKey} />
|
||
</Field>
|
||
|
||
<Field label="Start date" id="defs-label-start">
|
||
<input
|
||
className="defs-input"
|
||
type="date"
|
||
aria-labelledby="defs-label-start"
|
||
value={draft.startDate}
|
||
onChange={(e) => update({ startDate: e.target.value })}
|
||
/>
|
||
</Field>
|
||
|
||
<Field label="Due time" id="defs-label-due">
|
||
{orderedWindows.length === 0 ? (
|
||
<p className="defs-hint">Pick a window to set its due time.</p>
|
||
) : (
|
||
<div className="defs-due-times">
|
||
{orderedWindows.map((w) => (
|
||
<label key={w} className="defs-due">
|
||
<span>{WINDOW_LABELS[w]}</span>
|
||
<input
|
||
className="defs-input"
|
||
type="time"
|
||
aria-label={`${WINDOW_LABELS[w]} due time`}
|
||
value={draft.dueTimes[w]}
|
||
onChange={(e) =>
|
||
update({ dueTimes: { ...draft.dueTimes, [w]: e.target.value } })
|
||
}
|
||
/>
|
||
</label>
|
||
))}
|
||
</div>
|
||
)}
|
||
</Field>
|
||
|
||
<Field label="Window" id="defs-label-window">
|
||
<div className="defs-segmented">
|
||
{WINDOW_ORDER.map((w) => (
|
||
<button
|
||
key={w}
|
||
type="button"
|
||
aria-pressed={draft.windows.includes(w)}
|
||
className={
|
||
draft.windows.includes(w) ? "defs-segment defs-segment--on" : "defs-segment"
|
||
}
|
||
onClick={() => update({ windows: toggle(draft.windows, w) })}
|
||
>
|
||
{WINDOW_LABELS[w]}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</Field>
|
||
|
||
<div className="defs-toggle-row">
|
||
<div>
|
||
<div className="defs-toggle-title" id="defs-label-skip">
|
||
Skip on away days
|
||
</div>
|
||
<div className="defs-toggle-sub">No instance when the child is absent</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
role="switch"
|
||
aria-checked={draft.skipOnAway}
|
||
aria-labelledby="defs-label-skip"
|
||
className={draft.skipOnAway ? "defs-switch defs-switch--on" : "defs-switch"}
|
||
onClick={() => update({ skipOnAway: !draft.skipOnAway })}
|
||
>
|
||
<span className="defs-switch-knob" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{error ? (
|
||
<p className="defs-sheet-error" role="alert" data-testid="sheet-error">
|
||
{error}
|
||
</p>
|
||
) : null}
|
||
|
||
{confirming ? (
|
||
<div
|
||
className="defs-confirm"
|
||
role="group"
|
||
aria-labelledby="defs-confirm-text"
|
||
data-testid="unassign-confirm"
|
||
ref={confirmRef}
|
||
tabIndex={-1}
|
||
>
|
||
<p id="defs-confirm-text">
|
||
Saving will unassign{" "}
|
||
{inactiveAssignees.map((a) => a.display_name).join(", ")}. Inactive children can't be
|
||
assigned again until they are reactivated.
|
||
</p>
|
||
<div className="defs-sheet-footer">
|
||
<button type="button" className="defs-cancel" onClick={() => setConfirming(false)}>
|
||
Go back
|
||
</button>
|
||
<button type="button" className="defs-save" onClick={() => save(true)}>
|
||
Unassign and save
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : confirmingDelete ? (
|
||
<div
|
||
className="defs-confirm"
|
||
role="group"
|
||
aria-labelledby="defs-delete-confirm-text"
|
||
data-testid="delete-confirm"
|
||
ref={confirmRef}
|
||
tabIndex={-1}
|
||
>
|
||
<p id="defs-delete-confirm-text">
|
||
Delete this task? If it has no completion history it is deleted; otherwise it is
|
||
retired (deactivated) and its history is kept.
|
||
</p>
|
||
<div className="defs-sheet-footer">
|
||
<button
|
||
type="button"
|
||
className="defs-cancel"
|
||
onClick={() => setConfirmingDelete(false)}
|
||
>
|
||
Go back
|
||
</button>
|
||
<button type="button" className="defs-save defs-save--danger" onClick={remove}>
|
||
Delete task
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="defs-sheet-footer">
|
||
<button type="button" className="defs-cancel" onClick={onCancel} disabled={saving}>
|
||
Cancel
|
||
</button>
|
||
<button type="button" className="defs-save" onClick={() => save()} disabled={saving}>
|
||
{saving ? "Saving…" : "Save changes"}
|
||
</button>
|
||
</div>
|
||
{target !== "new" ? (
|
||
<button
|
||
type="button"
|
||
className="defs-delete"
|
||
disabled={saving}
|
||
onClick={() => {
|
||
setError(null);
|
||
setConfirmingDelete(true);
|
||
}}
|
||
>
|
||
Delete task
|
||
</button>
|
||
) : null}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Screen ─────────────────────────────────────────────────────────── */
|
||
|
||
export default function DefinitionsTab() {
|
||
const [state, setState] = useState<LoadState>({ kind: "loading" });
|
||
const [attempt, setAttempt] = useState(0);
|
||
const [filter, setFilter] = useState<number | "all">("all");
|
||
const [sheet, setSheet] = useState<SheetTarget>(null);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
// Keep the list on screen during a post-save re-fetch; spin only on first load.
|
||
setState((current) => (current.kind === "ready" ? current : { kind: "loading" }));
|
||
Promise.all([fetchDefinitions(), fetchChildren()])
|
||
.then(([definitions, children]) => {
|
||
if (!cancelled) setState({ kind: "ready", definitions, children });
|
||
})
|
||
.catch((error: unknown) => {
|
||
if (cancelled) return;
|
||
const message =
|
||
error instanceof ApiForbiddenError
|
||
? error.message
|
||
: "Tasks could not be loaded. Check your connection and try again.";
|
||
setState({ kind: "error", message });
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [attempt]);
|
||
|
||
const activeChildren =
|
||
state.kind === "ready"
|
||
? [...state.children]
|
||
.filter((child) => child.is_active)
|
||
.sort((a, b) => a.sort_order - b.sort_order)
|
||
: [];
|
||
|
||
let sub = "";
|
||
let body;
|
||
if (state.kind === "loading") {
|
||
body = (
|
||
<div className="defs-status" role="status" data-testid="definitions-loading">
|
||
Loading tasks…
|
||
</div>
|
||
);
|
||
} else if (state.kind === "error") {
|
||
body = (
|
||
<div className="defs-status defs-status--error" role="alert" data-testid="definitions-error">
|
||
<p>{state.message}</p>
|
||
<button type="button" className="defs-retry" onClick={() => setAttempt((n) => n + 1)}>
|
||
Try again
|
||
</button>
|
||
</div>
|
||
);
|
||
} else {
|
||
const { definitions } = state;
|
||
sub = `${definitions.length} definitions · ${activeChildren.length} children`;
|
||
const shown =
|
||
filter === "all"
|
||
? definitions
|
||
: definitions.filter((d) => d.assignees.some((a) => a.id === filter));
|
||
const editingId = sheet !== null && sheet !== "new" ? sheet.id : null;
|
||
body = (
|
||
<>
|
||
<FilterChips options={activeChildren} filter={filter} onChange={setFilter} />
|
||
{shown.length > 0 ? (
|
||
<ul className="defs-card defs-list" aria-label="Task definitions">
|
||
{shown.map((definition) => (
|
||
<DefinitionRow
|
||
key={definition.id}
|
||
definition={definition}
|
||
activeChildren={activeChildren}
|
||
editing={definition.id === editingId}
|
||
onOpen={() => setSheet(definition)}
|
||
/>
|
||
))}
|
||
</ul>
|
||
) : (
|
||
<div className="defs-card defs-empty">No tasks yet.</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="defs-screen">
|
||
<header className="defs-header">
|
||
<div>
|
||
<h2 className="defs-title">Tasks</h2>
|
||
<p className="defs-sub">{sub}</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="defs-new"
|
||
disabled={state.kind !== "ready"}
|
||
onClick={() => setSheet("new")}
|
||
>
|
||
<PlusGlyph />
|
||
New
|
||
</button>
|
||
</header>
|
||
<div
|
||
className="defs-scroll"
|
||
data-testid="definitions-scroll"
|
||
style={{ paddingBottom: SCROLL_BOTTOM_PADDING }}
|
||
>
|
||
{body}
|
||
</div>
|
||
{sheet !== null && state.kind === "ready" ? (
|
||
<EditSheet
|
||
key={sheet === "new" ? "new" : sheet.id}
|
||
target={sheet}
|
||
activeChildren={activeChildren}
|
||
onCancel={() => setSheet(null)}
|
||
onSaved={() => {
|
||
setSheet(null);
|
||
setAttempt((n) => n + 1);
|
||
}}
|
||
onDeleted={(result) => {
|
||
setSheet(null);
|
||
setState((current) =>
|
||
current.kind !== "ready"
|
||
? current
|
||
: {
|
||
...current,
|
||
definitions: result.definition
|
||
? current.definitions.map((d) =>
|
||
d.id === result.definition_id ? result.definition! : d,
|
||
)
|
||
: current.definitions.filter((d) => d.id !== result.definition_id),
|
||
},
|
||
);
|
||
}}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|