Redesigned Search, removed Unused Admin Route

apps/hub/app/_components/PaginatedTable.tsx

@@ -9,12 +9,13 @@ export interface PaginatedTableRef {
 	refresh: () => void;
 }
 
-interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "data"> {
+interface PaginatedTableProps<TData, TWhere extends object>
+	extends Omit<SortableTableProps<TData>, "data"> {
 	prismaModel: keyof PrismaClient;
 	stickyHeaders?: boolean;
-	filter?: Record<string, unknown>;
 	initialRowsPerPage?: number;
-	searchFields?: string[];
+	showSearch?: boolean;
+	getFilter?: (searchTerm: string) => TWhere;
 	include?: Record<string, boolean>;
 	strictQuery?: boolean;
 	leftOfSearch?: React.ReactNode;
@@ -24,11 +25,11 @@ interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "da
 	ref?: Ref<PaginatedTableRef>;
 }
 
-export function PaginatedTable<TData>({
+export function PaginatedTable<TData, TWhere extends object>({
 	prismaModel,
 	initialRowsPerPage = 30,
-	searchFields = [],
-	filter,
+	getFilter,
+	showSearch = false,
 	include,
 	ref,
 	strictQuery = false,
@@ -38,7 +39,7 @@ export function PaginatedTable<TData>({
 	leftOfPagination,
 	supressQuery,
 	...restProps
-}: PaginatedTableProps<TData>) {
+}: PaginatedTableProps<TData, TWhere>) {
 	const [data, setData] = useState<TData[]>([]);
 	const [rowsPerPage, setRowsPerPage] = useState(initialRowsPerPage);
 	const [page, setPage] = useState(0);
@@ -63,16 +64,14 @@ export function PaginatedTable<TData>({
 			return;
 		}
 		setLoading(true);
-		getData(
-			prismaModel,
-			rowsPerPage,
-			page * rowsPerPage,
-			searchTerm,
-			searchFields,
-			filter,
+		getData({
+			model: prismaModel,
+			limit: rowsPerPage,
+			offset: page * rowsPerPage,
+			where: getFilter ? getFilter(searchTerm) : undefined,
 			include,
 			orderBy,
-			strictQuery
+			select: strictQuery
 				? restProps.columns
 						.filter(
 							(col): col is { accessorKey: string } =>
@@ -84,7 +83,7 @@ export function PaginatedTable<TData>({
 							return acc;
 						}, {})
 				: undefined,
-		)
+		})
 			.then((result) => {
 				if (result) {
 					setData(result.data);
@@ -100,8 +99,7 @@ export function PaginatedTable<TData>({
 		rowsPerPage,
 		page,
 		searchTerm,
-		searchFields,
-		filter,
+		getFilter,
 		include,
 		orderBy,
 		strictQuery,
@@ -119,19 +117,19 @@ export function PaginatedTable<TData>({
 		if (supressQuery) return;
 
 		setLoading(true);
-	}, [searchTerm, page, rowsPerPage, orderBy, filter, setLoading, supressQuery]);
+	}, [searchTerm, page, rowsPerPage, orderBy, getFilter, setLoading, supressQuery]);
 
 	useDebounce(
 		() => {
 			refreshTableData();
 		},
 		500,
-		[searchTerm, page, rowsPerPage, orderBy, filter],
+		[searchTerm, page, rowsPerPage, orderBy, getFilter],
 	);
 
 	return (
 		<div className="m-4 space-y-4">
-			{(rightOfSearch || leftOfSearch || searchFields.length > 0) && (
+			{(rightOfSearch || leftOfSearch || showSearch) && (
 				<div
 					className={cn(
 						"sticky z-20 flex items-center gap-2 py-2",
@@ -142,7 +140,7 @@ export function PaginatedTable<TData>({
 						<div>{leftOfSearch}</div>
 						<div>{loading && <span className="loading loading-dots loading-md" />}</div>
 					</div>
-					{searchFields.length > 0 && (
+					{showSearch && (
 						<input
 							type="text"
 							placeholder="Suchen..."