From 474adf99c965305f7a3d06ee9bff5fde22e38123 Mon Sep 17 00:00:00 2001
From: David Arranz <darranz@rodax-software.com>
Date: Wed, 21 Aug 2024 13:16:56 +0200
Subject: [PATCH] .

---
 .../app/quotes/components/QuotePDFPreview.tsx | 180 +++++++++---------
 .../app/quotes/components/QuotesDataTable.tsx |  10 +-
 client/src/app/quotes/hooks/useQuotes.tsx     |  12 +-
 client/src/components/DataTable/DataTable.tsx |   2 +-
 client/src/lib/axios/setupInterceptors.ts     |  12 +-
 5 files changed, 110 insertions(+), 106 deletions(-)

diff --git a/client/src/app/quotes/components/QuotePDFPreview.tsx b/client/src/app/quotes/components/QuotePDFPreview.tsx
index b0a38d4..43a2fbd 100644
--- a/client/src/app/quotes/components/QuotePDFPreview.tsx
+++ b/client/src/app/quotes/components/QuotePDFPreview.tsx
@@ -14,14 +14,15 @@ import {
   DropdownMenuTrigger,
   Skeleton,
 } from "@/ui";
+import { useToast } from "@/ui/use-toast";
 import { IListQuotes_Response_DTO } from "@shared/contexts";
 import { t } from "i18next";
-import { DownloadIcon, MoreVerticalIcon, PrinterIcon } from "lucide-react";
-import printJS from "print-js";
-import { useMemo } from "react";
+import { DownloadIcon, MoreVerticalIcon } from "lucide-react";
+import { useCallback, useMemo } from "react";
 import { Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useQuotes } from "../hooks";
+import { DownloadQuoteDialog } from "./DownloadQuoteDialog";
 
 export const QuotePDFPreview = ({
   quote,
@@ -31,25 +32,26 @@ export const QuotePDFPreview = ({
   className: string;
 }) => {
   const navigate = useNavigate();
-  const { useReport, useDownload } = useQuotes();
+  const { toast } = useToast();
+  const { useReport, getQuotePDFFilename, useDownloader } = useQuotes();
+  const { download, ...downloadProps } = useDownloader();
 
   const {
-    cancelQuery,
     data: reportData,
     isLoading: reportIsLoading,
     isPending: reportIsPending,
     isFetching: reportIsFetching,
   } = useReport(quote?.id);
 
-  const {
-    download,
-    error: downloadError,
-    isFetching: downloadIsFetching,
-    isError: downloadIsError,
-  } = useDownload(quote?.id);
-
   const file = useMemo(() => (reportData ? { data: reportData.data } : undefined), [reportData]);
 
+  const handleFinishDownload = useCallback(() => {
+    console.log("Download success!!");
+    toast({
+      description: t("quotes.downloading_dialog.toast_success"),
+    });
+  }, [toast]);
+
   if (!quote) {
     return (
       <Card className={cn("overflow-hidden", className)}>
@@ -75,82 +77,84 @@ export const QuotePDFPreview = ({
   }
 
   return (
-    <Card className={cn("overflow-hidden", className)}>
-      <CardHeader className='bg-muted/50'>
-        <CardTitle className='flex items-center gap-2 text-lg group'>
-          {t("quotes.list.preview.quote")}
+    <>
+      <Card className={cn("overflow-hidden", className)}>
+        <CardHeader className='bg-muted/50'>
+          <CardTitle className='flex items-center gap-2 text-lg group'>
+            {t("quotes.list.preview.quote")}
 
-          <div className='flex items-center gap-1 ml-auto'>
-            <Button
-              size='sm'
-              variant='outline'
-              className='h-8 gap-1'
-              onClick={(e) => {
-                e.preventDefault();
-                printJS({
-                  printable: reportData?.original,
-                  type: "pdf",
-                  showModal: false,
-                  modalMessage: "Cargando...",
-                });
-              }}
-            >
-              <PrinterIcon className='h-3.5 w-3.5' />
-              <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>
-                {t("common.print")}
-              </span>
-            </Button>
-            <Button
-              size='sm'
-              variant='outline'
-              className='h-8 gap-1'
-              disabled={downloadIsFetching || downloadIsError}
-              onClick={(e) => {
-                download();
-              }}
-            >
-              <DownloadIcon className='h-3.5 w-3.5' />
-              <span className='xl:sr-only 2xl:not-sr-only 2xl:whitespace-nowrap'>
-                {t("quotes.list.preview.download_quote")}
-              </span>
-            </Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button size='icon' variant='outline' className='w-8 h-8'>
-                  <MoreVerticalIcon className='h-3.5 w-3.5' />
-                  <span className='sr-only'>
-                    <Trans i18nKey={"common.more"} />
-                  </span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align='end'>
-                <DropdownMenuItem
-                  onClick={(e) => {
-                    e.preventDefault();
-                    navigate(`/quotes/edit/${quote.id}`, { relative: "path" });
-                  }}
-                >
-                  <Trans i18nKey={"common.edit"} />
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Trans i18nKey={"common.duplicate"} />
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <Trans i18nKey={"common.archive"} />
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </CardTitle>
-        <CardDescription className='grid grid-cols-1 gap-2 space-y-2'>
-          {quote?.reference}
-          {quote?.date.toString()}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className='py-4'>
-        <PDFViewer file={file} className='object-contain' />
-      </CardContent>
-    </Card>
+            <div className='flex items-center gap-1 ml-auto'>
+              {/*<Button
+                size='sm'
+                variant='outline'
+                className='h-8 gap-1'
+                onClick={(e) => {
+                  e.preventDefault();
+                  printJS({
+                    printable: reportData?.original,
+                    type: "pdf",
+                    showModal: false,
+                    modalMessage: "Cargando...",
+                  });
+                }}
+              >
+                <PrinterIcon className='h-3.5 w-3.5' />
+                <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>
+                  {t("common.print")}
+                </span>
+              </Button>*/}
+              <Button
+                size='sm'
+                variant='outline'
+                className='h-8 gap-1'
+                onClick={() => {
+                  download(quote.id, getQuotePDFFilename(quote));
+                }}
+              >
+                <DownloadIcon className='h-3.5 w-3.5' />
+                <span className='xl:sr-only 2xl:not-sr-only 2xl:whitespace-nowrap'>
+                  {t("quotes.list.preview.download_quote")}
+                </span>
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button size='icon' variant='outline' className='w-8 h-8'>
+                    <MoreVerticalIcon className='h-3.5 w-3.5' />
+                    <span className='sr-only'>
+                      <Trans i18nKey={"common.more"} />
+                    </span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align='end'>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      navigate(`/quotes/edit/${quote.id}`, { relative: "path" });
+                    }}
+                  >
+                    <Trans i18nKey={"common.edit"} />
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Trans i18nKey={"common.duplicate"} />
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <Trans i18nKey={"common.archive"} />
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </CardTitle>
+          <CardDescription className='grid grid-cols-1 gap-2 space-y-2'>
+            {quote?.reference}
+            {quote?.date.toString()}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className='py-4'>
+          <PDFViewer file={file} className='object-contain' />
+        </CardContent>
+      </Card>
+      <DownloadQuoteDialog {...downloadProps} onFinishDownload={handleFinishDownload} />
+    </>
   );
 };
diff --git a/client/src/app/quotes/components/QuotesDataTable.tsx b/client/src/app/quotes/components/QuotesDataTable.tsx
index e11fe97..745d174 100644
--- a/client/src/app/quotes/components/QuotesDataTable.tsx
+++ b/client/src/app/quotes/components/QuotesDataTable.tsx
@@ -30,7 +30,6 @@ import { t } from "i18next";
 import { FilePenLineIcon, MoreVerticalIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import useDownloader from "react-use-downloader";
 import { useQuotes } from "../hooks";
 import { DownloadQuoteDialog } from "./DownloadQuoteDialog";
 import { QuotePDFPreview } from "./QuotePDFPreview";
@@ -48,7 +47,7 @@ export const QuotesDataTable = ({
 
   const [activeRow, setActiveRow] = useState<Row<IListQuotes_Response_DTO> | undefined>(undefined);
 
-  const { useList, getQuotePDFFilename } = useQuotes();
+  const { useList, useDownloader, getQuotePDFFilename } = useQuotes();
 
   const { data, isPending, isError, error } = useList({
     pagination: {
@@ -159,20 +158,19 @@ export const QuotesDataTable = ({
               <DropdownMenuTrigger asChild>
                 <Button size='icon' variant='outline' className='w-8 h-8'>
                   <MoreVerticalIcon className='h-3.5 w-3.5' />
-                  <span className='sr-only'>More</span>
+                  <span className='sr-only'>{t("common.more")}</span>
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align='end'>
-                <DropdownMenuItem>Edit</DropdownMenuItem>
                 <DropdownMenuItem
-                  onClick={(e) => {
+                  onClick={() => {
                     download(row.original.id, getQuotePDFFilename(row.original));
                   }}
                 >
                   Download
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem>Trash</DropdownMenuItem>
+                <DropdownMenuItem>{t("common.archive")}</DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
diff --git a/client/src/app/quotes/hooks/useQuotes.tsx b/client/src/app/quotes/hooks/useQuotes.tsx
index f5c3774..e9dd26d 100644
--- a/client/src/app/quotes/hooks/useQuotes.tsx
+++ b/client/src/app/quotes/hooks/useQuotes.tsx
@@ -1,6 +1,5 @@
 import { UseListQueryResult, useCustom, useList, useOne, useSave } from "@/lib/hooks/useDataSource";
 import {
-  IDownloadPDFDataProviderResponse,
   IFilterItemDataProviderParam,
   IGetListDataProviderParams,
 } from "@/lib/hooks/useDataSource/DataSource";
@@ -178,9 +177,9 @@ export const useQuotes = () => {
     getQuotePDFDownloadURL: (id: string) => `${dataSource.getApiUrl()}/quotes/${id}/report`,
 
     getQuotePDFFilename: (quote: IListQuotes_Response_DTO | IGetQuote_Response_DTO) =>
-      "filename-quote.pdf",
+      `filename-quote.pdf`,
 
-    useDownload2: (id?: string, params?: UseQuotesReportParamsType) => {
+    /*useDownload2: (id?: string, params?: UseQuotesReportParamsType) => {
       const queryKey = useMemo(
         () => keys().data().resource("quotes").action("report").id(id).params().get(),
         [id]
@@ -220,20 +219,19 @@ export const useQuotes = () => {
       };
 
       return { download, error, isFetching, isError };
-    },
+    },*/
 
     useDownloader: () => {
       const auth = dataSource.getApiAuthorization();
       const downloader = useDownloader({
-        credentials: "include",
         headers: {
           Authorization: auth,
         },
       });
 
       const download = (id: string, filename?: string) => {
-        console.log(actions.getQuotePDFDownloadURL(id));
-        //return downloader.download(actions.getQuotePDFDownloadURL(id), filename ?? "ssaas");
+        const url = actions.getQuotePDFDownloadURL(id);
+        return downloader.download(url, filename ?? "ssaas");
       };
 
       return {
diff --git a/client/src/components/DataTable/DataTable.tsx b/client/src/components/DataTable/DataTable.tsx
index 6ff3a8b..3bad817 100644
--- a/client/src/components/DataTable/DataTable.tsx
+++ b/client/src/components/DataTable/DataTable.tsx
@@ -118,7 +118,7 @@ export function DataTable<TData>({
                   data-state={row.getIsSelected() && "selected"}
                   className={cn(
                     row.getIsSelected() || activeRowIndex === row.index
-                      ? "bg-accent cursor-pointer"
+                      ? "bg-accent cursor-pointer hover:bg-accent"
                       : "cursor-pointer",
                     rowClassName
                   )}
diff --git a/client/src/lib/axios/setupInterceptors.ts b/client/src/lib/axios/setupInterceptors.ts
index 6332da2..07abe6d 100644
--- a/client/src/lib/axios/setupInterceptors.ts
+++ b/client/src/lib/axios/setupInterceptors.ts
@@ -38,7 +38,6 @@ const onResponse = (response: AxiosResponse): AxiosResponse => {
 
 const onResponseError = (error: AxiosError): Promise<AxiosError> => {
   console.log("[response error]");
-  console.log(error);
 
   if (error.response) {
     // La respuesta fue hecha y el servidor respondió con un código de estado
@@ -115,9 +114,14 @@ const onResponseError = (error: AxiosError): Promise<AxiosError> => {
     console.log("2 => El servidor no respondió");
     console.error(error);
   } else {
-    // Algo paso al preparar la petición que lanzo un Error
-    console.log("3 => Error desconocido");
-    console.error(error);
+    if (error.code === "ERR_CANCELED") {
+      // La petición fue hecha pero se ha cancelado
+      console.log("3 => Petición cancelada");
+    } else {
+      // Algo paso al preparar la petición que lanzo un Error
+      console.log("4 => Error desconocido");
+      console.error(error);
+    }
   }
   console.groupEnd();
   return Promise.reject(error);