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")} +
+ ); +}