diff --git a/web/src/app.tsx b/web/src/app.tsx
index 320c164..8196493 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -5,6 +5,9 @@ import { LoginPage } from "./auth/login-page";
import { AppShell } from "./shell/app-shell";
import { ObjectsPage } from "./objects/objects-page";
import { ObjectNewPage } from "./objects/object-new-page";
+import { ObjectDetail } from "./objects/object-detail";
+import { ObjectEditForm } from "./objects/object-edit-form";
+import { SelectPrompt } from "./objects/select-prompt";
export function App() {
return (
@@ -14,8 +17,11 @@ export function App() {
}>
}>
} />
- } />
- } />
+ }>
+ } />
+ } />
+ } />
+
} />
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index 1fbb6dc..5ddefbe 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -5,5 +5,6 @@
"objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "selectPrompt": "Select an object to view its details", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object" },
"fieldsLabels": { "objectNumber": "Object number", "objectName": "Name", "count": "Number of objects", "briefDescription": "Brief description", "currentLocation": "Current location", "currentOwner": "Current owner", "recorder": "Recorder", "recordingDate": "Recording date", "visibility": "Visibility", "flexible": "Catalogue fields" },
"visibility": { "draft": "Draft", "internal": "Internal", "public": "Public" },
- "form": { "selectPlaceholder": "— select —", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "flexibleHeading": "Catalogue fields" }
+ "form": { "selectPlaceholder": "— select —", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "flexibleHeading": "Catalogue fields" },
+ "actions": { "edit": "Edit" }
}
diff --git a/web/src/i18n/sv.json b/web/src/i18n/sv.json
index 942d1f6..fe7a8f2 100644
--- a/web/src/i18n/sv.json
+++ b/web/src/i18n/sv.json
@@ -5,5 +5,6 @@
"objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "selectPrompt": "Välj ett föremål för att se detaljer", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål" },
"fieldsLabels": { "objectNumber": "Föremålsnummer", "objectName": "Namn", "count": "Antal föremål", "briefDescription": "Kort beskrivning", "currentLocation": "Nuvarande plats", "currentOwner": "Nuvarande ägare", "recorder": "Registrerad av", "recordingDate": "Registreringsdatum", "visibility": "Synlighet", "flexible": "Katalogfält" },
"visibility": { "draft": "Utkast", "internal": "Intern", "public": "Publik" },
- "form": { "selectPlaceholder": "— välj —", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "flexibleHeading": "Katalogfält" }
+ "form": { "selectPlaceholder": "— välj —", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "flexibleHeading": "Katalogfält" },
+ "actions": { "edit": "Redigera" }
}
diff --git a/web/src/objects/object-detail.tsx b/web/src/objects/object-detail.tsx
index bfdef5c..b69cb5b 100644
--- a/web/src/objects/object-detail.tsx
+++ b/web/src/objects/object-detail.tsx
@@ -1,4 +1,4 @@
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useObject, useFieldDefinitions } from "../api/queries";
@@ -57,6 +57,9 @@ export function ObjectDetail() {
{object.object_name}
+
+ {t("actions.edit")}
+
diff --git a/web/src/objects/object-edit-form.test.tsx b/web/src/objects/object-edit-form.test.tsx
new file mode 100644
index 0000000..590597d
--- /dev/null
+++ b/web/src/objects/object-edit-form.test.tsx
@@ -0,0 +1,49 @@
+import { expect, test } from "vitest";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { Routes, Route } from "react-router-dom";
+import { server } from "../test/server";
+import { renderApp } from "../test/render";
+import { ObjectEditForm } from "./object-edit-form";
+import { amphora } from "../test/fixtures";
+
+function tree() {
+ return (
+
+ } />
+ detail view} />
+
+ );
+}
+
+test("edit: prefilled, save -> PUT core + PUT fields -> back to detail", async () => {
+ let putCore: unknown;
+ let putFields: unknown;
+
+ server.use(
+ http.get("/api/admin/objects/:id", () =>
+ HttpResponse.json({ ...amphora, fields: { inscription: "old" } }),
+ ),
+ http.put("/api/admin/objects/:id", async ({ request }) => {
+ putCore = await request.json();
+ return new HttpResponse(null, { status: 204 });
+ }),
+ http.put("/api/admin/objects/:id/fields", async ({ request }) => {
+ putFields = await request.json();
+ return new HttpResponse(null, { status: 204 });
+ }),
+ );
+
+ renderApp(tree(), { route: `/objects/${amphora.id}/edit` });
+
+ const name = await screen.findByDisplayValue("Amphora");
+
+ await userEvent.clear(name);
+ await userEvent.type(name, "Big amphora");
+ await userEvent.click(screen.getByRole("button", { name: /save/i }));
+
+ await waitFor(() => expect(screen.getByText("detail view")).toBeInTheDocument());
+ expect((putCore as { object_name: string }).object_name).toBe("Big amphora");
+ expect((putFields as { inscription: string }).inscription).toBe("old");
+});
diff --git a/web/src/objects/object-edit-form.tsx b/web/src/objects/object-edit-form.tsx
new file mode 100644
index 0000000..fdf83c7
--- /dev/null
+++ b/web/src/objects/object-edit-form.tsx
@@ -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(
+ (location.state as { fieldsError?: boolean } | null)?.fieldsError ? t("form.rejected") : null,
+ );
+
+ if (isLoading) return ;
+
+ if (!object) return {t("objects.notFound")}
;
+
+ 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 };
+
+ 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 (
+ navigate(`/objects/${id}`)}
+ />
+ );
+}
diff --git a/web/src/objects/objects-page.test.tsx b/web/src/objects/objects-page.test.tsx
index 94066d3..02fd1a7 100644
--- a/web/src/objects/objects-page.test.tsx
+++ b/web/src/objects/objects-page.test.tsx
@@ -4,12 +4,16 @@ import userEvent from "@testing-library/user-event";
import { Routes, Route } from "react-router-dom";
import { renderApp } from "../test/render";
import { ObjectsPage } from "./objects-page";
+import { ObjectDetail } from "./object-detail";
+import { SelectPrompt } from "./select-prompt";
function tree() {
return (
- } />
- } />
+ }>
+ } />
+ } />
+
);
}
diff --git a/web/src/objects/objects-page.tsx b/web/src/objects/objects-page.tsx
index 86c2597..10d5b67 100644
--- a/web/src/objects/objects-page.tsx
+++ b/web/src/objects/objects-page.tsx
@@ -1,26 +1,15 @@
-import { useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
+import { Outlet } from "react-router-dom";
import { ObjectList } from "./object-list";
-import { ObjectDetail } from "./object-detail";
export function ObjectsPage() {
- const { t } = useTranslation();
- const { id } = useParams();
-
return (
- {id ? (
-
- ) : (
-
- {t("objects.selectPrompt")}
-
- )}
+
);
diff --git a/web/src/objects/select-prompt.tsx b/web/src/objects/select-prompt.tsx
new file mode 100644
index 0000000..0cf2930
--- /dev/null
+++ b/web/src/objects/select-prompt.tsx
@@ -0,0 +1,11 @@
+import { useTranslation } from "react-i18next";
+
+export function SelectPrompt() {
+ const { t } = useTranslation();
+
+ return (
+
+ {t("objects.selectPrompt")}
+
+ );
+}