Updated DataTable composable

app/Http/Middleware/HandleInertiaRequests.php

@@ -34,6 +34,9 @@ public function share(Request $request): array
             'auth' => [
                 'user' => $request->user(),
             ],
+            'request' => [
+                'urlParams' => $request->all(),
+            ],
         ];
     }
 }

resources/js/Composables/useDataTable.js → resources/js/Composables/useLazyDataTable.js

@@ -1,13 +1,19 @@
-import { ref, computed } from 'vue';
-import { router } from '@inertiajs/vue3';
+import { ref, computed, onMounted } from 'vue';
+import { router, usePage } from '@inertiajs/vue3';
+
+export function useLazyDataTable(
+    defaultFilters = {},
+    only = ['request'],
+    rows = 20
+) {
+    const page = usePage();
 
-export function useDataTable(defaultFilters = {}, only = ['urlParams']) {
     const dataTableDefaults = {
         filters: defaultFilters,
         sortField: '',
         sortOrder: 1,
         currentPage: 1,
-        rowsPerPage: 20,
+        rowsPerPage: rows,
     };
 
     const filters = ref(dataTableDefaults.filters);
@@ -19,11 +25,21 @@ export function useDataTable(defaultFilters = {}, only = ['urlParams']) {
     const firstDatasetIndex = computed(() => {
         return (currentPage.value - 1) * rowsPerPage.value;
     });
+    const hasFilteringApplied = computed(() => {
+        const filters = page.props?.request?.urlParams?.filters || {};
+        const sortField = page.props?.request?.urlParams?.sortField || null;
+        const isFiltering = Object.values(filters).some(
+            (filter) => filter.value !== null && filter.value !== ''
+        );
+        const isSorting = sortField !== null && sortField !== '';
+
+        return isFiltering || isSorting;
+    });
 
     function fetchData() {
         return new Promise((resolve, reject) => {
             router.reload({
-                only,
+                only: ['request', ...new Set(only)],
                 data: {
                     filters: filters.value,
                     sortField: sortField.value,
@@ -42,12 +58,18 @@ export function useDataTable(defaultFilters = {}, only = ['urlParams']) {
         });
     }
 
-    function onPage(event) {
-        currentPage.value = event.page + 1;
-        rowsPerPage.value = event.rows;
-        fetchData().then(() => {
-            scrollToTop();
+    function onFilter(event) {
+        // TODO: debounce "contains" searches
+        currentPage.value = 1;
+        filters.value = event.filters;
+        // empty arrays cause filtering issues, set to null instead
+        Object.keys(filters.value).forEach((key) => {
+            const filter = filters.value[key];
+            if (Array.isArray(filter.value) && filter.value.length === 0) {
+                filters.value[key].value = null;
+            }
         });
+        fetchData();
     }
 
     function onSort(event) {
@@ -56,10 +78,12 @@ export function useDataTable(defaultFilters = {}, only = ['urlParams']) {
         fetchData();
     }
 
-    function onFilter(event) {
-        currentPage.value = 1;
-        filters.value = event.filters;
-        fetchData();
+    function onPage(event) {
+        currentPage.value = event.page + 1;
+        rowsPerPage.value = event.rows;
+        fetchData().then(() => {
+            scrollToTop();
+        });
     }
 
     function scrollToTop() {
@@ -69,7 +93,7 @@ export function useDataTable(defaultFilters = {}, only = ['urlParams']) {
         });
     }
 
-    function reset() {
+    function resetFilters() {
         filters.value = dataTableDefaults.filters;
         sortField.value = dataTableDefaults.sortField;
         sortOrder.value = dataTableDefaults.sortOrder;
@@ -80,6 +104,27 @@ export function useDataTable(defaultFilters = {}, only = ['urlParams']) {
 
     function parseUrlParams(urlParams) {
         filters.value = urlParams?.filters || dataTableDefaults.filters;
+        // Cast strings to Numbers for v-model
+        Object.keys(filters.value).forEach((key) => {
+            const filter = filters.value[key];
+            if (!filter.value) {
+                return;
+            }
+            if (typeof filter.value === 'string' && !isNaN(filter.value)) {
+                filters.value[key].value = Number(filter.value);
+            }
+            if (Array.isArray(filter.value)) {
+                // TODO: find out why there are duplicate array values in multi-select filters
+                // "Fixed" with reassigning to unique array
+                const unique = [...new Set(filter.value)];
+                filter.value = unique;
+                filter.value.forEach((value, index) => {
+                    if (typeof value === 'string' && !isNaN(value)) {
+                        filter.value[index] = Number(value);
+                    }
+                });
+            }
+        });
         sortField.value = urlParams?.sortField || dataTableDefaults.sortField;
         sortOrder.value =
             parseInt(urlParams?.sortOrder) || dataTableDefaults.sortOrder;
@@ -89,17 +134,22 @@ export function useDataTable(defaultFilters = {}, only = ['urlParams']) {
             parseInt(urlParams?.rows) || dataTableDefaults.rowsPerPage;
     }
 
+    onMounted(() => {
+        parseUrlParams(page.props.request.urlParams);
+    });
+
     return {
         filters,
         sortField,
         sortOrder,
         currentPage,
         rowsPerPage,
         firstDatasetIndex,
-        onPage,
-        onSort,
+        hasFilteringApplied,
         onFilter,
-        reset,
+        onSort,
+        onPage,
+        resetFilters,
         fetchData,
         parseUrlParams,
     };