| 1 |
65bbe9d |
Mardin |
2y ago |
import { Button, ResizableHandle, ResizablePanel, ResizablePanelGroup, HStack } from "@marzneshin/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 |
|