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-alpha7
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 useEntityTable,
17 d21d2e2 Mrdn 2y ago useVisibility,
18 cfe497c Mrdn 2y ago useSorting,
19 cfe497c Mrdn 2y ago SortableQueryKey,
20 cfe497c Mrdn 2y ago QueryKey,
21 cfe497c Mrdn 2y ago EntityQueryKeyType,
22 578311c Mrdn 2y ago } from "./hooks";
23 3b7feef Mrdn 2y ago
24 3b7feef Mrdn 2y ago interface EntityTableProps<T> {
25 578311c Mrdn 2y ago fetchEntity: ({ queryKey }: EntityQueryKeyType) => FetchEntityReturn<T>;
26 578311c Mrdn 2y ago MutationDialog: FC<UseDialogProps<T>>;
27 578311c Mrdn 2y ago DeleteConfirmationDialog: FC<UseDialogProps<T>>;
28 578311c Mrdn 2y ago SettingsDialog: FC<UseDialogProps<T | any>>;
29 578311c Mrdn 2y ago columnsFn: any;
30 3b7feef Mrdn 2y ago filteredColumn: string;
31 578311c Mrdn 2y ago entityKey: string
32 578311c Mrdn 2y ago rowSelection?: UseRowSelectionReturn
33 cfe497c Mrdn 2y ago manualSorting?: boolean
34 3b7feef Mrdn 2y ago }
35 3b7feef Mrdn 2y ago
36 3b7feef Mrdn 2y ago export function EntityTable<T>({
37 578311c Mrdn 2y ago fetchEntity,
38 3b7feef Mrdn 2y ago MutationDialog,
39 3b7feef Mrdn 2y ago DeleteConfirmationDialog,
40 3b7feef Mrdn 2y ago SettingsDialog,
41 578311c Mrdn 2y ago columnsFn,
42 3b7feef Mrdn 2y ago filteredColumn,
43 578311c Mrdn 2y ago rowSelection,
44 578311c Mrdn 2y ago entityKey,
45 cfe497c Mrdn 2y ago manualSorting = false
46 3b7feef Mrdn 2y ago }: EntityTableProps<T>) {
47 578311c Mrdn 2y ago const [mutationDialogOpen, setMutationDialogOpen] = useDialog();
48 578311c Mrdn 2y ago const [deleteDialogOpen, setDeleteDialogOpen] = useDialog();
49 578311c Mrdn 2y ago const [settingsDialogOpen, setSettingsDialogOpen] = useDialog();
50 3b7feef Mrdn 2y ago const [selectedEntity, selectEntity] = useState<T | null>(null);
51 3b7feef Mrdn 2y ago
52 3b7feef Mrdn 2y ago const onEdit = (entity: T) => {
53 3b7feef Mrdn 2y ago selectEntity(entity);
54 3b7feef Mrdn 2y ago setMutationDialogOpen(true);
55 3b7feef Mrdn 2y ago };
56 3b7feef Mrdn 2y ago
57 3b7feef Mrdn 2y ago const onDelete = (entity: T) => {
58 3b7feef Mrdn 2y ago selectEntity(entity);
59 3b7feef Mrdn 2y ago setDeleteDialogOpen(true);
60 3b7feef Mrdn 2y ago };
61 3b7feef Mrdn 2y ago
62 3b7feef Mrdn 2y ago const onCreate = () => {
63 3b7feef Mrdn 2y ago selectEntity(null);
64 3b7feef Mrdn 2y ago setMutationDialogOpen(true);
65 3b7feef Mrdn 2y ago };
66 3b7feef Mrdn 2y ago
67 3b7feef Mrdn 2y ago const onOpen = (entity: T) => {
68 3b7feef Mrdn 2y ago selectEntity(entity);
69 3b7feef Mrdn 2y ago setSettingsDialogOpen(true);
70 3b7feef Mrdn 2y ago };
71 3b7feef Mrdn 2y ago
72 578311c Mrdn 2y ago const { t } = useTranslation()
73 578311c Mrdn 2y ago const filtering = useFiltering({ column: filteredColumn })
74 d21d2e2 Mrdn 2y ago const sorting = useSorting()
75 d21d2e2 Mrdn 2y ago const visibility = useVisibility()
76 578311c Mrdn 2y ago const { onPaginationChange, pageIndex, pageSize } = usePagination();
77 cfe497c Mrdn 2y ago const sortedQuery: SortableQueryKey = [
78 cfe497c Mrdn 2y ago entityKey,
79 cfe497c Mrdn 2y ago pageIndex,
80 cfe497c Mrdn 2y ago pageSize,
81 cfe497c Mrdn 2y ago filtering.columnFilters,
82 cfe497c Mrdn 2y ago sorting.sorting[0]?.id ? sorting.sorting[0].id : "created_at",
83 cfe497c Mrdn 2y ago sorting.sorting[0]?.desc]
84 cfe497c Mrdn 2y ago const query: QueryKey = [entityKey, pageIndex, pageSize, filtering.columnFilters]
85 578311c Mrdn 2y ago
86 6b38fe9 Mrdn 2y ago const { data, isLoading } = useQuery({
87 578311c Mrdn 2y ago queryFn: fetchEntity,
88 cfe497c Mrdn 2y ago queryKey: manualSorting ? sortedQuery : query,
89 578311c Mrdn 2y ago initialData: { entity: [], pageCount: 1 }
90 578311c Mrdn 2y ago });
91 578311c Mrdn 2y ago
92 578311c Mrdn 2y ago const columns = columnsFn({ onEdit, onDelete, onOpen })
93 d21d2e2 Mrdn 2y ago const table = useEntityTable({
94 d21d2e2 Mrdn 2y ago data,
95 578311c Mrdn 2y ago columns,
96 d21d2e2 Mrdn 2y ago pageSize,
97 d21d2e2 Mrdn 2y ago pageIndex,
98 d21d2e2 Mrdn 2y ago rowSelection,
99 d21d2e2 Mrdn 2y ago visibility,
100 d21d2e2 Mrdn 2y ago sorting,
101 d21d2e2 Mrdn 2y ago onPaginationChange
102 578311c Mrdn 2y ago })
103 578311c Mrdn 2y ago
104 6b38fe9 Mrdn 2y ago useEffect(() => table.setPageIndex(1), [filtering.columnFilters, table])
105 6b38fe9 Mrdn 2y ago
106 d21d2e2 Mrdn 2y ago // TODO: Move the selectedEntity to context
107 3b7feef Mrdn 2y ago return (
108 6b38fe9 Mrdn 2y ago <EntityTableContext.Provider value={{ table, data: data.entity, filtering, isLoading }}>
109 3b7feef Mrdn 2y ago <SettingsDialog
110 3b7feef Mrdn 2y ago open={settingsDialogOpen}
111 3b7feef Mrdn 2y ago onOpenChange={setSettingsDialogOpen}
112 3b7feef Mrdn 2y ago entity={selectedEntity}
113 3b7feef Mrdn 2y ago />
114 3b7feef Mrdn 2y ago <DeleteConfirmationDialog
115 3b7feef Mrdn 2y ago open={deleteDialogOpen}
116 3b7feef Mrdn 2y ago onOpenChange={setDeleteDialogOpen}
117 3b7feef Mrdn 2y ago entity={selectedEntity}
118 3b7feef Mrdn 2y ago />
119 3b7feef Mrdn 2y ago <MutationDialog
120 3b7feef Mrdn 2y ago open={mutationDialogOpen}
121 3b7feef Mrdn 2y ago onOpenChange={setMutationDialogOpen}
122 3b7feef Mrdn 2y ago entity={selectedEntity}
123 3b7feef Mrdn 2y ago />
124 578311c Mrdn 2y ago <div className="flex flex-col">
125 578311c Mrdn 2y ago <div className="flex items-center py-4">
126 578311c Mrdn 2y ago <TableFiltering />
127 578311c Mrdn 2y ago <DataTableViewOptions table={table} />
128 d21d2e2 Mrdn 2y ago {onCreate && (
129 d21d2e2 Mrdn 2y ago <Button
130 d21d2e2 Mrdn 2y ago aria-label={`create-${entityKey}`}
131 d21d2e2 Mrdn 2y ago onClick={onCreate}>
132 d21d2e2 Mrdn 2y ago {t('create')}
133 d21d2e2 Mrdn 2y ago </Button>
134 d21d2e2 Mrdn 2y ago )}
135 578311c Mrdn 2y ago </div>
136 578311c Mrdn 2y ago <div className="w-full rounded-md border">
137 578311c Mrdn 2y ago <EntityDataTable
138 578311c Mrdn 2y ago columns={columns}
139 578311c Mrdn 2y ago onRowClick={onOpen}
140 578311c Mrdn 2y ago />
141 578311c Mrdn 2y ago <DataTablePagination />
142 578311c Mrdn 2y ago </div>
143 578311c Mrdn 2y ago </div>
144 578311c Mrdn 2y ago </EntityTableContext.Provider>
145 3b7feef Mrdn 2y ago );
146 3b7feef Mrdn 2y ago }
147 578311c Mrdn 2y ago
148 578311c Mrdn 2y ago export * from './hooks'