gitscope
/
← marzneshin / dashboard/src/components/entity-table/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/entity-table/index.tsx · v0.3.0-alpha3
Source
1 3b7feef Mrdn 2y ago import { FC, useState } from "react";
2 578311c Mrdn 2y ago import { Button, DataTableViewOptions } from "@marzneshin/components";
3 d21d2e2 Mrdn 2y ago import { useTranslation } from "react-i18next";
4 d21d2e2 Mrdn 2y ago import { useQuery } from "@tanstack/react-query";
5 578311c Mrdn 2y ago import { EntityTableContext } from "./entity-table-provider";
6 578311c Mrdn 2y ago import { EntityDataTable } from "./table"
7 578311c Mrdn 2y ago import { DataTablePagination } from "./table-pagination"
8 d21d2e2 Mrdn 2y ago import { TableFiltering } from "./table-filtering";
9 578311c Mrdn 2y ago import {
10 578311c Mrdn 2y ago UseRowSelectionReturn,
11 578311c Mrdn 2y ago UseDialogProps,
12 578311c Mrdn 2y ago useFiltering,
13 578311c Mrdn 2y ago useDialog,
14 578311c Mrdn 2y ago usePagination,
15 578311c Mrdn 2y ago FetchEntityReturn,
16 d21d2e2 Mrdn 2y ago EntityQueryKeyType,
17 d21d2e2 Mrdn 2y ago useEntityTable,
18 d21d2e2 Mrdn 2y ago useVisibility,
19 d21d2e2 Mrdn 2y ago useSorting
20 578311c Mrdn 2y ago } from "./hooks";
21 3b7feef Mrdn 2y ago
22 3b7feef Mrdn 2y ago interface EntityTableProps<T> {
23 578311c Mrdn 2y ago fetchEntity: ({ queryKey }: EntityQueryKeyType) => FetchEntityReturn<T>;
24 578311c Mrdn 2y ago MutationDialog: FC<UseDialogProps<T>>;
25 578311c Mrdn 2y ago DeleteConfirmationDialog: FC<UseDialogProps<T>>;
26 578311c Mrdn 2y ago SettingsDialog: FC<UseDialogProps<T | any>>;
27 578311c Mrdn 2y ago columnsFn: any;
28 3b7feef Mrdn 2y ago filteredColumn: string;
29 578311c Mrdn 2y ago entityKey: string
30 578311c Mrdn 2y ago rowSelection?: UseRowSelectionReturn
31 3b7feef Mrdn 2y ago }
32 3b7feef Mrdn 2y ago
33 3b7feef Mrdn 2y ago export function EntityTable<T>({
34 578311c Mrdn 2y ago fetchEntity,
35 3b7feef Mrdn 2y ago MutationDialog,
36 3b7feef Mrdn 2y ago DeleteConfirmationDialog,
37 3b7feef Mrdn 2y ago SettingsDialog,
38 578311c Mrdn 2y ago columnsFn,
39 3b7feef Mrdn 2y ago filteredColumn,
40 578311c Mrdn 2y ago rowSelection,
41 578311c Mrdn 2y ago entityKey,
42 3b7feef Mrdn 2y ago }: EntityTableProps<T>) {
43 578311c Mrdn 2y ago const [mutationDialogOpen, setMutationDialogOpen] = useDialog();
44 578311c Mrdn 2y ago const [deleteDialogOpen, setDeleteDialogOpen] = useDialog();
45 578311c Mrdn 2y ago const [settingsDialogOpen, setSettingsDialogOpen] = useDialog();
46 3b7feef Mrdn 2y ago const [selectedEntity, selectEntity] = useState<T | null>(null);
47 3b7feef Mrdn 2y ago
48 3b7feef Mrdn 2y ago const onEdit = (entity: T) => {
49 3b7feef Mrdn 2y ago selectEntity(entity);
50 3b7feef Mrdn 2y ago setMutationDialogOpen(true);
51 3b7feef Mrdn 2y ago };
52 3b7feef Mrdn 2y ago
53 3b7feef Mrdn 2y ago const onDelete = (entity: T) => {
54 3b7feef Mrdn 2y ago selectEntity(entity);
55 3b7feef Mrdn 2y ago setDeleteDialogOpen(true);
56 3b7feef Mrdn 2y ago };
57 3b7feef Mrdn 2y ago
58 3b7feef Mrdn 2y ago const onCreate = () => {
59 3b7feef Mrdn 2y ago selectEntity(null);
60 3b7feef Mrdn 2y ago setMutationDialogOpen(true);
61 3b7feef Mrdn 2y ago };
62 3b7feef Mrdn 2y ago
63 3b7feef Mrdn 2y ago const onOpen = (entity: T) => {
64 3b7feef Mrdn 2y ago selectEntity(entity);
65 3b7feef Mrdn 2y ago setSettingsDialogOpen(true);
66 3b7feef Mrdn 2y ago };
67 3b7feef Mrdn 2y ago
68 578311c Mrdn 2y ago const { t } = useTranslation()
69 578311c Mrdn 2y ago const filtering = useFiltering({ column: filteredColumn })
70 d21d2e2 Mrdn 2y ago const sorting = useSorting()
71 d21d2e2 Mrdn 2y ago const visibility = useVisibility()
72 578311c Mrdn 2y ago const { onPaginationChange, pageIndex, pageSize } = usePagination();
73 578311c Mrdn 2y ago
74 578311c Mrdn 2y ago const { data } = useQuery({
75 578311c Mrdn 2y ago queryFn: fetchEntity,
76 578311c Mrdn 2y ago queryKey: [entityKey, pageIndex, pageSize],
77 578311c Mrdn 2y ago initialData: { entity: [], pageCount: 1 }
78 578311c Mrdn 2y ago });
79 578311c Mrdn 2y ago
80 578311c Mrdn 2y ago const columns = columnsFn({ onEdit, onDelete, onOpen })
81 d21d2e2 Mrdn 2y ago const table = useEntityTable({
82 d21d2e2 Mrdn 2y ago data,
83 d21d2e2 Mrdn 2y ago filtering,
84 578311c Mrdn 2y ago columns,
85 d21d2e2 Mrdn 2y ago pageSize,
86 d21d2e2 Mrdn 2y ago pageIndex,
87 d21d2e2 Mrdn 2y ago rowSelection,
88 d21d2e2 Mrdn 2y ago visibility,
89 d21d2e2 Mrdn 2y ago sorting,
90 d21d2e2 Mrdn 2y ago onPaginationChange
91 578311c Mrdn 2y ago })
92 578311c Mrdn 2y ago
93 d21d2e2 Mrdn 2y ago // TODO: Move the selectedEntity to context
94 3b7feef Mrdn 2y ago return (
95 578311c Mrdn 2y ago <EntityTableContext.Provider value={{ table, data: data.entity, filtering }}>
96 3b7feef Mrdn 2y ago <SettingsDialog
97 3b7feef Mrdn 2y ago open={settingsDialogOpen}
98 3b7feef Mrdn 2y ago onOpenChange={setSettingsDialogOpen}
99 3b7feef Mrdn 2y ago entity={selectedEntity}
100 3b7feef Mrdn 2y ago />
101 3b7feef Mrdn 2y ago <DeleteConfirmationDialog
102 3b7feef Mrdn 2y ago open={deleteDialogOpen}
103 3b7feef Mrdn 2y ago onOpenChange={setDeleteDialogOpen}
104 3b7feef Mrdn 2y ago entity={selectedEntity}
105 3b7feef Mrdn 2y ago />
106 3b7feef Mrdn 2y ago <MutationDialog
107 3b7feef Mrdn 2y ago open={mutationDialogOpen}
108 3b7feef Mrdn 2y ago onOpenChange={setMutationDialogOpen}
109 3b7feef Mrdn 2y ago entity={selectedEntity}
110 3b7feef Mrdn 2y ago />
111 578311c Mrdn 2y ago <div className="flex flex-col">
112 578311c Mrdn 2y ago <div className="flex items-center py-4">
113 578311c Mrdn 2y ago <TableFiltering />
114 578311c Mrdn 2y ago <DataTableViewOptions table={table} />
115 d21d2e2 Mrdn 2y ago {onCreate && (
116 d21d2e2 Mrdn 2y ago <Button
117 d21d2e2 Mrdn 2y ago aria-label={`create-${entityKey}`}
118 d21d2e2 Mrdn 2y ago onClick={onCreate}>
119 d21d2e2 Mrdn 2y ago {t('create')}
120 d21d2e2 Mrdn 2y ago </Button>
121 d21d2e2 Mrdn 2y ago )}
122 578311c Mrdn 2y ago </div>
123 578311c Mrdn 2y ago <div className="w-full rounded-md border">
124 578311c Mrdn 2y ago <EntityDataTable
125 578311c Mrdn 2y ago columns={columns}
126 578311c Mrdn 2y ago onRowClick={onOpen}
127 578311c Mrdn 2y ago />
128 578311c Mrdn 2y ago <DataTablePagination />
129 578311c Mrdn 2y ago </div>
130 578311c Mrdn 2y ago </div>
131 578311c Mrdn 2y ago </EntityTableContext.Provider>
132 3b7feef Mrdn 2y ago );
133 3b7feef Mrdn 2y ago }
134 578311c Mrdn 2y ago
135 578311c Mrdn 2y ago export * from './hooks'