From 2836b75db6d10ce48a5998c19eafed99403eeff0 Mon Sep 17 00:00:00 2001
From: renoseHarsh <renoseharsh@gmail.com>
Date: Tue, 20 Aug 2024 00:36:14 +0530
Subject: [PATCH 1/3] Added Functional Next and Prev Button

---
 src/Components/Common/FilePreviewDialog.tsx | 61 +++++++++++++++++++--
 src/Components/Patient/FileUpload.tsx       | 14 +++++
 2 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/src/Components/Common/FilePreviewDialog.tsx b/src/Components/Common/FilePreviewDialog.tsx
index fc4345cc321..153c68be397 100644
--- a/src/Components/Common/FilePreviewDialog.tsx
+++ b/src/Components/Common/FilePreviewDialog.tsx
@@ -1,11 +1,18 @@
 import CircularProgress from "./components/CircularProgress";
 import { useTranslation } from "react-i18next";
 import { StateInterface } from "../Patient/FileUpload";
-import { Dispatch, ReactNode, SetStateAction, useState } from "react";
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
 import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon";
 import ButtonV2, { Cancel } from "./components/ButtonV2";
 import DialogModal from "./Dialog";
 import PDFViewer from "./PDFViewer";
+import { FileUploadModel } from "../Patient/models";
 
 export const zoom_values = [
   "scale-25",
@@ -30,6 +37,8 @@ type FilePreviewProps = {
   className?: string;
   titleAction?: ReactNode;
   fixedWidth?: boolean;
+  uploadedFiles?: Array<FileUploadModel>;
+  loadFile?: (id: string) => Promise<void>;
 };
 
 const previewExtensions = [
@@ -46,12 +55,30 @@ const previewExtensions = [
 ];
 
 const FilePreviewDialog = (props: FilePreviewProps) => {
-  const { show, onClose, file_state, setFileState, downloadURL, fileUrl } =
-    props;
+  const {
+    show,
+    onClose,
+    file_state,
+    setFileState,
+    downloadURL,
+    fileUrl,
+    uploadedFiles,
+    loadFile,
+  } = props;
   const { t } = useTranslation();
 
   const [page, setPage] = useState(1);
   const [numPages, setNumPages] = useState(1);
+  const [index, setIndex] = useState<number>(-1);
+
+  useEffect(() => {
+    if (uploadedFiles && show) {
+      const index = uploadedFiles.findIndex(
+        (file) => file.id === file_state.id,
+      );
+      setIndex(index);
+    }
+  });
 
   const handleZoomIn = () => {
     const checkFull = file_state.zoom === zoom_values.length;
@@ -69,9 +96,15 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
     });
   };
 
+  const handleNext = (newIndex: number) => {
+    const id = uploadedFiles![newIndex].id;
+    loadFile!(id!);
+  };
+
   const handleClose = () => {
     setPage(1);
     setNumPages(1);
+    setIndex(-1);
     onClose?.();
   };
 
@@ -124,7 +157,17 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
               <Cancel onClick={onClose} label="Close" />
             </div>
           </div>
-          <div className="flex flex-1 items-center justify-center">
+          <div className="flex flex-1 items-center justify-center gap-2">
+            <ButtonV2
+              className={
+                uploadedFiles && index === 0
+                  ? "pointer-events-none invisible opacity-0"
+                  : ""
+              }
+              onClick={() => handleNext(index - 1)}
+            >
+              &lt;
+            </ButtonV2>
             <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
               {file_state.isImage ? (
                 <img
@@ -160,6 +203,16 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 </div>
               )}
             </div>
+            <ButtonV2
+              className={
+                uploadedFiles && index === uploadedFiles.length - 1
+                  ? "pointer-events-none invisible opacity-0"
+                  : ""
+              }
+              onClick={() => handleNext(index + 1)}
+            >
+              &gt;
+            </ButtonV2>
           </div>
           <div className="flex items-center justify-between">
             <div className="mt-2 flex w-full flex-col justify-center gap-3 md:flex-row">
diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx
index f4ecbaae4ed..9caff4602f1 100644
--- a/src/Components/Patient/FileUpload.tsx
+++ b/src/Components/Patient/FileUpload.tsx
@@ -137,6 +137,7 @@ export interface StateInterface {
   isZoomInDisabled: boolean;
   isZoomOutDisabled: boolean;
   rotation: number;
+  id?: string;
 }
 
 export const FileUpload = (props: FileUploadProps) => {
@@ -515,6 +516,7 @@ export const FileUpload = (props: FileUploadProps) => {
       name: data.name as string,
       extension,
       isImage: ExtImage.includes(extension),
+      id: id,
     });
     downloadFileUrl(signedUrl);
     setFileUrl(signedUrl);
@@ -1181,6 +1183,18 @@ export const FileUpload = (props: FileUploadProps) => {
         onClose={handleClose}
         fixedWidth={false}
         className="h-[80vh] w-full md:h-screen"
+        uploadedFiles={
+          sortFileState === "UNARCHIVED"
+            ? uploadedUnarchievedFiles.filter(
+                (each) => each.file_category !== "AUDIO",
+              )
+            : sortFileState === "DISCHARGE_SUMMARY"
+              ? uploadedDischargeSummaryFiles.filter(
+                  (each) => each.file_category !== "AUDIO",
+                )
+              : undefined
+        }
+        loadFile={loadFile}
       />
       <DialogModal
         show={modalOpenForCamera}

From faf8e07ed820c584a8b8b5f6e473e7609b59250e Mon Sep 17 00:00:00 2001
From: renoseHarsh <renoseharsh@gmail.com>
Date: Tue, 20 Aug 2024 18:31:31 +0530
Subject: [PATCH 2/3] Applied Required Changes

---
 src/Components/Common/FilePreviewDialog.tsx | 38 +++++++++------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/Components/Common/FilePreviewDialog.tsx b/src/Components/Common/FilePreviewDialog.tsx
index 153c68be397..7a8cdb27cfc 100644
--- a/src/Components/Common/FilePreviewDialog.tsx
+++ b/src/Components/Common/FilePreviewDialog.tsx
@@ -78,7 +78,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
       );
       setIndex(index);
     }
-  });
+  }, [uploadedFiles]);
 
   const handleZoomIn = () => {
     const checkFull = file_state.zoom === zoom_values.length;
@@ -158,16 +158,14 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
             </div>
           </div>
           <div className="flex flex-1 items-center justify-center gap-2">
-            <ButtonV2
-              className={
-                uploadedFiles && index === 0
-                  ? "pointer-events-none invisible opacity-0"
-                  : ""
-              }
-              onClick={() => handleNext(index - 1)}
-            >
-              &lt;
-            </ButtonV2>
+            {uploadedFiles && (
+              <ButtonV2
+                disabled={index === 0}
+                onClick={() => handleNext(index - 1)}
+              >
+                &lt;
+              </ButtonV2>
+            )}
             <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
               {file_state.isImage ? (
                 <img
@@ -203,16 +201,14 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 </div>
               )}
             </div>
-            <ButtonV2
-              className={
-                uploadedFiles && index === uploadedFiles.length - 1
-                  ? "pointer-events-none invisible opacity-0"
-                  : ""
-              }
-              onClick={() => handleNext(index + 1)}
-            >
-              &gt;
-            </ButtonV2>
+            {uploadedFiles && (
+              <ButtonV2
+                disabled={index === uploadedFiles!.length - 1}
+                onClick={() => handleNext(index + 1)}
+              >
+                &gt;
+              </ButtonV2>
+            )}
           </div>
           <div className="flex items-center justify-between">
             <div className="mt-2 flex w-full flex-col justify-center gap-3 md:flex-row">

From cc0904ead80cfe113dbfcc896d1ddede2a3ea7a3 Mon Sep 17 00:00:00 2001
From: renoseHarsh <renoseharsh@gmail.com>
Date: Thu, 22 Aug 2024 21:52:37 +0530
Subject: [PATCH 3/3] Added Button Below for Small Display

---
 src/Components/Common/FilePreviewDialog.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/Components/Common/FilePreviewDialog.tsx b/src/Components/Common/FilePreviewDialog.tsx
index 7a8cdb27cfc..8212ab215d4 100644
--- a/src/Components/Common/FilePreviewDialog.tsx
+++ b/src/Components/Common/FilePreviewDialog.tsx
@@ -160,6 +160,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
           <div className="flex flex-1 items-center justify-center gap-2">
             {uploadedFiles && (
               <ButtonV2
+                className="hidden sm:block"
                 disabled={index === 0}
                 onClick={() => handleNext(index - 1)}
               >
@@ -203,6 +204,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
             </div>
             {uploadedFiles && (
               <ButtonV2
+                className="hidden sm:block"
                 disabled={index === uploadedFiles!.length - 1}
                 onClick={() => handleNext(index + 1)}
               >
@@ -305,6 +307,24 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
               )}
             </div>
           </div>
+          <div className="mt-2 flex items-center justify-center gap-2 sm:hidden">
+            {uploadedFiles && (
+              <ButtonV2
+                disabled={index === 0}
+                onClick={() => handleNext(index - 1)}
+              >
+                &lt;
+              </ButtonV2>
+            )}
+            {uploadedFiles && (
+              <ButtonV2
+                disabled={index === uploadedFiles!.length - 1}
+                onClick={() => handleNext(index + 1)}
+              >
+                &gt;
+              </ButtonV2>
+            )}
+          </div>
         </>
       ) : (
         <div className="flex h-[75vh] items-center justify-center">