@omnitend/dashboard-for-laravel 0.43.0 → 0.45.0

package/resources/js/composables/useForm.ts

@@ -13,6 +13,19 @@ export interface ValidationErrors {
 
 export type FormError = ApiError;
 
+/**
+ * What the most recent failed submit returned (#194): the server's message and
+ * a COPY of its validation errors, frozen at the moment the submit failed.
+ * The live `form.errors` empties as the user fixes fields; this does not, so a
+ * summary built from it keeps listing every message until the next submit.
+ */
+export interface SubmitFailure {
+    /** A message fit to show a user (never empty, never a raw exception). */
+    message: string;
+    /** The validation errors the submit returned (`{}` when none). */
+    errors: ValidationErrors;
+}
+
 export interface FormSubmitOptions<TPayload = unknown, TResponse = unknown> {
     onSuccess?: (data: TResponse) => void;
     onError?: (error: FormError) => void;
@@ -39,6 +52,19 @@ export interface FormState<TData extends Record<string, any>> {
      */
     wasSuccessful: boolean;
     shouldShowMessage: boolean;
+    /**
+     * What the most recent submit failed with, or `null`. Set when a submit
+     * fails (validation or otherwise; an aborted submit does not count),
+     * cleared when a submit starts and when one succeeds. Untouched by
+     * `clearError`, `clearErrors`, `setErrors` and field edits.
+     */
+    submitFailure: SubmitFailure | null;
+    /**
+     * How many submits have failed, counting every failure (including a
+     * `preserveErrors` resubmit that returned the same errors), so a watcher
+     * can react to "a submit just failed" even when nothing else changed.
+     */
+    failedSubmitCount: number;
 }
 
 export interface UseFormReturn<TData extends Record<string, any>>
@@ -143,6 +169,59 @@ function objectToFormData(payload: Record<string, unknown>): FormData {
     return fd;
 }
 
+const GENERIC_FAILURE_MESSAGE = "An error occurred";
+
+/** Copy an errors map, keeping only non-empty string messages. */
+function copyValidationErrors(errors: unknown): ValidationErrors {
+    const copy: ValidationErrors = {};
+    if (errors === null || typeof errors !== "object") return copy;
+    for (const [key, value] of Object.entries(errors as Record<string, unknown>)) {
+        const messages = (Array.isArray(value) ? value : [value]).filter(
+            (message): message is string =>
+                typeof message === "string" && message !== "",
+        );
+        if (messages.length > 0) copy[key] = messages;
+    }
+    return copy;
+}
+
+export function isAbortError(error: unknown): boolean {
+    return (
+        error !== null &&
+        typeof error === "object" &&
+        (error as { name?: unknown }).name === "AbortError"
+    );
+}
+
+/**
+ * The `submitFailure` for a rejected submit, or `null` for an abort (the
+ * caller cancelled it; nothing failed). Only an `ApiError` from the client
+ * (an HTTP failure: it carries a numeric `status`, and the client has already
+ * replaced 401/403/404/419/500 bodies with user-facing text) supplies the
+ * message. Anything else (a network `TypeError`, an exception thrown from
+ * `onSuccess`) gets the generic message, so a summary never shows
+ * "Failed to fetch" or a stack-trace line.
+ */
+function submitFailureFrom(error: unknown): SubmitFailure | null {
+    if (isAbortError(error)) return null;
+    const isApiError =
+        error !== null &&
+        typeof error === "object" &&
+        typeof (error as ApiError).status === "number";
+    if (isApiError) {
+        const apiError = error as ApiError;
+        const message =
+            typeof apiError.message === "string" && apiError.message.trim() !== ""
+                ? apiError.message
+                : GENERIC_FAILURE_MESSAGE;
+        return { message, errors: copyValidationErrors(apiError.errors) };
+    }
+    return {
+        message: GENERIC_FAILURE_MESSAGE,
+        errors: copyValidationErrors(errorsFromLaravel(error).errors),
+    };
+}
+
 function errorsFromLaravel(error: any): {
     errors: ValidationErrors;
     message: string;
@@ -172,6 +251,64 @@ export function useForm<TData extends Record<string, any>>(
     let inFlightCount = 0;
     let successTimer: ReturnType<typeof setTimeout> | null = null;
 
+    // Which submit's outcome the form records (#194 review). Each submit takes
+    // a generation number when it starts. Its outcome (success, failure,
+    // errors, message, `submitFailure`, `resetOnSuccess`) is recorded only if
+    // no NEWER submit is still pending or has already recorded: the newest
+    // submit's outcome wins, in either completion order. An older success can
+    // therefore never clear a newer failure, and an older failure never lands
+    // over a newer success. Callbacks and the returned promise are
+    // unaffected: every submit still calls its own onSuccess/onError and
+    // resolves/rejects.
+    //
+    // An ABORTED submit is treated as if it had never started: it records
+    // nothing (not even the abort's own message), and an older outcome that
+    // was held back only because the aborted one was pending is then
+    // recorded. Held-back outcomes wait in `heldOutcomes` (newest wins; a
+    // newer recorded outcome drops them). A submit whose preparation
+    // (`transform`, `onBefore`) throws never takes a generation at all.
+    let latestSubmitGeneration = 0;
+    let lastRecordedGeneration = 0;
+    const pendingGenerations = new Set<number>();
+    const heldOutcomes = new Map<number, () => void>();
+    const mayRecord = (generation: number): boolean => {
+        if (generation < lastRecordedGeneration) return false;
+        for (const pending of pendingGenerations) {
+            if (pending > generation) return false;
+        }
+        return true;
+    };
+    /** Record now if this generation may, else hold it back for later. */
+    const recordOrHold = (generation: number, record: () => void): boolean => {
+        if (mayRecord(generation)) {
+            lastRecordedGeneration = generation;
+            heldOutcomes.clear();
+            record();
+            return true;
+        }
+        if (generation >= lastRecordedGeneration) heldOutcomes.set(generation, record);
+        return false;
+    };
+    /**
+     * After a submit leaves the pending set: record the NEWEST held-back
+     * outcome if nothing newer is pending any more (an abort unblocked it),
+     * and drop every older one. Older held outcomes never surface over a
+     * newer settled one.
+     */
+    const releaseHeldOutcomes = (): void => {
+        if (heldOutcomes.size === 0) return;
+        const newest = Math.max(...heldOutcomes.keys());
+        if (newest < lastRecordedGeneration) {
+            heldOutcomes.clear();
+            return;
+        }
+        if (!mayRecord(newest)) return;
+        const record = heldOutcomes.get(newest)!;
+        lastRecordedGeneration = newest;
+        heldOutcomes.clear();
+        record();
+    };
+
     const state = reactive<FormState<TData>>({
         data: deepClone(snapshot) as TData,
         errors: {},
@@ -181,6 +318,8 @@ export function useForm<TData extends Record<string, any>>(
         recentlySuccessful: false,
         wasSuccessful: false,
         shouldShowMessage: false,
+        submitFailure: null,
+        failedSubmitCount: 0,
     });
 
     const hasErrors = computed(() =>
@@ -238,7 +377,9 @@ export function useForm<TData extends Record<string, any>>(
         }
         clearErrors();
         state.touched = {};
-        state.processing = false;
+        // Not `false` outright: with another submit still in flight the form
+        // is still processing, and the counter will clear it when that ends.
+        state.processing = inFlightCount > 0;
     };
 
     // v-model for a single field
@@ -269,11 +410,15 @@ export function useForm<TData extends Record<string, any>>(
         url: string,
         options: FormSubmitOptions<TData, TResponse> = {},
     ): Promise<TResponse> => {
-        inFlightCount += 1;
-        state.processing = true;
-        state.wasSuccessful = false;
-        if (!options.preserveErrors) clearErrors();
-
+        // Preparation (`transform`, `onBefore`, building the body) runs BEFORE
+        // the submit takes a generation or touches form state. If it throws,
+        // the submit rejects with that error and is as if it never started:
+        // no request, no callbacks, no recorded failure, and the form keeps
+        // its previous outcome. (Before #194's review a throw here also
+        // rejected without calling onError/onFinish or recording a failure,
+        // but it had already cleared the errors and summary, and it left
+        // `processing` stuck at true because the in-flight count was never
+        // decremented.)
         const payloadRaw = (
             options.transform
                 ? // Give `transform` a COPY of the form data (#150), so a transform
@@ -315,6 +460,14 @@ export function useForm<TData extends Record<string, any>>(
             }
         }
 
+        inFlightCount += 1;
+        const generation = ++latestSubmitGeneration;
+        pendingGenerations.add(generation);
+        state.processing = true;
+        state.wasSuccessful = false;
+        state.submitFailure = null;
+        if (!options.preserveErrors) clearErrors();
+
         try {
             const { data } =
                 sendMethod === "get"
@@ -334,27 +487,52 @@ export function useForm<TData extends Record<string, any>>(
                             signal: options?.signal,
                         });
 
-            state.recentlySuccessful = true;
-            state.wasSuccessful = true;
-            if (successTimer !== null) clearTimeout(successTimer);
-            successTimer = setTimeout(() => {
-                state.recentlySuccessful = false;
-                successTimer = null;
-            }, 1500);
+            const records = recordOrHold(generation, () => {
+                state.recentlySuccessful = true;
+                state.wasSuccessful = true;
+                state.submitFailure = null;
+                if (successTimer !== null) clearTimeout(successTimer);
+                successTimer = setTimeout(() => {
+                    state.recentlySuccessful = false;
+                    successTimer = null;
+                }, 1500);
+            });
 
             options.onSuccess?.(data);
-            if (options.resetOnSuccess) {
+            // Only a success recorded when it lands resets: an older one would
+            // wipe the data and errors the newer submit is answering for, and
+            // a held-back success recorded later (after an abort) does not
+            // reset either, since the user may have typed since.
+            if (options.resetOnSuccess && records) {
                 reset();
             }
             return data;
         } catch (err) {
-            state.wasSuccessful = false;
-            const { errors, message } = errorsFromLaravel(err);
-            setErrors(errors);
-            setMessage(message);
+            // Decided again here (not reused from the try) so a throwing
+            // onSuccess is recorded, or held, as its failure: a held-back
+            // success for this generation is replaced.
+            //
+            // An abort records nothing: it is a cancellation, not an outcome.
+            // It leaves the pending set below, which may release an older
+            // held-back outcome.
+            if (!isAbortError(err)) {
+                const { errors, message } = errorsFromLaravel(err);
+                const failure = submitFailureFrom(err);
+                recordOrHold(generation, () => {
+                    state.wasSuccessful = false;
+                    setErrors(errors);
+                    setMessage(message);
+                    if (failure) {
+                        state.submitFailure = failure;
+                        state.failedSubmitCount += 1;
+                    }
+                });
+            }
             options.onError?.(err as FormError);
             throw err;
         } finally {
+            pendingGenerations.delete(generation);
+            releaseHeldOutcomes();
             inFlightCount -= 1;
             // Only clear `processing` once no submission is still in flight.
             if (inFlightCount === 0) state.processing = false;

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;
         }
     };