Delete apps/frontend/src/components/PageTemplate.tsx
This commit is contained in:
GitHub
parent
7d9cd51d83
commit
d883af0f6e
|
|
@ -1,360 +0,0 @@
|
|||
/* eslint-disable no-mixed-spaces-and-tabs */
|
||||
import React, { ReactNode, useState } from "react";
|
||||
import { TbPlus, TbSearch } from "react-icons/tb";
|
||||
import DashboardTable from "./DashboardTable";
|
||||
import {
|
||||
ColumnDef,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import {
|
||||
QueryKey,
|
||||
UseQueryOptions,
|
||||
keepPreviousData,
|
||||
useQuery,
|
||||
} from "@tanstack/react-query";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import { Button } from "@/shadcn/components/ui/button";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { Card } from "@/shadcn/components/ui/card";
|
||||
import { Input } from "@/shadcn/components/ui/input";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
} from "@/shadcn/components/ui/pagination";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shadcn/components/ui/select";
|
||||
import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
|
||||
|
||||
type PaginatedResponse<T extends Record<string, unknown>> = {
|
||||
data: Array<T>;
|
||||
_metadata: {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
perPage: number;
|
||||
totalItems: number;
|
||||
};
|
||||
};
|
||||
|
||||
//ref: https://x.com/TkDodo/status/1491451513264574501
|
||||
type Props<
|
||||
TQueryKey extends QueryKey,
|
||||
TQueryFnData extends Record<string, unknown>,
|
||||
TError,
|
||||
TData extends Record<string, unknown> = TQueryFnData,
|
||||
> = {
|
||||
title: string;
|
||||
createButton?: string | true | React.ReactNode;
|
||||
modals?: React.ReactNode[];
|
||||
queryOptions: (
|
||||
page: number,
|
||||
limit: number,
|
||||
q?: string
|
||||
) => UseQueryOptions<
|
||||
PaginatedResponse<TQueryFnData>,
|
||||
TError,
|
||||
PaginatedResponse<TData>,
|
||||
TQueryKey
|
||||
>;
|
||||
columnDefs: ColumnDef<any>[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a "Create New" button or returns the provided React node.
|
||||
*
|
||||
* @param property - The property that determines the type of button to create. It can be a boolean, string, or React node.
|
||||
* @returns The create button element.
|
||||
*/
|
||||
const createCreateButton = (
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
property: Props<any, any, any>["createButton"] = true
|
||||
) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const addQuery = () => {
|
||||
navigate({ to: `${window.location.pathname}`, search: { create: true } });
|
||||
}
|
||||
|
||||
if (property === true) {
|
||||
return (
|
||||
<Button
|
||||
className="gap-2"
|
||||
variant={"outline"}
|
||||
onClick={addQuery}
|
||||
>
|
||||
Tambah Data
|
||||
<TbPlus />
|
||||
</Button>
|
||||
);
|
||||
} else if (typeof property === "string") {
|
||||
return (
|
||||
<Button
|
||||
className="gap-2"
|
||||
variant={"outline"}
|
||||
onClick={addQuery}
|
||||
>
|
||||
{property}
|
||||
<TbPlus />
|
||||
</Button>
|
||||
);
|
||||
} else {
|
||||
return property;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Pagination component for handling page navigation.
|
||||
*
|
||||
* @param props - The properties object.
|
||||
* @returns The rendered Pagination component.
|
||||
*/
|
||||
const CustomPagination = ({
|
||||
currentPage,
|
||||
totalPages,
|
||||
onChange,
|
||||
}: {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onChange: (page: number) => void;
|
||||
}) => {
|
||||
const getPaginationItems = () => {
|
||||
let items = [];
|
||||
|
||||
// Determine start and end pages
|
||||
let startPage =
|
||||
currentPage == totalPages && currentPage > 3 ?
|
||||
Math.max(1, currentPage - 2) :
|
||||
Math.max(1, currentPage - 1);
|
||||
let endPage =
|
||||
currentPage == 1 ?
|
||||
Math.min(totalPages, currentPage + 2) :
|
||||
Math.min(totalPages, currentPage + 1);
|
||||
|
||||
// Add ellipsis if needed
|
||||
if (startPage > 2) {
|
||||
items.push(<PaginationEllipsis key="start-ellipsis" />);
|
||||
}
|
||||
|
||||
// Add page numbers
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
items.push(
|
||||
<Button className='cursor-pointer' key={i} onClick={() => onChange(i)} variant={currentPage == i ? "outline" : "ghost"}>
|
||||
{i}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
// Add ellipsis after
|
||||
if (endPage < totalPages - 1) {
|
||||
items.push(<PaginationEllipsis key="end-ellipsis" />);
|
||||
}
|
||||
|
||||
// Add last page
|
||||
if (endPage < totalPages) {
|
||||
items.push(
|
||||
<Button className='cursor-pointer' key={totalPages} onClick={() => onChange(totalPages)} variant={"ghost"}>
|
||||
{totalPages}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
if (currentPage > 2) {
|
||||
items.unshift(
|
||||
<Button className='cursor-pointer' key={1} onClick={() => onChange(1)} variant={"ghost"}>
|
||||
1
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
return (
|
||||
<Pagination>
|
||||
<PaginationContent className="flex flex-col items-center gap-4 md:flex-row">
|
||||
<PaginationItem className="w-full md:w-auto">
|
||||
<Button
|
||||
onClick={() => onChange(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage - 1 == 0 ? true : false}
|
||||
className="w-full gap-2 md:w-auto"
|
||||
variant={"ghost"}
|
||||
>
|
||||
<HiChevronLeft />
|
||||
Sebelumnya
|
||||
</Button>
|
||||
</PaginationItem>
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{getPaginationItems().map((item) => (
|
||||
<PaginationItem key={item.key}>
|
||||
{item}
|
||||
</PaginationItem>
|
||||
))}
|
||||
</div>
|
||||
<PaginationItem className="w-full md:w-auto">
|
||||
<Button
|
||||
onClick={() => onChange(Math.min(totalPages, currentPage + 1))}
|
||||
disabled={currentPage == totalPages ? true : false}
|
||||
className="w-full gap-2 md:w-auto"
|
||||
variant={"ghost"}
|
||||
>
|
||||
Selanjutnya
|
||||
<HiChevronRight />
|
||||
</Button>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* PageTemplate component for displaying a paginated table with search and filter functionality.
|
||||
|
||||
* @param props - The properties object.
|
||||
* @returns The rendered PageTemplate component.
|
||||
*/
|
||||
export default function PageTemplate<
|
||||
TQueryKey extends QueryKey,
|
||||
TQueryFnData extends Record<string, unknown>,
|
||||
TError,
|
||||
TData extends Record<string, unknown> = TQueryFnData,
|
||||
>(props: Props<TQueryKey, TQueryFnData, TError, TData>) {
|
||||
const [filterOptions, setFilterOptions] = useState({
|
||||
page: 0,
|
||||
limit: 10,
|
||||
q: "",
|
||||
});
|
||||
|
||||
const [debouncedSearchQuery] = useDebouncedValue(filterOptions.q, 500);
|
||||
|
||||
const query = useQuery({
|
||||
...(typeof props.queryOptions === "function"
|
||||
? props.queryOptions(
|
||||
filterOptions.page,
|
||||
filterOptions.limit,
|
||||
debouncedSearchQuery
|
||||
)
|
||||
: props.queryOptions),
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
|
||||
const table = useReactTable({
|
||||
data: query.data?.data ?? [],
|
||||
columns: props.columnDefs,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
defaultColumn: {
|
||||
cell: (props) => (
|
||||
<span>
|
||||
{props.getValue() as ReactNode}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Handles the change in search query input with debounce.
|
||||
*
|
||||
* @param value - The new search query value.
|
||||
*/
|
||||
const handleSearchQueryChange = (value: string) => {
|
||||
setFilterOptions((prev) => ({
|
||||
page: 0,
|
||||
limit: prev.limit,
|
||||
q: value,
|
||||
}));
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles the change in page number.
|
||||
*
|
||||
* @param page - The new page number.
|
||||
*/
|
||||
const handlePageChange = (page: number) => {
|
||||
setFilterOptions((prev) => ({
|
||||
page: page - 1, // Adjust for zero-based index
|
||||
limit: prev.limit,
|
||||
q: prev.q,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<p className="text-2xl font-bold">{props.title}</p>
|
||||
<Card className="p-4 border-hidden">
|
||||
{/* Table Functionality */}
|
||||
<div className="flex flex-col">
|
||||
{/* Search and Create Button */}
|
||||
<div className="flex flex-col md:flex-row lg:flex-row pb-4 justify-between gap-4">
|
||||
<div className="relative w-full">
|
||||
<TbSearch className="absolute top-1/2 left-3 transform -translate-y-1/2 text-muted-foreground pointer-events-none" />
|
||||
<Input
|
||||
id="search"
|
||||
name="search"
|
||||
className="w-full max-w-xs pl-10"
|
||||
value={filterOptions.q}
|
||||
onChange={(e) => handleSearchQueryChange(e.target.value)}
|
||||
placeholder="Pencarian..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex">
|
||||
{createCreateButton(props.createButton)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<DashboardTable table={table} />
|
||||
|
||||
{/* Pagination */}
|
||||
{query.data && (
|
||||
<div className="pt-4 flex flex-col md:flex-row lg:flex-row items-center justify-between gap-2">
|
||||
<div className="flex flex-row lg:flex-col items-center w-fit gap-2">
|
||||
<span className="block text-sm font-medium text-muted-foreground whitespace-nowrap">Per Halaman</span>
|
||||
<Select
|
||||
onValueChange={(value) =>
|
||||
setFilterOptions((prev) => ({
|
||||
page: prev.page,
|
||||
limit: parseInt(value ?? "10"),
|
||||
q: prev.q,
|
||||
}))
|
||||
}
|
||||
defaultValue="10"
|
||||
>
|
||||
<SelectTrigger className="w-fit p-4 gap-4">
|
||||
<SelectValue placeholder="Per Page" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="5">5</SelectItem>
|
||||
<SelectItem value="10">10</SelectItem>
|
||||
<SelectItem value="50">50</SelectItem>
|
||||
<SelectItem value="100">100</SelectItem>
|
||||
<SelectItem value="500">500</SelectItem>
|
||||
<SelectItem value="1000">1000</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<CustomPagination
|
||||
currentPage={filterOptions.page + 1}
|
||||
totalPages={query.data._metadata.totalPages}
|
||||
onChange={handlePageChange}
|
||||
/>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
Menampilkan {query.data.data.length} dari {query.data._metadata.totalItems}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{props.modals?.map((modal, index) => (
|
||||
<React.Fragment key={index}>{modal}</React.Fragment>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user