refactor(web): term/authority rows + pages adopt shared CRUD components (#64)
This commit is contained in:
@@ -1,26 +1,16 @@
|
||||
import { useState, type FormEvent } from "react";
|
||||
import { NavLink, Navigate, useParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import type { components } from "../api/schema";
|
||||
import { useAuthorities, useCreateAuthority } from "../api/queries";
|
||||
import { LabelEditor } from "../components/label-editor";
|
||||
import { MutationError } from "../components/mutation-error";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { FilteredRecordList } from "../components/filtered-record-list";
|
||||
import { LabelledRecordCreateForm } from "../components/labelled-record-create-form";
|
||||
import { PageTitle } from "@/components/ui/page-title";
|
||||
import { ListSkeleton } from "@/components/ui/skeletons";
|
||||
import { AuthorityRow } from "./authority-row";
|
||||
import { byLabel } from "../lib/sort";
|
||||
import { labelText } from "../lib/labels";
|
||||
import { focusRing } from "../lib/focus-ring";
|
||||
import { useDocumentTitle } from "../lib/use-document-title";
|
||||
import { useBreadcrumb } from "../shell/use-breadcrumb";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type LabelInput = components["schemas"]["LabelInput"];
|
||||
|
||||
const KINDS = ["person", "organisation", "place"] as const;
|
||||
|
||||
export function AuthoritiesPage() {
|
||||
@@ -34,36 +24,11 @@ export function AuthoritiesPage() {
|
||||
const { data: authorities, isLoading, isError } = useAuthorities(currentKind);
|
||||
const create = useCreateAuthority();
|
||||
|
||||
const [labels, setLabels] = useState<LabelInput[]>([]);
|
||||
const [error, setError] = useState(false);
|
||||
const [filter, setFilter] = useState("");
|
||||
const [uri, setUri] = useState("");
|
||||
|
||||
useDocumentTitle(t("nav.authorities"));
|
||||
useBreadcrumb([{ label: t("nav.authorities") }]);
|
||||
|
||||
if (!isValidKind) return <Navigate to="/authorities/person" replace />;
|
||||
|
||||
const onCreate = (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!labels.some((l) => l.label)) {
|
||||
setError(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setError(false);
|
||||
create.mutate(
|
||||
{ kind: kind as string, external_uri: uri.trim() || null, labels },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setLabels([]);
|
||||
setUri("");
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-auto p-4">
|
||||
<PageTitle className="mb-3">{t("nav.authorities")}</PageTitle>
|
||||
@@ -81,73 +46,24 @@ export function AuthoritiesPage() {
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="mb-3">
|
||||
<Input
|
||||
aria-label={t("common.filter")}
|
||||
placeholder={t("common.filter")}
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<FilteredRecordList
|
||||
records={authorities}
|
||||
lang={lang}
|
||||
isLoading={isLoading}
|
||||
isError={isError}
|
||||
loadErrorText={t("authorities.loadError")}
|
||||
emptyText={t("authorities.empty")}
|
||||
renderRow={(a) => <AuthorityRow authority={a} kind={currentKind} lang={lang} />}
|
||||
/>
|
||||
|
||||
{isLoading ? (
|
||||
<ListSkeleton className="mb-4" rows={5} />
|
||||
) : (
|
||||
(() => {
|
||||
const q = filter.trim().toLowerCase();
|
||||
const rows = [...(authorities ?? [])]
|
||||
.filter((a) => !q || labelText(a.labels, lang).toLowerCase().includes(q))
|
||||
.sort(byLabel(lang));
|
||||
|
||||
return (
|
||||
<ul className="mb-4">
|
||||
{isError && (
|
||||
<li className="text-sm text-destructive">{t("authorities.loadError")}</li>
|
||||
)}
|
||||
{!isError && authorities?.length === 0 && (
|
||||
<li className="text-sm text-muted-foreground">{t("authorities.empty")}</li>
|
||||
)}
|
||||
{!isError && authorities && authorities.length > 0 && rows.length === 0 && (
|
||||
<li className="text-sm text-muted-foreground">{t("common.noMatches")}</li>
|
||||
)}
|
||||
{rows.map((a) => (
|
||||
<AuthorityRow key={a.id} authority={a} kind={currentKind} lang={lang} />
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
|
||||
<form onSubmit={onCreate} className="space-y-2 border-t pt-3">
|
||||
<div className="text-sm font-medium">
|
||||
{t("authorities.new")} · {t(`authorities.${currentKind}`)}
|
||||
</div>
|
||||
|
||||
<LabelEditor value={labels} onChange={setLabels} />
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="auth-create-uri">{t("labels.externalUri")}</Label>
|
||||
<Input
|
||||
id="auth-create-uri"
|
||||
type="url"
|
||||
placeholder={t("labels.uriPlaceholder")}
|
||||
value={uri}
|
||||
onChange={(e) => setUri(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p role="alert" className="text-xs text-destructive">
|
||||
{t("form.required")}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<MutationError error={create.error} />
|
||||
|
||||
<Button type="submit" size="sm" disabled={create.isPending}>
|
||||
{t("authorities.create")}
|
||||
</Button>
|
||||
</form>
|
||||
<LabelledRecordCreateForm
|
||||
heading={`${t("authorities.new")} · ${t(`authorities.${currentKind}`)}`}
|
||||
submitLabel={t("authorities.create")}
|
||||
pending={create.isPending}
|
||||
error={create.error}
|
||||
onCreate={(labels, uri, reset) =>
|
||||
create.mutate({ kind: currentKind, external_uri: uri, labels }, { onSuccess: reset })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,90 +1,24 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import type { components } from "../api/schema";
|
||||
import { useUpdateAuthority, useDeleteAuthority } from "../api/queries";
|
||||
import { LabelEditor } from "../components/label-editor";
|
||||
import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
|
||||
import { MutationError } from "../components/mutation-error";
|
||||
import { ExternalUriLink } from "../components/external-uri-link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { labelText } from "../lib/labels";
|
||||
import { LabelledRecordRow } from "../components/labelled-record-row";
|
||||
|
||||
type AuthorityView = components["schemas"]["AuthorityView"];
|
||||
type LabelInput = components["schemas"]["LabelInput"];
|
||||
|
||||
export function AuthorityRow({ authority, kind, lang }: { authority: AuthorityView; kind: string; lang: string }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const updateAuthority = useUpdateAuthority();
|
||||
const deleteAuthority = useDeleteAuthority();
|
||||
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [labels, setLabels] = useState<LabelInput[]>(authority.labels as LabelInput[]);
|
||||
const [uri, setUri] = useState(authority.external_uri ?? "");
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<li className="space-y-2 border-b py-2">
|
||||
<LabelEditor value={labels} onChange={setLabels} />
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor={`auth-uri-${authority.id}`}>{t("labels.externalUri")}</Label>
|
||||
<Input
|
||||
id={`auth-uri-${authority.id}`}
|
||||
type="url"
|
||||
placeholder={t("labels.uriPlaceholder")}
|
||||
value={uri}
|
||||
onChange={(e) => setUri(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
disabled={updateAuthority.isPending}
|
||||
onClick={() =>
|
||||
updateAuthority.mutate(
|
||||
{ id: authority.id, kind, external_uri: uri.trim() || null, labels },
|
||||
{ onSuccess: () => setEditing(false) },
|
||||
)
|
||||
}
|
||||
>
|
||||
{t("actions.save")}
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
|
||||
{t("form.cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
<MutationError error={updateAuthority.error} />
|
||||
</li>
|
||||
);
|
||||
}
|
||||
const update = useUpdateAuthority();
|
||||
const del = useDeleteAuthority();
|
||||
|
||||
return (
|
||||
<li className="flex items-center gap-2 border-b py-1 text-sm">
|
||||
<div className="flex-1">
|
||||
<div>{labelText(authority.labels, lang)}</div>
|
||||
{authority.external_uri && <ExternalUriLink uri={authority.external_uri} />}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
updateAuthority.reset();
|
||||
setLabels(authority.labels as LabelInput[]);
|
||||
setUri(authority.external_uri ?? "");
|
||||
setEditing(true);
|
||||
}}
|
||||
>
|
||||
{t("actions.edit")}
|
||||
</Button>
|
||||
<DeleteConfirmDialog
|
||||
description={t("actions.confirmDeleteAuthority")}
|
||||
onConfirm={() => deleteAuthority.mutateAsync({ id: authority.id, kind })}
|
||||
/>
|
||||
</li>
|
||||
<LabelledRecordRow
|
||||
record={{ ...authority, external_uri: authority.external_uri ?? null }}
|
||||
lang={lang}
|
||||
deleteConfirmKey="actions.confirmDeleteAuthority"
|
||||
savePending={update.isPending}
|
||||
saveError={update.error}
|
||||
onEditOpen={() => update.reset()}
|
||||
onSave={(labels, uri, done) =>
|
||||
update.mutate({ id: authority.id, kind, external_uri: uri, labels }, { onSuccess: done })}
|
||||
onDelete={() => del.mutateAsync({ id: authority.id, kind })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
+14
-74
@@ -1,84 +1,24 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import type { components } from "../api/schema";
|
||||
import { useUpdateTerm, useDeleteTerm } from "../api/queries";
|
||||
import { LabelEditor } from "../components/label-editor";
|
||||
import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
|
||||
import { MutationError } from "../components/mutation-error";
|
||||
import { ExternalUriLink } from "../components/external-uri-link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { labelText } from "../lib/labels";
|
||||
import { LabelledRecordRow } from "../components/labelled-record-row";
|
||||
|
||||
type TermView = components["schemas"]["TermView"];
|
||||
type LabelInput = components["schemas"]["LabelInput"];
|
||||
|
||||
export function TermRow({ vocabularyId, term, lang }: { vocabularyId: string; term: TermView; lang: string }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const updateTerm = useUpdateTerm();
|
||||
const deleteTerm = useDeleteTerm();
|
||||
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [labels, setLabels] = useState<LabelInput[]>(term.labels as LabelInput[]);
|
||||
const [uri, setUri] = useState(term.external_uri ?? "");
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<li className="space-y-2 border-b py-2">
|
||||
<LabelEditor value={labels} onChange={setLabels} />
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor={`term-uri-${term.id}`}>{t("labels.externalUri")}</Label>
|
||||
<Input id={`term-uri-${term.id}`} type="url" placeholder={t("labels.uriPlaceholder")} value={uri} onChange={(e) => setUri(e.target.value)} />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
disabled={updateTerm.isPending}
|
||||
onClick={() =>
|
||||
updateTerm.mutate(
|
||||
{ vocabularyId, termId: term.id, external_uri: uri.trim() || null, labels },
|
||||
{ onSuccess: () => setEditing(false) },
|
||||
)
|
||||
}
|
||||
>
|
||||
{t("actions.save")}
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
|
||||
{t("form.cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
<MutationError error={updateTerm.error} />
|
||||
</li>
|
||||
);
|
||||
}
|
||||
const update = useUpdateTerm();
|
||||
const del = useDeleteTerm();
|
||||
|
||||
return (
|
||||
<li className="flex items-center gap-2 border-b py-1 text-sm">
|
||||
<div className="flex-1">
|
||||
<div>{labelText(term.labels, lang)}</div>
|
||||
{term.external_uri && <ExternalUriLink uri={term.external_uri} />}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
updateTerm.reset();
|
||||
setLabels(term.labels as LabelInput[]);
|
||||
setUri(term.external_uri ?? "");
|
||||
setEditing(true);
|
||||
}}
|
||||
>
|
||||
{t("actions.edit")}
|
||||
</Button>
|
||||
<DeleteConfirmDialog
|
||||
description={t("actions.confirmDeleteTerm")}
|
||||
onConfirm={() => deleteTerm.mutateAsync({ vocabularyId, termId: term.id })}
|
||||
/>
|
||||
</li>
|
||||
<LabelledRecordRow
|
||||
record={{ ...term, external_uri: term.external_uri ?? null }}
|
||||
lang={lang}
|
||||
deleteConfirmKey="actions.confirmDeleteTerm"
|
||||
savePending={update.isPending}
|
||||
saveError={update.error}
|
||||
onEditOpen={() => update.reset()}
|
||||
onSave={(labels, uri, done) =>
|
||||
update.mutate({ vocabularyId, termId: term.id, external_uri: uri, labels }, { onSuccess: done })}
|
||||
onDelete={() => del.mutateAsync({ vocabularyId, termId: term.id })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,41 +1,20 @@
|
||||
import { useState, type FormEvent } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import type { components } from "../api/schema";
|
||||
import { useTerms, useAddTerm, useVocabularies } from "../api/queries";
|
||||
import { byLabel } from "../lib/sort";
|
||||
import { labelText } from "../lib/labels";
|
||||
import { useBreadcrumb } from "../shell/use-breadcrumb";
|
||||
import { LabelEditor } from "../components/label-editor";
|
||||
import { MutationError } from "../components/mutation-error";
|
||||
import { FilteredRecordList } from "../components/filtered-record-list";
|
||||
import { LabelledRecordCreateForm } from "../components/labelled-record-create-form";
|
||||
import { TermRow } from "./term-row";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { ListSkeleton } from "@/components/ui/skeletons";
|
||||
|
||||
type LabelInput = components["schemas"]["LabelInput"];
|
||||
|
||||
export function VocabularyTerms() {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const lang = i18n.language.startsWith("sv") ? "sv" : "en";
|
||||
|
||||
const { data: terms, isLoading, isError } = useTerms(id);
|
||||
|
||||
const addTerm = useAddTerm();
|
||||
|
||||
const [labels, setLabels] = useState<LabelInput[]>([]);
|
||||
|
||||
const [uri, setUri] = useState("");
|
||||
|
||||
const [filter, setFilter] = useState("");
|
||||
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
const { data: vocabularies } = useVocabularies();
|
||||
const vocabKey = vocabularies?.find((v) => v.id === id)?.key;
|
||||
|
||||
@@ -47,81 +26,28 @@ export function VocabularyTerms() {
|
||||
|
||||
if (!id) return null;
|
||||
|
||||
const onAdd = (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!labels.some((l) => l.label)) {
|
||||
setError(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setError(false);
|
||||
|
||||
addTerm.mutate(
|
||||
{ vocabularyId: id, external_uri: uri.trim() || null, labels },
|
||||
{ onSuccess: () => { setLabels([]); setUri(""); } },
|
||||
);
|
||||
};
|
||||
|
||||
const q = filter.trim().toLowerCase();
|
||||
const rows = [...(terms ?? [])]
|
||||
.filter((term) => !q || labelText(term.labels, lang).toLowerCase().includes(q))
|
||||
.sort(byLabel(lang));
|
||||
|
||||
return (
|
||||
<div className="overflow-auto p-4">
|
||||
<div className="mb-2 label-caption">
|
||||
{t("vocab.terms")}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Input
|
||||
aria-label={t("common.filter")}
|
||||
placeholder={t("common.filter")}
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<ListSkeleton className="mb-4" rows={5} />
|
||||
) : (
|
||||
<ul className="mb-4">
|
||||
{isError && (
|
||||
<li className="text-sm text-destructive">{t("vocab.loadError")}</li>
|
||||
)}
|
||||
{!isError && terms?.length === 0 && (
|
||||
<li className="text-sm text-muted-foreground">{t("vocab.noTerms")}</li>
|
||||
)}
|
||||
{!isError && terms && terms.length > 0 && rows.length === 0 && (
|
||||
<li className="text-sm text-muted-foreground">{t("common.noMatches")}</li>
|
||||
)}
|
||||
{rows.map((term) => (
|
||||
<TermRow key={term.id} vocabularyId={id} term={term} lang={lang} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<form onSubmit={onAdd} className="space-y-2 border-t pt-3">
|
||||
<div className="text-sm font-medium">{t("vocab.addTerm")}</div>
|
||||
<LabelEditor value={labels} onChange={setLabels} />
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="term-uri">{t("labels.externalUri")}</Label>
|
||||
<Input
|
||||
id="term-uri"
|
||||
type="url"
|
||||
placeholder={t("labels.uriPlaceholder")}
|
||||
value={uri}
|
||||
onChange={(e) => setUri(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<p role="alert" className="text-xs text-destructive">
|
||||
{t("form.required")}
|
||||
</p>
|
||||
)}
|
||||
<MutationError error={addTerm.error} />
|
||||
<Button type="submit" size="sm" disabled={addTerm.isPending}>
|
||||
{t("vocab.addTerm")}
|
||||
</Button>
|
||||
</form>
|
||||
<div className="mb-2 label-caption">{t("vocab.terms")}</div>
|
||||
|
||||
<FilteredRecordList
|
||||
records={terms}
|
||||
lang={lang}
|
||||
isLoading={isLoading}
|
||||
isError={isError}
|
||||
loadErrorText={t("vocab.loadError")}
|
||||
emptyText={t("vocab.noTerms")}
|
||||
renderRow={(term) => <TermRow vocabularyId={id} term={term} lang={lang} />}
|
||||
/>
|
||||
|
||||
<LabelledRecordCreateForm
|
||||
heading={t("vocab.addTerm")}
|
||||
submitLabel={t("vocab.addTerm")}
|
||||
pending={addTerm.isPending}
|
||||
error={addTerm.error}
|
||||
onCreate={(labels, uri, reset) =>
|
||||
addTerm.mutate({ vocabularyId: id, external_uri: uri, labels }, { onSuccess: reset })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user