Merge pull request #145 from connorabbas/admin-develop

Pull master, updated composables implementation

Author: connorabbas

app/Http/Middleware/HandleInertiaRequests.php

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

package-lock.json

@@ -13,6 +13,7 @@
         "@primevue/themes": "^4.2.2",
         "@tailwindcss/vite": "^4.0.0",
         "@types/lodash-es": "^4.17.12",
+        "@types/qs": "^6.9.18",
         "@typescript-eslint/eslint-plugin": "^8.19.1",
         "@typescript-eslint/parser": "^8.19.1",
         "@vitejs/plugin-vue": "^5.0.0",
@@ -27,6 +28,7 @@
         "lodash-es": "^4.17.21",
         "primeicons": "^7.0.0",
         "primevue": "^4.2.2",
+        "qs": "^6.14.0",
         "tailwindcss": "^4.0.0",
         "tailwindcss-primeui": "^0.3.2",
         "typescript": "^5.7.3",

package.json

@@ -4,8 +4,8 @@ import { DataTableFilterMetaData, DataTableFilterEvent, DataTableSortEvent } fro
 import { PrimeVueDataFilters } from '@/types';
 
 export function useLazyDataTable(
+    propDataToFetch: string,
     initialFilters: PrimeVueDataFilters = {},
-    only: string[] = ['request'],
     initialsRows: number = 20
 ) {
     const {
@@ -20,7 +20,7 @@ export function useLazyDataTable(
         fetchData,
         paginate,
         hardReset,
-    } = usePaginatedData(initialFilters, only, initialsRows);
+    } = usePaginatedData(propDataToFetch, initialFilters, initialsRows);
 
     function parseEventFilterValues() {
         Object.keys(filters.value).forEach((key) => {

resources/js/Composables/useLazyDataTable.ts

@@ -1,10 +1,11 @@
 import { ref, computed, onMounted } from 'vue';
-import { router, usePage } from '@inertiajs/vue3';
+import { router } from '@inertiajs/vue3';
 import { FilterMatchMode } from '@primevue/core/api';
 import debounce from 'lodash-es/debounce';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { PageState, DataTablePageEvent } from 'primevue';
 import { PrimeVueDataFilters } from '@/types';
+import qs from 'qs';
 
 interface PaginatedFilteredSortedQueryParams {
     filters?: PrimeVueDataFilters;
@@ -23,16 +24,11 @@ interface SortState {
 }
 
 export function usePaginatedData(
+    propDataToFetch: string,
     initialFilters: PrimeVueDataFilters = {},
-    only: string[] = ['request'],
     initialsRows: number = 20
 ) {
-    const page = usePage<{
-        request: {
-            urlParams: PaginatedFilteredSortedQueryParams;
-        };
-    }>();
-
+    const urlParams = ref<PaginatedFilteredSortedQueryParams>({});
     const processing = ref<boolean>(false);
     const filters = ref<PrimeVueDataFilters>(cloneDeep(initialFilters));
     const sorting = ref<SortState>({
@@ -48,8 +44,8 @@ export function usePaginatedData(
         return (pagination.value.page - 1) * pagination.value.rows;
     });
     const filteredOrSorted = computed(() => {
-        const filters = page.props?.request?.urlParams?.filters || {};
-        const sortField = page.props?.request?.urlParams?.sortField || null;
+        const filters = urlParams.value?.filters || {};
+        const sortField = urlParams.value?.sortField || null;
         const isFiltering = Object.values(filters).some(
             (filter) => filter.value !== null && filter.value !== ''
         );
@@ -62,6 +58,20 @@ export function usePaginatedData(
         filterCallback();
     }, 300);
 
+    function setUrlParams() {
+        const queryString = window.location.search;
+        const params = qs.parse(queryString, {
+            ignoreQueryPrefix: true,
+            strictNullHandling: true,
+            decoder: function (str, defaultDecoder) {
+                // set empty string values to null
+                const value = defaultDecoder(str);
+                return value === '' ? null : value;
+            },
+        }) as PaginatedFilteredSortedQueryParams;
+        urlParams.value = { ...params };
+    }
+
     function scrollToTop() {
         window.scrollTo({
             top: 0,
@@ -84,14 +94,15 @@ export function usePaginatedData(
                 preserveUrl: false,
                 showProgress: true,
                 replace: true,
-                only: ['request', ...new Set(only)],
+                only: [propDataToFetch],
                 onSuccess: (page) => {
                     resolve(page);
                 },
                 onError: (errors) => {
                     reject(errors);
                 },
                 onFinish: () => {
+                    setUrlParams();
                     processing.value = false;
                 },
             });
@@ -140,7 +151,7 @@ export function usePaginatedData(
             preserveUrl: false,
             showProgress: true,
             replace: true,
-            only: ['request', ...new Set(only)],
+            only: [propDataToFetch],
         });
     }
 
@@ -154,6 +165,7 @@ export function usePaginatedData(
                 filters.value[key].value = new Date(filter.value);
             } else if (
                 typeof filter.value === 'string' &&
+                filter.value !== '' &&
                 !isNaN(Number(filter.value))
             ) {
                 filters.value[key].value = Number(filter.value);
@@ -199,7 +211,8 @@ export function usePaginatedData(
     }
 
     onMounted(() => {
-        parseUrlParams(page.props.request.urlParams);
+        setUrlParams();
+        parseUrlParams(urlParams.value);
     });
 
     return {

resources/js/Composables/usePaginatedData.ts

@@ -45,14 +45,10 @@ const {
     filter,
     sort,
     hardReset,
-} = useLazyDataTable(
-    {
-        name: { value: null, matchMode: FilterMatchMode.CONTAINS },
-        email: { value: null, matchMode: FilterMatchMode.CONTAINS },
-    },
-    ['users'],
-    props.users.per_page
-);
+} = useLazyDataTable('users', {
+    name: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    email: { value: null, matchMode: FilterMatchMode.CONTAINS },
+}, props.users.per_page);
 </script>
 
 <template>
@@ -130,9 +126,7 @@ const {
                                         type="text"
                                         placeholder="Search by name"
                                         fluid
-                                        @input="
-                                            debounceInputFilter(filterCallback)
-                                            "
+                                        @input="debounceInputFilter(filterCallback)"
                                     />
                                 </template>
                                 <template #body="slotProps">
@@ -151,9 +145,7 @@ const {
                                         type="text"
                                         placeholder="Search by Email"
                                         fluid
-                                        @input="
-                                            debounceInputFilter(filterCallback)
-                                            "
+                                        @input="debounceInputFilter(filterCallback)"
                                     />
                                 </template>
                                 <template #body="slotProps">
@@ -169,9 +161,7 @@ const {
                                         text
                                         rounded
                                         icon="pi pi-ellipsis-v"
-                                        @click="
-                                            toggleUserContextMenu($event, data)
-                                            "
+                                        @click="toggleUserContextMenu($event, data)"
                                     />
                                 </template>
                             </Column>