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