gitscope
/
← marzneshin / dashboard/src/features/entity-table/double-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/double-entity-table.tsx · v0.6.2
Source
1 7738ec1 Mardin 2y ago import { useMemo } from "react";
2 7738ec1 Mardin 2y ago import { Button } from "@marzneshin/components";
3 7738ec1 Mardin 2y ago import { DataTableViewOptions } from "./components";
4 7738ec1 Mardin 2y ago import { useTranslation } from "react-i18next";
5 7738ec1 Mardin 2y ago import { useQuery } from "@tanstack/react-query";
6 7738ec1 Mardin 2y ago import { ColumnDef } from "@tanstack/react-table";
7 7738ec1 Mardin 2y ago import { EntityTableContext } from "./contexts";
8 7738ec1 Mardin 2y ago import { TableSearch, DataTablePagination, EntityDataTable } from "./components";
9 7738ec1 Mardin 2y ago import {
10 7738ec1 Mardin 2y ago usePrimaryFiltering,
11 7738ec1 Mardin 2y ago usePagination,
12 7738ec1 Mardin 2y ago useEntityTable,
13 7738ec1 Mardin 2y ago useVisibility,
14 7738ec1 Mardin 2y ago useSorting,
15 7738ec1 Mardin 2y ago type UseRowSelectionReturn,
16 7738ec1 Mardin 2y ago type FetchEntityReturn,
17 7738ec1 Mardin 2y ago type DoubleEntityQueryKey,
18 7738ec1 Mardin 2y ago type DoubleEntityQueryKeyType,
19 7738ec1 Mardin 2y ago useFilters,
20 7738ec1 Mardin 2y ago } from "./hooks";
21 7738ec1 Mardin 2y ago
22 7738ec1 Mardin 2y ago export interface DoubleEntityTableProps<T> {
23 7738ec1 Mardin 2y ago columns: ColumnDef<T>[];
24 7738ec1 Mardin 2y ago primaryFilter: string;
25 7738ec1 Mardin 2y ago entityKey: string;
26 7738ec1 Mardin 2y ago entityId: number;
27 7738ec1 Mardin 2y ago rowSelection?: UseRowSelectionReturn;
28 7738ec1 Mardin 2y ago fetchEntity: ({ queryKey }: DoubleEntityQueryKeyType) => FetchEntityReturn<T>;
29 7738ec1 Mardin 2y ago onCreate?: () => void;
30 7738ec1 Mardin 2y ago onOpen?: (entity: any) => void;
31 7738ec1 Mardin 2y ago }
32 7738ec1 Mardin 2y ago
33 7738ec1 Mardin 2y ago export function DoubleEntityTable<T>({
34 7738ec1 Mardin 2y ago fetchEntity,
35 7738ec1 Mardin 2y ago columns,
36 7738ec1 Mardin 2y ago primaryFilter,
37 7738ec1 Mardin 2y ago rowSelection,
38 7738ec1 Mardin 2y ago entityKey,
39 7738ec1 Mardin 2y ago entityId,
40 7738ec1 Mardin 2y ago onCreate,
41 7738ec1 Mardin 2y ago onOpen,
42 7738ec1 Mardin 2y ago }: DoubleEntityTableProps<T>) {
43 7738ec1 Mardin 2y ago const { t } = useTranslation();
44 7738ec1 Mardin 2y ago const columnPrimaryFilter = usePrimaryFiltering({ column: primaryFilter });
45 7738ec1 Mardin 2y ago const filters = useFilters();
46 7738ec1 Mardin 2y ago const sorting = useSorting();
47 7738ec1 Mardin 2y ago const visibility = useVisibility();
48 7738ec1 Mardin 2y ago const { onPaginationChange, pageIndex, pageSize } = usePagination();
49 7738ec1 Mardin 2y ago
50 7738ec1 Mardin 2y ago const query: DoubleEntityQueryKey = [
51 7738ec1 Mardin 2y ago entityKey,
52 7738ec1 Mardin 2y ago entityId,
53 7738ec1 Mardin 2y ago {
54 7738ec1 Mardin 2y ago page: pageIndex,
55 7738ec1 Mardin 2y ago size: pageSize,
56 7738ec1 Mardin 2y ago },
57 7738ec1 Mardin 2y ago columnPrimaryFilter.columnFilters,
58 7738ec1 Mardin 2y ago {
59 7738ec1 Mardin 2y ago sortBy: sorting.sorting[0]?.id || "created_at",
60 7738ec1 Mardin 2y ago desc: sorting.sorting[0]?.desc || true,
61 7738ec1 Mardin 2y ago },
62 7738ec1 Mardin 2y ago { filters: filters.columnsFilter }
63 7738ec1 Mardin 2y ago ];
64 7738ec1 Mardin 2y ago
65 7738ec1 Mardin 2y ago const { data, isFetching } = useQuery({
66 7738ec1 Mardin 2y ago queryFn: fetchEntity,
67 7738ec1 Mardin 2y ago queryKey: query,
68 7738ec1 Mardin 2y ago initialData: { entities: [], pageCount: 1 },
69 7738ec1 Mardin 2y ago });
70 7738ec1 Mardin 2y ago
71 7738ec1 Mardin 2y ago const table = useEntityTable({
72 7738ec1 Mardin 2y ago data,
73 7738ec1 Mardin 2y ago columns,
74 7738ec1 Mardin 2y ago pageSize,
75 7738ec1 Mardin 2y ago pageIndex,
76 7738ec1 Mardin 2y ago rowSelection,
77 7738ec1 Mardin 2y ago visibility,
78 7738ec1 Mardin 2y ago sorting,
79 7738ec1 Mardin 2y ago onPaginationChange,
80 7738ec1 Mardin 2y ago });
81 7738ec1 Mardin 2y ago
82 7738ec1 Mardin 2y ago const contextValue = useMemo(
83 7738ec1 Mardin 2y ago () => ({ table, data: data.entities, primaryFilter: columnPrimaryFilter, filters, isLoading: isFetching }),
84 7738ec1 Mardin 2y ago [table, data.entities, filters, columnPrimaryFilter, isFetching],
85 7738ec1 Mardin 2y ago );
86 7738ec1 Mardin 2y ago
87 7738ec1 Mardin 2y ago return (
88 7738ec1 Mardin 2y ago <EntityTableContext.Provider value={contextValue}>
89 7738ec1 Mardin 2y ago <div className="flex flex-col">
90 7738ec1 Mardin 2y ago <div className="flex flex-col md:flex-row-reverse items-center py-4 gap-2 w-full">
91 7738ec1 Mardin 2y ago <div className="flex flex-row items-center w-full">
92 7738ec1 Mardin 2y ago <DataTableViewOptions table={table} />
93 7738ec1 Mardin 2y ago {onCreate && (
94 7738ec1 Mardin 2y ago <Button aria-label={`create-${entityKey}`} onClick={onCreate}>
95 7738ec1 Mardin 2y ago {t("create")}
96 7738ec1 Mardin 2y ago </Button>
97 7738ec1 Mardin 2y ago )}
98 7738ec1 Mardin 2y ago </div>
99 7738ec1 Mardin 2y ago <TableSearch />
100 7738ec1 Mardin 2y ago </div>
101 7738ec1 Mardin 2y ago <div className="w-full rounded-md border">
102 7738ec1 Mardin 2y ago <EntityDataTable columns={columns} onRowClick={onOpen} />
103 7738ec1 Mardin 2y ago <DataTablePagination table={table} />
104 7738ec1 Mardin 2y ago </div>
105 7738ec1 Mardin 2y ago </div>
106 7738ec1 Mardin 2y ago </EntityTableContext.Provider>
107 7738ec1 Mardin 2y ago );
108 7738ec1 Mardin 2y ago }