https://dev.kronoz.win/r/marzneshin.git
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}