@omnitend/dashboard-for-laravel 0.31.0 → 0.33.0

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

@@ -19,16 +19,40 @@
 <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
+        <div class="dx-pager-row d-flex justify-content-between align-items-center gap-2 mb-2">
+            <!-- Windowed pager (#155): «Previous / leading / … / window / … /
+                 trailing / Next». Client-computed from current + last page, so it
+                 works in every DXTable mode. Only shown when >1 page. -->
+            <nav
                 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)"
-            />
+                class="dx-pager d-flex flex-wrap align-items-center gap-1"
+                aria-label="Pagination"
+            >
+                <DButton
+                    variant="outline-secondary"
+                    size="sm"
+                    :disabled="!canPrev"
+                    @click="goToPage(currentPage - 1)"
+                >&laquo; Previous</DButton>
+
+                <template v-for="(item, index) in pageItems" :key="item.type === 'page' ? `p${item.page}` : `e${index}`">
+                    <DButton
+                        v-if="item.type === 'page'"
+                        size="sm"
+                        :variant="item.active ? 'primary' : 'outline-secondary'"
+                        :aria-current="item.active ? 'page' : undefined"
+                        @click="goToPage(item.page)"
+                    >{{ item.page }}</DButton>
+                    <span v-else class="dx-pager-ellipsis" aria-hidden="true">&hellip;</span>
+                </template>
+
+                <DButton
+                    variant="outline-secondary"
+                    size="sm"
+                    :disabled="!canNext"
+                    @click="goToPage(currentPage + 1)"
+                >Next &raquo;</DButton>
+            </nav>
             <div v-else></div>
 
             <!-- Per-page selector -->
@@ -67,7 +91,8 @@
 </template>
 
 <script setup lang="ts">
-import DPagination from "../base/DPagination.vue";
+import { computed } from "vue";
+import DButton from "../base/DButton.vue";
 import DFormSelect from "../base/DFormSelect.vue";
 import type { PaginationData } from "./DXTable.vue";
 
@@ -92,7 +117,7 @@ interface Props {
     hasActiveFilters: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
     /** The user picked a page. Payload is the new 1-based page number. */
@@ -104,26 +129,95 @@ const emit = defineEmits<{
      */
     'per-page-change': [value: number | string | null | (number | string)[]];
 }>();
+
+// Windowed pager (#155). Always show the first/last BOUNDARY pages and a window
+// of AROUND pages each side of the current page; fill gaps with an ellipsis,
+// except a single-page gap which shows the page itself (an ellipsis hiding one
+// page is silly). Client-computed from current + last page so it works in every
+// DXTable mode (provider / client-side / inertia) — not just where a server
+// `links` array exists. Reproduces custard's `1 2 … 8 9 10 [11] 12 13 14 … 44 45`.
+const BOUNDARY = 2;
+const AROUND = 3;
+
+type PageItem = { type: "page"; page: number; active: boolean } | { type: "ellipsis" };
+
+const currentPage = computed(() => props.pagination.current_page);
+const lastPage = computed(() =>
+  Math.max(1, Math.ceil(props.pagination.total / props.pagination.per_page)),
+);
+
+const pageItems = computed<PageItem[]>(() => {
+  const last = lastPage.value;
+  const current = currentPage.value;
+
+  const shown = new Set<number>();
+  // Leading + trailing boundary pages (1,2 … last-1,last).
+  for (let page = 1; page <= Math.min(BOUNDARY, last); page += 1) shown.add(page);
+  for (let page = Math.max(1, last - BOUNDARY + 1); page <= last; page += 1) shown.add(page);
+  // A window around the current page. When it clamps at an edge, push the other
+  // edge out by the shortfall so the row stays a full width near the start/end
+  // (a fuller run of numbers, like the house pager) instead of going sparse.
+  let windowLow = current - AROUND;
+  let windowHigh = current + AROUND;
+  const shortfall = 2 * AROUND + 1 - (Math.min(last, windowHigh) - Math.max(1, windowLow) + 1);
+  if (shortfall > 0 && windowLow < 1) windowHigh += shortfall;
+  else if (shortfall > 0 && windowHigh > last) windowLow -= shortfall;
+  for (let page = Math.max(1, windowLow); page <= Math.min(last, windowHigh); page += 1) {
+    shown.add(page);
+  }
+
+  const sorted = [...shown].sort((a, b) => a - b);
+  const items: PageItem[] = [];
+  let previous = 0;
+  for (const page of sorted) {
+    if (page - previous === 2) {
+      // Exactly one page missing — show it rather than an ellipsis.
+      items.push({ type: "page", page: previous + 1, active: previous + 1 === current });
+    } else if (page - previous > 2) {
+      items.push({ type: "ellipsis" });
+    }
+    items.push({ type: "page", page, active: page === current });
+    previous = page;
+  }
+  return items;
+});
+
+const canPrev = computed(() => currentPage.value > 1);
+const canNext = computed(() => currentPage.value < lastPage.value);
+
+const goToPage = (page: number) => {
+  if (page < 1 || page > lastPage.value || page === currentPage.value) return;
+  emit("page-change", page);
+};
 </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;
+/* Windowed pager (#155). The buttons are DButtons; give the numbered ones a
+   consistent min-width so they read as an even row of keys (like the house
+   custard pager), and let the whole row wrap on narrow widths rather than
+   overflow. `:deep(.btn)` is anchored on the plain `.dx-pager` host, so the
+   scope-id has a deterministic element to attach to. */
+.dx-pager :deep(.btn) {
+    min-width: 2.5rem;
+}
+
+/* Previous / Next carry text, so they shouldn't be forced square. */
+.dx-pager :deep(.btn):first-child,
+.dx-pager :deep(.btn):last-child {
+    min-width: auto;
 }
 
-.dx-table-pagination :deep(.pagination-sm .page-link) {
-    min-width: 2.25rem;
-    height: auto;
+.dx-pager-ellipsis {
+    display: inline-flex;
+    align-items: flex-end;
+    padding: 0 0.15rem;
+    color: var(--bs-secondary-color);
+    user-select: none;
 }
 
-/* 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;
+/* On narrow screens the row can get long; allow it to scroll horizontally as a
+   fallback so it never blows out the table width. */
+.dx-pager-row {
+    flex-wrap: wrap;
 }
 </style>

package/resources/js/composables/defineForm.ts

@@ -5,8 +5,14 @@ import type { FieldDefinition, FieldType } from "../types";
  * Extended field definition that includes default value
  */
 export interface FormFieldDefinition<TValue = any> extends FieldDefinition {
-    /** Default/initial value for the field */
-    default: TValue;
+    /**
+     * Default/initial value for the field. Optional: when omitted, the field
+     * seeds from its type (`false` for checkbox/switch, `[]` for
+     * checkbox-group/switch-list/repeater, `0` for numerics, `""` otherwise) —
+     * previously the type required this even though the runtime had a
+     * fallback, so typed consumers could never use it.
+     */
+    default?: TValue;
 }
 
 /**
@@ -37,6 +43,10 @@ function getDefaultValueForType(type: FieldType): any {
         case "percentage":
             return 0;
         case "repeater":
+        // Array-valued selections: checkbox-group previously fell through to
+        // the "" default, which is the wrong shape for an array model.
+        case "checkbox-group":
+        case "switch-list":
             return [];
         case "image":
         case "file":

package/resources/js/composables/useResourceEditor.ts

@@ -1,5 +1,5 @@
 import { computed, ref, type Ref } from "vue";
-import axios from "axios";
+import { api } from "../utils/api";
 import { useForm } from "./useForm";
 import { useToast } from "./useToast";
 
@@ -254,7 +254,7 @@ export function useResourceEditor<T = any>(
         editLoading.value = true;
         try {
             const url = props.showUrl!.replace(':id', String(itemId));
-            const response = await axios.get(url);
+            const response = await api.get<any>(url);
             // Superseded by a newer row-open — discard.
             if (token !== editFetchToken) return;
 
@@ -271,9 +271,7 @@ export function useResourceEditor<T = any>(
         } catch (error: any) {
             if (token !== editFetchToken) return;
             const message =
-                error?.response?.data?.message ??
-                error?.message ??
-                'Failed to load the full record.';
+                error?.message ?? 'Failed to load the full record.';
             createToast?.({
                 title: 'Error',
                 body: message,

package/resources/js/index.ts

@@ -10,6 +10,7 @@ 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 DXSwitch } from "./components/extended/DXSwitch.vue";
+export { default as DXCurrencyInput } from "./components/extended/DXCurrencyInput.vue";
 export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
 // Chart components moved to the `@omnitend/dashboard-for-laravel/charts` entry
 // (#142) so chart.js / vue-chartjs stay genuinely optional peers — the main

package/resources/js/types/index.ts

@@ -33,6 +33,7 @@ export type FieldType =
     | "checkbox"
     | "checkbox-group"
     | "switch"
+    | "switch-list"
     | "radio"
     | "image"
     | "file"
@@ -103,9 +104,11 @@ export interface FieldDefinition {
     required?: boolean;
 
     /**
-     * Options for `select`, `radio` and `autocomplete` fields. For
-     * `autocomplete` these are the datalist suggestions; the field still
-     * accepts free text not present in the list.
+     * Options for `select`, `radio`, `checkbox-group`, `switch-list` and
+     * `autocomplete` fields. For `autocomplete` these are the datalist
+     * suggestions; the field still accepts free text not present in the list.
+     * For `switch-list` each option renders a labelled toggle row
+     * (`description` becomes the row label's tooltip).
      */
     options?: FieldOption[];
 
@@ -152,6 +155,15 @@ export interface FieldDefinition {
      */
     decimals?: number;
 
+    /**
+     * For `currency` fields: the model stores integer MINOR units (pence) but
+     * the input shows/edits MAJOR units (pounds) — display = value / 10^decimals,
+     * submit = round(input × 10^decimals). `min`/`max`/`step` stay in major
+     * units. Off by default (the model is the major-unit amount). Use for
+     * legacy pence-integer columns (#116).
+     */
+    minorUnits?: boolean;
+
     /**
      * For `percentage` fields: treat the underlying model value as a 0–1
      * fraction while showing/editing it as a 0–100 percentage. The model keeps
@@ -197,11 +209,13 @@ export interface FieldDefinition {
     textWhenFalse?: MaybeFn<string>;
 
     /**
-     * For `switch` fields: the on-state colour. `"success"` (default) is the
-     * house green-on / red-off style for an active/enabled/good switch;
-     * `"neutral"` (brand primary on / grey off) is for semantically-mixed
-     * switches that shouldn't imply good/bad ("contains alcohol", an allergen
-     * toggle, "hidden on web shop"). See DXSwitch `onVariant` (#158).
+     * For `switch` and `switch-list` fields: the on-state colour. `"success"`
+     * (default) is the house green-on / red-off style for an
+     * active/enabled/good switch; `"neutral"` (brand primary on / grey off) is
+     * for semantically-mixed switches that shouldn't imply good/bad ("contains
+     * alcohol", an allergen toggle, "hidden on web shop"). A `switch-list`
+     * usually wants `"neutral"` — a wall of red-off toggles over-signals when
+     * off simply means "not present". See DXSwitch `onVariant` (#158).
      */
     switchVariant?: "success" | "neutral";
 

package/resources/js/utils/api.ts

@@ -53,8 +53,7 @@ class ApiClient {
             }
         };
         for (const [k, v] of Object.entries(params)) append(k, v);
-        const qs = search.toString();
-        return qs ? `?${qs}` : "";
+        return search.toString();
     }
 
     private handleError(response: Response, data: any): never {
@@ -92,18 +91,24 @@ class ApiClient {
     ): Promise<ApiResponse<T>> {
         const isFormData =
             typeof FormData !== "undefined" && options.body instanceof FormData;
+        // GET/HEAD carry no body (nothing for Content-Type to describe) and
+        // change no state (no CSRF exposure). Both headers are also non-simple
+        // for CORS, so sending them would force a preflight on cross-origin
+        // apiUrl/showUrl endpoints that axios's plain GETs never needed (#132).
+        const method = (options.method ?? "GET").toUpperCase();
+        const isBodyless = method === "GET" || method === "HEAD";
 
         const headers: Record<string, string> = {
             ...this.defaultHeaders,
             ...(isFormData
                 ? {}
                 : { "Content-Type": this.defaultHeaders["Content-Type"] }),
-            "X-CSRF-TOKEN": this.getCsrfToken(),
+            ...(isBodyless ? {} : { "X-CSRF-TOKEN": this.getCsrfToken() }),
             ...options.headers,
         };
 
         // Let fetch set the multipart boundary if FormData
-        if (isFormData) delete headers["Content-Type"];
+        if (isFormData || isBodyless) delete headers["Content-Type"];
 
         const config: RequestOptions = {
             credentials: "same-origin",
@@ -140,7 +145,10 @@ class ApiClient {
         params: Record<string, unknown> = {},
         options: Omit<RequestOptions, "method"> = {},
     ) {
-        const full = `${url}${this.toQuery(params)}`;
+        // Merge into an existing query string (`/things?scope=x` + params) with
+        // `&` — a blind `?` append corrupts the URL and silently drops params.
+        const qs = this.toQuery(params);
+        const full = qs ? `${url}${url.includes("?") ? "&" : "?"}${qs}` : url;
         return this.request<T>(full, { ...options, method: "GET" });
     }