fix(web): DynamicExtFields on edit pages + user-friendly error messages

zichun
1 parent 7a3ebe64
Showing 3 changed files with 20 additions and 4 deletions
web/src/api/client.ts
web/src/pages/EditItemPage.tsx
web/src/pages/EditPartnerPage.tsx
@@ -110,8 +110,12 @@ export async function apiFetch&lt;T&gt;(
       if (text) {
         try {
           body = JSON.parse(text)
-          const m = (body as { message?: unknown }).message
-          if (typeof m === 'string') message = m
+          // Spring ProblemDetail uses "detail"; fallback to "message"
+          const parsed = body as { detail?: unknown; message?: unknown }
+          const d = parsed.detail
+          const m = parsed.message
+          if (typeof d === 'string') message = d
+          else if (typeof m === 'string') message = m
         } catch {
           body = text
           message = text
@@ -171,7 +175,8 @@ export const catalog = {
     itemType: string; baseUomCode: string; active?: boolean
   }) => apiFetch<Item>('/api/v1/catalog/items', { method: 'POST', body: JSON.stringify(body) }),
   updateItem: (id: string, body: {
-    name?: string; description?: string | null; itemType?: string; active?: boolean
+    name?: string; description?: string | null; itemType?: string; active?: boolean;
+    ext?: Record<string, unknown>
   }) => apiFetch<Item>(`/api/v1/catalog/items/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
   listUoms: () => apiFetch<Uom[]>('/api/v1/catalog/uoms'),
 }
@@ -188,7 +193,8 @@ export const partners = {
   }) => apiFetch<Partner>('/api/v1/partners/partners', { method: 'POST', body: JSON.stringify(body) }),
   update: (id: string, body: {
     name?: string; type?: string;
-    email?: string | null; phone?: string | null
+    email?: string | null; phone?: string | null;
+    ext?: Record<string, unknown>
   }) => apiFetch<Partner>(`/api/v1/partners/partners/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
 }
@@ -5,6 +5,7 @@ import type { Item } from &#39;@/types/api&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
+import { DynamicExtFields } from '@/components/DynamicExtFields'
 const ITEM_TYPES = ['GOOD', 'SERVICE', 'DIGITAL'] as const
@@ -17,6 +18,7 @@ export function EditItemPage() {
   const [itemType, setItemType] = useState<string>('GOOD')
   const [active, setActive] = useState(true)
   const [loading, setLoading] = useState(true)
+  const [ext, setExt] = useState<Record<string, unknown>>({})
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState<Error | null>(null)
@@ -28,6 +30,7 @@ export function EditItemPage() {
         setDescription(i.description ?? '')
         setItemType(i.itemType)
         setActive(i.active)
+        setExt(i.ext || {})
       })
       .catch((e: unknown) => setError(e instanceof Error ? e : new Error(String(e))))
       .finally(() => setLoading(false))
@@ -41,6 +44,7 @@ export function EditItemPage() {
       await catalog.updateItem(id, {
         name, itemType, active,
         description: description || null,
+        ...(Object.keys(ext).length > 0 ? { ext } : {}),
       })
       navigate('/items')
     } catch (err: unknown) {
@@ -85,6 +89,7 @@ export function EditItemPage() {
             className="rounded border-slate-300" id="active" />
           <label htmlFor="active" className="text-sm text-slate-700">Active</label>
         </div>
+        <DynamicExtFields entityName="Item" values={ext} onChange={(k, v) => setExt(prev => ({ ...prev, [k]: v }))} />
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
           {submitting ? 'Saving…' : 'Save Changes'}
@@ -5,6 +5,7 @@ import type { Partner } from &#39;@/types/api&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
+import { DynamicExtFields } from '@/components/DynamicExtFields'
 const PARTNER_TYPES = ['CUSTOMER', 'SUPPLIER', 'BOTH'] as const
@@ -17,6 +18,7 @@ export function EditPartnerPage() {
   const [email, setEmail] = useState('')
   const [phone, setPhone] = useState('')
   const [loading, setLoading] = useState(true)
+  const [ext, setExt] = useState<Record<string, unknown>>({})
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState<Error | null>(null)
@@ -28,6 +30,7 @@ export function EditPartnerPage() {
         setType(p.type)
         setEmail(p.email ?? '')
         setPhone(p.phone ?? '')
+        setExt(p.ext || {})
       })
       .catch((e: unknown) => setError(e instanceof Error ? e : new Error(String(e))))
       .finally(() => setLoading(false))
@@ -42,6 +45,7 @@ export function EditPartnerPage() {
         name, type,
         email: email || null,
         phone: phone || null,
+        ...(Object.keys(ext).length > 0 ? { ext } : {}),
       })
       navigate('/partners')
     } catch (err: unknown) {
@@ -86,6 +90,7 @@ export function EditPartnerPage() {
               className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
           </div>
         </div>
+        <DynamicExtFields entityName="Partner" values={ext} onChange={(k, v) => setExt(prev => ({ ...prev, [k]: v }))} />
         {error && <ErrorBox error={error} />}
         <button type="submit" className="btn-primary" disabled={submitting}>
           {submitting ? 'Saving…' : 'Save Changes'}