@omnitend/dashboard-for-laravel 0.42.2 → 0.44.0

package/resources/js/composables/useResourceEditor.ts

@@ -1,6 +1,6 @@
 import { computed, ref, watch, type Ref } from "vue";
 import { api } from "../utils/api";
-import { useForm } from "./useForm";
+import { isAbortError, useForm, type FormError } from "./useForm";
 import { useToast } from "./useToast";
 import type { FieldDefinition } from "../types";
 import {
@@ -126,6 +126,31 @@ export function useResourceEditor<T = any>(
         { flush: 'sync' },
     );
 
+    /*
+     * Each open (edit or create) starts a new SESSION with a FRESH form
+     * (#194 review). The modal used to reuse one `useForm` and reseed it,
+     * which carried the previous session's `submitFailure` (row A's failure
+     * summary over row B, or over create) and let a request still in flight
+     * from the previous session record its outcome onto the new one. A fresh
+     * form makes both impossible by construction: an abandoned request settles
+     * into the OLD form object, which nothing renders any more. The DXForm
+     * subtree is already remounted per open (`editFormInstanceKey`), so no
+     * rendered state depended on the object surviving. Resetting one shared
+     * form instead would have needed every piece of per-submit state (failure,
+     * success flags, the in-flight counter, timers) reset in step, plus a
+     * guard against late responses: the fresh form is one line and cannot
+     * miss a field added later.
+     *
+     * The generation is bumped too, so the save/delete paths can tell a
+     * response for THIS session from one for an abandoned session, and the
+     * previous session's pending action no longer blocks this one.
+     */
+    const startSession = (formData: Record<string, any>) => {
+        editGeneration.value++;
+        pendingAction.value = null;
+        editForm.value = useForm(formData);
+    };
+
     // Monotonic token so a slow fetch for a previously-opened row can't overwrite
     // the form after the user has since opened a different row.
     let editFetchToken = 0;
@@ -235,23 +260,16 @@ export function useResourceEditor<T = any>(
         // Reset to first tab
         activeTabIndex.value = 0;
 
-        // Initialize form with item data. `useForm` is statically imported, so
-        // seeding is synchronous — no interleaving between successive row opens.
-        if (!editForm.value) {
-            const formData: Record<string, any> = {};
-            // Presentational fields (submit: false) lay the form out; they hold
-            // no data and must not be POSTed just because they were declared.
-            submittableEditFields.value.forEach(field => {
-                formData[field.key] = seedValueFor(field, item);
-            });
-            editForm.value = useForm(formData);
-        } else {
-            // Update existing form
-            submittableEditFields.value.forEach(field => {
-                editForm.value.data[field.key] = seedValueFor(field, item);
-            });
-            editForm.value.clearErrors();
-        }
+        // A fresh form seeded from the row (see `startSession`). `useForm` is
+        // statically imported, so seeding is synchronous — no interleaving
+        // between successive row opens. Presentational fields (submit: false)
+        // lay the form out; they hold no data and must not be POSTed just
+        // because they were declared.
+        const formData: Record<string, any> = {};
+        submittableEditFields.value.forEach(field => {
+            formData[field.key] = seedValueFor(field, item);
+        });
+        startSession(formData);
 
         // Open modal
         editFormInstanceKey.value++;
@@ -313,19 +331,12 @@ export function useResourceEditor<T = any>(
         editFetchToken++;
         editLoading.value = false;
 
-        if (!editForm.value) {
-            const formData: Record<string, any> = {};
-            submittableEditFields.value.forEach(field => {
-                formData[field.key] = resolveFieldDefault(field);
-            });
-            editForm.value = useForm(formData);
-        } else {
-            // Reset existing form to defaults
-            submittableEditFields.value.forEach(field => {
-                editForm.value.data[field.key] = resolveFieldDefault(field);
-            });
-            editForm.value.clearErrors();
-        }
+        // A fresh form seeded with the field defaults (see `startSession`).
+        const formData: Record<string, any> = {};
+        submittableEditFields.value.forEach(field => {
+            formData[field.key] = resolveFieldDefault(field);
+        });
+        startSession(formData);
         editFormInstanceKey.value++;
         showEditModal.value = true;
     };
@@ -359,9 +370,11 @@ export function useResourceEditor<T = any>(
             // performSave so it covers the whole class, not one call site.
             if (editGeneration.value !== generation) return;
 
-            await performSave();
+            await performSave(generation);
         } finally {
-            pendingAction.value = null;
+            // Only this session's own pending action: a session opened since
+            // has already cleared it, and may have started its own.
+            if (editGeneration.value === generation) pendingAction.value = null;
         }
     };
 
@@ -429,11 +442,60 @@ export function useResourceEditor<T = any>(
         );
     };
 
-    const performSave = async () => {
+    /**
+     * A failed create/edit/delete request. `useForm` hands `onError` the
+     * `ApiError` (`{ message, errors, status }`), not an errors map, and
+     * records every non-abort failure in `form.submitFailure`, which the
+     * modal footer's error summary shows beside Save (the server's message
+     * and every validation message, #194). While the session that made the
+     * request still has its modal open, that summary IS the report, so a
+     * toast would only repeat it: nothing is toasted. A failure that settles
+     * after its modal closed (or another row opened) has no summary left, so
+     * it toasts the client's message for it ("Server error. Please try again
+     * later.", or the server's 422 line) or `fallback` for a non-HTTP failure.
+     * An abort is a cancellation, never reported.
+     */
+    const reportFailure = (
+        error: FormError | unknown,
+        fallback: string,
+        generation: number,
+    ) => {
+        if (isAbortError(error)) return;
+        if (editGeneration.value === generation && showEditModal.value) return;
+        const status = (error as FormError | null)?.status;
+        // Only an HTTP failure's message is written for users; a thrown
+        // TypeError ("Failed to fetch") gets the fallback.
+        const message = typeof status === 'number' ? (error as FormError).message : '';
+        createToast?.({
+            title: 'Error',
+            body: typeof message === 'string' && message !== '' ? message : fallback,
+            variant: 'danger',
+            modelValue: 5000,
+        });
+    };
+
+    /*
+     * `generation` is the session that started this save. The request may
+     * settle after the user has closed the modal and opened another row (or
+     * create): the record was still written, so the success toast, the
+     * `rowCreated`/`rowUpdated` emit and the table refresh still happen, but
+     * only the SAME session's modal is closed. The edited row and the form
+     * are captured up front, so the emits name the row that was saved, not
+     * whichever row is open by the time the response arrives.
+     *
+     * One error emit per failure: `useForm` calls `onError` and then
+     * rethrows, so the `catch` emits only for a throw that never reached
+     * `onError` (one raised before the request was made).
+     */
+    const performSave = async (generation: number) => {
+        const form = editForm.value;
+        const isCurrentSession = () => editGeneration.value === generation;
+
         // Create mode: POST to createUrl
         if (isCreateMode.value && props.createUrl) {
+            let errorReported = false;
             try {
-                await editForm.value.post(props.createUrl, {
+                await form.post(props.createUrl, {
                     transform: stripNonSubmittedFields,
                     onSuccess: (data: any) => {
                         createToast?.({
@@ -444,49 +506,38 @@ export function useResourceEditor<T = any>(
                         });
 
                         emit('rowCreated', data?.data ?? data, data);
-                        showEditModal.value = false;
-                        selectedItem.value = null;
-                        isCreateMode.value = false;
+                        if (isCurrentSession()) {
+                            showEditModal.value = false;
+                            selectedItem.value = null;
+                            isCreateMode.value = false;
+                        }
 
                         refresh();
                     },
-                    onError: (errors: any) => {
-                        let errorMessage = 'Failed to create. Please check the form for errors.';
-                        if (errors && typeof errors === 'object') {
-                            const firstError = Object.values(errors).flat()[0];
-                            if (typeof firstError === 'string') {
-                                errorMessage = firstError;
-                            }
-                        }
-
-                        createToast?.({
-                            title: 'Error',
-                            body: errorMessage,
-                            variant: 'danger',
-                            modelValue: 5000,
-                        });
-
-                        // DXForm switches to the first errored tab via its
-                        // own watcher on editForm.errors.
-                        emit('createError', errors);
+                    onError: (error: FormError) => {
+                        errorReported = true;
+                        reportFailure(error, 'Failed to create. Please try again.', generation);
+                        emit('createError', error);
                     }
                 });
             } catch (error) {
-                emit('createError', error);
+                if (!errorReported) emit('createError', error);
             }
             return;
         }
 
         // Edit mode: PUT to editUrl
-        if (!selectedItem.value) return;
+        const item = selectedItem.value as T | null;
+        if (!item) return;
 
+        let errorReported = false;
         try {
             // If editUrl provided, handle API call internally
             if (props.editUrl) {
-                const itemId = (selectedItem.value as any).id;
+                const itemId = (item as any).id;
                 const url = props.editUrl.replace(':id', itemId);
 
-                await editForm.value.put(url, {
+                await form.put(url, {
                     transform: stripNonSubmittedFields,
                     onSuccess: (data: any) => {
                         // Show success toast
@@ -497,44 +548,29 @@ export function useResourceEditor<T = any>(
                             modelValue: 3000, // Auto-dismiss after 3 seconds
                         });
 
-                        emit('rowUpdated', selectedItem.value as T, data);
-                        showEditModal.value = false;
-                        selectedItem.value = null;
+                        emit('rowUpdated', item, data);
+                        if (isCurrentSession()) {
+                            showEditModal.value = false;
+                            selectedItem.value = null;
+                        }
 
                         // Refresh table data to show updated values
                         refresh();
                     },
-                    onError: (errors: any) => {
-                        // Extract first error message for toast
-                        let errorMessage = 'Failed to update. Please check the form for errors.';
-                        if (errors && typeof errors === 'object') {
-                            const firstError = Object.values(errors).flat()[0];
-                            if (typeof firstError === 'string') {
-                                errorMessage = firstError;
-                            }
-                        }
-
-                        // Show error toast with specific message
-                        createToast?.({
-                            title: 'Error',
-                            body: errorMessage,
-                            variant: 'danger',
-                            modelValue: 5000, // Auto-dismiss after 5 seconds
-                        });
-
-                        // DXForm switches to the first errored tab via its
-                        // own watcher on editForm.errors.
-                        emit('editError', selectedItem.value as T, errors);
+                    onError: (error: FormError) => {
+                        errorReported = true;
+                        reportFailure(error, 'Failed to update. Please try again.', generation);
+                        emit('editError', item, error);
                     }
                 });
             } else {
                 // No editUrl - just emit event for custom handling
-                emit('rowUpdated', selectedItem.value as T, editForm.value.data);
+                emit('rowUpdated', item, form.data);
                 showEditModal.value = false;
                 selectedItem.value = null;
             }
         } catch (error) {
-            emit('editError', selectedItem.value as T, error);
+            if (!errorReported) emit('editError', item, error);
         }
     };
 
@@ -566,6 +602,11 @@ export function useResourceEditor<T = any>(
 
         pendingAction.value = 'delete';
         const generation = editGeneration.value;
+        // Captured for the same reasons as in `performSave`: a late response
+        // names the row it deleted and closes only its own session's modal.
+        const item = selectedItem.value as T;
+        const form = editForm.value;
+        let deleteErrorReported = false;
         try {
             // Delete guard: a non-null message means this item can't be deleted —
             // show it immediately and skip the confirm and the request entirely.
@@ -583,10 +624,10 @@ export function useResourceEditor<T = any>(
             // event loop, so nothing can slip in during it.
             if (editGeneration.value !== generation) return;
 
-            const itemId = (selectedItem.value as any).id;
+            const itemId = (item as any).id;
             const url = props.deleteUrl.replace(':id', itemId);
 
-            await editForm.value.delete(url, {
+            await form.delete(url, {
                 onSuccess: (data: any) => {
                     // Show success toast
                     createToast?.({
@@ -596,33 +637,25 @@ export function useResourceEditor<T = any>(
                         modelValue: 3000, // Auto-dismiss after 3 seconds
                     });
 
-                    emit('rowDeleted', selectedItem.value as T, data);
-                    showEditModal.value = false;
-                    selectedItem.value = null;
+                    emit('rowDeleted', item, data);
+                    if (editGeneration.value === generation) {
+                        showEditModal.value = false;
+                        selectedItem.value = null;
+                    }
 
                     // Refresh table data to remove deleted item
                     refresh();
                 },
                 onError: (error: any) => {
-                    // Extract error message from server response
-                    const errorData = error?.response?.data ?? error?.data ?? error;
-                    const errorMessage = errorData?.message ?? 'Failed to delete. Please try again.';
-
-                    // Show error toast with server message
-                    createToast?.({
-                        title: 'Error',
-                        body: errorMessage,
-                        variant: 'danger',
-                        modelValue: 5000, // Auto-dismiss after 5 seconds
-                    });
-
-                    emit('deleteError', selectedItem.value as T, error);
+                    reportFailure(error, 'Failed to delete. Please try again.', generation);
+                    deleteErrorReported = true;
+                    emit('deleteError', item, error);
                 }
             });
         } catch (error) {
-            emit('deleteError', selectedItem.value as T, error);
+            if (!deleteErrorReported) emit('deleteError', item, error);
         } finally {
-            pendingAction.value = null;
+            if (editGeneration.value === generation) pendingAction.value = null;
         }
     };
 

package/resources/js/index.ts

@@ -7,6 +7,7 @@ export * from 'bootstrap-vue-next';
 // Extended components (custom functionality beyond Bootstrap Vue Next)
 export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
 export { default as DXForm } from "./components/extended/DXForm.vue";
+export { default as DXFormErrorSummary } from "./components/extended/DXFormErrorSummary.vue";
 export { default as DXField } from "./components/extended/DXField.vue";
 export { default as DXFieldLabel } from "./components/extended/DXFieldLabel.vue";
 export { default as DXModalActions } from "./components/extended/DXModalActions.vue";
@@ -20,6 +21,7 @@ export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
 // (#142) so chart.js / vue-chartjs stay genuinely optional peers — the main
 // entry no longer references them. See resources/js/charts.ts.
 export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
+export { default as DXStackingTable } from "./components/extended/DXStackingTable.vue";
 /**
  * @deprecated Use `DXForm`. `DXBasicForm` is a thin wrapper around `DXForm`
  * (a flat form is just `DXForm` without a `tabs` prop) that logs a one-time
@@ -129,6 +131,12 @@ export {
     isFieldVisible,
     isSubmittableField,
 } from "./utils/formSchema";
+// Which field a validation-error key belongs to (#194): the one rule the
+// error summary, tab selection and scrolling share.
+export {
+    resolveErrorTargets,
+    humaniseErrorKey,
+} from "./utils/formErrorTargets";
 
 // Types
 export type {
@@ -167,8 +175,16 @@ export type {
     FormSubmitOptions,
     FormState,
     UseFormReturn,
+    SubmitFailure,
 } from "./composables/useForm";
 
+export type {
+    ErrorTarget,
+    ResolveErrorTargetsOptions,
+} from "./utils/formErrorTargets";
+
+export type { ErrorSummarySelection } from "./components/extended/DXFormErrorSummary.vue";
+
 export type {
     FormFieldDefinition,
     DefineFormReturn,
@@ -202,4 +218,5 @@ export type {
     Navigation,
     NavbarSearchAlign,
     NavbarActionsOnMobile,
+    SidebarVariant,
 } from "./types/navigation";

package/resources/js/types/index.ts

@@ -367,6 +367,18 @@ export interface FieldDefinition {
      */
     submit?: boolean;
 
+    /**
+     * Extra validation-error keys this field owns (#194), for a field whose
+     * server-side errors arrive under keys other than its own: a span or
+     * component field that edits nested data, say. Patterns, where `*`
+     * matches exactly one dot segment: `["lines.*", "lines.*.*"]` claims
+     * `lines.0` and `lines.0.price` but not `lines` or `lines.0.a.b`.
+     * Checked before the usual matching (the field's own key, then any key
+     * nested under it), so it decides which field an error belongs to: the
+     * label it is listed under in the error summary and the tab it selects.
+     */
+    errorKeys?: string[];
+
     /**
      * Conditionally show or hide this field. When omitted the field is
      * always visible. Boolean or a function of the form model; evaluated
@@ -427,6 +439,7 @@ export interface BaseFieldDef {
     readonly?: MaybeFn<boolean>;
     plaintext?: MaybeFn<boolean>;
     submit?: boolean;
+    errorKeys?: string[];
     when?: MaybeFn<boolean>;
     show?: () => boolean;
 }

package/resources/js/types/navigation.ts

@@ -38,6 +38,15 @@ export type Navigation = NavigationGroup[];
  */
 export type NavbarSearchAlign = "start" | "center";
 
+/**
+ * Colour scheme of the dashboard sidebar: `"light"` (the default: a white pane,
+ * tinted group headers, a green active item, Poppins) or `"dark"` (the navy
+ * rail dfl shipped before). Every colour comes from a `--dx-sidebar-*` custom
+ * property, so either can be rebranded in CSS. Shared by DXDashboard (which
+ * forwards it as `sidebarVariant`) and DXDashboardSidebar (`variant`).
+ */
+export type SidebarVariant = "light" | "dark";
+
 /**
  * What the navbar actions slot does below the `md` breakpoint: `"wrap"` moves
  * it to its own full-width row (the bar grows), `"hide"` removes it entirely