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