.

2024-08-21 13:16:56 +02:00 · 2024-08-21 13:16:56 +02:00 · 474adf99c9
commit 474adf99c9
parent b97f51206e
5 changed files with 110 additions and 106 deletions
--- 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} />
+    </>
  );
 };
--- 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>
--- 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 {
--- 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
                  )}
--- 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);