1import { Button, ResizableHandle, ResizablePanel, ResizablePanelGroup, HStack } from "@marzneshin/common/components";
2import { Table } from "@tanstack/react-table"
3import { DataTableViewOptions } from "./components";
4import { Server } from "lucide-react";
5import { EntityTableContext, SidebarEntityTableContext } from "./contexts";
6import {
7 SidebarEntityCardSectionsProps,
8 TableSearch,
9 DataTablePagination,
10 EntityDataTable,
11 SidebarEntityTablePopover,
12 SidebarEntitySelection
13} from "./components";
14import {
15 useSidebarEntityTable,
16 EntitySidebarQueryKeyType,
17 FetchEntityReturn,
18 UseRowSelectionReturn,
19} from "./hooks";
20import { useTranslation } from "react-i18next";
21
22
23interface SidebarEntityTableProps<T, S> {
24 fetchEntity: ({ queryKey }: EntitySidebarQueryKeyType) => FetchEntityReturn<T>;
25 sidebarEntities: S[];
26 setSidebarEntityId: (entity: string | undefined) => void;
27 sidebarEntityId?: string;
28 sidebarCardProps: SidebarEntityCardSectionsProps<S>;
29 secondaryEntityKey: string;
30 columnsFn: any;
31 filteredColumn: string;
32 entityKey: string;
33 rowSelection?: UseRowSelectionReturn;
34 manualSorting?: boolean;
35 onCreate: () => void;
36 onEdit: (entity: T) => void;
37 onOpen: (entity: T) => void;
38 onDelete: (entity: T) => void;
39}
40
41function MainTable<T, S>({ table, columns, props }: { table: Table<T>, columns: any, props: SidebarEntityTableProps<T, S> }) {
42 return <div className="flex flex-col justify-between size-full">
43 <EntityDataTable columns={columns} onRowClick={props.onOpen} />
44 <DataTablePagination table={table} />
45 </div>;
46}
47
48export function SidebarEntityTable<T, S>(props: SidebarEntityTableProps<T, S>) {
49 const { t } = useTranslation();
50 const {
51 desktop,
52 table,
53 entityTableContextValue,
54 sidebarEntityTableContextValue,
55 columns,
56 onCreate
57 } = useSidebarEntityTable(props);
58
59 return (
60 <EntityTableContext.Provider value={entityTableContextValue}>
61 <SidebarEntityTableContext.Provider value={sidebarEntityTableContextValue}>
62 <div className="flex flex-col">
63 <div className="flex flex-col md:flex-row-reverse items-center py-4 gap-2 w-full">
64 <div className="flex flex-row justify-center items-center w-full">
65 {!desktop && (
66 <SidebarEntityTablePopover
67 buttonChild={
68 <HStack className="items-center p-1">
69 <Server className="size-4" /> {t("inbounds")}
70 </HStack>
71 }
72 />
73 )}
74 <DataTableViewOptions table={table} />
75 {onCreate && (
76 <Button aria-label={`create-${props.entityKey}`} onClick={onCreate}>
77 {t("create")}
78 </Button>
79 )}
80 </div>
81 <TableSearch />
82 </div>
83 <div className="w-full rounded-md border">
84 {desktop ? (
85 <ResizablePanelGroup direction="horizontal">
86 <ResizablePanel minSize={20} maxSize={40}>
87 <SidebarEntitySelection />
88 </ResizablePanel>
89 <ResizableHandle withHandle={desktop} />
90 <ResizablePanel >
91 <MainTable table={table} columns={columns} props={props} />
92 </ResizablePanel>
93 </ResizablePanelGroup>
94 ) : (
95 <MainTable table={table} columns={columns} props={props} />
96 )}
97 </div>
98 </div>
99 </SidebarEntityTableContext.Provider>
100 </EntityTableContext.Provider>
101 );
102}
103