Skip to content

Commit d0a782e

Browse files
connorabbasconnorabbas
committed
composable improvements
1 parent fe7ae97 commit d0a782e

File tree

3 files changed

+63
-54
lines changed

3 files changed

+63
-54
lines changed

‎resources/js/composables/useLazyDataTable.ts

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import type { Page, PageProps } from '@inertiajs/core';
12
import { usePaginatedData } from './usePaginatedData';
23
import { DataTableFilterMetaData, DataTableFilterEvent, DataTableSortEvent } from 'primevue';
3-
import { PrimeVueDataFilters } from '@/types';
4+
import { PrimeVueDataFilters, InertiaRouterFetchCallbacks } from '@/types';
45

56
export function useLazyDataTable(
67
propDataToFetch: string | string[],
@@ -35,7 +36,7 @@ export function useLazyDataTable(
3536
* "Override" parent composable function
3637
* Event-driven filtering rather than reactive state
3738
*/
38-
function filter(event: DataTableFilterEvent) {
39+
function filter(event: DataTableFilterEvent): void {
3940
pagination.value.page = 1;
4041
const newFilters: PrimeVueDataFilters = {};
4142

@@ -59,7 +60,7 @@ export function useLazyDataTable(
5960
});
6061
}
6162

62-
function sort(event: DataTableSortEvent) {
63+
function sort(event: DataTableSortEvent): void {
6364
pagination.value.page = 1;
6465
sorting.value.field = event.sortField ? String(event.sortField) : '';
6566
sorting.value.order = event.sortOrder || 1;
@@ -75,21 +76,24 @@ export function useLazyDataTable(
7576
* "Override" parent composable function
7677
* usePaginatedData() resets sorting.value state as a new object, this will not work for DataTable's
7778
*/
78-
function reset() {
79-
const defaultFilters = structuredClone(initialFilters);
79+
function reset(options: InertiaRouterFetchCallbacks = {}): Promise<Page<PageProps>> {
80+
const { onFinish: onFinishCallback, onSuccess, onError } = options;
8081

82+
const defaultFilters = structuredClone(initialFilters);
8183
Object.keys(defaultFilters).forEach((key) => {
8284
filters.value[key].value = defaultFilters[key].value;
8385
});
84-
8586
sorting.value.field = '';
8687
sorting.value.order = 1;
8788
pagination.value.page = 1;
8889
pagination.value.rows = initialRows;
8990

90-
fetchData({
91+
return fetchData({
92+
onSuccess,
93+
onError,
9194
onFinish: () => {
9295
scrollToTop();
96+
onFinishCallback?.();
9397
},
9498
});
9599
}

‎resources/js/composables/usePaginatedData.ts

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { Page, PageProps, Errors } from '@inertiajs/core';
44
import { FilterMatchMode } from '@primevue/core/api';
55
import debounce from 'lodash-es/debounce';
66
import { PageState, DataTablePageEvent } from 'primevue';
7-
import { PrimeVueDataFilters } from '@/types';
7+
import type { PrimeVueDataFilters, InertiaRouterFetchCallbacks } from '@/types';
88
import qs from 'qs';
99

1010
interface PaginatedFilteredSortedQueryParams {
@@ -58,7 +58,7 @@ export function usePaginatedData(
5858
filterCallback();
5959
}, 300);
6060

61-
function setUrlParams() {
61+
function setUrlParams(): void {
6262
const queryString = window.location.search;
6363
const params = qs.parse(queryString, {
6464
ignoreQueryPrefix: true,
@@ -73,19 +73,15 @@ export function usePaginatedData(
7373
urlParams.value = { ...params };
7474
}
7575

76-
function scrollToTop() {
76+
function scrollToTop(): void {
7777
window.scrollTo({
7878
top: 0,
7979
behavior: 'smooth',
8080
});
8181
}
8282

83-
function fetchData(options: {
84-
onSuccess?: (page: Page<PageProps>) => void,
85-
onError?: (errors: Errors) => void,
86-
onFinish?: () => void,
87-
} = {}) {
88-
const { onSuccess: successCallback, onError: errorCallback, onFinish: finishCallback } = options;
83+
function fetchData(options: InertiaRouterFetchCallbacks = {}): Promise<Page<PageProps>> {
84+
const { onSuccess, onError, onFinish } = options;
8985

9086
return new Promise((resolve, reject) => {
9187
processing.value = true;
@@ -104,32 +100,23 @@ export function usePaginatedData(
104100
replace: true,
105101
only: Array.isArray(propDataToFetch) ? propDataToFetch : [propDataToFetch],
106102
onSuccess: (page) => {
107-
if (typeof successCallback === 'function') {
108-
successCallback(page);
109-
}
110-
103+
onSuccess?.(page);
111104
resolve(page);
112105
},
113106
onError: (errors) => {
114-
if (typeof errorCallback === 'function') {
115-
errorCallback(errors);
116-
}
117-
107+
onError?.(errors);
118108
reject(errors);
119109
},
120110
onFinish: () => {
121111
setUrlParams();
122112
processing.value = false;
123-
124-
if (typeof finishCallback === 'function') {
125-
finishCallback();
126-
}
113+
onFinish?.();
127114
},
128115
});
129116
});
130117
}
131118

132-
function paginate(event: PageState | DataTablePageEvent) {
119+
function paginate(event: PageState | DataTablePageEvent): void {
133120
if (event.rows !== pagination.value.rows) {
134121
pagination.value.page = 1;
135122
} else {
@@ -143,45 +130,56 @@ export function usePaginatedData(
143130
});
144131
}
145132

146-
function filter() {
133+
function filter(): void {
147134
pagination.value.page = 1;
148135
fetchData().then(() => {
149136
scrollToTop();
150137
});
151138
}
152139

153-
function reset() {
140+
function reset(options: InertiaRouterFetchCallbacks = {}): Promise<Page<PageProps>> {
154141
const defaultFilters = structuredClone(initialFilters);
155-
156142
Object.keys(defaultFilters).forEach((key) => {
157143
filters.value[key].value = defaultFilters[key].value;
158-
filters.value[key].matchMode = defaultFilters[key].matchMode;
159144
});
145+
sorting.value = { field: '', order: 1 };
146+
pagination.value = { page: 1, rows: initialRows };
160147

161-
sorting.value = {
162-
field: '',
163-
order: 1,
164-
};
165-
166-
pagination.value = {
167-
page: 1,
168-
rows: initialRows,
169-
};
170-
171-
fetchData();
148+
return fetchData(options);
172149
}
173150

174-
function hardReset() {
175-
router.visit(window.location.pathname, {
176-
method: 'get',
177-
preserveUrl: false,
178-
showProgress: true,
179-
replace: true,
180-
only: Array.isArray(propDataToFetch) ? propDataToFetch : [propDataToFetch],
151+
function hardReset(
152+
options: {
153+
onSuccess?: (page: Page<PageProps>) => void;
154+
onError?: (errors: Errors) => void;
155+
onFinish?: () => void;
156+
} = {}
157+
): Promise<Page<PageProps>> {
158+
const { onSuccess, onError, onFinish } = options;
159+
160+
return new Promise((resolve, reject) => {
161+
router.visit(window.location.pathname, {
162+
method: 'get',
163+
preserveUrl: false,
164+
showProgress: true,
165+
replace: true,
166+
only: Array.isArray(propDataToFetch) ? propDataToFetch : [propDataToFetch],
167+
onSuccess(page) {
168+
onSuccess?.(page);
169+
resolve(page);
170+
},
171+
onError(errors) {
172+
onError?.(errors);
173+
reject(errors);
174+
},
175+
onFinish() {
176+
onFinish?.();
177+
},
178+
});
181179
});
182180
}
183181

184-
function parseUrlFilterValues() {
182+
function parseUrlFilterValues(): void {
185183
Object.keys(filters.value).forEach((key) => {
186184
const filter = filters.value[key];
187185

@@ -230,7 +228,7 @@ export function usePaginatedData(
230228
});
231229
}
232230

233-
function parseUrlParams(urlParamsObj: PaginatedFilteredSortedQueryParams) {
231+
function parseUrlParams(urlParamsObj: PaginatedFilteredSortedQueryParams): void {
234232
filters.value = {
235233
...structuredClone(initialFilters),
236234
...urlParamsObj?.filters,

‎resources/js/types/index.d.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { DataTableFilterMetaData } from 'primevue';
1+
import type { DataTableFilterMetaData } from 'primevue';
2+
import type { Page, PageProps, Errors } from '@inertiajs/core';
23
import { MenuItem } from 'primevue/menuitem';
34
import type { LucideIcon } from 'lucide-vue-next';
45

@@ -21,3 +22,9 @@ export interface ExtendedMenuItem extends MenuItem {
2122
route?: string;
2223
lucideIcon?: LucideIcon;
2324
}
25+
26+
export interface InertiaRouterFetchCallbacks {
27+
onSuccess?: (page: Page<PageProps>) => void;
28+
onError?: (errors: Errors) => void;
29+
onFinish?: () => void;
30+
}

0 commit comments

Comments
 (0)