d91ec8869e
feat: implement delete confirmation dialog component for better UX refactor: update supplier and role index pages to utilize new form dialog and delete confirm dialog components feat: add reusable form dialog component for creating and editing entities feat: introduce filter popover component for enhanced filtering options in data tables feat: create image preview button component for displaying images with modal preview feat: add page header component for consistent page layout feat: implement row actions component for handling actions on table rows feat: add status badge component for displaying entity statuses feat: create toggle status component for easily toggling entity states feat: implement draft save hook for auto-saving form data feat: add server table hook for managing server-side pagination and filtering feat: create utility functions for formatting dates and numbers feat: add constants for month names and measurement units
119 lines
3.0 KiB
TypeScript
119 lines
3.0 KiB
TypeScript
import { router } from '@inertiajs/react';
|
|
import { useCallback, useState } from 'react';
|
|
import type { PaginationState } from '@/components/data-table';
|
|
|
|
type UseServerTableOptions = {
|
|
route: () => string;
|
|
pagination: PaginationState;
|
|
filters?: Record<string, string | undefined>;
|
|
filterWithParams?: boolean;
|
|
};
|
|
|
|
export function useServerTable({
|
|
route,
|
|
pagination,
|
|
filters,
|
|
filterWithParams = true,
|
|
}: UseServerTableOptions) {
|
|
const [search, setSearch] = useState('');
|
|
const [filterOpen, setFilterOpen] = useState(false);
|
|
|
|
const handlePageChange = useCallback(
|
|
(page: number) => {
|
|
router.get(
|
|
route(),
|
|
{
|
|
...filters,
|
|
page,
|
|
per_page: pagination.per_page,
|
|
search,
|
|
},
|
|
{ preserveState: true, replace: true },
|
|
);
|
|
},
|
|
[route, filters, pagination.per_page, search],
|
|
);
|
|
|
|
const handlePerPageChange = useCallback(
|
|
(perPage: number) => {
|
|
router.get(
|
|
route(),
|
|
{
|
|
...filters,
|
|
page: 1,
|
|
per_page: perPage,
|
|
search,
|
|
},
|
|
{ preserveState: true, replace: true },
|
|
);
|
|
},
|
|
[route, filters, search],
|
|
);
|
|
|
|
const handleSearchChange = useCallback(
|
|
(value: string) => {
|
|
setSearch(value);
|
|
router.get(
|
|
route(),
|
|
{
|
|
...filters,
|
|
page: 1,
|
|
per_page: pagination.per_page,
|
|
search: value,
|
|
},
|
|
{ preserveState: true, replace: true },
|
|
);
|
|
},
|
|
[route, filters, pagination.per_page],
|
|
);
|
|
|
|
function applyFilter(key: string, value: string) {
|
|
const newFilters = { ...filters };
|
|
|
|
if (value === '' || value === 'all') {
|
|
delete newFilters[key];
|
|
} else {
|
|
newFilters[key] = value;
|
|
}
|
|
|
|
router.get(
|
|
route(),
|
|
filterWithParams
|
|
? {
|
|
...newFilters,
|
|
page: 1,
|
|
per_page: pagination.per_page,
|
|
search,
|
|
}
|
|
: newFilters,
|
|
{ preserveState: true, replace: true },
|
|
);
|
|
}
|
|
|
|
function clearFilters() {
|
|
router.get(
|
|
route(),
|
|
filterWithParams
|
|
? {
|
|
page: 1,
|
|
per_page: pagination.per_page,
|
|
search,
|
|
}
|
|
: {},
|
|
{ preserveState: true, replace: true },
|
|
);
|
|
setFilterOpen(false);
|
|
}
|
|
|
|
return {
|
|
search,
|
|
filterOpen,
|
|
setFilterOpen,
|
|
handlePageChange,
|
|
handlePerPageChange,
|
|
handleSearchChange,
|
|
applyFilter,
|
|
clearFilters,
|
|
};
|
|
}
|