65 lines
2 KiB
TypeScript
65 lines
2 KiB
TypeScript
// * Packages
|
|
import { router, usePage } from "@inertiajs/react";
|
|
// * Components shadcn
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
// * Other
|
|
import useTrans from "@/hooks/use-translations";
|
|
|
|
export default function PaginationPerPage({
|
|
perPage,
|
|
total,
|
|
}: {
|
|
perPage: number;
|
|
total: number;
|
|
}) {
|
|
const enumItemsPerPagination = usePage().props
|
|
.enumItemsPerPagination as Record<
|
|
string,
|
|
{ label: string; name: string; value: number }
|
|
>;
|
|
const enumMinValue = Math.min(
|
|
...Object.values(enumItemsPerPagination).map((item) => item.value),
|
|
);
|
|
const paginationListTrans = useTrans("pagination.paginate_list");
|
|
const handleSelectChange = (value: string) => {
|
|
const url = new URL(window.location.href);
|
|
const params = new URLSearchParams(url.search);
|
|
params.set("pagination", value);
|
|
router.visit(`${url.pathname}?${params}`);
|
|
};
|
|
return (
|
|
total > enumMinValue && (
|
|
<Select
|
|
value={String(perPage)}
|
|
onValueChange={(value) => handleSelectChange(value)}
|
|
>
|
|
<SelectTrigger className="w-[4.5rem]">
|
|
<SelectValue placeholder={paginationListTrans} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel className="me-7">
|
|
{paginationListTrans}
|
|
</SelectLabel>
|
|
{Object.values(enumItemsPerPagination).map((item) => (
|
|
<SelectItem
|
|
key={item.value}
|
|
value={String(item.value)}
|
|
>
|
|
{item.value}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
)
|
|
);
|
|
}
|