feat(web): nested object routes + in-pane edit form + edit flow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-04 00:54:02 +02:00
parent 22b37c138b
commit 9880f24dd2
9 changed files with 146 additions and 20 deletions
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { useObject, useUpdateObject, useSetFields } from "../api/queries";
+import { ObjectForm, type ObjectCore, type ObjectFormValues } from "./object-form";
+
+export function ObjectEditForm() {
+  const { t } = useTranslation();
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const { data: object, isLoading } = useObject(id!);
+  const update = useUpdateObject();
+  const setFields = useSetFields();
+
+  const [error, setError] = useState<string | null>(
+    (location.state as { fieldsError?: boolean } | null)?.fieldsError ? t("form.rejected") : null,
+  );
+
+  if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;
+
+  if (!object) return <p className="p-4 text-sm text-neutral-500">{t("objects.notFound")}</p>;
+
+  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 as Record<string, unknown> };
+
+  const onSubmit = async (values: ObjectFormValues) => {
+    setError(null);
+
+    try {
+      await update.mutateAsync({ id: id!, body: values.core });
+      await setFields.mutateAsync({ id: id!, fields: values.fields });
+    } catch {
+      setError(t("form.rejected"));
+      return;
+    }
+
+    navigate(`/objects/${id}`);
+  };
+
+  return (
+    <ObjectForm
+      mode="edit"
+      defaults={defaults}
+      formError={error}
+      onSubmit={onSubmit}
+      onCancel={() => navigate(`/objects/${id}`)}
+    />
+  );
+}