@omnitend/dashboard-for-laravel 0.11.0 → 0.14.0

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

@@ -9,7 +9,7 @@
     <DContainer :fluid="fluid" :class="containerClass">
         <DRow class="justify-content-center">
             <DCol :md="columnSize">
-                <DCard>
+                <DXTableShell :card="card">
                     <template v-if="title || createUrl || $slots.header" #header>
                         <!-- @slot Card header content; overrides the default title heading and the "New {item}" button. -->
                         <slot name="header">
@@ -69,13 +69,15 @@
                                         @update:model-value="handleFilterChange(field.key, $event as string)"
                                     />
 
-                                    <!-- Select Filter -->
-                                    <DFormSelect
+                                    <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
+                                    <DAutocomplete
                                         v-else-if="field.filter === 'select'"
                                         :model-value="effectiveFilters[field.key] || ''"
-                                        :options="[{ value: '', text: 'All' }, ...getFieldFilterOptions(field)]"
+                                        :options="getFieldFilterOptions(field)"
+                                        :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        open-on-focus
+                                        @update:model-value="handleFilterChange(field.key, ($event ?? '') as string)"
                                     />
 
                                     <!-- Number Filter -->
@@ -165,13 +167,15 @@
                                         @update:model-value="handleFilterChange(field.key, $event as string)"
                                     />
 
-                                    <!-- Select Filter -->
-                                    <DFormSelect
+                                    <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
+                                    <DAutocomplete
                                         v-else-if="field.filter === 'select'"
                                         :model-value="effectiveFilters[field.key] || ''"
-                                        :options="[{ value: '', text: 'All' }, ...getFieldFilterOptions(field)]"
+                                        :options="getFieldFilterOptions(field)"
+                                        :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        open-on-focus
+                                        @update:model-value="handleFilterChange(field.key, ($event ?? '') as string)"
                                     />
 
                                     <!-- Number Filter -->
@@ -262,13 +266,15 @@
                                         @update:model-value="handleFilterChange(field.key, $event as string)"
                                     />
 
-                                    <!-- Select Filter -->
-                                    <DFormSelect
+                                    <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
+                                    <DAutocomplete
                                         v-else-if="field.filter === 'select'"
                                         :model-value="effectiveFilters[field.key] || ''"
-                                        :options="[{ value: '', text: 'All' }, ...getFieldFilterOptions(field)]"
+                                        :options="getFieldFilterOptions(field)"
+                                        :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        open-on-focus
+                                        @update:model-value="handleFilterChange(field.key, ($event ?? '') as string)"
                                     />
 
                                     <!-- Number Filter -->
@@ -346,7 +352,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"
@@ -473,7 +479,7 @@
                             </div>
                         </div>
                     </div>
-                </DCard>
+                </DXTableShell>
             </DCol>
         </DRow>
 
@@ -484,6 +490,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 +599,7 @@
                         <DButton
                             v-if="deleteUrl && !isCreateMode"
                             variant="danger"
-                            :disabled="editForm?.processing"
+                            :disabled="editForm?.processing || editLoading"
                             @click="handleDelete"
                         >
                             {{ pendingAction === 'delete' ? 'Deleting...' : 'Delete' }}
@@ -596,7 +611,7 @@
                         </DButton>
                         <DButton
                             variant="primary"
-                            :disabled="editForm?.processing"
+                            :disabled="editForm?.processing || editLoading"
                             @click="handleEditSave"
                         >
                             <template v-if="isCreateMode">
@@ -619,15 +634,17 @@ import { router } from "@inertiajs/vue3";
 import axios from "axios";
 import pluralize from "pluralize";
 import { useToast } from "../../composables/useToast";
+import { useForm } from "../../composables/useForm";
 import DContainer from "../base/DContainer.vue";
 import DRow from "../base/DRow.vue";
 import DCol from "../base/DCol.vue";
-import DCard from "../base/DCard.vue";
+import DXTableShell from "./DXTableShell.vue";
 import DSpinner from "../base/DSpinner.vue";
 import DTable from "../base/DTable.vue";
 import DPagination from "../base/DPagination.vue";
 import DFormInput from "../base/DFormInput.vue";
 import DFormSelect from "../base/DFormSelect.vue";
+import DAutocomplete from "../base/DAutocomplete.vue";
 import DModal from "../base/DModal.vue";
 import DButton from "../base/DButton.vue";
 import DXForm from "./DXForm.vue";
@@ -757,7 +774,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 */
@@ -775,6 +793,14 @@ export interface Props<TItem = any> {
     /** Column size (Bootstrap grid) */
     columnSize?: string | number;
 
+    /**
+     * Wrap the table in a `DCard`. Defaults to `true`. Set `false` for a plain,
+     * borderless variant — the same header, filter row, table and pagination
+     * rendered directly on the page background (no card border/shadow), for
+     * data-heavy admin index pages that read as busy inside a card.
+     */
+    card?: boolean;
+
     // Edit Modal Props
     /** Form field definitions for edit modal (if provided, enables edit on row click) */
     editFields?: any[]; // FieldDefinition[] - using any to avoid circular import
@@ -791,6 +817,16 @@ 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;
 
@@ -829,12 +865,13 @@ 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,
     containerClass: "py-5",
     columnSize: "12",
+    card: true,
     editModalSize: "lg",
 });
 
@@ -1185,9 +1222,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;
 });
@@ -1472,6 +1511,13 @@ 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;
+
 // Toast (may not be available in test environment)
 let createToast: ((obj: any) => any) | undefined;
 try {
@@ -1552,29 +1598,68 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
         // Reset to first tab
         activeTabIndex.value = 0;
 
-        // Initialize form with item data
+        // Initialize form with item data. `useForm` is statically imported, so
+        // seeding is synchronous — no interleaving between successive row opens.
         if (!editForm.value) {
-            // Dynamically import useForm to avoid circular dependency
-            import('../../composables/useForm').then(({ useForm }) => {
-                const formData: Record<string, any> = {};
-                props.editFields!.forEach(field => {
-                    formData[field.key] = (item as any)[field.key] ?? field.default ?? '';
-                });
-                editForm.value = useForm(formData);
-
-                // Open modal
-                showEditModal.value = true;
+            const formData: Record<string, any> = {};
+            props.editFields!.forEach(field => {
+                formData[field.key] = (item as any)[field.key] ?? field.default ?? '';
             });
+            editForm.value = useForm(formData);
         } else {
             // Update existing form
             props.editFields.forEach(field => {
                 editForm.value.data[field.key] = (item as any)[field.key] ?? field.default ?? '';
             });
             editForm.value.clearErrors();
+        }
+
+        // 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;
 
-            // Open modal
-            showEditModal.value = true;
+    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;
     }
 };
 
@@ -1586,27 +1671,25 @@ const handleCreateNew = () => {
     selectedItem.value = null;
     activeTabIndex.value = 0;
 
-    const initForm = (useForm: any) => {
+    // Supersede any in-flight row-open fetch so a slow showUrl fetch from an
+    // earlier edit can't seed over this create.
+    editFetchToken++;
+    editLoading.value = false;
+
+    if (!editForm.value) {
         const formData: Record<string, any> = {};
         props.editFields!.forEach(field => {
             formData[field.key] = field.default ?? '';
         });
         editForm.value = useForm(formData);
-        showEditModal.value = true;
-    };
-
-    if (!editForm.value) {
-        import('../../composables/useForm').then(({ useForm }) => {
-            initForm(useForm);
-        });
     } else {
         // Reset existing form to defaults
         props.editFields!.forEach(field => {
             editForm.value.data[field.key] = field.default ?? '';
         });
         editForm.value.clearErrors();
-        showEditModal.value = true;
     }
+    showEditModal.value = true;
 };
 
 // Handle save from edit modal
@@ -1734,6 +1817,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();
     }
@@ -1742,6 +1828,9 @@ 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.

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

@@ -0,0 +1,54 @@
+<!--
+  @component
+  Internal chrome wrapper for `DXTable`. Renders its content either inside a
+  `DCard` (the default) or as a plain, borderless block on the page background
+  (`:card="false"`). Extracted so `DXTable`'s ~460-line body and all its slots
+  aren't duplicated across a card/plain `v-if`.
+
+  Slots:
+  - `#header` — the title / action row. In card mode it fills `DCard`'s header;
+    in plain mode it renders above the table with a subtle bottom rule.
+  - default — the table body (spinner/error/table/pagination).
+-->
+<template>
+  <DCard v-if="card">
+    <template v-if="$slots.header" #header>
+      <slot name="header" />
+    </template>
+    <slot />
+  </DCard>
+
+  <div v-else class="dx-table-plain">
+    <div v-if="$slots.header" class="dx-table-plain__header">
+      <slot name="header" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import DCard from '../base/DCard.vue';
+
+interface Props {
+  /** Wrap the content in a `DCard`. When false, render plain/borderless. */
+  card?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  card: true,
+});
+</script>
+
+<style scoped>
+/*
+  Plain variant: no card border/shadow/background — the table sits directly on
+  the page. The header row gets a subtle bottom rule so it still reads as a
+  distinct band above the table (mirrors the card header's separation without
+  the full card chrome).
+*/
+.dx-table-plain__header {
+  padding-bottom: 0.75rem;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid var(--bs-border-color);
+}
+</style>

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`