From b6f53759dfdbc7cb2ae6c96d3e00755c57daec63 Mon Sep 17 00:00:00 2001 From: Judson Cairo Date: Thu, 22 Aug 2024 10:19:54 -0300 Subject: [PATCH] Refactor tables to use data-table component --- package-lock.json | 16 +-- package.json | 2 +- src/components/ui/data-table.tsx | 135 ++++++++++++++++++ src/pages/instance/Dify/SessionsDify.tsx | 99 ++----------- .../instance/Flowise/SessionsFlowise.tsx | 99 ++----------- .../GenericBot/SessionsGenericBot.tsx | 100 ++----------- .../instance/Openai/CredentialsOpenai.tsx | 88 ++---------- src/pages/instance/Openai/SessionsOpenai.tsx | 99 ++----------- .../instance/Typebot/SessionsTypebot.tsx | 99 ++----------- 9 files changed, 224 insertions(+), 513 deletions(-) create mode 100644 src/components/ui/data-table.tsx diff --git a/package-lock.json b/package-lock.json index 2cd97be..8714891 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", - "@tanstack/react-table": "^8.19.3", + "@tanstack/react-table": "^8.20.1", "axios": "^1.7.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -2276,11 +2276,11 @@ ] }, "node_modules/@tanstack/react-table": { - "version": "8.19.3", - "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.19.3.tgz", - "integrity": "sha512-MtgPZc4y+cCRtU16y1vh1myuyZ2OdkWgMEBzyjYsoMWMicKZGZvcDnub3Zwb6XF2pj9iRMvm1SO1n57lS0vXLw==", + "version": "8.20.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.1.tgz", + "integrity": "sha512-PJK+07qbengObe5l7c8vCdtefXm8cyR4i078acWrHbdm8JKw1ES7YpmOtVt9ALUVEEFAHscdVpGRhRgikgFMbQ==", "dependencies": { - "@tanstack/table-core": "8.19.3" + "@tanstack/table-core": "8.20.1" }, "engines": { "node": ">=12" @@ -2295,9 +2295,9 @@ } }, "node_modules/@tanstack/table-core": { - "version": "8.19.3", - "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.19.3.tgz", - "integrity": "sha512-IqREj9ADoml9zCAouIG/5kCGoyIxPFdqdyoxis9FisXFi5vT+iYfEfLosq4xkU/iDbMcEuAj+X8dWRLvKYDNoQ==", + "version": "8.20.1", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.1.tgz", + "integrity": "sha512-5Ly5TIRHnWH7vSDell9B/OVyV380qqIJVg7H7R7jU4fPEmOD4smqAX7VRflpYI09srWR8aj5OLD2Ccs1pI5mTg==", "engines": { "node": ">=12" }, diff --git a/package.json b/package.json index a85b649..c81feea 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", - "@tanstack/react-table": "^8.19.3", + "@tanstack/react-table": "^8.20.1", "axios": "^1.7.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx new file mode 100644 index 0000000..fcf3578 --- /dev/null +++ b/src/components/ui/data-table.tsx @@ -0,0 +1,135 @@ +"use client"; + +import { + ColumnDef, + TableOptions, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getGroupedRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { ReactNode } from "react"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; + +import { cn } from "@/lib/utils"; + +interface DataTableProps + extends Omit< + TableOptions, + "data" | "columns" | "getCoreRowModel" | "getFilteredRowModel" + > { + isLoading?: boolean; + enableHeaders?: boolean; + loadingMessage?: ReactNode; + noResultsMessage?: ReactNode; + columns: ColumnDef[]; + data: TData[]; + className?: string; + highlightedRows?: string[]; +} + +export function DataTable({ + columns, + data, + isLoading, + loadingMessage, + noResultsMessage, + enableHeaders = true, + className, + highlightedRows, + ...options +}: DataTableProps) { + const table = useReactTable({ + ...options, + data, + columns, + getCoreRowModel: getCoreRowModel(), + getFilteredRowModel: getFilteredRowModel(), + getGroupedRowModel: getGroupedRowModel(), + getSortedRowModel: getSortedRowModel(), + }); + + return ( +
+ + {enableHeaders && ( + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + + ); + })} + + ))} + + )} + + {isLoading ? ( + + + {loadingMessage ?? "Carregando..."} + + + ) : ( + <> + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ))} + + )) + ) : ( + + + {noResultsMessage ?? "Nenhum resultado encontrado!"} + + + )} + + )} + +
+
+ ); +} diff --git a/src/pages/instance/Dify/SessionsDify.tsx b/src/pages/instance/Dify/SessionsDify.tsx index 43cabff..4bdd09b 100644 --- a/src/pages/instance/Dify/SessionsDify.tsx +++ b/src/pages/instance/Dify/SessionsDify.tsx @@ -1,14 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { - ColumnDef, - SortingState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table"; +import { ColumnDef, SortingState } from "@tanstack/react-table"; import { Delete, ListCollapse, @@ -23,6 +14,7 @@ import { useTranslation } from "react-i18next"; import { toast } from "react-toastify"; import { Button } from "@/components/ui/button"; +import { DataTable } from "@/components/ui/data-table"; import { Dialog, DialogContent, @@ -39,14 +31,6 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; import { useInstance } from "@/contexts/InstanceContext"; @@ -85,6 +69,7 @@ function SessionsDify({ difyId }: { difyId?: string }) { const [sorting, setSorting] = useState([]); const [sessions, setSessions] = useState([]); const [open, setOpen] = useState(false); + const [globalFilter, setGlobalFilter] = useState(""); useEffect(() => { if (open) fetchData(instance, setSessions, difyId); @@ -196,19 +181,6 @@ function SessionsDify({ difyId }: { difyId?: string }) { }, ]; - const table = useReactTable({ - data: sessions, - columns: columns as ColumnDef[], - onSortingChange: setSorting, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getSortedRowModel: getSortedRowModel(), - getFilteredRowModel: getFilteredRowModel(), - state: { - sorting, - }, - }); - return ( @@ -228,65 +200,22 @@ function SessionsDify({ difyId }: { difyId?: string }) {
- table.getColumn("remoteJid")?.setFilterValue(event.target.value) - } + value={globalFilter} + onChange={(event) => setGlobalFilter(event.target.value)} />
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - - )) - ) : ( - - - {t("dify.sessions.table.none")} - - - )} - -
+ diff --git a/src/pages/instance/Flowise/SessionsFlowise.tsx b/src/pages/instance/Flowise/SessionsFlowise.tsx index d0a1b40..66ec7c7 100644 --- a/src/pages/instance/Flowise/SessionsFlowise.tsx +++ b/src/pages/instance/Flowise/SessionsFlowise.tsx @@ -1,14 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { - ColumnDef, - SortingState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table"; +import { ColumnDef, SortingState } from "@tanstack/react-table"; import { Delete, ListCollapse, @@ -23,6 +14,7 @@ import { useTranslation } from "react-i18next"; import { toast } from "react-toastify"; import { Button } from "@/components/ui/button"; +import { DataTable } from "@/components/ui/data-table"; import { Dialog, DialogContent, @@ -39,14 +31,6 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; import { useInstance } from "@/contexts/InstanceContext"; @@ -88,6 +72,7 @@ function SessionsFlowise({ flowiseId }: { flowiseId?: string }) { const [sorting, setSorting] = useState([]); const [sessions, setSessions] = useState([]); const [open, setOpen] = useState(false); + const [globalFilter, setGlobalFilter] = useState(""); useEffect(() => { if (open) fetchData(instance, setSessions, flowiseId); @@ -210,19 +195,6 @@ function SessionsFlowise({ flowiseId }: { flowiseId?: string }) { }, ]; - const table = useReactTable({ - data: sessions, - columns: columns as ColumnDef[], - onSortingChange: setSorting, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getSortedRowModel: getSortedRowModel(), - getFilteredRowModel: getFilteredRowModel(), - state: { - sorting, - }, - }); - return ( @@ -244,65 +216,22 @@ function SessionsFlowise({ flowiseId }: { flowiseId?: string }) {
- table.getColumn("remoteJid")?.setFilterValue(event.target.value) - } + value={globalFilter} + onChange={(event) => setGlobalFilter(event.target.value)} />
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - - )) - ) : ( - - - {t("flowise.sessions.table.none")} - - - )} - -
+ diff --git a/src/pages/instance/GenericBot/SessionsGenericBot.tsx b/src/pages/instance/GenericBot/SessionsGenericBot.tsx index 06846bb..39322c3 100644 --- a/src/pages/instance/GenericBot/SessionsGenericBot.tsx +++ b/src/pages/instance/GenericBot/SessionsGenericBot.tsx @@ -1,14 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { - ColumnDef, - SortingState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table"; + +import { ColumnDef, SortingState } from "@tanstack/react-table"; import { Delete, ListCollapse, @@ -23,6 +15,7 @@ import { useTranslation } from "react-i18next"; import { toast } from "react-toastify"; import { Button } from "@/components/ui/button"; +import { DataTable } from "@/components/ui/data-table"; import { Dialog, DialogContent, @@ -39,14 +32,6 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; import { useInstance } from "@/contexts/InstanceContext"; @@ -88,6 +73,7 @@ function SessionsGenericBot({ genericBotId }: { genericBotId?: string }) { const [sorting, setSorting] = useState([]); const [sessions, setSessions] = useState([]); const [open, setOpen] = useState(false); + const [globalFilter, setGlobalFilter] = useState(""); useEffect(() => { if (open) fetchData(instance, setSessions, genericBotId); @@ -212,19 +198,6 @@ function SessionsGenericBot({ genericBotId }: { genericBotId?: string }) { }, ]; - const table = useReactTable({ - data: sessions, - columns: columns as ColumnDef[], - onSortingChange: setSorting, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getSortedRowModel: getSortedRowModel(), - getFilteredRowModel: getFilteredRowModel(), - state: { - sorting, - }, - }); - return ( @@ -246,65 +219,22 @@ function SessionsGenericBot({ genericBotId }: { genericBotId?: string }) {
- table.getColumn("remoteJid")?.setFilterValue(event.target.value) - } + value={globalFilter} + onChange={(event) => setGlobalFilter(event.target.value)} />
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - - )) - ) : ( - - - {t("genericBot.sessions.table.none")} - - - )} - -
+ diff --git a/src/pages/instance/Openai/CredentialsOpenai.tsx b/src/pages/instance/Openai/CredentialsOpenai.tsx index ffd7b38..f67633c 100644 --- a/src/pages/instance/Openai/CredentialsOpenai.tsx +++ b/src/pages/instance/Openai/CredentialsOpenai.tsx @@ -1,15 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { zodResolver } from "@hookform/resolvers/zod"; -import { - ColumnDef, - SortingState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table"; +import { ColumnDef, SortingState } from "@tanstack/react-table"; import { ArrowUpDown, Lock, MoreHorizontal } from "lucide-react"; import { useEffect, useState } from "react"; import { useForm, FormProvider } from "react-hook-form"; @@ -18,6 +9,7 @@ import { toast } from "react-toastify"; import { z } from "zod"; import { Button } from "@/components/ui/button"; +import { DataTable } from "@/components/ui/data-table"; import { Dialog, DialogContent, @@ -37,14 +29,6 @@ import { import { FormInput } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { Separator } from "@/components/ui/separator"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; import { useInstance } from "@/contexts/InstanceContext"; @@ -195,19 +179,6 @@ function CredentialsOpenai() { }, ]; - const table = useReactTable({ - data: creds, - columns: columns as ColumnDef[], - onSortingChange: setSorting, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getSortedRowModel: getSortedRowModel(), - getFilteredRowModel: getFilteredRowModel(), - state: { - sorting, - }, - }); - return ( @@ -253,54 +224,13 @@ function CredentialsOpenai() {
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - - )) - ) : ( - - - {t("openai.credentials.table.none")} - - - )} - -
+
diff --git a/src/pages/instance/Openai/SessionsOpenai.tsx b/src/pages/instance/Openai/SessionsOpenai.tsx index 6bafcb5..d6dfe46 100644 --- a/src/pages/instance/Openai/SessionsOpenai.tsx +++ b/src/pages/instance/Openai/SessionsOpenai.tsx @@ -1,14 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { - ColumnDef, - SortingState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table"; +import { ColumnDef, SortingState } from "@tanstack/react-table"; import { Delete, ListCollapse, @@ -23,6 +14,7 @@ import { useTranslation } from "react-i18next"; import { toast } from "react-toastify"; import { Button } from "@/components/ui/button"; +import { DataTable } from "@/components/ui/data-table"; import { Dialog, DialogContent, @@ -39,14 +31,6 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; import { useInstance } from "@/contexts/InstanceContext"; @@ -88,6 +72,7 @@ function SessionsOpenai({ botId }: { botId?: string }) { const [sorting, setSorting] = useState([]); const [sessions, setSessions] = useState([]); const [open, setOpen] = useState(false); + const [globalFilter, setGlobalFilter] = useState(""); useEffect(() => { if (open) fetchData(instance, setSessions, botId); @@ -208,19 +193,6 @@ function SessionsOpenai({ botId }: { botId?: string }) { }, ]; - const table = useReactTable({ - data: sessions, - columns: columns as ColumnDef[], - onSortingChange: setSorting, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getSortedRowModel: getSortedRowModel(), - getFilteredRowModel: getFilteredRowModel(), - state: { - sorting, - }, - }); - return ( @@ -240,65 +212,22 @@ function SessionsOpenai({ botId }: { botId?: string }) {
- table.getColumn("remoteJid")?.setFilterValue(event.target.value) - } + value={globalFilter} + onChange={(event) => setGlobalFilter(event.target.value)} />
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - - )) - ) : ( - - - {t("openai.sessions.table.none")} - - - )} - -
+ diff --git a/src/pages/instance/Typebot/SessionsTypebot.tsx b/src/pages/instance/Typebot/SessionsTypebot.tsx index dfe611c..d7e8aab 100644 --- a/src/pages/instance/Typebot/SessionsTypebot.tsx +++ b/src/pages/instance/Typebot/SessionsTypebot.tsx @@ -1,14 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { - ColumnDef, - SortingState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table"; +import { ColumnDef, SortingState } from "@tanstack/react-table"; import { Delete, ListCollapse, @@ -23,6 +14,7 @@ import { useTranslation } from "react-i18next"; import { toast } from "react-toastify"; import { Button } from "@/components/ui/button"; +import { DataTable } from "@/components/ui/data-table"; import { Dialog, DialogContent, @@ -39,14 +31,6 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; import { useInstance } from "@/contexts/InstanceContext"; @@ -88,6 +72,7 @@ function SessionsTypebot({ typebotId }: { typebotId?: string }) { const [sorting, setSorting] = useState([]); const [sessions, setSessions] = useState([]); const [open, setOpen] = useState(false); + const [globalFilter, setGlobalFilter] = useState(""); useEffect(() => { if (open) fetchData(instance, setSessions, typebotId); @@ -207,19 +192,6 @@ function SessionsTypebot({ typebotId }: { typebotId?: string }) { }, ]; - const table = useReactTable({ - data: sessions, - columns: columns as ColumnDef[], - onSortingChange: setSorting, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getSortedRowModel: getSortedRowModel(), - getFilteredRowModel: getFilteredRowModel(), - state: { - sorting, - }, - }); - return ( @@ -241,65 +213,22 @@ function SessionsTypebot({ typebotId }: { typebotId?: string }) {
- table.getColumn("remoteJid")?.setFilterValue(event.target.value) - } + value={globalFilter} + onChange={(event) => setGlobalFilter(event.target.value)} />
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - - )) - ) : ( - - - {t("typebot.sessions.table.none")} - - - )} - -
+