From 73b140d789b2f1a0aff5740765fb53a19dac58aa Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 19 Jun 2023 02:48:08 +0530 Subject: [PATCH 1/6] Replace MaterialUI in FileUpload.tsx --- src/Components/Common/Dialog.tsx | 3 +- src/Components/Patient/FileUpload.tsx | 400 +++++++++++++------------- 2 files changed, 197 insertions(+), 206 deletions(-) diff --git a/src/Components/Common/Dialog.tsx b/src/Components/Common/Dialog.tsx index bfd4c87a3ea..ba56f0b2b41 100644 --- a/src/Components/Common/Dialog.tsx +++ b/src/Components/Common/Dialog.tsx @@ -54,7 +54,8 @@ const DialogModal = (props: DialogProps) => { className={classNames( className, fixedWidth && "max-w-md w-full", - "transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all" + className?.includes("bg-") || "bg-white", + "transform rounded-2xl p-6 text-left align-middle shadow-xl transition-all" )} > import("../Common/Loading")); -const PageTitle = loadable(() => import("../Common/PageTitle")); export const header_content_type: URLS = { pdf: "application/pdf", @@ -73,16 +68,19 @@ const ExtImage: string[] = [ export const LinearProgressWithLabel = (props: any) => { return ( - - - - - - {`${Math.round( - props.value - )}%`} - - +
+
+
+
+
+
+
+

{`${Math.round(props.value)}%`}

+
+
); }; @@ -1114,9 +1112,12 @@ export const FileUpload = (props: FileUploadProps) => { return (
- @@ -1211,7 +1212,7 @@ export const FileUpload = (props: FileUploadProps) => {
)} - + { - { ? `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}` : `/facility/${facilityId}/patient/${patientId}` } - /> -
-
- {audio ? ( -
-
-

Record and Upload Audio File

-
- - Enter Audio File Name (optional) - - ) => { - setAudioName(e.target.value); - }} - errors={audioFileError} - /> -
- Please allow browser permission before you start speaking -
- {audiouploadStarted ? ( - - ) : ( -
- {audioBlobExists && ( -
- - Delete - -
- )} - - {audioBlobExists && ( -
- - - Save - -
- )} + > +
+
+ {audio ? ( +
+
+

Record and Upload Audio File

- )} -
- ) : null} - {unspecified ? ( -
-
-

Upload New File

-
-
- Enter File Name* - { - setUploadFileName(e.target.value); + setAudioName(e.value); }} - errors={uploadFileError} + error={audioFileError} /> -
-
- {uploadStarted ? ( +
+ Please allow browser permission before you start speaking +
+ {audiouploadStarted ? ( ) : ( -
- - {({ isAuthorized }) => - isAuthorized ? ( - - ) : ( - <> - ) - } - -
- setModalOpenForCamera(true)} - > +
+ {audioBlobExists && ( +
+ { + deleteAudioBlob(); + }} + > + Delete + +
+ )} + + {audioBlobExists && ( +
+ { + handleAudioUpload(); + }} + className="w-full" + > + + Save + +
+ )} +
+ )} +
+ ) : null} + {unspecified ? ( +
+
+

Upload New File

+
+
+ { + setUploadFileName(e.value); + }} + error={uploadFileError} + /> +
+
+ {uploadStarted ? ( + + ) : ( +
+ + {({ isAuthorized }) => + isAuthorized ? ( + + ) : ( + <> + ) + } + + setModalOpenForCamera(true)}> Open Camera -
- -
handleUpload({ status })} @@ -1631,91 +1624,88 @@ export const FileUpload = (props: FileUploadProps) => { {t("upload")}
-
- )} - {file && ( -
- {file?.name} - -
- )} + )} + {file && ( +
+ {file?.name} + +
+ )} +
-
- ) : null} + ) : null} +
-
+ - - + + -
- {sortFileState === "UNARCHIVED" ? ( - // First it would check the filtered array contains any files or not else it would state the message - <> - {uploadedUnarchievedFiles.length > 0 ? ( - uploadedUnarchievedFiles.map((item: FileUploadModel) => - renderFileUpload(item) - ) - ) : ( -
-
- {"No Unarchived File in the Current Page"} +
+ {sortFileState === "UNARCHIVED" ? ( + // First it would check the filtered array contains any files or not else it would state the message + <> + {uploadedUnarchievedFiles.length > 0 ? ( + uploadedUnarchievedFiles.map((item: FileUploadModel) => + renderFileUpload(item) + ) + ) : ( +
+
+ {"No Unarchived File in the Current Page"} +
-
- )} - {totalUnarchievedFilesCount > limit && ( -
- -
- )} - - ) : ( - // First it would check the filtered array contains any files or not else it would state the message - <> - {uploadedArchievedFiles.length > 0 ? ( - uploadedArchievedFiles.map((item: FileUploadModel) => - renderFileUpload(item) - ) - ) : ( -
-
- {"No Archived File in the Current Page"} + )} + {totalUnarchievedFilesCount > limit && ( +
+
-
- )} - {totalArchievedFilesCount > limit && ( -
- -
- )} - - )} -
+ )} + + ) : ( + // First it would check the filtered array contains any files or not else it would state the message + <> + {uploadedArchievedFiles.length > 0 ? ( + uploadedArchievedFiles.map((item: FileUploadModel) => + renderFileUpload(item) + ) + ) : ( +
+
+ {"No Archived File in the Current Page"} +
+
+ )} + {totalArchievedFilesCount > limit && ( +
+ +
+ )} + + )} +
+
); }; From a05427fbbe935e05143acd52956a61c916b2cc5e Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 22 Jun 2023 06:02:30 +0530 Subject: [PATCH 2/6] Created FilePreviewDialog --- src/Components/Common/Dialog.tsx | 3 +- src/Components/Common/FilePreviewDialog.tsx | 219 +++++++++ src/Components/Patient/FileUpload.tsx | 481 +++++++------------- 3 files changed, 397 insertions(+), 306 deletions(-) create mode 100644 src/Components/Common/FilePreviewDialog.tsx diff --git a/src/Components/Common/Dialog.tsx b/src/Components/Common/Dialog.tsx index ba56f0b2b41..bfd4c87a3ea 100644 --- a/src/Components/Common/Dialog.tsx +++ b/src/Components/Common/Dialog.tsx @@ -54,8 +54,7 @@ const DialogModal = (props: DialogProps) => { className={classNames( className, fixedWidth && "max-w-md w-full", - className?.includes("bg-") || "bg-white", - "transform rounded-2xl p-6 text-left align-middle shadow-xl transition-all" + "transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all" )} > void; + file_state: StateInterface; + setFileState: React.Dispatch>; + downloadURL?: string; + fileUrl: string; + className?: string; + titleAction?: React.ReactNode; + fixedWidth?: boolean; +}; + +const FilePreviewDialog = (props: FilePreviewProps) => { + const { + title, + description, + show, + onClose, + file_state, + setFileState, + downloadURL, + fileUrl, + className, + fixedWidth = true, + } = props; + const { t } = useTranslation(); + + const handleZoomIn = () => { + const checkFull = file_state.zoom === zoom_values.length; + setFileState({ + ...file_state, + zoom: !checkFull ? file_state.zoom + 1 : file_state.zoom, + }); + }; + + const handleZoomOut = () => { + const checkFull = file_state.zoom === 1; + setFileState({ + ...file_state, + zoom: !checkFull ? file_state.zoom - 1 : file_state.zoom, + }); + }; + + const handleRotate = (rotation: number) => { + setFileState((prev) => ({ + ...prev, + rotation: prev.rotation + rotation, + })); + }; + + return ( +
+ + + +
+ + +
+
+ + + +
+

{title}

+

+ {description} +

+
+ {props.titleAction} + + {fileUrl && fileUrl.length > 0 ? ( +
+
+
+ {file_state.isImage && ( + <> + {[ + [ + t("Zoom In"), + "magnifying-glass-plus", + handleZoomIn, + file_state.zoom === zoom_values.length, + ], + [ + t("Zoom Out"), + "magnifying-glass-minus", + handleZoomOut, + file_state.zoom === 1, + ], + [ + t("Rotate Left"), + "rotate-left", + () => handleRotate(-90), + false, + ], + [ + t("Rotate Right"), + "rotate-right", + () => handleRotate(90), + false, + ], + ].map((button, index) => ( + + ))} + + )} +
+
+ {downloadURL && downloadURL.length > 0 && ( + + + Download + + )} + +
+
+
+ {file_state.isImage ? ( + file + ) : ( +