gitscope
← marzneshin / v0.3.0-alpha1 / dashboard/src/components/entity-table/index.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/entity-table/index.tsx · TypeScript
Blame Raw
 1import { FC, useState } from "react";
 2import { DataTable } from "@marzneshin/components";
 3
 4interface MutationDialogProps<T> {
 5    open: boolean;
 6    onOpenChange: (open: boolean) => void;
 7    entity: T | null;
 8}
 9
10interface DeleteConfirmationDialogProps<T> {
11    open: boolean;
12    onOpenChange: (open: boolean) => void;
13    entity: T | null;
14}
15
16interface SettingsDialogProps<T> {
17    open: boolean;
18    onOpenChange: (open: boolean) => void;
19    entity: T | null;
20}
21
22interface EntityTableProps<T> {
23    useQuery: () => { data: T[] };
24    MutationDialog: FC<MutationDialogProps<T>>;
25    DeleteConfirmationDialog: FC<DeleteConfirmationDialogProps<T>>;
26    SettingsDialog: FC<SettingsDialogProps<T | any>>;
27    columns: any;
28    filteredColumn: string;
29}
30
31export function EntityTable<T>({
32    useQuery,
33    MutationDialog,
34    DeleteConfirmationDialog,
35    SettingsDialog,
36    columns,
37    filteredColumn,
38}: EntityTableProps<T>) {
39    const { data } = useQuery();
40    const [mutationDialogOpen, setMutationDialogOpen] = useState<boolean>(false);
41    const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
42    const [settingsDialogOpen, setSettingsDialogOpen] = useState<boolean>(false);
43    const [selectedEntity, selectEntity] = useState<T | null>(null);
44
45    const onEdit = (entity: T) => {
46        selectEntity(entity);
47        setMutationDialogOpen(true);
48    };
49
50    const onDelete = (entity: T) => {
51        selectEntity(entity);
52        setDeleteDialogOpen(true);
53    };
54
55    const onCreate = () => {
56        selectEntity(null);
57        setMutationDialogOpen(true);
58    };
59
60    const onOpen = (entity: T) => {
61        selectEntity(entity);
62        setSettingsDialogOpen(true);
63    };
64
65    return (
66        <div>
67            <SettingsDialog
68                open={settingsDialogOpen}
69                onOpenChange={setSettingsDialogOpen}
70                entity={selectedEntity}
71            />
72            <DeleteConfirmationDialog
73                open={deleteDialogOpen}
74                onOpenChange={setDeleteDialogOpen}
75                entity={selectedEntity}
76            />
77            <MutationDialog
78                open={mutationDialogOpen}
79                onOpenChange={setMutationDialogOpen}
80                entity={selectedEntity}
81            />
82            <DataTable
83                columns={columns({ onEdit, onDelete, onOpen })}
84                data={data}
85                filteredColumn={filteredColumn}
86                onCreate={onCreate}
87                onOpen={onOpen}
88            />
89        </div>
90    );
91}