feat: opening PDF in new tab (#1801)

apps/backoffice-v2/src/pages/Document/Document.page.tsx

@@ -50,7 +50,7 @@ export const DocumentLayout = () => {
     [document, page],
   );
 
-  if (isLoadingWorkflow || files[0].isLoading) {
+  if (isLoadingWorkflow || files.some(file => file.isLoading)) {
     return;
   }
 

apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.Toolbar.tsx

@@ -26,20 +26,20 @@ export const DocumentsToolbar: FunctionComponent<{
 }) => {
   return (
     <div className={`absolute z-50 flex space-x-2 bottom-right-6`}>
+      {!hideOpenExternalButton && !isLoading && image?.id && (
+        <button
+          type={`button`}
+          className={ctw(
+            `btn btn-circle btn-ghost btn-sm bg-base-300/70 text-[0.688rem] focus:outline-primary`,
+          )}
+          onClick={() => onOpenDocumentInNewTab(image.id)}
+          disabled={shouldDownload}
+        >
+          <ExternalLinkIcon className={`p-0.5`} />
+        </button>
+      )}
       {!isPdf(image) && !isLoading && (
         <>
-          {!hideOpenExternalButton && (
-            <button
-              type={`button`}
-              className={ctw(
-                `btn btn-circle btn-ghost btn-sm bg-base-300/70 text-[0.688rem] focus:outline-primary`,
-              )}
-              onClick={() => onOpenDocumentInNewTab(image.id)}
-              disabled={shouldDownload}
-            >
-              <ExternalLinkIcon className={`p-0.5`} />
-            </button>
-          )}
           <button
             type={`button`}
             className={ctw(

apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.tsx

@@ -1,18 +1,21 @@
 import 'react-image-crop/dist/ReactCrop.css';
 import { FunctionComponent } from 'react';
-import { ImageViewer } from '../../../../common/components/organisms/ImageViewer/ImageViewer';
+
+import { ctw } from '@/common/utils/ctw/ctw';
 import { IDocumentsProps } from './interfaces';
 import { useDocuments } from './hooks/useDocuments/useDocuments';
-import { ctw } from '../../../../common/utils/ctw/ctw';
-import { DownloadFile } from '@/common/components/molecules/DownloadFile/DownloadFile';
 import { ImageEditor } from '@/common/components/molecules/ImageEditor/ImageEditor';
+import { ImageViewer } from '@/common/components/organisms/ImageViewer/ImageViewer';
+import { DownloadFile } from '@/common/components/molecules/DownloadFile/DownloadFile';
 import { DocumentsToolbar } from '@/pages/Entity/components/Case/Case.Documents.Toolbar';
 
 /**
  * @description To be used by {@link Case}, and be wrapped by {@link Case.Content}. Displays a single entity's documents using {@link ImageViewer}. Displays documents[0].imageUrl if no document was selected yet.
  *
  * @param props
  * @param props.documents - An array of objects containing the document's image URL and caption to pass into {@link ImageViewer.Item}.
+ * @param props.isLoading - Whether the documents are still loading.
+ * @param props.hideOpenExternalButton - Whether to hide the open external button.
  *
  * @see {@link ImageViewer}
  *
@@ -86,7 +89,7 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
             shouldDownload={shouldDownload}
             // isCropping={isCropping}
             // isLoadingOCR={isLoadingOCR}
-            //   onCancelCrop={onCancelCrop}
+            // onCancelCrop={onCancelCrop}
             fileToDownloadBase64={fileToDownloadBase64}
           />
         </div>

apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/useDocuments.tsx

@@ -1,14 +1,15 @@
-import { useCrop } from '../../../../../../common/hooks/useCrop/useCrop';
+import { t } from 'i18next';
+import toast from 'react-hot-toast';
 import { ComponentProps, useCallback, useRef, useState } from 'react';
-import { useTesseract } from '../../../../../../common/hooks/useTesseract/useTesseract';
+
 import { IDocumentsProps } from '../../interfaces';
-import { createArrayOfNumbers } from '../../../../../../common/utils/create-array-of-numbers/create-array-of-numbers';
-import toast from 'react-hot-toast';
-import { t } from 'i18next';
-import { useToggle } from '../../../../../../common/hooks/useToggle/useToggle';
 import { TransformWrapper } from 'react-zoom-pan-pinch';
-import { useFilterId } from '../../../../../../common/hooks/useFilterId/useFilterId';
+import { useCrop } from '@/common/hooks/useCrop/useCrop';
 import { DOWNLOAD_ONLY_MIME_TYPES } from '@/common/constants';
+import { useToggle } from '@/common/hooks/useToggle/useToggle';
+import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
+import { useTesseract } from '@/common/hooks/useTesseract/useTesseract';
+import { createArrayOfNumbers } from '@/common/utils/create-array-of-numbers/create-array-of-numbers';
 import { useStorageFileByIdQuery } from '@/domains/storage/hooks/queries/useStorageFileByIdQuery/useStorageFileByIdQuery';
 
 export const useDocuments = (documents: IDocumentsProps['documents']) => {
@@ -93,12 +94,16 @@ export const useDocuments = (documents: IDocumentsProps['documents']) => {
     [],
   );
 
-  const onOpenDocumentInNewTab = useCallback(documentId => {
-    const baseUrl = location.href.split('?')[0];
-    const url = `${baseUrl}/document/${documentId}?filterId=${filterId}`;
+  const onOpenDocumentInNewTab = useCallback(
+    documentId => {
+      const baseUrl = location.href.split('?')[0];
+      const url = `${baseUrl}/document/${documentId}?filterId=${filterId}`;
+
+      window.open(url, '_blank');
+    },
+    [filterId],
+  );
 
-    window.open(url, '_blank');
-  }, []);
   const shouldDownload = DOWNLOAD_ONLY_MIME_TYPES.includes(selectedImage?.fileType);
   const { data: fileToDownloadBase64 } = useStorageFileByIdQuery(selectedImage?.id, {
     isEnabled: shouldDownload,