.

2024-08-19 18:13:07 +02:00 · 2024-08-19 18:13:07 +02:00 · f85f40311a
commit f85f40311a
parent 63cc195a29
8 changed files with 216 additions and 71 deletions
--- a/client/src/app/quotes/components/QuotePDFPreview.tsx
+++ b/client/src/app/quotes/components/QuotePDFPreview.tsx
@ -0,0 +1,142 @@
+import { PDFViewer } from "@/components";
+import { cn } from "@/lib/utils";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Skeleton,
+} from "@/ui";
+import { IListQuotes_Response_DTO } from "@shared/contexts";
+import { t } from "i18next";
+import { CopyIcon, MoreVerticalIcon, TruckIcon } from "lucide-react";
+import { useMemo } from "react";
+import { Trans } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useQuotes } from "../hooks";
+
+export const QuotePDFPreview = ({
+  quote,
+  className,
+}: {
+  quote?: IListQuotes_Response_DTO;
+  className: string;
+}) => {
+  const navigate = useNavigate();
+  const { useReport } = useQuotes();
+
+  const {
+    cancelQuery,
+    data: reportData,
+    isLoading: reportIsLoading,
+    isPending: reportIsPending,
+    isFetching: reportIsFetching,
+  } = useReport(quote?.id);
+
+  const file = useMemo(() => (reportData ? { data: reportData } : undefined), [reportData]);
+
+  if (!quote) {
+    return (
+      <Card className={cn("overflow-hidden", className)}>
+        <CardContent className='px-4 py-6 text-center'>
+          <p className='mx-auto'>Select a quote</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (reportIsLoading || reportIsPending || reportIsFetching) {
+    return (
+      <Card className={cn("overflow-hidden", className)}>
+        <CardHeader className='flex flex-row items-start'>
+          <CardTitle className='flex items-center gap-2 text-lg group'>
+            <Skeleton className='w-[250px] h-8 bg-card' />
+          </CardTitle>
+          <CardDescription>
+            <Skeleton className='w-full h-8' />
+          </CardDescription>
+        </CardHeader>
+        <CardContent className='flex content-center px-4 py-6 text-center'>
+          <Skeleton className='object-contain w-full overflow-hidden bg-white border-2 border-dashed rounded-lg min-h-min' />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  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.quote")}
+          <Button
+            size='icon'
+            variant='outline'
+            className='w-6 h-6 transition-opacity opacity-0 group-hover:opacity-100'
+          >
+            <CopyIcon className='w-3 h-3' />
+            <span className='sr-only'>Copy Order ID</span>
+          </Button>
+
+          <div className='flex items-center gap-1 ml-auto'>
+            <Button size='sm' variant='outline' className='h-8 gap-1'>
+              <TruckIcon className='h-3.5 w-3.5' />
+              <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>Track Order</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.download"} />
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trans i18nKey={"common.remove"} />
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </CardTitle>
+        <CardDescription className='grid grid-cols-1 gap-2 space-y-2'>
+          {quote?.reference}
+          {quote?.date.toString()}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <PDFViewer
+          file={file}
+          className='object-contain my-6 overflow-hidden bg-white border-dashed rounded-none border-1'
+        />
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            cancelQuery();
+          }}
+        >
+          Cancel
+        </button>
+      </CardContent>
+    </Card>
+  );
+};
--- a/client/src/app/quotes/components/QuotesDataTable.tsx
+++ b/client/src/app/quotes/components/QuotesDataTable.tsx
@ -1,13 +1,7 @@
-import {
-  DataTable,
-  DataTableSkeleton,
-  ErrorOverlay,
-  PDFViewer,
-  SimpleEmptyState,
-} from "@/components";
+import { DataTable, DataTableSkeleton, ErrorOverlay, SimpleEmptyState } from "@/components";
 import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar";
 import { useDataTable, useDataTableContext } from "@/lib/hooks";
-import { Badge, Button, Card, CardContent, CardHeader } from "@/ui";
+import { Badge, Button, Card, CardContent } from "@/ui";
 import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/contexts";
 import { ColumnDef, Row } from "@tanstack/react-table";
 import { t } from "i18next";
@ -15,12 +9,13 @@ import { useMemo, useState } from "react";
 import { Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useQuotes } from "../hooks";
+import { QuotePDFPreview } from "./QuotePDFPreview";

 export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
  const navigate = useNavigate();
  const { pagination, globalFilter, isFiltered } = useDataTableContext();
-  const [focusedQuote, setFocusedQuote] = useState<string | undefined>(undefined);
-  const { useList, useReport } = useQuotes();
+  const [focusedQuote, setFocusedQuote] = useState<IListQuotes_Response_DTO | undefined>(undefined);
+  const { useList } = useQuotes();

  const { data, isPending, isError, error } = useList({
    pagination: {
@ -31,14 +26,6 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
    quickSearchTerm: globalFilter,
  });

-  const {
-    data: reportData,
-    isLoading: reportIsLoading,
-    isPending: reportIsPending,
-    isError: reportIsError,
-    error: errorReport,
-  } = useReport(focusedQuote);
-
  const columns = useMemo<ColumnDef<IListQuotes_Response_DTO, any>[]>(
    () => [
      {
@ -135,8 +122,7 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
  });

  const handleOnRowClick = (row: Row<IListQuotes_Response_DTO>) => {
-    console.log("setFocusedRow", row.id);
-    setFocusedQuote(row.original.id);
+    setFocusedQuote(row.original);
  };

  if (isError) {
@ -172,10 +158,8 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
    );
  }

-  console.log(reportData?.toString());
-
  return (
-    <div className='grid items-start flex-1 gap-4 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3'>
+    <div className='grid items-stretch flex-1 gap-4 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3'>
      <DataTable
        table={table}
        paginationOptions={{ visible: true }}
@ -184,17 +168,8 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
      >
        <DataTableToolbar table={table} />
      </DataTable>
-      <div>
-        <Card className='overflow-hidden' x-chunk='dashboard-05-chunk-4'>
-          <CardHeader className='flex flex-row items-start bg-muted/50'></CardHeader>
-          <CardContent>
-            <PDFViewer
-              file={{ data: reportData }}
-              className='aspect-[3/4] object-contain overflow-hidden border-2 border-dashed rounded-lg'
-            />
-          </CardContent>
-        </Card>
-      </div>
+
+      <QuotePDFPreview quote={focusedQuote} className='flex-1' />
    </div>
  );
 };
--- a/client/src/app/quotes/hooks/useQuotes.tsx
+++ b/client/src/app/quotes/hooks/useQuotes.tsx
@ -17,7 +17,8 @@ import {
  IUpdateQuote_Response_DTO,
  UniqueID,
 } from "@shared/contexts";
-import { useCallback } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";

 export type UseQuotesListParams = Omit<IGetListDataProviderParams, "filters" | "resource"> & {
  status?: string;
@ -140,18 +141,30 @@ export const useQuotes = () => {
        ...params,
      }),

-    useReport: (id?: string, params?: UseQuotesReportParamsType) =>
-      useCustom<ArrayBuffer, TDataSourceError, IReportQuote_Response_DTO>({
-        queryKey: keys().data().resource("quotes").action("report").id(id).params().get(),
-        queryFn: () =>
-          dataSource.custom({
-            url: `${dataSource.getApiUrl()}/quotes/${id}/report`,
-            method: "get",
-            responseType: "arraybuffer",
-          }),
-        enabled: !!id,
-        select: useCallback((data: ArrayBuffer) => new Uint8Array(data), []),
-        ...params,
-      }),
+    useReport: (id?: string, params?: UseQuotesReportParamsType) => {
+      const queryClient = useQueryClient();
+      const queryKey = useMemo(
+        () => keys().data().resource("quotes").action("report").id(id).params().get(),
+        [id]
+      );
+
+      return {
+        ...useCustom<ArrayBuffer, TDataSourceError, IReportQuote_Response_DTO>({
+          queryKey,
+          queryFn: ({ signal }) =>
+            dataSource.custom({
+              url: `${dataSource.getApiUrl()}/quotes/${id}/report`,
+              method: "get",
+              responseType: "arraybuffer",
+              signal,
+            }),
+
+          enabled: !!id,
+          select: useCallback((data: ArrayBuffer) => new Uint8Array(data), []),
+          ...params,
+        }),
+        cancelQuery: () => queryClient.cancelQueries({ queryKey }),
+      };
+    },
  };
 };
--- a/client/src/components/PDFViewer/PDFViewer.tsx
+++ b/client/src/components/PDFViewer/PDFViewer.tsx
@ -2,7 +2,7 @@ import { Button } from "@/ui";
 import { useResizeObserver } from "@wojtekmaj/react-hooks";
 import type { PDFDocumentProxy } from "pdfjs-dist";
 import printJS from "print-js";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
 import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import "react-pdf/dist/esm/Page/TextLayer.css";
@ -21,7 +21,9 @@ const maxWidth = 800;
 const resizeObserverOptions = {};

 export interface PDFViewerProps {
-  file?: Uint8Array;
+  file?: {
+    data: Uint8Array;
+  };
  className?: string;
 }

@ -30,10 +32,11 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {

  const [numPages, setNumPages] = useState(0);
  const [pageNumber, setPageNumber] = useState(1);
+  const [renderedPageNumber, setRenderedPageNumber] = useState(null);

  const [width, setWidth] = useState(undefined);
-  //const parentRef = useRef(null);
-  //const canvasRef = useRef(null);
+  const parentRef = useRef(null);
+  const canvasRef = useRef(null);

  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
  const [containerWidth, setContainerWidth] = useState<number>();
@ -48,7 +51,7 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {

  useResizeObserver(containerRef, resizeObserverOptions, onResize);

-  /*const hidePageCanvas = useCallback(() => {
+  const hidePageCanvas = useCallback(() => {
    const canvas = containerRef?.current?.querySelector("canvas");
    if (canvas) canvas.style.visibility = "hidden";
  }, [containerRef]);
@ -69,9 +72,9 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
  const onPageRenderError = useCallback(() => {
    showPageCanvas();
  }, [showPageCanvas]);
-  */

  function onDocumentLoadSuccess({ numPages: nextNumPages }: PDFDocumentProxy): void {
+    setPageNumber(1);
    setNumPages(nextNumPages);
  }

@ -90,7 +93,7 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
  const goToFirstPage = () => setPageNumber(1);
  const goToLastPage = () => setPageNumber(numPages);

-  /*useEffect(() => {
+  useEffect(() => {
    if (numPages > 0 || eventResize) {
      const parentWidth = parentRef.current ? parentRef.current.offsetWidth : 0;
      const canvasWidth = canvasRef.current ? canvasRef.current.width : 0;
@ -101,10 +104,12 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
      setWidth(parentWidth);
      setEventResize(false);
    }
-  }, [eventResize, numPages]);**/
+  }, [eventResize, numPages]);

  //file={`data:application/pdf;base64,$(pdfBase64String)`}

+  const isLoading = renderedPageNumber !== pageNumber;
+
  return (
    <div className='flex flex-col' ref={setContainerRef}>
      <Document
@ -112,23 +117,31 @@ export const PDFViewer = ({ file, className }: PDFViewerProps): JSX.Element => {
        file={file}
        onLoadSuccess={onDocumentLoadSuccess}
        className={className}
+        renderMode='canvas'
      >
-        {Array.from(new Array(numPages), (_el, index) => (
+        {isLoading && renderedPageNumber ? (
          <Page
-            canvasBackground={"white"}
-            key={`page_${index + 1}`}
-            pageNumber={index + 1}
-            width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
-            //onLoadSuccess={onPageLoadSuccess}
-            //onRenderSuccess={onPageRenderSuccess}
-            //onRenderError={onPageRenderError}
+            key={`page_${renderedPageNumber}`}
+            className='prevPage'
+            pageNumber={renderedPageNumber}
+            width={width}
          />
-        ))}
+        ) : null}
+        <Page
+          canvasBackground={"white"}
+          key={`page_${pageNumber}`}
+          pageNumber={pageNumber}
+          canvasRef={canvasRef}
+          width={width}
+          onLoadSuccess={onPageLoadSuccess}
+          onRenderSuccess={onPageRenderSuccess}
+          onRenderError={onPageRenderError}
+        />
      </Document>
-      <p className='text-center'>
+      <p className='text-sm font-medium text-center'>
        Página {pageNumber} de {numPages}
      </p>
-      <div>
+      <div className='flex justify-between'>
        <Button size={"icon"} variant='link' onClick={goToPrevPage}>
          Prev
        </Button>
--- a/client/src/lib/axios/createAxiosDataProvider.ts
+++ b/client/src/lib/axios/createAxiosDataProvider.ts
@ -117,7 +117,7 @@ export const createAxiosDataProvider = (
  },

  custom: async <R>(params: ICustomDataProviderParam): Promise<R> => {
-    const { url, method, responseType, headers, ...payload } = params;
+    const { url, method, responseType, headers, signal, ...payload } = params;
    const requestUrl = `${url}?`;

    /*if (sort) {
@ -168,6 +168,7 @@ export const createAxiosDataProvider = (
      default:
        customResponse = await httpClient.get<R>(requestUrl, {
          responseType,
+          signal,
          headers,
        });
        break;
--- a/client/src/lib/hooks/useDataSource/DataSource.ts
+++ b/client/src/lib/hooks/useDataSource/DataSource.ts
@ -55,6 +55,7 @@ export interface IRemoveOneDataProviderParams {
 export interface ICustomDataProviderParam {
  url: string;
  method: "get" | "delete" | "head" | "options" | "post" | "put" | "patch";
+  signal?: AbortSignal;
  responseType?: ResponseType;
  headers?: {
    [key: string]: AxiosHeaderValue;
--- a/client/src/lib/hooks/useDataSource/useCustom.tsx
+++ b/client/src/lib/hooks/useDataSource/useCustom.tsx
@ -1,4 +1,4 @@
-import { UseQueryOptions, UseQueryResult, keepPreviousData, useQuery } from "@tanstack/react-query";
+import { UseQueryOptions, UseQueryResult, useQuery } from "@tanstack/react-query";
 import { TDataSourceError, TDataSourceRecord } from "./types";

 export const useCustom = <
@ -9,7 +9,6 @@ export const useCustom = <
  options: UseQueryOptions<TQueryFnData, TError, TData>
 ): UseQueryResult<TData, TError> => {
  return useQuery<TQueryFnData, TError, TData>({
-    placeholderData: keepPreviousData,
    ...options,
  });
 };
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@ -110,7 +110,8 @@
          "status": "Status",
          "customer_information": "Customer",
          "total_price": "Imp. total"
-        }
+        },
+        "quote": "Quote"
      },
      "create": {
        "title": "New quote",