Create categories and tags in place from every assignment picker
Category and tag inputs across the transaction editor, Analyse corrections, and merchant defaults now mint missing entries without a detour through the registry pages. A bare name lands under the kind's root, "Parent / Name" targets that parent, and typing an existing name selects it instead of duplicating. Enter only creates when nothing matches, server rejections surface inline in the dropdown, and assignment pickers offer leaf categories only — the shape the server validates. Mutations now return the accepted state so callers can select the id the server just minted, and the revision-keyed remounts on Transactions and the registry pages are gone: they closed the open modal and threw away pending edits the moment any in-modal creation committed.
This commit is contained in:
Lars Nolden
+40
-19
@@ -16,7 +16,9 @@ import type {
|
||||
} from "./api";
|
||||
import { categoryPath, money, request } from "./api";
|
||||
import {
|
||||
CategoryCombobox,
|
||||
Combobox,
|
||||
createTag,
|
||||
DateField,
|
||||
Empty,
|
||||
ErrorMessage,
|
||||
@@ -24,12 +26,15 @@ import {
|
||||
Modal,
|
||||
ModelOptions,
|
||||
} from "./ui";
|
||||
import type { Mutate } from "./ui";
|
||||
export function Classification({
|
||||
state,
|
||||
acceptState,
|
||||
mutate,
|
||||
}: {
|
||||
state: State;
|
||||
acceptState: (state: State, message?: string) => void;
|
||||
mutate: Mutate;
|
||||
}) {
|
||||
const dates = state.data.transactions.map((t) => t.facts.booking_date).sort();
|
||||
const [from, setFrom] = useState(dates[0] || "");
|
||||
@@ -482,6 +487,7 @@ export function Classification({
|
||||
value={effective(change)}
|
||||
edited={change.id in edits}
|
||||
disabled={busy}
|
||||
mutate={mutate}
|
||||
onChange={(value) => correct(change, value)}
|
||||
/>
|
||||
</div>
|
||||
@@ -667,14 +673,18 @@ interface CorrectionValue {
|
||||
}
|
||||
// CorrectionEditor is the "Proposed" side of a review row, editable in place.
|
||||
// Category and tags are free-text inputs that autocomplete against the
|
||||
// existing taxonomy; the category list is limited to leaves of the change's
|
||||
// kind because that is what validation will accept.
|
||||
// existing taxonomy and can create a missing entry in place; the category
|
||||
// list is limited to leaves of the change's kind because that is what
|
||||
// validation will accept. Creating mid-review bumps the journal revision,
|
||||
// which the apply path tolerates as long as the transactions themselves are
|
||||
// untouched.
|
||||
function CorrectionEditor({
|
||||
data,
|
||||
change,
|
||||
value,
|
||||
edited,
|
||||
disabled,
|
||||
mutate,
|
||||
onChange,
|
||||
}: {
|
||||
data: Dataset;
|
||||
@@ -682,15 +692,9 @@ function CorrectionEditor({
|
||||
value: CorrectionValue;
|
||||
edited: boolean;
|
||||
disabled: boolean;
|
||||
mutate: Mutate;
|
||||
onChange: (value: CorrectionValue) => void;
|
||||
}) {
|
||||
const categories = data.categories
|
||||
.filter(
|
||||
(c) =>
|
||||
c.kind === change.after.kind &&
|
||||
!data.categories.some((child) => child.parent_id === c.id),
|
||||
)
|
||||
.map((c) => ({ value: c.id, label: categoryPath(data, c.id) }));
|
||||
const addable = data.tags
|
||||
.filter((t) => !value.tag_ids.includes(t.id))
|
||||
.map((t) => ({ value: t.id, label: t.name }));
|
||||
@@ -728,13 +732,14 @@ function CorrectionEditor({
|
||||
<div>
|
||||
<dt>Category</dt>
|
||||
<dd>
|
||||
<Combobox
|
||||
options={categories}
|
||||
<CategoryCombobox
|
||||
data={data}
|
||||
kind={change.after.kind}
|
||||
leavesOnly
|
||||
mutate={mutate}
|
||||
value={value.category_id}
|
||||
disabled={disabled}
|
||||
onChange={(category_id) => onChange({ ...value, category_id })}
|
||||
placeholder="Search categories"
|
||||
emptyText="No matching category. Create it in Categories first."
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
@@ -763,16 +768,32 @@ function CorrectionEditor({
|
||||
<Combobox
|
||||
options={addable}
|
||||
value=""
|
||||
disabled={disabled || !addable.length}
|
||||
disabled={disabled}
|
||||
onChange={(id) =>
|
||||
onChange({ ...value, tag_ids: [...value.tag_ids, id] })
|
||||
}
|
||||
placeholder={
|
||||
data.tags.length
|
||||
? "Add tag"
|
||||
: "No tags yet — create them in Tags"
|
||||
placeholder={data.tags.length ? "Add tag" : "Add or create tag"}
|
||||
emptyText="No matching tag. Type a name to create it."
|
||||
create={(text) =>
|
||||
data.tags.some(
|
||||
(t) => t.name.toLowerCase() === text.toLowerCase(),
|
||||
)
|
||||
? []
|
||||
: [
|
||||
{
|
||||
key: "tag",
|
||||
label: `Create tag "${text}"`,
|
||||
run: async () =>
|
||||
onChange({
|
||||
...value,
|
||||
tag_ids: [
|
||||
...value.tag_ids,
|
||||
await createTag(mutate, data, text),
|
||||
],
|
||||
}),
|
||||
},
|
||||
]
|
||||
}
|
||||
emptyText="No matching tag. Create it in Tags first."
|
||||
/>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
+22
-18
@@ -21,7 +21,7 @@ import type {
|
||||
} from "./api";
|
||||
import { categoryPath, request } from "./api";
|
||||
import {
|
||||
CategoryOptions,
|
||||
CategoryCombobox,
|
||||
Empty,
|
||||
ErrorMessage,
|
||||
Field,
|
||||
@@ -550,17 +550,15 @@ function RegistryEditor({
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Parent category">
|
||||
<select
|
||||
<CategoryCombobox
|
||||
data={data}
|
||||
kind={kind}
|
||||
exclude={[...descendants]}
|
||||
emptyLabel="No parent (root)"
|
||||
mutate={mutate}
|
||||
value={parent}
|
||||
onChange={(e) => setParent(e.target.value)}
|
||||
>
|
||||
<option value="">No parent (root)</option>
|
||||
<CategoryOptions
|
||||
data={data}
|
||||
kind={kind}
|
||||
exclude={[...descendants]}
|
||||
/>
|
||||
</select>
|
||||
onChange={setParent}
|
||||
/>
|
||||
</Field>
|
||||
<p className="muted">
|
||||
Changing the parent moves this category and its entire subtree.
|
||||
@@ -590,15 +588,21 @@ function RegistryEditor({
|
||||
Use these defaults when this merchant is recognized
|
||||
</label>
|
||||
<Field label="Default category">
|
||||
<select
|
||||
<CategoryCombobox
|
||||
data={data}
|
||||
leavesOnly
|
||||
emptyLabel="No default category"
|
||||
mutate={mutate}
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
>
|
||||
<option value="">No default category</option>
|
||||
<CategoryOptions data={data} />
|
||||
</select>
|
||||
onChange={setCategory}
|
||||
/>
|
||||
</Field>
|
||||
<TagPicker data={data} value={tags} onChange={setTags} />
|
||||
<TagPicker
|
||||
data={data}
|
||||
value={tags}
|
||||
onChange={setTags}
|
||||
mutate={mutate}
|
||||
/>
|
||||
<p className="muted">
|
||||
Defaults are only used when explicitly enabled. Editing defaults
|
||||
does not rewrite existing transactions.
|
||||
|
||||
@@ -18,7 +18,7 @@ import type {
|
||||
} from "./api";
|
||||
import { categoryPath, money } from "./api";
|
||||
import {
|
||||
CategoryOptions,
|
||||
CategoryCombobox,
|
||||
Empty,
|
||||
ErrorMessage,
|
||||
Field,
|
||||
@@ -453,16 +453,15 @@ function TransactionEditor({
|
||||
</div>
|
||||
{value.kind !== "transfer" && value.kind !== "investment" && (
|
||||
<Field label="Category">
|
||||
<select
|
||||
<CategoryCombobox
|
||||
data={data}
|
||||
kind={value.kind}
|
||||
leavesOnly
|
||||
required
|
||||
mutate={mutate}
|
||||
value={value.category_id || ""}
|
||||
onChange={(e) =>
|
||||
setValue({ ...value, category_id: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Choose category</option>
|
||||
<CategoryOptions data={data} kind={value.kind} />
|
||||
</select>
|
||||
onChange={(category_id) => setValue({ ...value, category_id })}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
<TransferLink
|
||||
@@ -475,6 +474,7 @@ function TransactionEditor({
|
||||
data={data}
|
||||
value={value.tag_ids}
|
||||
onChange={(tag_ids) => setValue({ ...value, tag_ids })}
|
||||
mutate={mutate}
|
||||
/>
|
||||
<details open>
|
||||
<summary>
|
||||
|
||||
+12
-22
@@ -136,13 +136,12 @@ function App() {
|
||||
"/api/rebuild",
|
||||
].includes(path);
|
||||
try {
|
||||
acceptState(
|
||||
await request<State>(
|
||||
path,
|
||||
revisionless ? body : { revision: state.revision, ...body },
|
||||
),
|
||||
message,
|
||||
const next = await request<State>(
|
||||
path,
|
||||
revisionless ? body : { revision: state.revision, ...body },
|
||||
);
|
||||
acceptState(next, message);
|
||||
return next;
|
||||
} catch (err) {
|
||||
if (err instanceof APIError && err.status === 409) setConflict(true);
|
||||
throw err;
|
||||
@@ -352,7 +351,6 @@ function App() {
|
||||
)}
|
||||
{page === "transactions" && (
|
||||
<Transactions
|
||||
key={state.revision}
|
||||
data={state.data}
|
||||
filter={filter}
|
||||
setFilter={setFilter}
|
||||
@@ -361,7 +359,6 @@ function App() {
|
||||
)}
|
||||
{page === "categories" && (
|
||||
<Registry
|
||||
key={`categories-${state.revision}`}
|
||||
entity="category"
|
||||
data={state.data}
|
||||
mutate={mutate}
|
||||
@@ -371,24 +368,13 @@ function App() {
|
||||
/>
|
||||
)}
|
||||
{page === "tags" && (
|
||||
<Registry
|
||||
key={`tags-${state.revision}`}
|
||||
entity="tag"
|
||||
data={state.data}
|
||||
mutate={mutate}
|
||||
/>
|
||||
<Registry entity="tag" data={state.data} mutate={mutate} />
|
||||
)}
|
||||
{page === "merchants" && (
|
||||
<Registry
|
||||
key={`merchants-${state.revision}`}
|
||||
entity="merchant"
|
||||
data={state.data}
|
||||
mutate={mutate}
|
||||
/>
|
||||
<Registry entity="merchant" data={state.data} mutate={mutate} />
|
||||
)}
|
||||
{page === "instruments" && (
|
||||
<Registry
|
||||
key={`instruments-${state.revision}`}
|
||||
entity="instrument"
|
||||
data={state.data}
|
||||
mutate={mutate}
|
||||
@@ -409,7 +395,11 @@ function App() {
|
||||
/>
|
||||
)}
|
||||
{page === "classification" && (
|
||||
<Classification state={state} acceptState={acceptState} />
|
||||
<Classification
|
||||
state={state}
|
||||
acceptState={acceptState}
|
||||
mutate={mutate}
|
||||
/>
|
||||
)}
|
||||
{page === "settings" && (
|
||||
<Settings
|
||||
|
||||
@@ -966,6 +966,23 @@ tbody tr:hover {
|
||||
color: #546779;
|
||||
padding: 0 5px;
|
||||
}
|
||||
/* Inline tag creation inside the picker: a small input plus one button, so a
|
||||
missing tag never forces a detour through the Tags page. */
|
||||
.tag-add {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.tag-add input {
|
||||
width: 140px;
|
||||
padding: 6px 9px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tag-add-error {
|
||||
flex-basis: 100%;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
}
|
||||
.check-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -2075,6 +2092,17 @@ footer span:first-child {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.combo-option.create {
|
||||
color: var(--emerald);
|
||||
font-weight: 600;
|
||||
}
|
||||
.combo-option.create svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.combo-empty.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
/* The proposed side of a review row is editable in place: compact combobox
|
||||
inputs so a correction fits the diff card, removable chips for tags. */
|
||||
.diff-value .combo > input {
|
||||
|
||||
+265
-21
@@ -7,8 +7,9 @@ import {
|
||||
CalendarDays,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
} from "lucide-react";
|
||||
import type { Dataset, Filter, VerifiedModel } from "./api";
|
||||
import type { Category, Dataset, Filter, State, VerifiedModel } from "./api";
|
||||
import {
|
||||
categoryPath,
|
||||
DEFAULT_MONTHS,
|
||||
@@ -103,6 +104,14 @@ export interface ComboOption {
|
||||
label: string;
|
||||
icon?: ReactNode;
|
||||
}
|
||||
// ComboCreate is one "create it now" row a Combobox offers when the typed
|
||||
// text matches nothing: running it is expected to persist the new entity and
|
||||
// select it through the caller's own onChange.
|
||||
export interface ComboCreate {
|
||||
key: string;
|
||||
label: string;
|
||||
run: () => Promise<void> | void;
|
||||
}
|
||||
// Combobox is a free-text input that autocompletes against a fixed option
|
||||
// list: typing filters by label, Enter takes the exact or only match, and
|
||||
// picking an option reports its value. The caller keeps working with stable
|
||||
@@ -116,6 +125,7 @@ export function Combobox({
|
||||
required = false,
|
||||
adornment,
|
||||
emptyText = "No matches.",
|
||||
create,
|
||||
}: {
|
||||
options: ComboOption[];
|
||||
value: string;
|
||||
@@ -125,7 +135,10 @@ export function Combobox({
|
||||
required?: boolean;
|
||||
adornment?: ReactNode;
|
||||
emptyText?: string;
|
||||
create?: (text: string) => ComboCreate[];
|
||||
}) {
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [createError, setCreateError] = useState("");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const filter = query.trim().toLowerCase();
|
||||
@@ -137,10 +150,25 @@ export function Combobox({
|
||||
? [exact, ...matches.filter((o) => o !== exact).slice(0, 59)]
|
||||
: matches.slice(0, 60);
|
||||
const selected = options.find((o) => o.value === value);
|
||||
const creations =
|
||||
create && filter && !exact && !disabled ? create(query.trim()) : [];
|
||||
const pick = (v: string) => {
|
||||
onChange(v);
|
||||
setOpen(false);
|
||||
};
|
||||
const runCreate = async (c: ComboCreate) => {
|
||||
if (creating) return;
|
||||
setCreating(true);
|
||||
setCreateError("");
|
||||
try {
|
||||
await c.run();
|
||||
setOpen(false);
|
||||
} catch (err) {
|
||||
setCreateError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="combo">
|
||||
<input
|
||||
@@ -157,6 +185,7 @@ export function Combobox({
|
||||
}}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
setCreateError("");
|
||||
setOpen(true);
|
||||
}}
|
||||
onBlur={() => setOpen(false)}
|
||||
@@ -166,6 +195,10 @@ export function Combobox({
|
||||
e.preventDefault();
|
||||
const hit = exact ?? (shown.length === 1 ? shown[0] : undefined);
|
||||
if (hit) pick(hit.value);
|
||||
// Enter creates only when nothing matches at all: with matches
|
||||
// still listed, minting from a half-typed name is too easy.
|
||||
else if (!shown.length && creations.length === 1)
|
||||
void runCreate(creations[0]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -189,7 +222,24 @@ export function Combobox({
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{shown.length === 0 && <li className="combo-empty">{emptyText}</li>}
|
||||
{creations.map((c) => (
|
||||
<li key={c.key}>
|
||||
<button
|
||||
type="button"
|
||||
className="combo-option create"
|
||||
disabled={creating}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => void runCreate(c)}
|
||||
>
|
||||
<Plus size={14} />
|
||||
<span>{creating ? "Creating…" : c.label}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{createError && <li className="combo-empty error">{createError}</li>}
|
||||
{shown.length === 0 && creations.length === 0 && !createError && (
|
||||
<li className="combo-empty">{emptyText}</li>
|
||||
)}
|
||||
{matches.length > shown.length && (
|
||||
<li className="combo-empty">
|
||||
{matches.length - shown.length} more — keep typing to narrow down.
|
||||
@@ -461,38 +511,135 @@ export function Empty({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// createTag persists a new tag and returns its server-minted id, found by
|
||||
// diffing the returned state against the dataset the caller rendered with.
|
||||
export async function createTag(
|
||||
mutate: Mutate,
|
||||
data: Dataset,
|
||||
name: string,
|
||||
): Promise<string> {
|
||||
const next = await mutate(
|
||||
"/api/tags",
|
||||
{ tag: { id: "", name, hint: "" } },
|
||||
`Tag "${name}" created`,
|
||||
);
|
||||
const created = next.data.tags.find(
|
||||
(t) => !data.tags.some((o) => o.id === t.id),
|
||||
);
|
||||
if (!created)
|
||||
throw new Error(`The server did not return the new tag "${name}".`);
|
||||
return created.id;
|
||||
}
|
||||
export async function createCategory(
|
||||
mutate: Mutate,
|
||||
data: Dataset,
|
||||
category: { name: string; parent_id: string; kind: string },
|
||||
): Promise<string> {
|
||||
const next = await mutate(
|
||||
"/api/categories",
|
||||
{ category: { id: "", hint: "", ...category } },
|
||||
`Category "${category.name}" created`,
|
||||
);
|
||||
const created = next.data.categories.find(
|
||||
(c) => !data.categories.some((o) => o.id === c.id),
|
||||
);
|
||||
if (!created)
|
||||
throw new Error(
|
||||
`The server did not return the new category "${category.name}".`,
|
||||
);
|
||||
return created.id;
|
||||
}
|
||||
export function TagPicker({
|
||||
data,
|
||||
value,
|
||||
onChange,
|
||||
mutate,
|
||||
}: {
|
||||
data: Dataset;
|
||||
value: string[];
|
||||
onChange: (ids: string[]) => void;
|
||||
mutate?: Mutate;
|
||||
}) {
|
||||
const [draft, setDraft] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const add = async () => {
|
||||
const name = draft.trim();
|
||||
if (!name || busy || !mutate) return;
|
||||
// An existing tag of the same name is checked instead of duplicated.
|
||||
const existing = data.tags.find(
|
||||
(t) => t.name.toLowerCase() === name.toLowerCase(),
|
||||
);
|
||||
if (existing) {
|
||||
if (!value.includes(existing.id)) onChange([...value, existing.id]);
|
||||
setDraft("");
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const id = await createTag(mutate, data, name);
|
||||
onChange([...value, id]);
|
||||
setDraft("");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<fieldset className="tag-picker">
|
||||
<legend>Tags</legend>
|
||||
{data.tags.length ? (
|
||||
data.tags.map((tag) => (
|
||||
<label className="check-chip" key={tag.id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value.includes(tag.id)}
|
||||
onChange={(e) =>
|
||||
onChange(
|
||||
e.target.checked
|
||||
? [...value, tag.id]
|
||||
: value.filter((id) => id !== tag.id),
|
||||
)
|
||||
}
|
||||
/>
|
||||
{tag.name}
|
||||
</label>
|
||||
))
|
||||
) : (
|
||||
{data.tags.map((tag) => (
|
||||
<label className="check-chip" key={tag.id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value.includes(tag.id)}
|
||||
onChange={(e) =>
|
||||
onChange(
|
||||
e.target.checked
|
||||
? [...value, tag.id]
|
||||
: value.filter((id) => id !== tag.id),
|
||||
)
|
||||
}
|
||||
/>
|
||||
{tag.name}
|
||||
</label>
|
||||
))}
|
||||
{!data.tags.length && !mutate && (
|
||||
<small>No tags yet. Create them in Tags.</small>
|
||||
)}
|
||||
{mutate && (
|
||||
<span className="tag-add">
|
||||
<input
|
||||
value={draft}
|
||||
maxLength={200}
|
||||
placeholder="New tag"
|
||||
aria-label="New tag name"
|
||||
disabled={busy}
|
||||
onChange={(e) => {
|
||||
setDraft(e.target.value);
|
||||
setError("");
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
void add();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="icon-button"
|
||||
aria-label="Create tag"
|
||||
disabled={busy || !draft.trim()}
|
||||
onClick={() => void add()}
|
||||
>
|
||||
<Plus size={15} />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{error && <small className="tag-add-error">{error}</small>}
|
||||
</fieldset>
|
||||
);
|
||||
}
|
||||
@@ -517,6 +664,101 @@ export function CategoryOptions({
|
||||
</>
|
||||
);
|
||||
}
|
||||
// CategoryCombobox is the one category picker: options are full paths, and
|
||||
// with a mutate handle an unmatched name can be created in place. A bare name
|
||||
// lands under the kind's root; "Parent / Name" creates under that parent.
|
||||
// leavesOnly matches the server rule that assigned categories must be leaves;
|
||||
// a freshly created category is always a leaf.
|
||||
export function CategoryCombobox({
|
||||
data,
|
||||
value,
|
||||
onChange,
|
||||
mutate,
|
||||
kind,
|
||||
leavesOnly = false,
|
||||
exclude = [],
|
||||
emptyLabel,
|
||||
required = false,
|
||||
disabled = false,
|
||||
placeholder = "Search categories",
|
||||
}: {
|
||||
data: Dataset;
|
||||
value: string;
|
||||
onChange: (id: string) => void;
|
||||
mutate?: Mutate;
|
||||
kind?: string;
|
||||
leavesOnly?: boolean;
|
||||
exclude?: string[];
|
||||
emptyLabel?: string;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
}) {
|
||||
const parents = new Set(
|
||||
data.categories.map((c) => c.parent_id).filter(Boolean),
|
||||
);
|
||||
const eligible = (c: Category) =>
|
||||
(!kind || c.kind === kind) && !exclude.includes(c.id);
|
||||
const options: ComboOption[] = data.categories
|
||||
.filter((c) => eligible(c) && (!leavesOnly || !parents.has(c.id)))
|
||||
.map((c) => ({ value: c.id, label: categoryPath(data, c.id) }));
|
||||
if (emptyLabel) options.unshift({ value: "", label: emptyLabel });
|
||||
const pathOf = (id: string) => categoryPath(data, id).toLowerCase();
|
||||
const taken = (parentID: string, name: string) => {
|
||||
const full = `${parentID ? pathOf(parentID) + " / " : ""}${name.toLowerCase()}`;
|
||||
return data.categories.some((c) => pathOf(c.id) === full);
|
||||
};
|
||||
const create = (text: string): ComboCreate[] => {
|
||||
// Text aiming at the empty option ("No parent…") is a selection, not a
|
||||
// new category name.
|
||||
if (!mutate || emptyLabel?.toLowerCase().includes(text.toLowerCase()))
|
||||
return [];
|
||||
const segments = text
|
||||
.split("/")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
if (!segments.length) return [];
|
||||
const name = segments[segments.length - 1];
|
||||
const row = (parent: Category): ComboCreate => ({
|
||||
key: parent.id,
|
||||
label: `Create "${name}" in ${categoryPath(data, parent.id)}`,
|
||||
run: async () =>
|
||||
onChange(
|
||||
await createCategory(mutate, data, {
|
||||
name,
|
||||
parent_id: parent.id,
|
||||
kind: parent.kind,
|
||||
}),
|
||||
),
|
||||
});
|
||||
if (segments.length > 1) {
|
||||
const prefix = segments.slice(0, -1).join(" / ").toLowerCase();
|
||||
const parent = data.categories.find(
|
||||
(c) => eligible(c) && pathOf(c.id) === prefix,
|
||||
);
|
||||
return parent && !taken(parent.id, name) ? [row(parent)] : [];
|
||||
}
|
||||
return data.categories
|
||||
.filter((c) => !c.parent_id && eligible(c) && !taken(c.id, name))
|
||||
.map(row);
|
||||
};
|
||||
return (
|
||||
<Combobox
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
required={required}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
emptyText={
|
||||
mutate
|
||||
? "No matching category. Type a name to create it."
|
||||
: "No matching category."
|
||||
}
|
||||
create={create}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export function Filters({
|
||||
data,
|
||||
value,
|
||||
@@ -680,8 +922,10 @@ export function FormActions({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// Mutate posts a revisioned change and returns the accepted state, so a
|
||||
// caller can find ids the server just minted.
|
||||
export type Mutate = (
|
||||
path: string,
|
||||
body: Record<string, unknown>,
|
||||
message?: string,
|
||||
) => Promise<void>;
|
||||
) => Promise<State>;
|
||||
|
||||
Reference in New Issue
Block a user