Fixes

Author: connorabbas

eslint.config.js

@@ -47,6 +47,7 @@ export default typescriptEslint.config(
         rules: {
             'vue/require-default-prop': 'off',
             'vue/attribute-hyphenation': 'off',
+            'vue/v-on-event-hyphenation': 'off',
             'vue/multi-word-component-names': 'off',
             'vue/block-lang': 'off',
             '@typescript-eslint/no-explicit-any': 'off',

resources/js/Composables/useLazyDataTable.ts

@@ -1,14 +1,13 @@
 import { usePaginatedData } from './usePaginatedData';
-import * as PrimeVue from '@/types/primevue';
+import cloneDeep from 'lodash-es/cloneDeep';
+import { DataTableFilterMetaData, DataTableFilterEvent, DataTableSortEvent } from 'primevue';
+import { PrimeVueDataFilters } from '@/types';
 
 export function useLazyDataTable(
-    initialFilters: PrimeVue.PaginatedDataFilters = {},
+    initialFilters: PrimeVueDataFilters = {},
     only: string[] = ['request'],
     initialsRows: number = 20
 ) {
-    const defaultFilters = initialFilters;
-    const defaultRows = initialsRows;
-
     const {
         processing,
         filters,
@@ -36,19 +35,29 @@ export function useLazyDataTable(
      * "Override" parent composable function
      * Event driven filtering rather than reactive state
      */
-    function filter(event: { filters: PrimeVue.PaginatedDataFilters }) {
+    function filter(event: DataTableFilterEvent) {
         pagination.value.page = 1;
-        filters.value = { ...event.filters };
+        const newFilters: PrimeVueDataFilters = {};
+        Object.entries(event.filters).forEach(([key, rawFilter]) => {
+            if (
+                rawFilter &&
+                typeof rawFilter === 'object' &&
+                'matchMode' in rawFilter
+            ) {
+                newFilters[key] = rawFilter as DataTableFilterMetaData;
+            }
+        });
+        filters.value = newFilters;
         parseEventFilterValues();
         fetchData().then(() => {
             scrollToTop();
         });
     }
 
-    function sort(event: PrimeVue.SortEvent) {
+    function sort(event: DataTableSortEvent) {
         pagination.value.page = 1;
-        sorting.value.field = event.sortField;
-        sorting.value.order = event.sortOrder;
+        sorting.value.field = String(event.sortField);
+        sorting.value.order = event.sortOrder || 1;
         fetchData().then(() => {
             scrollToTop();
         });
@@ -59,14 +68,15 @@ export function useLazyDataTable(
      * usePaginatedData() resets sorting.value state as a new object, this will not work for DataTable's
      */
     function reset() {
+        const defaultFilters = cloneDeep(initialFilters);
         Object.keys(defaultFilters).forEach((key) => {
             filters.value[key].value = defaultFilters[key].value;
         });
         sorting.value.field = '';
         sorting.value.order = 1;
         pagination.value = {
             page: 1,
-            rows: defaultRows,
+            rows: initialsRows,
         };
         fetchData().then(() => {
             window.history.replaceState(null, '', window.location.pathname);
@@ -87,4 +97,4 @@ export function useLazyDataTable(
         sort,
         reset,
     };
-}
+}

resources/js/Composables/usePaginatedData.ts

@@ -2,39 +2,43 @@ import { ref, computed, onMounted } from 'vue';
 import { router, usePage } from '@inertiajs/vue3';
 import { FilterMatchMode } from '@primevue/core/api';
 import debounce from 'lodash-es/debounce';
-import * as PrimeVue from '@/types/primevue';
-
-interface PageStateEvent {
-    first: number;
-    rows: number;
-    page: number;
-    pageCount: number;
+import cloneDeep from 'lodash-es/cloneDeep';
+import { PageState, DataTablePageEvent } from 'primevue';
+import { PrimeVueDataFilters } from '@/types';
+
+// TODO: npm install qs
+// const queryString = window.location.search;
+// const parsed = qs.parse(queryString, { ignoreQueryPrefix: true });
+
+interface PaginatedFilterableSortableQueryParams {
+    filters?: PrimeVueDataFilters;
+    page?: string;
+    rows?: string;
+    sortField?: string;
+    sortOrder?: string;
 }
 interface PaginationState {
     page: number;
     rows: number;
 }
 interface SortState {
-    field: undefined | string;
-    order: undefined | null | 0 | 1 | -1;
+    field: string;
+    order: number;
 }
 
 export function usePaginatedData(
-    initialFilters: PrimeVue.PaginatedDataFilters = {},
+    initialFilters: PrimeVueDataFilters = {},
     only: string[] = ['request'],
     initialsRows: number = 20
 ) {
-    const defaultFilters = initialFilters;
-    const defaultRows = initialsRows;
-
     const page = usePage<{
         request: {
-            urlParams: PrimeVue.PaginatedDataUrlParams;
+            urlParams: PaginatedFilterableSortableQueryParams;
         };
     }>();
 
     const processing = ref<boolean>(false);
-    const filters = ref<PrimeVue.PaginatedDataFilters>(initialFilters);
+    const filters = ref<PrimeVueDataFilters>(cloneDeep(initialFilters));
     const sorting = ref<SortState>({
         field: '',
         order: 1,
@@ -76,7 +80,7 @@ export function usePaginatedData(
             router.reload({
                 only: ['request', ...new Set(only)],
                 data: {
-                    filters: filters.value,
+                    filters: filters.value as any,
                     ...pagination.value,
                     sortField: sorting.value.field,
                     sortOrder: sorting.value.order,
@@ -95,9 +99,9 @@ export function usePaginatedData(
         });
     }
 
-    function paginate(pageStateEvent: PageStateEvent) {
-        pagination.value.page = pageStateEvent.page + 1;
-        pagination.value.rows = pageStateEvent.rows;
+    function paginate(event: PageState | DataTablePageEvent) {
+        pagination.value.page = event.page + 1;
+        pagination.value.rows = event.rows;
         fetchData().then(() => {
             scrollToTop();
         });
@@ -114,6 +118,7 @@ export function usePaginatedData(
         // Alternatively just use: router.get(window.location.pathname);
         // Caveat to the above approach, we would lose state from our page not related to pagination/filtering/sorting
 
+        const defaultFilters = cloneDeep(initialFilters);
         Object.keys(defaultFilters).forEach((key) => {
             filters.value[key].value = defaultFilters[key].value;
         });
@@ -123,7 +128,7 @@ export function usePaginatedData(
         };
         pagination.value = {
             page: 1,
-            rows: defaultRows,
+            rows: initialsRows,
         };
         fetchData().then(() => {
             window.history.replaceState(null, '', window.location.pathname);
@@ -167,18 +172,17 @@ export function usePaginatedData(
         });
     }
 
-    function parseUrlParams(urlParams: PrimeVue.PaginatedDataUrlParams) {
+    function parseUrlParams(urlParams: PaginatedFilterableSortableQueryParams) {
         filters.value = {
-            ...defaultFilters,
+            ...cloneDeep(initialFilters),
             ...urlParams?.filters,
         };
         parseUrlFilterValues();
         if (urlParams?.sortField) {
             sorting.value.field = urlParams.sortField;
         }
         if (urlParams?.sortOrder) {
-            sorting.value.order =
-                (parseInt(urlParams.sortOrder) as 0 | 1 | -1) || null;
+            sorting.value.order = parseInt(urlParams.sortOrder);
         }
         if (urlParams?.page) {
             pagination.value.page = parseInt(urlParams.page);
@@ -204,4 +208,4 @@ export function usePaginatedData(
         reset,
         parseUrlParams,
     };
-}
+}

resources/js/types/index.d.ts

@@ -1,3 +1,5 @@
+import { DataTableFilterMetaData } from 'primevue';
+
 export interface User {
     id: number;
     name: string;
@@ -8,3 +10,7 @@ export interface User {
 export type PageProps<
     T extends Record<string, unknown> = Record<string, unknown>
 > = T;
+
+export type PrimeVueDataFilters = {
+    [key: string]: DataTableFilterMetaData;
+};