Merge pull request #121 from connorabbas/ssr-develop

Pull master

Author: connorabbas

eslint.config.js

@@ -48,6 +48,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,17 @@
 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 +39,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 +72,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);

resources/js/Composables/usePaginatedData.ts

@@ -2,39 +2,39 @@ 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';
+
+interface PaginatedFilteredSortedQueryParams {
+    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: PaginatedFilteredSortedQueryParams;
         };
     }>();
 
     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 +76,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 +95,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 +114,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 +124,7 @@ export function usePaginatedData(
         };
         pagination.value = {
             page: 1,
-            rows: defaultRows,
+            rows: initialsRows,
         };
         fetchData().then(() => {
             window.history.replaceState(null, '', window.location.pathname);
@@ -167,18 +168,17 @@ export function usePaginatedData(
         });
     }
 
-    function parseUrlParams(urlParams: PrimeVue.PaginatedDataUrlParams) {
+    function parseUrlParams(urlParams: PaginatedFilteredSortedQueryParams) {
         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);

resources/js/Layouts/AuthenticatedLayout.vue

@@ -2,7 +2,6 @@
 import { ref, useTemplateRef, onMounted, onUnmounted, watchEffect } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
-import Container from '@/Components/Container.vue';
 import LinksMenu from '@/Components/PrimeVue/LinksMenu.vue';
 import LinksMenuBar from '@/Components/PrimeVue/LinksMenuBar.vue';
 import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue';

resources/js/Pages/Dashboard.vue

@@ -1,6 +1,4 @@
 <script setup>
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import Container from '@/Components/Container.vue';
 import Heading from '@/Components/Heading.vue';
 </script>
 

resources/js/Pages/Profile/Edit.vue

@@ -1,13 +1,10 @@
 <script setup>
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import Container from '@/Components/Container.vue';
 import Heading from '@/Components/Heading.vue';
 import DeleteUserForm from './Partials/DeleteUserForm.vue';
 import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
 import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
 
 defineProps({
-    auth: Object,
     mustVerifyEmail: {
         type: Boolean,
     },

resources/js/app.js

@@ -12,6 +12,9 @@ import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import Container from '@/Components/Container.vue';
+
 import { useDark } from '@vueuse/core';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
@@ -35,6 +38,8 @@ createInertiaApp({
             .use(ToastService)
             .component('Head', Head)
             .component('Link', Link)
+            .component('AuthenticatedLayout', AuthenticatedLayout)
+            .component('Container', Container)
             .mount(el);
     },
     progress: {

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;
+};