feat(web): code-aware field errors + min count validation (#46)

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

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

@@ -17,7 +17,7 @@ function tree() {
   );
 }
 
-test("edit: fields PUT 422 with field body -> field error message shown and field marked invalid", async () => {
+test("edit: fields PUT 422 with type_mismatch code -> code-specific field message shown and field marked invalid", async () => {
   server.use(
     http.get("/api/admin/objects/:id", () =>
       HttpResponse.json({ ...amphora, fields: { inscription: "old" } }),
@@ -33,8 +33,10 @@ test("edit: fields PUT 422 with field body -> field error message shown and fiel
   await screen.findByDisplayValue("Amphora");
   await userEvent.click(screen.getByRole("button", { name: /save/i }));
 
-  const alerts = await screen.findAllByText(/inscription.*rejected/i);
-  expect(alerts.length).toBeGreaterThanOrEqual(2);
+  // Banner still reports the rejected field name; the field highlight uses the code-specific message.
+  await screen.findByText(/inscription.*rejected/i);
+
+  expect(await screen.findByText("Wrong type for this field")).toBeInTheDocument();
 });
 
 test("edit: prefilled, save -> PUT core + PUT fields -> back to detail", async () => {

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

@@ -30,7 +30,12 @@ function ObjectEditFormLoaded({ object, id }: { object: AdminObjectView; id: str
   const update = useUpdateObject();
   const setFields = useSetFields();
 
-  const locationState = location.state as { fieldsError?: boolean; fieldErrorKey?: string } | null;
+  const locationState = location.state as {
+    created?: boolean;
+    fieldsError?: boolean;
+    fieldErrorKey?: string;
+    fieldErrorCode?: string;
+  } | null;
 
   const [error, setError] = useState<string | null>(() => {
     if (locationState?.fieldErrorKey) return t("form.fieldRejected", { field: locationState.fieldErrorKey });
@@ -42,6 +47,10 @@ function ObjectEditFormLoaded({ object, id }: { object: AdminObjectView; id: str
     locationState?.fieldErrorKey ?? null,
   );
 
+  const [fieldErrorCode, setFieldErrorCode] = useState<string | null>(
+    locationState?.fieldErrorCode ?? null,
+  );
+
   useBreadcrumb([
     { label: t("nav.objects"), to: "/objects" },
     { label: object.object_number, to: `/objects/${id}` },
@@ -64,6 +73,7 @@ function ObjectEditFormLoaded({ object, id }: { object: AdminObjectView; id: str
   const onSubmit = async (values: ObjectFormValues): Promise<boolean> => {
     setError(null);
     setFieldErrorKey(null);
+    setFieldErrorCode(null);
 
     try {
       await update.mutateAsync({ id, body: values.core });
@@ -71,6 +81,7 @@ function ObjectEditFormLoaded({ object, id }: { object: AdminObjectView; id: str
     } catch (e) {
       if (e instanceof FieldRejection) {
         setFieldErrorKey(e.field);
+        setFieldErrorCode(e.code);
         setError(t("form.fieldRejected", { field: e.field }));
       } else {
         setError(t("form.rejected"));
@@ -89,6 +100,7 @@ function ObjectEditFormLoaded({ object, id }: { object: AdminObjectView; id: str
       defaults={defaults}
       formError={error}
       fieldErrorKey={fieldErrorKey}
+      fieldErrorCode={fieldErrorCode}
       onSubmit={onSubmit}
       onCancel={() => navigate(`/objects/${id}`)}
     />

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

@@ -47,6 +47,24 @@ test("required core + required flexible field block submit", async () => {
   expect(onSubmit).not.toHaveBeenCalled();
 });
 
+test("number_of_objects of 0 is blocked client-side with the minCount message", 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 count = screen.getByLabelText(/number of objects/i);
+  await userEvent.clear(count);
+  await userEvent.type(count, "0");
+
+  await userEvent.click(screen.getByRole("button", { name: /create object/i }));
+
+  expect(await screen.findByText("Must be at least 1")).toBeInTheDocument();
+  expect(onSubmit).not.toHaveBeenCalled();
+});
+
 test("edit mode: no visibility control, save button, prefilled values", async () => {
   const onSubmit = vi.fn();
   renderApp(

web/src/objects/object-form.tsx

@@ -51,6 +51,7 @@ export function ObjectForm({
   onCancel,
   formError,
   fieldErrorKey,
+  fieldErrorCode,
 }: {
   mode: "create" | "edit";
   defaults?: { core: ObjectCore; fields: Record<string, unknown> };
@@ -58,6 +59,7 @@ export function ObjectForm({
   onCancel: () => void;
   formError?: string | null;
   fieldErrorKey?: string | null;
+  fieldErrorCode?: string | null;
 }) {
   const { t } = useTranslation();
   const { default_language } = useConfig();
@@ -80,12 +82,14 @@ export function ObjectForm({
 
   useEffect(() => {
     if (fieldErrorKey) {
-      form.setError(`fields.${fieldErrorKey}` as never, {
-        type: "server",
-        message: t("form.fieldRejected", { field: fieldErrorKey }),
-      });
+      const codeKey = fieldErrorCode ? `form.fieldError.${fieldErrorCode}` : "";
+      const message =
+        fieldErrorCode && t(codeKey) !== codeKey
+          ? t(codeKey)
+          : t("form.fieldRejected", { field: fieldErrorKey });
+      form.setError(`fields.${fieldErrorKey}` as never, { type: "server", message });
     }
-  }, [fieldErrorKey, form, t]);
+  }, [fieldErrorKey, fieldErrorCode, form, t]);
 
   const runSubmit = (createAnother: boolean) =>
     handleSubmit(async (data) => {
@@ -106,7 +110,7 @@ export function ObjectForm({
   const coreField = (
     key: keyof ObjectCore,
     labelKey: string,
-    opts?: { type?: string; required?: boolean },
+    opts?: { type?: string; required?: boolean; min?: number },
   ) => (
     <div className="space-y-1">
       <Label htmlFor={key}>{t(`fieldsLabels.${labelKey}`)}</Label>
@@ -117,14 +121,20 @@ export function ObjectForm({
         {...register(
           `core.${key}` as const,
           opts?.type === "number"
-            ? { valueAsNumber: true, required: opts?.required }
+            ? {
+                valueAsNumber: true,
+                required: opts?.required,
+                ...(opts?.min !== undefined
+                  ? { min: { value: opts.min, message: t("form.minCount") } }
+                  : {}),
+              }
             : { required: opts?.required },
         )}
       />
 
       {errors.core?.[key] && (
         <p role="alert" className="text-xs text-destructive">
-          {t("form.required")}
+          {errors.core[key]?.message || t("form.required")}
         </p>
       )}
     </div>
@@ -149,7 +159,7 @@ export function ObjectForm({
 
       {coreField("object_number", "objectNumber", { required: true })}
       {coreField("object_name", "objectName", { required: true })}
-      {coreField("number_of_objects", "count", { type: "number", required: true })}
+      {coreField("number_of_objects", "count", { type: "number", required: true, min: 1 })}
       {coreField("brief_description", "briefDescription")}
       {coreField("current_location", "currentLocation")}
       {coreField("current_owner", "currentOwner")}