98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
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 { Button } from "@/components/ui/button";
|
|
import { labelText } from "../lib/labels";
|
|
|
|
type LabelInput = components["schemas"]["LabelInput"];
|
|
|
|
const KINDS = ["person", "organisation", "place"] as const;
|
|
|
|
export function AuthoritiesPage() {
|
|
const { t, i18n } = useTranslation();
|
|
const { kind } = useParams();
|
|
const lang = i18n.language.startsWith("sv") ? "sv" : "en";
|
|
|
|
const isValidKind = (KINDS as readonly string[]).includes(kind ?? "");
|
|
|
|
const { data: authorities } = useAuthorities(isValidKind ? (kind as string) : "person");
|
|
const create = useCreateAuthority();
|
|
|
|
const [labels, setLabels] = useState<LabelInput[]>([]);
|
|
const [error, setError] = useState(false);
|
|
|
|
if (!isValidKind) return <Navigate to="/authorities/person" replace />;
|
|
|
|
const onCreate = (event: FormEvent) => {
|
|
event.preventDefault();
|
|
|
|
if (!labels.some((l) => l.lang === "en" && l.label)) {
|
|
setError(true);
|
|
return;
|
|
}
|
|
|
|
setError(false);
|
|
create.mutate(
|
|
{ kind: kind as string, external_uri: null, labels },
|
|
{ onSuccess: () => setLabels([]) },
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="overflow-auto p-4">
|
|
<div className="mb-3 flex gap-2">
|
|
{KINDS.map((k) => (
|
|
<NavLink
|
|
key={k}
|
|
to={`/authorities/${k}`}
|
|
className={({ isActive }) =>
|
|
`rounded px-3 py-1 text-sm ${isActive ? "bg-neutral-800 text-white" : "border"}`
|
|
}
|
|
>
|
|
{t(`authorities.${k}`)}
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
|
|
<ul className="mb-4">
|
|
{authorities?.length === 0 && (
|
|
<li className="text-sm text-neutral-500">{t("authorities.empty")}</li>
|
|
)}
|
|
{authorities?.map((a) => (
|
|
<li key={a.id} className="border-b py-1 text-sm">
|
|
{labelText(a.labels, lang)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<form onSubmit={onCreate} className="space-y-2 border-t pt-3">
|
|
<div className="text-sm font-medium">
|
|
{t("authorities.new")} · {t(`authorities.${kind}`)}
|
|
</div>
|
|
|
|
<LabelEditor value={labels} onChange={setLabels} />
|
|
|
|
{error && (
|
|
<p role="alert" className="text-xs text-red-600">
|
|
{t("form.required")}
|
|
</p>
|
|
)}
|
|
|
|
{create.isError && (
|
|
<p role="alert" className="text-xs text-red-600">
|
|
{t("form.rejected")}
|
|
</p>
|
|
)}
|
|
|
|
<Button type="submit" size="sm" disabled={create.isPending}>
|
|
{t("authorities.create")}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|