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