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
Source
1 3072f60 Mrdn 2y ago import { type FC, useMemo, 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 3072f60 Mrdn 2y ago import { EntityDataTable } from "./table";
7 3072f60 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 3072f60 Mrdn 2y ago type UseRowSelectionReturn,
11 3072f60 Mrdn 2y ago type UseDialogProps,
12 578311c Mrdn 2y ago useFiltering,
13 578311c Mrdn 2y ago usePagination,
14 3072f60 Mrdn 2y ago type FetchEntityReturn,
15 d21d2e2 Mrdn 2y ago useEntityTable,
16 d21d2e2 Mrdn 2y ago useVisibility,
17 cfe497c Mrdn 2y ago useSorting,
18 3072f60 Mrdn 2y ago type SortableQueryKey,
19 3072f60 Mrdn 2y ago type QueryKey,
20 3072f60 Mrdn 2y ago type EntityQueryKeyType,
21 578311c Mrdn 2y ago } from "./hooks";
22 3072f60 Mrdn 2y ago import { useDialog } from "@marzneshin/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 3072f60 Mrdn 2y ago entityKey: string;
32 3072f60 Mrdn 2y ago rowSelection?: UseRowSelectionReturn;
33 3072f60 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 3072f60 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 3072f60 Mrdn 2y ago const { t } = useTranslation();
73 3072f60 Mrdn 2y ago const filtering = useFiltering({ column: filteredColumn });
74 3072f60 Mrdn 2y ago const sorting = useSorting();
75 3072f60 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 3072f60 Mrdn 2y ago sorting.sorting[0]?.desc,
84 3072f60 Mrdn 2y ago ];
85 3072f60 Mrdn 2y ago const query: QueryKey = [
86 3072f60 Mrdn 2y ago entityKey,
87 3072f60 Mrdn 2y ago pageIndex,
88 3072f60 Mrdn 2y ago pageSize,
89 3072f60 Mrdn 2y ago filtering.columnFilters,
90 3072f60 Mrdn 2y ago ];
91 578311c Mrdn 2y ago
92 6b38fe9 Mrdn 2y ago const { data, isLoading } = useQuery({
93 578311c Mrdn 2y ago queryFn: fetchEntity,
94 cfe497c Mrdn 2y ago queryKey: manualSorting ? sortedQuery : query,
95 3072f60 Mrdn 2y ago initialData: { entity: [], pageCount: 1 },
96 578311c Mrdn 2y ago });
97 578311c Mrdn 2y ago
98 3072f60 Mrdn 2y ago const columns = columnsFn({ onEdit, onDelete, onOpen });
99 d21d2e2 Mrdn 2y ago const table = useEntityTable({
100 d21d2e2 Mrdn 2y ago data,
101 578311c Mrdn 2y ago columns,
102 d21d2e2 Mrdn 2y ago pageSize,
103 d21d2e2 Mrdn 2y ago pageIndex,
104 d21d2e2 Mrdn 2y ago rowSelection,
105 d21d2e2 Mrdn 2y ago visibility,
106 d21d2e2 Mrdn 2y ago sorting,
107 3072f60 Mrdn 2y ago onPaginationChange,
108 3072f60 Mrdn 2y ago });
109 578311c Mrdn 2y ago
110 3072f60 Mrdn 2y ago const contextValue = useMemo(() => (
111 3072f60 Mrdn 2y ago { table, data: data.entity, filtering, isLoading }
112 3072f60 Mrdn 2y ago ), [table, data.entity, filtering, isLoading])
113 6b38fe9 Mrdn 2y ago
114 3b7feef Mrdn 2y ago return (
115 3072f60 Mrdn 2y ago <EntityTableContext.Provider
116 3072f60 Mrdn 2y ago value={contextValue}
117 3072f60 Mrdn 2y ago >
118 3b7feef Mrdn 2y ago <SettingsDialog
119 3b7feef Mrdn 2y ago open={settingsDialogOpen}
120 3b7feef Mrdn 2y ago onOpenChange={setSettingsDialogOpen}
121 3b7feef Mrdn 2y ago entity={selectedEntity}
122 3b7feef Mrdn 2y ago />
123 3b7feef Mrdn 2y ago <DeleteConfirmationDialog
124 3b7feef Mrdn 2y ago open={deleteDialogOpen}
125 3b7feef Mrdn 2y ago onOpenChange={setDeleteDialogOpen}
126 3b7feef Mrdn 2y ago entity={selectedEntity}
127 3b7feef Mrdn 2y ago />
128 3b7feef Mrdn 2y ago <MutationDialog
129 3b7feef Mrdn 2y ago open={mutationDialogOpen}
130 3b7feef Mrdn 2y ago onOpenChange={setMutationDialogOpen}
131 3b7feef Mrdn 2y ago entity={selectedEntity}
132 3b7feef Mrdn 2y ago />
133 578311c Mrdn 2y ago <div className="flex flex-col">
134 578311c Mrdn 2y ago <div className="flex items-center py-4">
135 578311c Mrdn 2y ago <TableFiltering />
136 578311c Mrdn 2y ago <DataTableViewOptions table={table} />
137 d21d2e2 Mrdn 2y ago {onCreate && (
138 3072f60 Mrdn 2y ago <Button aria-label={`create-${entityKey}`} onClick={onCreate}>
139 3072f60 Mrdn 2y ago {t("create")}
140 d21d2e2 Mrdn 2y ago </Button>
141 d21d2e2 Mrdn 2y ago )}
142 578311c Mrdn 2y ago </div>
143 578311c Mrdn 2y ago <div className="w-full rounded-md border">
144 3072f60 Mrdn 2y ago <EntityDataTable columns={columns} onRowClick={onOpen} />
145 578311c Mrdn 2y ago <DataTablePagination />
146 578311c Mrdn 2y ago </div>
147 578311c Mrdn 2y ago </div>
148 578311c Mrdn 2y ago </EntityTableContext.Provider>
149 3b7feef Mrdn 2y ago );
150 3b7feef Mrdn 2y ago }
151 578311c Mrdn 2y ago
152 3072f60 Mrdn 2y ago export * from "./hooks";