From a673a3f3d39253462c9786fb2522ac9f1714d97a Mon Sep 17 00:00:00 2001
From: David Arranz <darranz@rodax-software.com>
Date: Tue, 20 Aug 2024 17:16:41 +0200
Subject: [PATCH] .

---
 .../app/quotes/components/QuotesDataTable.tsx | 37 +++++++++++++------
 client/src/components/DataTable/DataTable.tsx | 15 +++++++-
 .../lib/hooks/useDataTable/useDataTable.tsx   |  7 ++++
 3 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/client/src/app/quotes/components/QuotesDataTable.tsx b/client/src/app/quotes/components/QuotesDataTable.tsx
index 1520ba5..61cdbf1 100644
--- a/client/src/app/quotes/components/QuotesDataTable.tsx
+++ b/client/src/app/quotes/components/QuotesDataTable.tsx
@@ -22,8 +22,7 @@ import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/cont
 import { ColumnDef, Row } from "@tanstack/react-table";
 import { t } from "i18next";
 import { FilePenLineIcon, MoreVerticalIcon } from "lucide-react";
-import { useMemo, useState } from "react";
-import { Trans } from "react-i18next";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuotes } from "../hooks";
 import { QuotePDFPreview } from "./QuotePDFPreview";
@@ -37,7 +36,13 @@ export const QuotesDataTable = ({
 }) => {
   const navigate = useNavigate();
   const { pagination, globalFilter, isFiltered } = useDataTableContext();
-  const [focusedQuote, setFocusedQuote] = useState<IListQuotes_Response_DTO | undefined>(undefined);
+
+  const [activeRow, setActiveRow] = useState<Row<IListQuotes_Response_DTO> | undefined>(undefined);
+
+  const resetActiveRowIndex = (id?: number) => {
+    setActiveRowIndex(id ? id : 0);
+  };
+
   const { useList } = useQuotes();
 
   const { data, isPending, isError, error } = useList({
@@ -124,7 +129,7 @@ export const QuotesDataTable = ({
         cell: ({ row }: { row: Row<IListQuotes_Response_DTO> }) => (
           <div className='flex items-center gap-1 ml-auto'>
             <Tooltip>
-              <TooltipTrigger>
+              <TooltipTrigger asChild>
                 <Button
                   size='sm'
                   variant='outline'
@@ -136,14 +141,12 @@ export const QuotesDataTable = ({
                 >
                   <FilePenLineIcon className='h-3.5 w-3.5' />
                   <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>
-                    <Trans i18nKey={"quotes.list.columns.actions.edit"} />
+                    {t("quotes.list.columns.actions.edit")}
                   </span>
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
-                <p>
-                  <Trans i18nKey={"quotes.list.columns.actions.edit"} />
-                </p>
+                <p>{t("quotes.list.columns.actions.edit")}</p>
               </TooltipContent>
             </Tooltip>
 
@@ -170,16 +173,27 @@ export const QuotesDataTable = ({
     []
   );
 
+  const handleOnPaginationChange = () => {
+    //setActiveRow(undefined);
+  };
+
   const { table } = useDataTable({
     data: data?.items ?? [],
     columns: columns,
     pageCount: data?.total_pages ?? -1,
+    onPaginationChange: handleOnPaginationChange,
   });
 
   const handleOnRowClick = (row: Row<IListQuotes_Response_DTO>) => {
-    setFocusedQuote(row.original);
+    setActiveRow(row);
   };
 
+  useEffect(() => {
+    if (table && data && data?.total_pages > 0) {
+      setActiveRow(table.getRowModel().rows[0]);
+    }
+  }, [data, table]);
+
   if (isError) {
     return <ErrorOverlay subtitle={(error as Error).message} />;
   }
@@ -215,12 +229,13 @@ export const QuotesDataTable = ({
 
   return (
     <ResizablePanelGroup direction='horizontal' className='flex items-stretch flex-1 gap-4'>
-      <ResizablePanel defaultSize={75} className='flex items-stretch flex-1'>
+      <ResizablePanel defaultSize={preview ? 75 : 100} className='flex items-stretch flex-1'>
         <DataTable
           table={table}
           paginationOptions={{ visible: true }}
           className='grid items-start flex-1 gap-4 auto-rows-max md:gap-8 lg:col-span-2'
           onRowClick={handleOnRowClick}
+          activeRowIndex={activeRow?.index}
         >
           <DataTableToolbar table={table} />
         </DataTable>
@@ -228,7 +243,7 @@ export const QuotesDataTable = ({
       {preview && <ResizableHandle withHandle />}
       {preview && (
         <ResizablePanel defaultSize={25} className='flex items-stretch flex-1'>
-          <QuotePDFPreview quote={focusedQuote} className='flex-1' />
+          <QuotePDFPreview quote={activeRow?.original} className='flex-1' />
         </ResizablePanel>
       )}
     </ResizablePanelGroup>
diff --git a/client/src/components/DataTable/DataTable.tsx b/client/src/components/DataTable/DataTable.tsx
index 6905127..6ff3a8b 100644
--- a/client/src/components/DataTable/DataTable.tsx
+++ b/client/src/components/DataTable/DataTable.tsx
@@ -46,6 +46,7 @@ export type DataTableProps<TData> = PropsWithChildren<{
   rowClassName?: string;
   cellClassName?: string;
   onRowClick?: (row: Row<TData>) => void;
+  activeRowIndex?: number;
 }>;
 
 export function DataTable<TData>({
@@ -62,6 +63,7 @@ export function DataTable<TData>({
   rowClassName,
   cellClassName,
   onRowClick,
+  activeRowIndex,
 }: DataTableProps<TData>) {
   const headerVisible = headerOptions?.visible;
 
@@ -106,11 +108,20 @@ export function DataTable<TData>({
             {table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
                 <TableRow
-                  onClick={() => (onRowClick ? onRowClick(row) : null)}
+                  onClick={() => {
+                    if (onRowClick) {
+                      onRowClick(row);
+                    }
+                  }}
                   tabIndex={0}
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
-                  className={cn(row.getIsSelected() ? "bg-accent" : "", rowClassName)}
+                  className={cn(
+                    row.getIsSelected() || activeRowIndex === row.index
+                      ? "bg-accent cursor-pointer"
+                      : "cursor-pointer",
+                    rowClassName
+                  )}
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id} className={cellClassName}>
diff --git a/client/src/lib/hooks/useDataTable/useDataTable.tsx b/client/src/lib/hooks/useDataTable/useDataTable.tsx
index b11e73d..80c6a17 100644
--- a/client/src/lib/hooks/useDataTable/useDataTable.tsx
+++ b/client/src/lib/hooks/useDataTable/useDataTable.tsx
@@ -115,6 +115,8 @@ interface UseDataTableProps<TData, TValue> {
    * @type boolean
    */
   enableAdvancedFilter?: boolean;
+
+  onPaginationChange?: OnChangeFn<PaginationState>;
 }
 
 export function useDataTable<TData, TValue>({
@@ -124,6 +126,7 @@ export function useDataTable<TData, TValue>({
   enableSorting = false,
   enableHiding = false,
   enableRowSelection = false,
+  onPaginationChange,
 }: UseDataTableProps<TData, TValue>) {
   const { pagination, setPagination, sorting } = useDataTableContext();
 
@@ -136,6 +139,9 @@ export function useDataTable<TData, TValue>({
       const newPagination = updater(pagination);
       setPagination(newPagination);
     }
+    if (onPaginationChange) {
+      onPaginationChange(updater);
+    }
   };
 
   const sortingUpdater: OnChangeFn<SortingState> = (updater) => {
@@ -157,6 +163,7 @@ export function useDataTable<TData, TValue>({
   const table = useReactTable({
     data,
     columns: getTableColumns(),
+    //autoResetPageIndex: true,
     pageCount: pageCount ?? -1,
     getCoreRowModel: getCoreRowModel(),