diff --git a/web/src/app.tsx b/web/src/app.tsx index 8b51ea6..320c164 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -4,6 +4,7 @@ import { RequireAuth } from "./auth/require-auth"; 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"; export function App() { return ( @@ -12,6 +13,7 @@ export function App() { } /> }> }> + } /> } /> } /> } /> diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json index 8982029..1fbb6dc 100644 --- a/web/src/i18n/en.json +++ b/web/src/i18n/en.json @@ -2,7 +2,7 @@ "app": { "name": "Collection" }, "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "soon": "Coming soon" }, "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server" }, - "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" }, + "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" } diff --git a/web/src/i18n/sv.json b/web/src/i18n/sv.json index 05a1d5d..942d1f6 100644 --- a/web/src/i18n/sv.json +++ b/web/src/i18n/sv.json @@ -2,7 +2,7 @@ "app": { "name": "Samling" }, "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "soon": "Kommer snart" }, "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern" }, - "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" }, + "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" } diff --git a/web/src/objects/object-list.tsx b/web/src/objects/object-list.tsx index 64a179d..95d4432 100644 --- a/web/src/objects/object-list.tsx +++ b/web/src/objects/object-list.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { NavLink } from "react-router-dom"; +import { Link, NavLink } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { Button } from "@/components/ui/button"; @@ -15,22 +15,43 @@ export function ObjectList() { const { data, isLoading, isError } = useObjectsPage(LIMIT, offset); + const header = ( +
+ + {t("objects.new")} + +
+ ); + if (isLoading) { return ( -
- {Array.from({ length: 6 }).map((_, i) => ( - - ))} +
+ {header} +
+ {Array.from({ length: 6 }).map((_, i) => ( + + ))} +
); } if (isError) { - return

{t("objects.loadError")}

; + return ( +
+ {header} +

{t("objects.loadError")}

+
+ ); } if (!data || data.items.length === 0) { - return

{t("objects.empty")}

; + return ( +
+ {header} +

{t("objects.empty")}

+
+ ); } const from = data.total === 0 ? 0 : offset + 1; @@ -38,6 +59,7 @@ export function ObjectList() { return (
+ {header}
    {data.items.map((object) => (
  • diff --git a/web/src/objects/object-new-page.test.tsx b/web/src/objects/object-new-page.test.tsx new file mode 100644 index 0000000..c57f661 --- /dev/null +++ b/web/src/objects/object-new-page.test.tsx @@ -0,0 +1,65 @@ +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 { ObjectNewPage } from "./object-new-page"; + +function tree() { + return ( + + } /> + detail view
} /> + edit page
} /> + + ); +} + +test("create: POST then PUT fields, then navigate to the new object's detail", async () => { + let postBody: unknown; + let fieldsBody: unknown; + + server.use( + http.post("/api/admin/objects", async ({ request }) => { + postBody = await request.json(); + return HttpResponse.json({ id: "new-id-1" }, { status: 201 }); + }), + http.put("/api/admin/objects/:id/fields", async ({ request }) => { + fieldsBody = await request.json(); + return new HttpResponse(null, { status: 204 }); + }), + ); + + renderApp(tree(), { route: "/objects/new" }); + + await userEvent.type(await screen.findByLabelText(/object number/i), "A-9"); + await userEvent.type(screen.getByLabelText(/^name/i), "Amphora"); + await userEvent.type(screen.getByLabelText(/inscription/i), "To the gods"); + await userEvent.click(screen.getByRole("button", { name: /create object/i })); + + await waitFor(() => expect(screen.getByText("detail view")).toBeInTheDocument()); + expect((postBody as { object_number: string }).object_number).toBe("A-9"); + expect((fieldsBody as { inscription: string }).inscription).toBe("To the gods"); +}); + +test("partial create: fields PUT fails -> navigate to edit with an error banner", async () => { + server.use( + http.post("/api/admin/objects", () => + HttpResponse.json({ id: "new-id-2" }, { status: 201 }), + ), + http.put("/api/admin/objects/:id/fields", () => + new HttpResponse(null, { status: 422 }), + ), + ); + + renderApp(tree(), { route: "/objects/new" }); + + await userEvent.type(await screen.findByLabelText(/object number/i), "A-9"); + await userEvent.type(screen.getByLabelText(/^name/i), "Amphora"); + await userEvent.type(screen.getByLabelText(/inscription/i), "x"); + await userEvent.click(screen.getByRole("button", { name: /create object/i })); + + await waitFor(() => expect(screen.getByText("edit page")).toBeInTheDocument()); +}); diff --git a/web/src/objects/object-new-page.tsx b/web/src/objects/object-new-page.tsx new file mode 100644 index 0000000..d6010bc --- /dev/null +++ b/web/src/objects/object-new-page.tsx @@ -0,0 +1,54 @@ +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; + +import { ObjectForm, type ObjectFormValues } from "./object-form"; +import { useCreateObject, useSetFields } from "../api/queries"; + +export function ObjectNewPage() { + const { t } = useTranslation(); + const navigate = useNavigate(); + const create = useCreateObject(); + const setFields = useSetFields(); + const [error, setError] = useState(null); + + const onSubmit = async (values: ObjectFormValues) => { + setError(null); + + let id: string; + + try { + const created = await create.mutateAsync({ + ...values.core, + visibility: values.visibility ?? "draft", + }); + + id = created.id; + } catch { + setError(t("form.rejected")); + return; + } + + if (Object.keys(values.fields).length > 0) { + try { + await setFields.mutateAsync({ id, fields: values.fields }); + } catch { + navigate(`/objects/${id}/edit`, { state: { fieldsError: true } }); + return; + } + } + + navigate(`/objects/${id}`); + }; + + return ( +
+ navigate("/objects")} + /> +
+ ); +}