feat(web): disable submit while saving + Save & create another + Cmd/Ctrl+Enter (#46)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/i18n/en.json

@@ -5,7 +5,7 @@
   "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)" },
   "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" },
   "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", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "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", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "flexibleHeading": "Catalogue fields", "saving": "Saving…", "createAnother": "Save & create another" },
   "actions": { "edit": "Edit", "delete": "Delete", "rename": "Rename", "save": "Save", "closeDetail": "Close detail", "confirmDelete": "Delete this object? This cannot be undone.", "confirmDeleteTerm": "Delete this term? This cannot be undone.", "confirmDeleteAuthority": "Delete this authority? This cannot be undone.", "confirmDeleteField": "Delete this field definition? This cannot be undone.", "confirmDeleteVocabulary": "Delete this vocabulary? This cannot be undone.", "inUse": "Can't delete — used by {{count}} object(s). Clear those fields first." },
   "labels": { "label": "Label", "externalUri": "External URI (optional)", "otherLanguages": "This entry also has labels in other languages, which are kept." },
   "theme": { "light": "Light", "dark": "Dark", "system": "System" },

web/src/i18n/sv.json

@@ -5,7 +5,7 @@
   "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)" },
   "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" },
   "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", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "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", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "flexibleHeading": "Katalogfält", "saving": "Sparar…", "createAnother": "Spara & skapa ny" },
   "actions": { "edit": "Redigera", "delete": "Ta bort", "rename": "Byt namn", "save": "Spara", "closeDetail": "Stäng detalj", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras.", "confirmDeleteTerm": "Ta bort denna term? Detta kan inte ångras.", "confirmDeleteAuthority": "Ta bort denna auktoritet? Detta kan inte ångras.", "confirmDeleteField": "Ta bort denna fältdefinition? Detta kan inte ångras.", "confirmDeleteVocabulary": "Ta bort denna vokabulär? Detta kan inte ångras.", "inUse": "Kan inte ta bort — används av {{count}} föremål. Rensa de fälten först." },
   "labels": { "label": "Etikett", "externalUri": "Extern URI (valfritt)", "otherLanguages": "Denna post har även etiketter på andra språk, som behålls." },
   "theme": { "light": "Ljust", "dark": "Mörkt", "system": "System" },

web/src/objects/object-edit-form.tsx

@@ -61,7 +61,7 @@ function ObjectEditFormLoaded({ object, id }: { object: AdminObjectView; id: str
 
   const defaults = { core, fields: object.fields };
 
-  const onSubmit = async (values: ObjectFormValues) => {
+  const onSubmit = async (values: ObjectFormValues): Promise<boolean> => {
     setError(null);
     setFieldErrorKey(null);
 
@@ -76,10 +76,11 @@ function ObjectEditFormLoaded({ object, id }: { object: AdminObjectView; id: str
         setError(t("form.rejected"));
       }
 
-      return;
+      return false;
     }
 
     navigate(`/objects/${id}`);
+    return true;
   };
 
   return (

web/src/objects/object-form.test.tsx

@@ -1,5 +1,5 @@
 import { expect, test, vi } from "vitest";
-import { screen, waitFor } from "@testing-library/react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderApp } from "../test/render";
 import { ObjectForm } from "./object-form";
@@ -25,6 +25,20 @@ test("create mode: shows visibility (draft/internal only) and submits assembled
   expect(values.fields.inscription).toBe("To the gods");
 });
 
+test("Cmd/Ctrl+Enter submits the form", async () => {
+  const onSubmit = vi.fn();
+  renderApp(<ObjectForm mode="create" onSubmit={onSubmit} onCancel={() => {}} />);
+
+  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");
+
+  const numberInput = screen.getByLabelText(/object number/i);
+  fireEvent.keyDown(numberInput, { key: "Enter", metaKey: true });
+
+  await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+});
+
 test("required core + required flexible field block submit", async () => {
   const onSubmit = vi.fn();
   renderApp(<ObjectForm mode="create" onSubmit={onSubmit} onCancel={() => {}} />);

web/src/objects/object-form.tsx

@@ -54,7 +54,7 @@ export function ObjectForm({
 }: {
   mode: "create" | "edit";
   defaults?: { core: ObjectCore; fields: Record<string, unknown> };
-  onSubmit: (values: ObjectFormValues) => void;
+  onSubmit: (values: ObjectFormValues, opts?: { createAnother?: boolean }) => Promise<boolean> | boolean;
   onCancel: () => void;
   formError?: string | null;
   fieldErrorKey?: string | null;
@@ -76,7 +76,7 @@ export function ObjectForm({
     },
   });
 
-  const { register, handleSubmit, formState: { errors } } = form;
+  const { register, handleSubmit, formState: { errors, isSubmitting } } = form;
 
   useEffect(() => {
     if (fieldErrorKey) {
@@ -87,16 +87,22 @@ export function ObjectForm({
     }
   }, [fieldErrorKey, form, t]);
 
-  const submit = handleSubmit((data) => {
+  const runSubmit = (createAnother: boolean) =>
+    handleSubmit(async (data) => {
       const fields = pruneFields(data.fields, localizedTextKeys, default_language);
-
-    onSubmit(
+      const values =
         mode === "create"
           ? { core: data.core, visibility: data.visibility, fields }
-        : { core: data.core, fields },
-    );
+          : { core: data.core, fields };
+      const ok = await onSubmit(values, { createAnother });
+      if (ok && createAnother) {
+        form.reset({ core: EMPTY_CORE, visibility: "draft", fields: {} });
+        document.getElementById("object_number")?.focus();
+      }
     });
 
+  const submit = runSubmit(false);
+
   const coreField = (
     key: keyof ObjectCore,
     labelKey: string,
@@ -125,7 +131,16 @@ export function ObjectForm({
   );
 
   return (
-    <form onSubmit={submit} className="space-y-4 overflow-auto p-4">
+    <form
+      onSubmit={submit}
+      onKeyDown={(e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+          e.preventDefault();
+          void submit();
+        }
+      }}
+      className="space-y-4 overflow-auto p-4"
+    >
       {formError && (
         <p role="alert" className="text-sm text-destructive">
           {formError}
@@ -177,11 +192,22 @@ export function ObjectForm({
       )}
 
       <div className="flex gap-2 pt-2">
-        <Button type="submit">
-          {mode === "create" ? t("form.create") : t("form.save")}
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? t("form.saving") : mode === "create" ? t("form.create") : t("form.save")}
         </Button>
 
-        <Button type="button" variant="ghost" onClick={onCancel}>
+        {mode === "create" && (
+          <Button
+            type="button"
+            variant="secondary"
+            disabled={isSubmitting}
+            onClick={() => void runSubmit(true)()}
+          >
+            {t("form.createAnother")}
+          </Button>
+        )}
+
+        <Button type="button" variant="ghost" disabled={isSubmitting} onClick={onCancel}>
           {t("form.cancel")}
         </Button>
       </div>

web/src/objects/object-new-page.test.tsx

@@ -1,7 +1,7 @@
 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 { delay, http, HttpResponse } from "msw";
 import { Routes, Route, useLocation } from "react-router-dom";
 import { server } from "../test/server";
 import { renderApp } from "../test/render";
@@ -9,7 +9,7 @@ import { ObjectNewPage } from "./object-new-page";
 
 function EditStub() {
   const location = useLocation();
-  const flagged = (location.state as { fieldsError?: boolean } | null)?.fieldsError === true;
+  const flagged = (location.state as { created?: boolean } | null)?.created === true;
   return <div>edit page{flagged ? " (fields error)" : ""}</div>;
 }
 
@@ -69,3 +69,52 @@ test("partial create: fields PUT fails -> navigate to edit with an error banner"
 
   await waitFor(() => expect(screen.getByText(/edit page \(fields error\)/i)).toBeInTheDocument());
 });
+
+test("in-flight submit: button disabled + shows Saving…, create fires exactly once on double-click", async () => {
+  let postCount = 0;
+
+  server.use(
+    http.post("/api/admin/objects", async () => {
+      postCount += 1;
+      await delay(50);
+      return HttpResponse.json({ id: "new-id-3" }, { status: 201 });
+    }),
+  );
+
+  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");
+
+  const button = screen.getByRole("button", { name: /create object/i });
+  await userEvent.click(button);
+  await userEvent.click(button);
+
+  await waitFor(() => expect(screen.getByText(/saving…/i)).toBeInTheDocument());
+  expect(screen.getByRole("button", { name: /saving…/i })).toBeDisabled();
+
+  await waitFor(() => expect(screen.getByText("detail view")).toBeInTheDocument());
+  expect(postCount).toBe(1);
+});
+
+test("Save & create another: resets the form and stays on /objects/new", async () => {
+  server.use(
+    http.post("/api/admin/objects", () =>
+      HttpResponse.json({ id: "new-id-4" }, { status: 201 }),
+    ),
+  );
+
+  renderApp(tree(), { route: "/objects/new" });
+
+  const numberInput = (await screen.findByLabelText(/object number/i)) as HTMLInputElement;
+  await userEvent.type(numberInput, "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: /save & create another/i }));
+
+  await waitFor(() => expect(numberInput.value).toBe(""));
+  expect(screen.queryByText("detail view")).not.toBeInTheDocument();
+  expect(screen.getByRole("button", { name: /save & create another/i })).toBeInTheDocument();
+});

web/src/objects/object-new-page.tsx

@@ -18,7 +18,10 @@ export function ObjectNewPage() {
   useDocumentTitle(t("objects.new"));
   useBreadcrumb([{ label: t("nav.objects"), to: "/objects" }, { label: t("objects.new") }]);
 
-  const onSubmit = async (values: ObjectFormValues) => {
+  const onSubmit = async (
+    values: ObjectFormValues,
+    opts?: { createAnother?: boolean },
+  ): Promise<boolean> => {
     setError(null);
 
     let id: string;
@@ -32,7 +35,7 @@ export function ObjectNewPage() {
       id = created.id;
     } catch {
       setError(t("form.rejected"));
-      return;
+      return false;
     }
 
     if (Object.keys(values.fields).length > 0) {
@@ -40,12 +43,16 @@ export function ObjectNewPage() {
         await setFields.mutateAsync({ id, fields: values.fields });
       } catch (e) {
         const fieldErrorKey = e instanceof FieldRejection ? e.field : undefined;
-        navigate(`/objects/${id}/edit`, { state: { fieldsError: true, fieldErrorKey } });
-        return;
+        const fieldErrorCode = e instanceof FieldRejection ? e.code : undefined;
+        navigate(`/objects/${id}/edit`, { state: { created: true, fieldErrorKey, fieldErrorCode } });
+        return true;
       }
     }
 
+    if (opts?.createAnother) return true;
+
     navigate(`/objects/${id}`);
+    return true;
   };
 
   return (