Sticky headers fix, added Heliports

This commit is contained in:
PxlLoewe
2025-07-13 00:30:46 -07:00
parent 0730737bbe
commit 768c84f171
27 changed files with 432 additions and 22 deletions

View File

@@ -73,6 +73,11 @@ export const VerticalNav = async () => {
<Link href="/admin/keyword">Stichworte</Link>
</li>
)}
{session.user.permissions.includes("ADMIN_HELIPORT") && (
<li>
<Link href="/admin/heliport">Heliports</Link>
</li>
)}
{session.user.permissions.includes("ADMIN_EVENT") && (
<li>
<Link href="/admin/event">Events</Link>

View File

@@ -3,7 +3,7 @@ import { useState, Ref, useImperativeHandle, useEffect, useCallback } from "reac
import SortableTable, { Pagination, RowsPerPage, SortableTableProps } from "./Table";
import { PrismaClient } from "@repo/db";
import { getData } from "./pagiantedTableActions";
import { useDebounce } from "@repo/shared-components";
import { cn, useDebounce } from "@repo/shared-components";
export interface PaginatedTableRef {
refresh: () => void;
@@ -11,6 +11,7 @@ export interface PaginatedTableRef {
interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "data"> {
prismaModel: keyof PrismaClient;
stickyHeaders?: boolean;
filter?: Record<string, unknown>;
initialRowsPerPage?: number;
searchFields?: string[];
@@ -31,6 +32,7 @@ export function PaginatedTable<TData>({
include,
ref,
strictQuery = false,
stickyHeaders = false,
leftOfSearch,
rightOfSearch,
leftOfPagination,
@@ -110,7 +112,7 @@ export function PaginatedTable<TData>({
// useEffect to show loading spinner
useEffect(() => {
setLoading(true);
}, [searchTerm, page, rowsPerPage, orderBy, filter, setLoading, refreshTableData]);
}, [searchTerm, page, rowsPerPage, orderBy, filter, setLoading]);
useDebounce(
() => {
@@ -122,25 +124,32 @@ export function PaginatedTable<TData>({
return (
<div className="space-y-4 m-4">
<div className="flex items-center gap-2">
<div className="flex-1 flex gap-2">
<div>{leftOfSearch}</div>
<div>{loading && <span className="loading loading-dots loading-md" />}</div>
{(rightOfSearch || leftOfSearch || searchFields.length > 0) && (
<div
className={cn(
"flex items-center gap-2 sticky py-2 z-20",
stickyHeaders && "sticky top-0 bg-base-100/80 backdrop-blur border-b",
)}
>
<div className="flex-1 flex gap-2">
<div>{leftOfSearch}</div>
<div>{loading && <span className="loading loading-dots loading-md" />}</div>
</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>
{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}