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-alpha4
Source
1 6b38fe9 Mrdn 2y ago import { FC, useEffect, 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 6b38fe9 Mrdn 2y ago const { data, isLoading } = useQuery({
75 578311c Mrdn 2y ago queryFn: fetchEntity,
76 6b38fe9 Mrdn 2y ago queryKey: [entityKey, pageIndex, pageSize, filtering.columnFilters],
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 578311c Mrdn 2y ago columns,
84 d21d2e2 Mrdn 2y ago pageSize,
85 d21d2e2 Mrdn 2y ago pageIndex,
86 d21d2e2 Mrdn 2y ago rowSelection,
87 d21d2e2 Mrdn 2y ago visibility,
88 d21d2e2 Mrdn 2y ago sorting,
89 d21d2e2 Mrdn 2y ago onPaginationChange
90 578311c Mrdn 2y ago })
91 578311c Mrdn 2y ago
92 6b38fe9 Mrdn 2y ago useEffect(() => table.setPageIndex(1), [filtering.columnFilters, table])
93 6b38fe9 Mrdn 2y ago
94 d21d2e2 Mrdn 2y ago // TODO: Move the selectedEntity to context
95 3b7feef Mrdn 2y ago return (
96 6b38fe9 Mrdn 2y ago <EntityTableContext.Provider value={{ table, data: data.entity, filtering, isLoading }}>
97 3b7feef Mrdn 2y ago <SettingsDialog
98 3b7feef Mrdn 2y ago open={settingsDialogOpen}
99 3b7feef Mrdn 2y ago onOpenChange={setSettingsDialogOpen}
100 3b7feef Mrdn 2y ago entity={selectedEntity}
101 3b7feef Mrdn 2y ago />
102 3b7feef Mrdn 2y ago <DeleteConfirmationDialog
103 3b7feef Mrdn 2y ago open={deleteDialogOpen}
104 3b7feef Mrdn 2y ago onOpenChange={setDeleteDialogOpen}
105 3b7feef Mrdn 2y ago entity={selectedEntity}
106 3b7feef Mrdn 2y ago />
107 3b7feef Mrdn 2y ago <MutationDialog
108 3b7feef Mrdn 2y ago open={mutationDialogOpen}
109 3b7feef Mrdn 2y ago onOpenChange={setMutationDialogOpen}
110 3b7feef Mrdn 2y ago entity={selectedEntity}
111 3b7feef Mrdn 2y ago />
112 578311c Mrdn 2y ago <div className="flex flex-col">
113 578311c Mrdn 2y ago <div className="flex items-center py-4">
114 578311c Mrdn 2y ago <TableFiltering />
115 578311c Mrdn 2y ago <DataTableViewOptions table={table} />
116 d21d2e2 Mrdn 2y ago {onCreate && (
117 d21d2e2 Mrdn 2y ago <Button
118 d21d2e2 Mrdn 2y ago aria-label={`create-${entityKey}`}
119 d21d2e2 Mrdn 2y ago onClick={onCreate}>
120 d21d2e2 Mrdn 2y ago {t('create')}
121 d21d2e2 Mrdn 2y ago </Button>
122 d21d2e2 Mrdn 2y ago )}
123 578311c Mrdn 2y ago </div>
124 578311c Mrdn 2y ago <div className="w-full rounded-md border">
125 578311c Mrdn 2y ago <EntityDataTable
126 578311c Mrdn 2y ago columns={columns}
127 578311c Mrdn 2y ago onRowClick={onOpen}
128 578311c Mrdn 2y ago />
129 578311c Mrdn 2y ago <DataTablePagination />
130 578311c Mrdn 2y ago </div>
131 578311c Mrdn 2y ago </div>
132 578311c Mrdn 2y ago </EntityTableContext.Provider>
133 3b7feef Mrdn 2y ago );
134 3b7feef Mrdn 2y ago }
135 578311c Mrdn 2y ago
136 578311c Mrdn 2y ago export * from './hooks'