96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import { useState } from "react";
|
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { components } from "../api/schema";
|
|
import { useObject, useUpdateObject, useSetFields, FieldRejection } from "../api/queries";
|
|
import { useBreadcrumb } from "../shell/use-breadcrumb";
|
|
import { ObjectForm, type ObjectCore, type ObjectFormValues } from "./object-form";
|
|
|
|
type AdminObjectView = components["schemas"]["AdminObjectView"];
|
|
|
|
export function ObjectEditForm() {
|
|
const { t } = useTranslation();
|
|
const { id } = useParams();
|
|
|
|
const { data: object, isLoading } = useObject(id!);
|
|
|
|
if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;
|
|
|
|
if (!object) return <p className="p-4 text-sm text-muted-foreground">{t("objects.notFound")}</p>;
|
|
|
|
return <ObjectEditFormLoaded object={object} id={id!} />;
|
|
}
|
|
|
|
function ObjectEditFormLoaded({ object, id }: { object: AdminObjectView; id: string }) {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const update = useUpdateObject();
|
|
const setFields = useSetFields();
|
|
|
|
const locationState = location.state as { fieldsError?: boolean; fieldErrorKey?: string } | null;
|
|
|
|
const [error, setError] = useState<string | null>(() => {
|
|
if (locationState?.fieldErrorKey) return t("form.fieldRejected", { field: locationState.fieldErrorKey });
|
|
if (locationState?.fieldsError) return t("form.rejected");
|
|
return null;
|
|
});
|
|
|
|
const [fieldErrorKey, setFieldErrorKey] = useState<string | null>(
|
|
locationState?.fieldErrorKey ?? null,
|
|
);
|
|
|
|
useBreadcrumb([
|
|
{ label: t("nav.objects"), to: "/objects" },
|
|
{ label: object.object_number, to: `/objects/${id}` },
|
|
{ label: t("actions.edit") },
|
|
]);
|
|
|
|
const core: ObjectCore = {
|
|
object_number: object.object_number,
|
|
object_name: object.object_name,
|
|
number_of_objects: object.number_of_objects,
|
|
brief_description: object.brief_description ?? null,
|
|
current_location: object.current_location ?? null,
|
|
current_owner: object.current_owner ?? null,
|
|
recorder: object.recorder ?? null,
|
|
recording_date: object.recording_date ?? null,
|
|
};
|
|
|
|
const defaults = { core, fields: object.fields };
|
|
|
|
const onSubmit = async (values: ObjectFormValues) => {
|
|
setError(null);
|
|
setFieldErrorKey(null);
|
|
|
|
try {
|
|
await update.mutateAsync({ id, body: values.core });
|
|
await setFields.mutateAsync({ id, fields: values.fields });
|
|
} catch (e) {
|
|
if (e instanceof FieldRejection) {
|
|
setFieldErrorKey(e.field);
|
|
setError(t("form.fieldRejected", { field: e.field }));
|
|
} else {
|
|
setError(t("form.rejected"));
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
navigate(`/objects/${id}`);
|
|
};
|
|
|
|
return (
|
|
<ObjectForm
|
|
mode="edit"
|
|
defaults={defaults}
|
|
formError={error}
|
|
fieldErrorKey={fieldErrorKey}
|
|
onSubmit={onSubmit}
|
|
onCancel={() => navigate(`/objects/${id}`)}
|
|
/>
|
|
);
|
|
}
|