Some fix on the s3 and local methods for the files saving, we have to improve testing. Working on table actions.

src/components/wrappers/common/table/data-table.tsx

@@ -1,157 +1,3 @@
-// "use client";
-//
-// import {
-//     ColumnDef,
-//     flexRender,
-//     getCoreRowModel,
-//     useReactTable,
-//     getPaginationRowModel,
-//     getSortedRowModel,
-//     SortingState,
-//     ColumnFiltersState,
-//     getFilteredRowModel,
-// } from "@tanstack/react-table";
-//
-// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-// import { Input } from "@/components/ui/input";
-//
-// import { useState } from "react";
-// import { TablePagination } from "./table-pagination";
-// import { Checkbox } from "@/components/ui/checkbox";
-//
-// interface DataTableProps<TData, TValue> {
-//     columns: ColumnDef<TData, TValue>[];
-//     data: TData[];
-//     enableFilter?: boolean;
-//     enableSelect?: boolean;
-//     enablePagination?: boolean;
-//     paginationOptions?: {
-//         pageSize: number[];
-//         pageVisible: number;
-//         className?: string;
-//     };
-//     filterOptions?: {
-//         title?: string;
-//         key: string;
-//     };
-//     emptyText?: string;
-// }
-//
-// export function DataTable<TData, TValue>({
-//     columns,
-//     data,
-//     enableFilter = false,
-//     enablePagination = true,
-//     enableSelect = true,
-//     paginationOptions = { pageSize: [10, 20, 30, 40, 50, 100], pageVisible: 3 },
-//     filterOptions = { key: "id", title: "Filter by ID" },
-//     emptyText = "No data.",
-// }: DataTableProps<TData, TValue>) {
-//     const [sorting, setSorting] = useState<SortingState>([]);
-//     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-//     const [rowSelection, setRowSelection] = useState({});
-//
-//     if (enableSelect && data.length > 0) {
-//         const selectColumnExists = columns.some((column) => column.id === "select");
-//
-//         if (!selectColumnExists) {
-//             columns.unshift({
-//                 id: "select",
-//                 header: ({ table }) => (
-//                     <Checkbox
-//                         checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
-//                         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-//                         aria-label="Select all"
-//                     />
-//                 ),
-//                 cell: ({ row }) => <Checkbox checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(!!value)} aria-label="Select row" />,
-//                 enableSorting: false,
-//                 enableHiding: false,
-//             });
-//         }
-//     }
-//
-//     const table = useReactTable({
-//         data,
-//         columns,
-//         getCoreRowModel: getCoreRowModel(),
-//         getPaginationRowModel: getPaginationRowModel(),
-//         onSortingChange: setSorting,
-//         getSortedRowModel: getSortedRowModel(),
-//         onColumnFiltersChange: setColumnFilters,
-//         getFilteredRowModel: getFilteredRowModel(),
-//         onRowSelectionChange: setRowSelection,
-//         state: {
-//             sorting,
-//             columnFilters,
-//             rowSelection,
-//         },
-//     });
-//
-//     return (
-//         <div className="h-full">
-//             {enableFilter && (
-//                 <div className="flex items-center py-4">
-//                     <Input
-//                         placeholder={`${filterOptions.title ?? `Filter by ${filterOptions.key}`}`}
-//                         value={(table.getColumn(filterOptions.key)?.getFilterValue() as string) ?? ""}
-//                         onChange={(event) => table.getColumn(filterOptions.key)?.setFilterValue(event.target.value)}
-//                         className="max-w-sm"
-//                     />
-//                 </div>
-//             )}
-//             <div className="rounded-md border w-full">
-//                 <Table className="w-full">
-//                     <TableHeader>
-//                         {table.getHeaderGroups().map((headerGroup) => (
-//                             <TableRow key={headerGroup.id}>
-//                                 {headerGroup.headers.map((header) => {
-//                                     return (
-//                                         <TableHead key={header.id}>
-//                                             {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-//                                         </TableHead>
-//                                     );
-//                                 })}
-//                             </TableRow>
-//                         ))}
-//                     </TableHeader>
-//                     <TableBody>
-//                         {table.getRowModel().rows?.length ? (
-//                             table.getRowModel().rows.map((row) => (
-//                                 <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
-//                                     {row.getVisibleCells().map((cell) => (
-//                                         <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-//                                     ))}
-//                                 </TableRow>
-//                             ))
-//                         ) : (
-//                             <TableRow>
-//                                 <TableCell colSpan={columns.length} className="h-24 text-center">
-//                                     {emptyText}
-//                                 </TableCell>
-//                             </TableRow>
-//                         )}
-//                     </TableBody>
-//                 </Table>
-//             </div>
-//             <div className="flex items-center justify-end space-x-2 py-4 mt-6">
-//                 {enableSelect && (
-//                     <div className="flex-1 text-sm text-muted-foreground">
-//                         {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
-//                     </div>
-//                 )}
-//                 {enablePagination && (
-//                     <TablePagination
-//                         table={table}
-//                         maxVisiblePages={paginationOptions?.pageVisible}
-//                         pageSizeOptions={paginationOptions.pageSize}
-//                         className={paginationOptions.className}
-//                     />
-//                 )}
-//             </div>
-//         </div>
-//     );
-// }
 "use client"
 import {
     ColumnDef,
@@ -168,7 +14,7 @@ import {
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {Input} from "@/components/ui/input";
 
-import {useState} from "react";
+import {ReactNode, useEffect, useState} from "react";
 import {TablePagination} from "./table-pagination";
 import {Checkbox} from "@/components/ui/checkbox";
 import {Button} from "@/components/ui/button";
@@ -195,6 +41,7 @@ interface DataTableProps<TData, TValue> {
         path: string;
     };
     highlightRow?: (row: TData) => boolean;
+    selectedActions?: (rows: TData[]) => ReactNode;
 
 }
 
@@ -207,12 +54,18 @@ export function DataTable<TData, TValue>({
                                              paginationOptions = {pageSize: [10, 20, 30, 40, 50, 100], pageVisible: 3},
                                              filterOptions = {key: "id", title: "Filter by ID"},
                                              emptyButton,
-                                             highlightRow
+                                             highlightRow,
+                                             selectedActions,
+
+
                                          }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
     const [rowSelection, setRowSelection] = useState({});
 
+    useEffect(() => {
+        setRowSelection({});
+    }, [data]);
 
     if (enableSelect && data.length > 0) {
         const selectColumnExists = columns.some((column) => column.id === "select");
@@ -257,14 +110,20 @@ export function DataTable<TData, TValue>({
         <div
             className="flex flex-col h-full"
         >
-            {enableFilter && (
+            {enableFilter || selectedActions  && (
                 <div className="flex items-center py-4">
-                    <Input
-                        placeholder={`${filterOptions.title ?? `Filter by ${filterOptions.key}`}`}
-                        value={(table.getColumn(filterOptions.key)?.getFilterValue() as string) ?? ""}
-                        onChange={(event) => table.getColumn(filterOptions.key)?.setFilterValue(event.target.value)}
-                        className="max-w-sm"
-                    />
+                    {enableFilter && (
+                        <Input
+                            placeholder={`${filterOptions.title ?? `Filter by ${filterOptions.key}`}`}
+                            value={(table.getColumn(filterOptions.key)?.getFilterValue() as string) ?? ""}
+                            onChange={(event) => table.getColumn(filterOptions.key)?.setFilterValue(event.target.value)}
+                            className="max-w-sm"
+                        />
+                    )}
+                    {/*{selectedActions && table.getSelectedRowModel().rows.length > 0 && (*/}
+                    {selectedActions && (
+                        selectedActions(table.getSelectedRowModel().rows.map(row => row.original))
+                    )}
                 </div>
             )}
             <div className="flex flex-col justify-between h-full">
@@ -277,6 +136,7 @@ export function DataTable<TData, TValue>({
                                         return (
                                             <TableHead key={header.id}>
                                                 {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+
                                             </TableHead>
                                         );
                                     })}
@@ -342,10 +202,7 @@ export function DataTable<TData, TValue>({
                         />
                     )}
                 </div>
-
-
             </div>
-
         </div>
     );
 }