logaritmisk/biggus-dickus
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Anders Olsson
2026-06-04 00:46:49 +02:00
parent 616c232a22
commit 30d851182e
6 changed files with 152 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app.tsx
+2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+29 -7
View File
@@ -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 className="space-y-2 p-3">
{Array.from({ length: 6 }).map((_, i) => (
<Skeleton key={i} className="h-9 w-full" />
))}
<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
+65
View File
@@ -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
+54
View File
@@ -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>
);
}