@omnitend/dashboard-for-laravel 0.10.0 → 0.13.1

package/resources/js/components/extended/DXTable.vue

@@ -346,7 +346,7 @@
                             <div v-else></div>
 
                             <!-- Per-page selector -->
-                            <div v-if="clientSidePagination.total >= Math.min(...perPageOptions)" class="d-flex align-items-center gap-2">
+                            <div v-if="shouldShowPerPageSelector" class="d-flex align-items-center gap-2">
                                 <label for="perPageSelectClientSide" class="mb-0 small text-muted">Per page</label>
                                 <DFormSelect
                                     id="perPageSelectClientSide"
@@ -484,6 +484,15 @@
             :title="computedModalTitle"
             :size="editModalSize"
         >
+            <!-- Loading the full record for edit (showUrl fetch) -->
+            <div
+                v-if="editLoading"
+                class="dx-edit-loading d-flex align-items-center gap-2 text-muted mb-3"
+            >
+                <DSpinner small />
+                <span>Loading…</span>
+            </div>
+
             <!-- Edit/create form (tabbed when editTabs provided, flat otherwise) -->
             <DXForm
                 v-if="editForm"
@@ -584,7 +593,7 @@
                         <DButton
                             v-if="deleteUrl && !isCreateMode"
                             variant="danger"
-                            :disabled="editForm?.processing"
+                            :disabled="editForm?.processing || editLoading"
                             @click="handleDelete"
                         >
                             {{ pendingAction === 'delete' ? 'Deleting...' : 'Delete' }}
@@ -596,7 +605,7 @@
                         </DButton>
                         <DButton
                             variant="primary"
-                            :disabled="editForm?.processing"
+                            :disabled="editForm?.processing || editLoading"
                             @click="handleEditSave"
                         >
                             <template v-if="isCreateMode">
@@ -757,7 +766,8 @@ export interface Props<TItem = any> {
     /** Items per page (for provider mode, v-model support) */
     perPage?: number;
 
-    /** Striped rows */
+    /** Striped (banded) rows. Off by default — banding adds little on short
+     *  tables and can read as noise; opt in with `:striped="true"`. */
     striped?: boolean;
 
     /** Hover effect on rows */
@@ -791,9 +801,29 @@ export interface Props<TItem = any> {
     /** API endpoint pattern for updates (e.g., "/api/products/:id") */
     editUrl?: string;
 
+    /**
+     * API endpoint pattern to fetch the FULL record for the edit modal
+     * (e.g., "/api/products/:id"). When set, opening a row seeds the form from
+     * this fetch (shown with a loading state) instead of the thin list row —
+     * use when the list payload omits fields the edit form needs (notes, nested
+     * relations, repeater rows, …). The response is unwrapped from `data.data`
+     * (Laravel API Resource) or used as-is.
+     */
+    showUrl?: string;
+
     /** API endpoint pattern for deletions (e.g., "/api/products/:id") */
     deleteUrl?: string;
 
+    /**
+     * Guard run when Delete is clicked, before the confirm dialog and request.
+     * Return a message for a non-deletable item to show it immediately (as a
+     * toast) and skip both the confirm and the delete request; return
+     * `null`/`undefined` to proceed with the normal confirm + delete. Lets you
+     * short-circuit a doomed delete (e.g. a record with dependents that the
+     * server would reject) with an immediate, specific reason.
+     */
+    deleteGuard?: (item: TItem) => string | null | undefined;
+
     /** API endpoint for creating new items (e.g., "/api/products") — enables "New" button */
     createUrl?: string;
 
@@ -819,7 +849,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
     perPageOptions: () => [10, 25, 50, 100],
     currentPage: 1,
     // perPage: 10,  // Don't set default - let internalPerPage handle it
-    striped: true,
+    striped: false,
     hover: true,
     responsive: true,
     fluid: false,
@@ -1175,9 +1205,11 @@ const shouldShowPerPageSelector = computed(() => {
     if (!props.showPerPageSelector) return false;
 
     const smallestOption = Math.min(...props.perPageOptions);
-    const total = isInertiaMode.value
-        ? props.pagination?.total || 0
-        : apiPaginationMeta.value?.total || 0;
+    const total = isClientSideMode.value
+        ? clientSidePagination.value?.total || 0
+        : isInertiaMode.value
+            ? props.pagination?.total || 0
+            : apiPaginationMeta.value?.total || 0;
 
     return total >= smallestOption;
 });
@@ -1462,6 +1494,19 @@ const isCreateMode = ref(false);
 // request the form makes, so it can't tell Save from Delete on its own.
 const pendingAction = ref<'save' | 'delete' | null>(null);
 
+// True while the edit modal is fetching the full record via `showUrl`.
+const editLoading = ref(false);
+
+// 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;
+
+// Monotonic token for opening the modal itself. The first edit dynamically
+// imports useForm; if the user clicks row A then row B before that import
+// resolves, A's callback must not seed/open/fetch over B. Each open captures
+// the current token and bails if it's since been superseded.
+let modalOpenToken = 0;
+
 // Toast (may not be available in test environment)
 let createToast: ((obj: any) => any) | undefined;
 try {
@@ -1542,10 +1587,15 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
         // Reset to first tab
         activeTabIndex.value = 0;
 
+        // Capture this open so a slow first-time useForm import can't seed the
+        // form after the user has since opened a different row (or create).
+        const openToken = ++modalOpenToken;
+
         // Initialize form with item data
         if (!editForm.value) {
             // Dynamically import useForm to avoid circular dependency
             import('../../composables/useForm').then(({ useForm }) => {
+                if (openToken !== modalOpenToken) return; // superseded
                 const formData: Record<string, any> = {};
                 props.editFields!.forEach(field => {
                     formData[field.key] = (item as any)[field.key] ?? field.default ?? '';
@@ -1554,6 +1604,9 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
 
                 // Open modal
                 showEditModal.value = true;
+
+                // Optionally replace the row-seeded data with the full record.
+                if (props.showUrl) void fetchFullRecordForEdit(item);
             });
         } else {
             // Update existing form
@@ -1564,7 +1617,51 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
 
             // Open modal
             showEditModal.value = true;
+
+            // Optionally replace the row-seeded data with the full record.
+            if (props.showUrl) void fetchFullRecordForEdit(item);
+        }
+    }
+};
+
+// Fetch the full record for the edit modal and re-seed the form from it. The
+// form is already showing row data; this fills in fields the list row omitted.
+const fetchFullRecordForEdit = async (item: T) => {
+    const itemId = (item as any).id;
+    if (itemId === undefined || itemId === null) return;
+
+    const token = ++editFetchToken;
+    editLoading.value = true;
+    try {
+        const url = props.showUrl!.replace(':id', String(itemId));
+        const response = await axios.get(url);
+        // Superseded by a newer row-open — discard.
+        if (token !== editFetchToken) return;
+
+        const record = response.data?.data ?? response.data;
+        if (record && editForm.value) {
+            props.editFields!.forEach(field => {
+                if (Object.prototype.hasOwnProperty.call(record, field.key)) {
+                    editForm.value.data[field.key] = record[field.key];
+                }
+            });
+            // Widen selectedItem so predicates / the delete guard see full data.
+            selectedItem.value = { ...(selectedItem.value as any), ...record };
         }
+    } catch (error: any) {
+        if (token !== editFetchToken) return;
+        const message =
+            error?.response?.data?.message ??
+            error?.message ??
+            'Failed to load the full record.';
+        createToast?.({
+            title: 'Error',
+            body: message,
+            variant: 'danger',
+            modelValue: 5000,
+        });
+    } finally {
+        if (token === editFetchToken) editLoading.value = false;
     }
 };
 
@@ -1576,6 +1673,12 @@ const handleCreateNew = () => {
     selectedItem.value = null;
     activeTabIndex.value = 0;
 
+    // Supersede any in-flight row-open (and its pending fetch) so a slow
+    // useForm import from an earlier edit can't seed over this create.
+    const openToken = ++modalOpenToken;
+    editFetchToken++;
+    editLoading.value = false;
+
     const initForm = (useForm: any) => {
         const formData: Record<string, any> = {};
         props.editFields!.forEach(field => {
@@ -1587,6 +1690,7 @@ const handleCreateNew = () => {
 
     if (!editForm.value) {
         import('../../composables/useForm').then(({ useForm }) => {
+            if (openToken !== modalOpenToken) return; // superseded
             initForm(useForm);
         });
     } else {
@@ -1724,6 +1828,9 @@ const handleEditCancel = () => {
     selectedItem.value = null;
     isCreateMode.value = false;
     activeTabIndex.value = 0; // Reset tab for next time
+    // Abandon any in-flight showUrl fetch so it can't seed a closed modal.
+    editFetchToken++;
+    editLoading.value = false;
     if (editForm.value) {
         editForm.value.clearErrors();
     }
@@ -1732,6 +1839,22 @@ const handleEditCancel = () => {
 // Handle delete from edit modal
 const handleDelete = async () => {
     if (!editForm.value || !selectedItem.value || !props.deleteUrl) return;
+    // Don't evaluate the guard until the full record has loaded (showUrl) — it
+    // may depend on fields the thin list row doesn't carry.
+    if (editLoading.value) return;
+
+    // Delete guard: a non-null message means this item can't be deleted — show
+    // it immediately and skip the confirm and the request entirely.
+    const guardMessage = props.deleteGuard?.(selectedItem.value as T);
+    if (guardMessage) {
+        createToast?.({
+            title: 'Cannot delete',
+            body: guardMessage,
+            variant: 'danger',
+            modelValue: 5000,
+        });
+        return;
+    }
 
     // Confirm deletion
     const itemName = (selectedItem.value as any).name || (selectedItem.value as any).title || singularItemName.value;
@@ -1786,6 +1909,12 @@ const handleDelete = async () => {
 
 defineExpose({
     refresh,
+    /**
+     * Open the built-in create modal (same as clicking the default "New {item}"
+     * button). Lets the create action live outside the table card — e.g. in a
+     * page header or the dashboard navbar. No-op unless `editFields` are set.
+     */
+    openCreate: handleCreateNew,
 });
 </script>
 

package/resources/js/composables/useForm.ts

@@ -1,6 +1,7 @@
 import {
     reactive,
     computed,
+    toRaw,
     type ComputedRef,
     type WritableComputedRef,
 } from "vue";
@@ -71,10 +72,69 @@ export interface UseFormReturn<TData extends Record<string, any>>
 
 // ————————————————— helpers
 
-const deepClone = <T>(v: T): T =>
-    typeof structuredClone === "function"
-        ? structuredClone(v)
-        : JSON.parse(JSON.stringify(v));
+// Deep-clone the seed data for the form's working copy. `structuredClone`
+// refuses to clone a Vue reactive Proxy (a `default: []` / `default: {}` inside
+// a reactive `editFields` ref is a Proxy) and throws DataCloneError. `toRaw`
+// unwraps the top-level proxy; a try/catch falls back to a JSON clone for any
+// residual proxy (nested reactive values) or otherwise-uncloneable input. Form
+// data is JSON-bound at the API boundary, so the JSON fallback is lossless here.
+const deepClone = <T>(value: T): T => {
+    const raw = toRaw(value);
+    if (typeof structuredClone === "function") {
+        try {
+            return structuredClone(raw);
+        } catch {
+            // Fall through to the JSON clone below.
+        }
+    }
+    return JSON.parse(JSON.stringify(raw));
+};
+
+const isFileLike = (value: unknown): boolean =>
+    (typeof File !== "undefined" && value instanceof File) ||
+    (typeof Blob !== "undefined" && value instanceof Blob);
+
+/** Whether a payload contains a File/Blob anywhere (→ needs multipart). */
+function containsFile(value: unknown): boolean {
+    if (isFileLike(value)) return true;
+    if (Array.isArray(value)) return value.some(containsFile);
+    if (value !== null && typeof value === "object") {
+        return Object.values(value as Record<string, unknown>).some(containsFile);
+    }
+    return false;
+}
+
+/** Append a value to FormData using Laravel-style bracket keys. */
+function appendToFormData(fd: FormData, key: string, value: unknown): void {
+    if (value === null || value === undefined) {
+        fd.append(key, "");
+    } else if (isFileLike(value)) {
+        fd.append(key, value as Blob);
+    } else if (Array.isArray(value)) {
+        value.forEach((entry, index) =>
+            appendToFormData(fd, `${key}[${index}]`, entry),
+        );
+    } else if (value instanceof Date) {
+        fd.append(key, value.toISOString());
+    } else if (typeof value === "object") {
+        for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+            appendToFormData(fd, `${key}[${k}]`, v);
+        }
+    } else if (typeof value === "boolean") {
+        // Laravel's boolean validation accepts "1"/"0".
+        fd.append(key, value ? "1" : "0");
+    } else {
+        fd.append(key, String(value));
+    }
+}
+
+function objectToFormData(payload: Record<string, unknown>): FormData {
+    const fd = new FormData();
+    for (const [key, value] of Object.entries(payload)) {
+        appendToFormData(fd, key, value);
+    }
+    return fd;
+}
 
 function errorsFromLaravel(error: any): {
     errors: ValidationErrors;
@@ -201,15 +261,39 @@ export function useForm<TData extends Record<string, any>>(
 
         options.onBefore?.(state.data as TData);
 
+        // When the payload carries a File/Blob (an image/file field), send it as
+        // multipart/form-data. PHP only parses multipart bodies on POST, so a
+        // put/patch is spoofed as POST + `_method` (Laravel reads that). This
+        // also covers a `transform` that returns a FormData directly.
+        let sendMethod = method;
+        let sendPayload: any = payloadRaw;
+        if (method !== "get" && payloadRaw !== null && typeof payloadRaw === "object") {
+            const alreadyFormData =
+                typeof FormData !== "undefined" && payloadRaw instanceof FormData;
+            let formData: FormData | null = null;
+            if (alreadyFormData) {
+                formData = payloadRaw as FormData;
+            } else if (containsFile(payloadRaw)) {
+                formData = objectToFormData(payloadRaw as Record<string, unknown>);
+            }
+            if (formData) {
+                if (method === "put" || method === "patch") {
+                    formData.append("_method", method.toUpperCase());
+                    sendMethod = "post";
+                }
+                sendPayload = formData;
+            }
+        }
+
         try {
             const { data } =
-                method === "get"
+                sendMethod === "get"
                     ? await api.get<TResponse>(
                         url,
-                        payloadRaw as Record<string, unknown>,
+                        sendPayload as Record<string, unknown>,
                         { signal: options?.signal },
                     )
-                    : await api[method]<TResponse>(url, payloadRaw, {
+                    : await api[sendMethod]<TResponse>(url, sendPayload, {
                         signal: options?.signal,
                     });
 

package/resources/js/index.ts

@@ -9,6 +9,10 @@ export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
 export { default as DXForm } from "./components/extended/DXForm.vue";
 export { default as DXField } from "./components/extended/DXField.vue";
 export { default as DXFieldLabel } from "./components/extended/DXFieldLabel.vue";
+export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
+export { default as DXBarChart } from "./components/charts/DXBarChart.vue";
+export { default as DXLineChart } from "./components/charts/DXLineChart.vue";
+export { default as DXDoughnutChart } from "./components/charts/DXDoughnutChart.vue";
 export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
 /**
  * @deprecated Use `DXForm`. `DXBasicForm` is a thin wrapper around `DXForm`