gitscope
/
← marzneshin / dashboard/src/features/entity-table/entity-table.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/entity-table/entity-table.tsx · v0.3.1
Source
1 03b3dbc Mardin 2y ago import { useMemo } 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 4cebd65 Mardin 2y ago import { EntityTableContext } from "./contexts";
6 4cebd65 Mardin 2y ago import { TableFiltering, DataTablePagination, EntityDataTable } from "./components";
7 578311c Mrdn 2y ago import {
8 3072f60 Mrdn 2y ago type UseRowSelectionReturn,
9 578311c Mrdn 2y ago useFiltering,
10 578311c Mrdn 2y ago usePagination,
11 3072f60 Mrdn 2y ago type FetchEntityReturn,
12 d21d2e2 Mrdn 2y ago useEntityTable,
13 d21d2e2 Mrdn 2y ago useVisibility,
14 cfe497c Mrdn 2y ago useSorting,
15 3072f60 Mrdn 2y ago type SortableQueryKey,
16 3072f60 Mrdn 2y ago type QueryKey,
17 3072f60 Mrdn 2y ago type EntityQueryKeyType,
18 578311c Mrdn 2y ago } from "./hooks";
19 3b7feef Mrdn 2y ago
20 4cebd65 Mardin 2y ago export interface EntityTableProps<T> {
21 578311c Mrdn 2y ago fetchEntity: ({ queryKey }: EntityQueryKeyType) => FetchEntityReturn<T>;
22 578311c Mrdn 2y ago columnsFn: any;
23 3b7feef Mrdn 2y ago filteredColumn: string;
24 3072f60 Mrdn 2y ago entityKey: string;
25 3072f60 Mrdn 2y ago rowSelection?: UseRowSelectionReturn;
26 3072f60 Mrdn 2y ago manualSorting?: boolean;
27 03b3dbc Mardin 2y ago onCreate: () => void;
28 03b3dbc Mardin 2y ago onEdit: (entity: T) => void;
29 03b3dbc Mardin 2y ago onOpen: (entity: T) => void;
30 03b3dbc Mardin 2y ago onDelete: (entity: T) => void;
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 578311c Mrdn 2y ago columnsFn,
36 3b7feef Mrdn 2y ago filteredColumn,
37 578311c Mrdn 2y ago rowSelection,
38 578311c Mrdn 2y ago entityKey,
39 3072f60 Mrdn 2y ago manualSorting = false,
40 03b3dbc Mardin 2y ago onCreate,
41 03b3dbc Mardin 2y ago onEdit,
42 03b3dbc Mardin 2y ago onOpen,
43 03b3dbc Mardin 2y ago onDelete,
44 3b7feef Mrdn 2y ago }: EntityTableProps<T>) {
45 3072f60 Mrdn 2y ago const { t } = useTranslation();
46 3072f60 Mrdn 2y ago const filtering = useFiltering({ column: filteredColumn });
47 3072f60 Mrdn 2y ago const sorting = useSorting();
48 3072f60 Mrdn 2y ago const visibility = useVisibility();
49 578311c Mrdn 2y ago const { onPaginationChange, pageIndex, pageSize } = usePagination();
50 cfe497c Mrdn 2y ago const sortedQuery: SortableQueryKey = [
51 cfe497c Mrdn 2y ago entityKey,
52 cfe497c Mrdn 2y ago pageIndex,
53 cfe497c Mrdn 2y ago pageSize,
54 cfe497c Mrdn 2y ago filtering.columnFilters,
55 cfe497c Mrdn 2y ago sorting.sorting[0]?.id ? sorting.sorting[0].id : "created_at",
56 3072f60 Mrdn 2y ago sorting.sorting[0]?.desc,
57 3072f60 Mrdn 2y ago ];
58 3072f60 Mrdn 2y ago const query: QueryKey = [
59 3072f60 Mrdn 2y ago entityKey,
60 3072f60 Mrdn 2y ago pageIndex,
61 3072f60 Mrdn 2y ago pageSize,
62 3072f60 Mrdn 2y ago filtering.columnFilters,
63 3072f60 Mrdn 2y ago ];
64 578311c Mrdn 2y ago
65 4cebd65 Mardin 2y ago const { data, isFetching } = useQuery({
66 578311c Mrdn 2y ago queryFn: fetchEntity,
67 cfe497c Mrdn 2y ago queryKey: manualSorting ? sortedQuery : query,
68 3072f60 Mrdn 2y ago initialData: { entity: [], pageCount: 1 },
69 578311c Mrdn 2y ago });
70 578311c Mrdn 2y ago
71 3072f60 Mrdn 2y ago const columns = columnsFn({ onEdit, onDelete, onOpen });
72 d21d2e2 Mrdn 2y ago const table = useEntityTable({
73 d21d2e2 Mrdn 2y ago data,
74 578311c Mrdn 2y ago columns,
75 d21d2e2 Mrdn 2y ago pageSize,
76 d21d2e2 Mrdn 2y ago pageIndex,
77 d21d2e2 Mrdn 2y ago rowSelection,
78 d21d2e2 Mrdn 2y ago visibility,
79 d21d2e2 Mrdn 2y ago sorting,
80 3072f60 Mrdn 2y ago onPaginationChange,
81 3072f60 Mrdn 2y ago });
82 578311c Mrdn 2y ago
83 03b3dbc Mardin 2y ago const contextValue = useMemo(
84 4cebd65 Mardin 2y ago () => ({ table, data: data.entity, filtering, isLoading: isFetching }),
85 4cebd65 Mardin 2y ago [table, data.entity, filtering, isFetching],
86 03b3dbc Mardin 2y ago );
87 6b38fe9 Mrdn 2y ago
88 3b7feef Mrdn 2y ago return (
89 03b3dbc Mardin 2y ago <EntityTableContext.Provider value={contextValue}>
90 578311c Mrdn 2y ago <div className="flex flex-col">
91 578311c Mrdn 2y ago <div className="flex items-center py-4">
92 578311c Mrdn 2y ago <TableFiltering />
93 578311c Mrdn 2y ago <DataTableViewOptions table={table} />
94 d21d2e2 Mrdn 2y ago {onCreate && (
95 3072f60 Mrdn 2y ago <Button aria-label={`create-${entityKey}`} onClick={onCreate}>
96 3072f60 Mrdn 2y ago {t("create")}
97 d21d2e2 Mrdn 2y ago </Button>
98 d21d2e2 Mrdn 2y ago )}
99 578311c Mrdn 2y ago </div>
100 578311c Mrdn 2y ago <div className="w-full rounded-md border">
101 3072f60 Mrdn 2y ago <EntityDataTable columns={columns} onRowClick={onOpen} />
102 578311c Mrdn 2y ago <DataTablePagination />
103 578311c Mrdn 2y ago </div>
104 578311c Mrdn 2y ago </div>
105 578311c Mrdn 2y ago </EntityTableContext.Provider>
106 3b7feef Mrdn 2y ago );
107 3b7feef Mrdn 2y ago }