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