140 lines
4.3 KiB
TypeScript
140 lines
4.3 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { getQueryParams } from '@/lib/route';
|
|
import { SharedData } from '@/types/global';
|
|
import { router, usePage } from '@inertiajs/react';
|
|
|
|
interface Props {
|
|
className: string;
|
|
routeName: string;
|
|
paginationKey?: string;
|
|
routeParams?: Record<string, string | number>;
|
|
paginationInfo: Pagination<any>;
|
|
}
|
|
|
|
const TableFooter = (props: Props) => {
|
|
const { paginationInfo, paginationKey = 'page' } = props;
|
|
const { current_page, last_page, first_page_url, last_page_url, next_page_url, prev_page_url } = paginationInfo;
|
|
const page = usePage<SharedData>();
|
|
const urlParams = getQueryParams(page.url);
|
|
|
|
const dropdownList = [];
|
|
if (last_page > 0) {
|
|
for (let i = 1; i <= last_page; i++) {
|
|
dropdownList.push({
|
|
key: `${i}`,
|
|
value: i,
|
|
});
|
|
}
|
|
} else {
|
|
dropdownList.push({
|
|
key: '1',
|
|
value: 1,
|
|
});
|
|
}
|
|
|
|
const gotoPage = (pageNumber: number) => {
|
|
router.get(
|
|
route(props.routeName, {
|
|
...(props.routeParams || {}),
|
|
...urlParams,
|
|
[paginationKey]: pageNumber,
|
|
}),
|
|
{},
|
|
{ preserveState: true },
|
|
);
|
|
};
|
|
|
|
const gotoRoute = (path: string) => {
|
|
const pathParams = getQueryParams(path);
|
|
|
|
router.get(
|
|
route(props.routeName, {
|
|
...(props.routeParams || {}),
|
|
...urlParams,
|
|
[paginationKey]: pathParams.page,
|
|
}),
|
|
{},
|
|
{ preserveState: true },
|
|
);
|
|
};
|
|
|
|
const menuItem = (e: number) => {
|
|
return `text-center py-1 ${current_page === e && 'bg-primary-50'}`;
|
|
};
|
|
|
|
return (
|
|
<div className={`space-y-4 ${props.className}`}>
|
|
<div className="flex items-center justify-center">
|
|
<span className="mr-1">
|
|
<strong>
|
|
{current_page} of {last_page}
|
|
</strong>
|
|
</span>
|
|
<span className="mr-3">| Go to page:</span>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Button type="button" variant="outline" className="h-8 w-[60px] rounded-md border">
|
|
{current_page}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="min-w-[60px]">
|
|
<ScrollArea className="">
|
|
{dropdownList.map((item) => (
|
|
<DropdownMenuItem key={item.key} onClick={() => gotoPage(item.value)} className={menuItem(item.value)}>
|
|
{item.value}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</ScrollArea>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
disabled={!prev_page_url}
|
|
onClick={() => gotoRoute(first_page_url as string)}
|
|
className="bg-muted border-border h-8 border px-2 text-xs sm:px-3"
|
|
>
|
|
{'<<First'}
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
disabled={!prev_page_url}
|
|
onClick={() => gotoRoute(prev_page_url as string)}
|
|
className="bg-muted border-border mx-3 h-8 border px-2 text-xs sm:px-3"
|
|
>
|
|
Prev
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
disabled={!next_page_url}
|
|
onClick={() => gotoRoute(next_page_url as string)}
|
|
className="bg-muted border-border mx-3 h-8 border px-2 text-xs sm:px-3"
|
|
>
|
|
Next
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
disabled={!next_page_url}
|
|
onClick={() => gotoRoute(last_page_url as string)}
|
|
className="bg-muted border-border h-8 border px-2 text-xs sm:px-3"
|
|
>
|
|
{'Last>>'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TableFooter;
|