gitscope
← marzneshin / v0.7.0 / dashboard/src/libs/entity-table/sidebar-entity-table.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/libs/entity-table/sidebar-entity-table.tsx · TypeScript
Blame Raw
  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