135 lines
3.1 KiB
TypeScript
135 lines
3.1 KiB
TypeScript
"use client";
|
|
import { useState, Ref, useImperativeHandle } from "react";
|
|
import SortableTable, { Pagination, SortableTableProps } from "./Table";
|
|
import { PrismaClient } from "@repo/db";
|
|
import { getData } from "./pagiantedTableActions";
|
|
import { useDebounce } from "@repo/shared-components";
|
|
|
|
export interface PaginatedTableRef {
|
|
refresh: () => void;
|
|
}
|
|
|
|
interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "data"> {
|
|
prismaModel: keyof PrismaClient;
|
|
filter?: Record<string, unknown>;
|
|
rowsPerPage?: number;
|
|
searchFields?: string[];
|
|
include?: Record<string, boolean>;
|
|
strictQuery?: boolean;
|
|
leftOfSearch?: React.ReactNode;
|
|
rightOfSearch?: React.ReactNode;
|
|
leftOfPagination?: React.ReactNode;
|
|
hide?: boolean;
|
|
ref?: Ref<PaginatedTableRef>;
|
|
}
|
|
|
|
export function PaginatedTable<TData>({
|
|
prismaModel,
|
|
rowsPerPage = 10,
|
|
searchFields = [],
|
|
filter,
|
|
include,
|
|
ref,
|
|
strictQuery = false,
|
|
leftOfSearch,
|
|
rightOfSearch,
|
|
leftOfPagination,
|
|
hide,
|
|
...restProps
|
|
}: PaginatedTableProps<TData>) {
|
|
const [data, setData] = useState<TData[]>([]);
|
|
const [page, setPage] = useState(0);
|
|
const [total, setTotal] = useState(0);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [orderBy, setOrderBy] = useState<Record<string, "asc" | "desc">>(
|
|
restProps.initialOrderBy
|
|
? restProps.initialOrderBy.reduce(
|
|
(acc, sort) => {
|
|
acc[sort.id] = sort.desc ? "desc" : "asc";
|
|
return acc;
|
|
},
|
|
{} as Record<string, "asc" | "desc">,
|
|
)
|
|
: {},
|
|
);
|
|
|
|
const RefreshTableData = async () => {
|
|
getData(
|
|
prismaModel,
|
|
rowsPerPage,
|
|
page * rowsPerPage,
|
|
searchTerm,
|
|
searchFields,
|
|
filter,
|
|
include,
|
|
orderBy,
|
|
strictQuery
|
|
? restProps.columns
|
|
.filter(
|
|
(col): col is { accessorKey: string } =>
|
|
typeof (col as { accessorKey?: unknown }).accessorKey === "string",
|
|
)
|
|
.map((col) => col.accessorKey)
|
|
.reduce<Record<string, boolean>>((acc, key) => {
|
|
acc[key] = true;
|
|
return acc;
|
|
}, {})
|
|
: undefined,
|
|
).then((result) => {
|
|
if (result) {
|
|
setData(result.data);
|
|
setTotal(result.total);
|
|
}
|
|
});
|
|
};
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
refresh: () => {
|
|
RefreshTableData();
|
|
},
|
|
}));
|
|
|
|
useDebounce(
|
|
() => {
|
|
RefreshTableData();
|
|
},
|
|
500,
|
|
[searchTerm, page, rowsPerPage, orderBy, filter],
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4 m-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1">{leftOfSearch}</div>
|
|
{searchFields.length > 0 && (
|
|
<input
|
|
type="text"
|
|
placeholder="Suchen..."
|
|
value={searchTerm}
|
|
onChange={(e) => {
|
|
setSearchTerm(e.target.value);
|
|
setPage(0); // Reset to first page on search
|
|
}}
|
|
className="input input-bordered w-full max-w-xs justify-end"
|
|
/>
|
|
)}
|
|
<div className="flex justify-center">{rightOfSearch}</div>
|
|
</div>
|
|
{!hide && (
|
|
<SortableTable
|
|
data={data}
|
|
prismaModel={prismaModel}
|
|
setOrderBy={setOrderBy}
|
|
{...restProps}
|
|
/>
|
|
)}
|
|
<div className="flex items-between">
|
|
{leftOfPagination}
|
|
{!hide && (
|
|
<Pagination totalPages={Math.ceil(total / rowsPerPage)} page={page} setPage={setPage} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|