feat(web): new-object full-width page + create flow + /objects/new

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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() {
         <Route path="/login" element={<LoginPage />} />
         <Route element={<RequireAuth />}>
           <Route element={<AppShell />}>
+            <Route path="/objects/new" element={<ObjectNewPage />} />
             <Route path="/objects" element={<ObjectsPage />} />
             <Route path="/objects/:id" element={<ObjectsPage />} />
             <Route path="/" element={<Navigate to="/objects" replace />} />

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" }

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" }

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 = (
+    <div className="flex items-center justify-between border-b px-3 py-2">
+      <Link to="/objects/new" className="text-sm font-medium text-indigo-600">
+        {t("objects.new")}
+      </Link>
+    </div>
+  );
+
   if (isLoading) {
     return (
+      <div>
+        {header}
         <div className="space-y-2 p-3">
           {Array.from({ length: 6 }).map((_, i) => (
             <Skeleton key={i} className="h-9 w-full" />
           ))}
         </div>
+      </div>
     );
   }
 
   if (isError) {
-    return <p className="p-4 text-sm text-red-600">{t("objects.loadError")}</p>;
+    return (
+      <div>
+        {header}
+        <p className="p-4 text-sm text-red-600">{t("objects.loadError")}</p>
+      </div>
+    );
   }
 
   if (!data || data.items.length === 0) {
-    return <p className="p-4 text-sm text-neutral-500">{t("objects.empty")}</p>;
+    return (
+      <div>
+        {header}
+        <p className="p-4 text-sm text-neutral-500">{t("objects.empty")}</p>
+      </div>
+    );
   }
 
   const from = data.total === 0 ? 0 : offset + 1;
@@ -38,6 +59,7 @@ export function ObjectList() {
 
   return (
     <div className="flex h-full flex-col">
+      {header}
       <ul className="flex-1 overflow-auto">
         {data.items.map((object) => (
           <li key={object.id}>

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 (
+    <Routes>
+      <Route path="/objects/new" element={<ObjectNewPage />} />
+      <Route path="/objects/:id" element={<div>detail view</div>} />
+      <Route path="/objects/:id/edit" element={<div>edit page</div>} />
+    </Routes>
+  );
+}
+
+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());
+});

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<string | null>(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 (
+    <div className="mx-auto max-w-2xl">
+      <ObjectForm
+        mode="create"
+        formError={error}
+        onSubmit={onSubmit}
+        onCancel={() => navigate("/objects")}
+      />
+    </div>
+  );
+}