gitscope
/
← marzneshin / dashboard/src/libs/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/libs/entity-table/entity-table.tsx · v0.7.4
Source
1 03b3dbc Mardin 2y ago import { useMemo } from "react";
2 7389ad0 Mardin 2y ago import { Button } from "@marzneshin/common/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 65bbe9d Mardin 2y ago usePrimaryFiltering,
11 578311c Mrdn 2y ago usePagination,
12 d21d2e2 Mrdn 2y ago useEntityTable,
13 d21d2e2 Mrdn 2y ago useVisibility,
14 cfe497c Mrdn 2y ago useSorting,
15 7738ec1 Mardin 2y ago type UseRowSelectionReturn,
16 7738ec1 Mardin 2y ago type FetchEntityReturn,
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 d0daa61 Mardin 2y ago columns: ColumnDef<T>[];
24 65bbe9d Mardin 2y ago primaryFilter: string;
25 3072f60 Mrdn 2y ago entityKey: string;
26 3072f60 Mrdn 2y ago rowSelection?: UseRowSelectionReturn;
27 7738ec1 Mardin 2y ago fetchEntity: ({ queryKey }: EntityQueryKeyType) => FetchEntityReturn<T>;
28 7738ec1 Mardin 2y ago onCreate?: () => void;
29 7738ec1 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 8b82d79 Mardin 1y ago const { onPaginationChange, pageIndex, pageSize } = usePagination({ entityKey });
47 7738ec1 Mardin 2y ago
48 3072f60 Mrdn 2y ago const query: QueryKey = [
49 3072f60 Mrdn 2y ago entityKey,
50 65bbe9d Mardin 2y ago {
51 65bbe9d Mardin 2y ago page: pageIndex,
52 65bbe9d Mardin 2y ago size: pageSize,
53 65bbe9d Mardin 2y ago },
54 65bbe9d Mardin 2y ago columnPrimaryFilter.columnFilters,
55 65bbe9d Mardin 2y ago {
56 bec80cf Mardin 2y ago sortBy: sorting.sorting[0]?.id || "created_at",
57 bec80cf Mardin 2y ago desc: sorting.sorting[0]?.desc || true,
58 65bbe9d Mardin 2y ago },
59 65bbe9d Mardin 2y ago { filters: filters.columnsFilter }
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 65bbe9d Mardin 2y ago queryKey: query,
65 7738ec1 Mardin 2y ago initialData: { entities: [], 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 8b82d79 Mardin 1y ago () => ({ entityKey, table, data: data.entities, primaryFilter: columnPrimaryFilter, filters, isLoading: isFetching }),
81 8b82d79 Mardin 1y ago [entityKey, table, data.entities, filters, columnPrimaryFilter, 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 6a4fee1 Dawsh 2y ago <div className="flex w-full 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 65bbe9d Mardin 2y ago <TableSearch />
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 65bbe9d Mardin 2y ago <DataTablePagination table={table} />
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 }