From 3d0a0f3b8671d15c1dc2b5496aa5a99b6e9aea67 Mon Sep 17 00:00:00 2001 From: Connor Abbas Date: Sat, 1 Feb 2025 14:06:20 +0000 Subject: [PATCH] updated paginated data composables implementation --- app/Http/Middleware/HandleInertiaRequests.php | 3 -- package-lock.json | 9 +++++ package.json | 2 + resources/js/Composables/useLazyDataTable.ts | 4 +- resources/js/Composables/usePaginatedData.ts | 39 ++++++++++++------- 5 files changed, 39 insertions(+), 18 deletions(-) diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php index 29b2e483..c7360659 100644 --- a/app/Http/Middleware/HandleInertiaRequests.php +++ b/app/Http/Middleware/HandleInertiaRequests.php @@ -34,9 +34,6 @@ public function share(Request $request): array 'auth' => [ 'user' => $request->user(), ], - 'request' => [ - 'urlParams' => $request->query(), - ], ]; } } diff --git a/package-lock.json b/package-lock.json index 3c717694..507b0af5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,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", @@ -25,6 +26,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", @@ -1504,6 +1506,13 @@ "@types/lodash": "*" } }, + "node_modules/@types/qs": { + "version": "6.9.18", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz", + "integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/web-bluetooth": { "version": "0.0.20", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", diff --git a/package.json b/package.json index d0c4d537..bdce8eea 100644 --- a/package.json +++ b/package.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", diff --git a/resources/js/Composables/useLazyDataTable.ts b/resources/js/Composables/useLazyDataTable.ts index 9e84c511..0bc9b843 100644 --- a/resources/js/Composables/useLazyDataTable.ts +++ b/resources/js/Composables/useLazyDataTable.ts @@ -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) => { diff --git a/resources/js/Composables/usePaginatedData.ts b/resources/js/Composables/usePaginatedData.ts index 8797c498..1e92cf94 100644 --- a/resources/js/Composables/usePaginatedData.ts +++ b/resources/js/Composables/usePaginatedData.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({}); const processing = ref(false); const filters = ref(cloneDeep(initialFilters)); const sorting = ref({ @@ -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,7 +94,7 @@ export function usePaginatedData( preserveUrl: false, showProgress: true, replace: true, - only: ['request', ...new Set(only)], + only: [propDataToFetch], onSuccess: (page) => { resolve(page); }, @@ -92,6 +102,7 @@ export function usePaginatedData( 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 {