@omnitend/dashboard-for-laravel 0.27.0 → 0.29.0

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

@@ -0,0 +1,247 @@
+<!--
+  @component
+  Internal edit/create modal for `DXTable` (#129). Renders the `DModal` +
+  `DXForm` and maps DXTable's `edit-value`/`edit-span`/`tab-*` slots onto
+  DXForm's `value`/`span`/`tab-*` slots, providing the row context and a `close`
+  handle. Extracted so `DXTable` is a thin façade over the table render, the
+  pagination, the editor logic (`useResourceEditor`) and this modal — rather than
+  owning all four.
+
+  The edit-modal slots reach here forwarded from DXTable (consumer → DXTable →
+  here → DXForm). This component computes which keyed slots the consumer actually
+  provided from its OWN `$slots`, so the slot-plumbing lives entirely with the
+  modal, not the composable.
+-->
+<template>
+    <DModal
+        :model-value="show"
+        :title="title"
+        :size="size"
+        @update:model-value="emit('update:show', $event)"
+    >
+        <!-- Loading the full record for edit (showUrl fetch) -->
+        <div
+            v-if="loading"
+            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 tabs provided, flat otherwise).
+
+             Keyed per modal open: the form OBJECT is created once and then
+             reseeded in place for each row, so without a key Vue reuses the
+             same DXField instances across records — and any per-field UI
+             state rides along with them. That leaked a revealed password
+             from one row into the next. The key gives each record a fresh
+             field subtree; the data still lives in `form`, so nothing
+             is lost by remounting. -->
+        <DXForm
+            v-if="form"
+            :key="formInstanceKey"
+            :active-tab="activeTab"
+            :form="form"
+            :fields="fields"
+            :tabs="tabs"
+            :context="item ?? undefined"
+            :show-submit="false"
+            @update:active-tab="emit('update:activeTab', $event)"
+            @submit="emit('save')"
+        >
+            <!-- Forward DXTable's edit-value(key) → DXForm value(key) -->
+            <template
+                v-for="key in editValueSlotKeys"
+                :key="`ev-${key}`"
+                #[`value(${key})`]="sp"
+            >
+                <!--
+                  @slot Custom input for field `<key>` in the edit/create modal, forwarded to DXForm. Name it `edit-value(<fieldKey>)`.
+                  @binding {object} item The row being edited (null in create mode).
+                  @binding {any} value The current field value.
+                  @binding {Function} update Call with a new value to update the field.
+                  @binding {object} field The field definition.
+                -->
+                <slot
+                    :name="`edit-value(${key})`"
+                    :item="item"
+                    :value="sp.value"
+                    :update="sp.update"
+                    :field="sp.field"
+                />
+            </template>
+
+            <!-- Forward edit-span(key) → span(key) -->
+            <template
+                v-for="key in editSpanSlotKeys"
+                :key="`es-${key}`"
+                #[`span(${key})`]="sp"
+            >
+                <!--
+                  @slot Full-width custom content for field `<key>` in the edit/create modal, forwarded to DXForm's span slot. Name it `edit-span(<fieldKey>)`.
+                  @binding {object} item The row being edited (null in create mode).
+                  @binding {any} value The current field value.
+                  @binding {Function} update Call with a new value to update the field.
+                  @binding {Function} close Call to close the edit modal.
+                -->
+                <slot
+                    :name="`edit-span(${key})`"
+                    :item="item"
+                    :value="sp.value"
+                    :update="sp.update"
+                    :close="close"
+                />
+            </template>
+
+            <!-- Forward tab-content / tab-before / tab-after slots -->
+            <template
+                v-for="key in tabContentSlotKeys"
+                :key="`tc-${key}`"
+                #[`tab-content(${key})`]="sp"
+            >
+                <!--
+                  @slot Replaces the auto-rendered fields of edit-modal tab `<key>` with custom content. Name it `tab-content(<tabKey>)`.
+                  @binding {object} item The row being edited (null in create mode).
+                  @binding {object} tab The tab definition.
+                -->
+                <slot :name="`tab-content(${key})`" :item="item" :tab="sp.tab" />
+            </template>
+            <template
+                v-for="key in tabBeforeSlotKeys"
+                :key="`tb-${key}`"
+                #[`tab-before(${key})`]="sp"
+            >
+                <!--
+                  @slot Custom content rendered before the fields of edit-modal tab `<key>`. Name it `tab-before(<tabKey>)`.
+                  @binding {object} item The row being edited (null in create mode).
+                  @binding {object} tab The tab definition.
+                -->
+                <slot :name="`tab-before(${key})`" :item="item" :tab="sp.tab" />
+            </template>
+            <template
+                v-for="key in tabAfterSlotKeys"
+                :key="`taf-${key}`"
+                #[`tab-after(${key})`]="sp"
+            >
+                <!--
+                  @slot Custom content rendered after the fields of edit-modal tab `<key>`. Name it `tab-after(<tabKey>)`.
+                  @binding {object} item The row being edited (null in create mode).
+                  @binding {object} tab The tab definition.
+                -->
+                <slot :name="`tab-after(${key})`" :item="item" :tab="sp.tab" />
+            </template>
+        </DXForm>
+
+        <template #footer>
+            <div class="d-flex justify-content-between w-100">
+                <div>
+                    <DButton
+                        v-if="deleteUrl && !isCreateMode"
+                        variant="danger"
+                        :loading="pendingAction === 'delete'"
+                        loading-text="Deleting..."
+                        :disabled="form?.processing || loading"
+                        @click="emit('delete')"
+                    >
+                        Delete
+                    </DButton>
+                </div>
+                <div class="d-flex gap-2">
+                    <DButton variant="secondary" @click="close">
+                        Cancel
+                    </DButton>
+                    <DButton
+                        variant="primary"
+                        :loading="pendingAction === 'save'"
+                        :loading-text="isCreateMode ? 'Creating...' : 'Saving...'"
+                        :disabled="form?.processing || loading"
+                        @click="emit('save')"
+                    >
+                        {{ isCreateMode ? 'Create' : 'Save Changes' }}
+                    </DButton>
+                </div>
+            </div>
+        </template>
+    </DModal>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import DModal from "../base/DModal.vue";
+import DButton from "../base/DButton.vue";
+import DSpinner from "../base/DSpinner.vue";
+import DXForm from "./DXForm.vue";
+import type { EditTab } from "./DXTable.vue";
+
+interface Props {
+    /** Whether the modal is open (v-model:show). */
+    show: boolean;
+    /** Modal title. */
+    title: string;
+    /** Modal size. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** True while the full record is loading via showUrl. */
+    loading: boolean;
+    /** The edit/create form (a useForm instance), or null before first open. */
+    form: any;
+    /** Bumped per modal open to remount the DXForm subtree (fresh DXField state). */
+    formInstanceKey: number;
+    /** Active tab index (v-model:active-tab). */
+    activeTab: number;
+    /** Field definitions passed to DXForm. */
+    fields: any[];
+    /** Tab definitions passed to DXForm. */
+    tabs?: EditTab[];
+    /** The row being edited (null in create mode) — the slot/context row. */
+    item: any;
+    /** Whether the modal is in create mode (vs edit). */
+    isCreateMode: boolean;
+    /** Which action is in flight, so Save/Delete show their own loading label. */
+    pendingAction: 'save' | 'delete' | null;
+    /** Delete endpoint — gates the Delete button. */
+    deleteUrl?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    /** v-model:show — the modal open state changed. */
+    'update:show': [value: boolean];
+    /** v-model:active-tab — the active tab changed. */
+    'update:activeTab': [value: number];
+    /** Save was requested (footer button or DXForm submit). */
+    save: [];
+    /** Cancel/close was requested. */
+    cancel: [];
+    /** Delete was requested. */
+    delete: [];
+}>();
+
+// Close the modal — shared by the Cancel button and the `close` binding handed
+// to consumers' edit-span slots.
+const close = () => emit('cancel');
+
+// Which keyed slots the consumer actually provided (computed from THIS
+// component's slots — they're forwarded here from DXTable). Forwarding only the
+// provided ones stops DXForm mistaking an always-present wrapper for a real
+// custom-value override.
+const slots = useSlots();
+const fieldKeys = computed<string[]>(() => (props.fields ?? []).map((field: any) => field.key));
+const tabKeys = computed<string[]>(() => (props.tabs ?? []).map((tab) => tab.key));
+
+const editValueSlotKeys = computed(() =>
+    fieldKeys.value.filter((key) => !!slots[`edit-value(${key})`]),
+);
+const editSpanSlotKeys = computed(() =>
+    fieldKeys.value.filter((key) => !!slots[`edit-span(${key})`]),
+);
+const tabContentSlotKeys = computed(() =>
+    tabKeys.value.filter((key) => !!slots[`tab-content(${key})`]),
+);
+const tabBeforeSlotKeys = computed(() =>
+    tabKeys.value.filter((key) => !!slots[`tab-before(${key})`]),
+);
+const tabAfterSlotKeys = computed(() =>
+    tabKeys.value.filter((key) => !!slots[`tab-after(${key})`]),
+);
+</script>

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

@@ -0,0 +1,126 @@
+<!--
+  @component
+  Internal pagination + per-page footer for `DXTable`. Renders the pager, the
+  per-page selector, and the "X to Y out of Z items" info line (with the
+  "Filtered from N" note when a column filter is active).
+
+  Extracted because `DXTable` used to carry three byte-identical copies of this
+  footer — one per data mode (client-side / inertia / provider) — that differed
+  only in which `PaginationData` object and page-change handler they used, so
+  every footer fix had to be written three times (#123). `DXTable` now derives
+  the active pagination + handler and renders this once.
+
+  It owns its own `:deep(.pagination …)` styling (rather than leaving it in
+  `DXTable`), because a scoped `:deep()` in `DXTable` would not reach the pager
+  once it lives in a child component — the scope-id doesn't cross the boundary.
+  Anchoring the rules on this component's own `.dx-table-pagination` root (a
+  plain element it owns) gives the scope-id a deterministic host.
+-->
+<template>
+    <div class="dx-table-pagination mt-3">
+        <!-- Top row: Pagination and Per-page selector -->
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <!-- Pagination controls (only when multiple pages) -->
+            <DPagination
+                v-if="showPagination && pagination.total > pagination.per_page"
+                :model-value="pagination.current_page"
+                :total-rows="pagination.total"
+                :per-page="pagination.per_page"
+                size="sm"
+                @update:model-value="emit('page-change', $event as number)"
+            />
+            <div v-else></div>
+
+            <!-- Per-page selector -->
+            <div v-if="showPerPageSelector" class="d-flex align-items-center gap-2">
+                <label for="perPageSelect" class="mb-0 small text-muted">Per page</label>
+                <DFormSelect
+                    id="perPageSelect"
+                    :model-value="perPage"
+                    :options="perPageOptions.map(n => ({ value: n, text: n.toString() }))"
+                    size="sm"
+                    style="width: 85px;"
+                    @update:model-value="emit('per-page-change', $event)"
+                />
+            </div>
+        </div>
+
+        <!-- Bottom row: Info text -->
+        <div class="small text-muted">
+            <div>
+                <template v-if="pagination.total > pagination.per_page">
+                    {{ pagination.from }} to {{ pagination.to }} out of {{ pagination.total }} {{ pagination.total === 1 ? singularItemName : pluralItemName }}.
+                </template>
+                <template v-else-if="pagination.total === 1">
+                    {{ pagination.total }} {{ singularItemName }}.
+                </template>
+                <template v-else>
+                    {{ pagination.total }} {{ pluralItemName }}.
+                </template>
+            </div>
+            <div v-if="hasActiveFilters && pagination.total_unfiltered">
+                <small>Filtered from {{ pagination.total_unfiltered }} {{ pagination.total_unfiltered === 1 ? singularItemName : pluralItemName }}.</small>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import DPagination from "../base/DPagination.vue";
+import DFormSelect from "../base/DFormSelect.vue";
+import type { PaginationData } from "./DXTable.vue";
+
+interface Props {
+    /** The active pagination metadata (client-side / inertia / provider). */
+    pagination: PaginationData;
+    /** The effective page size, shown in the selector. */
+    perPage: number;
+    /** Page sizes offered by the selector. */
+    perPageOptions: number[];
+    /** Whether to render the pager (still hidden when there is only one page). */
+    showPagination: boolean;
+    /** Whether to render the per-page selector. */
+    showPerPageSelector: boolean;
+    /** Singular item noun for the info line (e.g. "product"). */
+    singularItemName: string;
+    /** Plural item noun for the info line (e.g. "products"). */
+    pluralItemName: string;
+    /** Whether a column filter is active — gates the "Filtered from N" note. */
+    hasActiveFilters: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    /** The user picked a page. Payload is the new 1-based page number. */
+    'page-change': [page: number];
+    /**
+     * The per-page selector changed. Payload is the raw DFormSelect model value
+     * (the parent's `handlePerPageChange` narrows it — DFormSelect mirrors BVN's
+     * model, which can be a scalar, null, or array).
+     */
+    'per-page-change': [value: number | string | null | (number | string)[]];
+}>();
+</script>
+
+<style scoped>
+/* Pagination button sizing to match form controls. Anchored on this component's
+   own `.dx-table-pagination` root so the scope-id has a plain-element host — a
+   `:deep()` rule that targeted the pager from DXTable would not reach it once
+   the pager lives here (the scope-id doesn't cross the component boundary). */
+.dx-table-pagination :deep(.pagination) {
+    margin-bottom: 0;
+}
+
+.dx-table-pagination :deep(.pagination-sm .page-link) {
+    min-width: 2.25rem;
+    height: auto;
+}
+
+/* Make disabled pagination buttons more subtle */
+.dx-table-pagination :deep(.pagination .page-item.disabled .page-link) {
+    background-color: transparent;
+    border-color: transparent;
+    opacity: 0.3;
+}
+</style>

package/resources/js/composables/useForm.ts

@@ -255,7 +255,16 @@ export function useForm<TData extends Record<string, any>>(
 
         const payloadRaw = (
             options.transform
-                ? options.transform(state.data as TData)
+                ? // Give `transform` a COPY of the form data (#150), so a transform
+                  // that MUTATES what it receives — `data.allergens = assemble();
+                  // return data` — shapes the outbound payload WITHOUT corrupting
+                  // form state. (This is why consumers reach for a transform instead
+                  // of mutating `form.data` in a validation guard.) A shallow copy:
+                  // returning a new object is still the tidiest style, and a
+                  // deeply-nested field should be replaced, not mutated in place.
+                  options.transform({
+                      ...(toRaw(state.data) as Record<string, any>),
+                  } as TData)
                 : (state.data as TData)
         ) as any;