show pdf

cope2n-fe/src/pages/reviews2/FileCard.tsx

@@ -7,6 +7,7 @@ import { Button, Tag } from 'antd';
 
 const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
   const fileName = file['File Name'];
+  const extensionType = fileName.split('.').pop();
   let status = true;
   if (file['Is Required'] && !file['Is Reviewed']) {
     status = false;
@@ -52,6 +53,7 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
             {fileName
               ? fileName.substring(0, 25).replace('temp_', '')
               : fileName}
+            {' '}({extensionType})
           </span>
         </div>
         <Tag

cope2n-fe/src/pages/reviews2/index.tsx

@@ -9,6 +9,9 @@ import {
 } from '@ant-design/icons';
 import { t } from '@lingui/macro';
 import { Viewer } from '@react-pdf-viewer/core';
+import '@react-pdf-viewer/core/lib/styles/index.css';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
 import {
   Button,
   DatePicker,
@@ -26,9 +29,6 @@ import { useEffect, useState } from 'react';
 import Lightbox from 'react-awesome-lightbox';
 import 'react-awesome-lightbox/build/style.css';
 import { useHotkeys } from 'react-hotkeys-hook';
-// Import the styles
-import '@react-pdf-viewer/core/lib/styles/index.css';
-
 import { badQualityReasonSubmit } from 'request';
 import { getErrorMessage } from 'utils/error-handler';
 import {
@@ -81,7 +81,7 @@ const ReviewPage = () => {
   const [solution, setSolution] = useState('');
   const [otherSolution, setOtherSolution] = useState('');
   const [imageLoading, setImageLoading] = useState(false);
-
+  const defaultLayoutPluginInstance = defaultLayoutPlugin();
   useEffect(() => {
     if (reason) {
       setSolution(counter_measure_map[reason]);
@@ -137,8 +137,8 @@ const ReviewPage = () => {
       setSelectedFileData(fileURL);
     } else {
       setSelectedFileData('FAILED_TO_LOAD_FILE');
-      setImageLoading(false);
     }
+    setImageLoading(false);
   };
 
   const loadCurrentRequest = (requestIndex) => {
@@ -283,10 +283,8 @@ const ReviewPage = () => {
       });
       notification.success({ message: 'Update file success' });
 
-      const requestData = await fetchRequest(
-        currentRequest?.RequestID,
-      );
-      setCurrentRequest(requestData)
+      const requestData = await fetchRequest(currentRequest?.RequestID);
+      setCurrentRequest(requestData);
     } catch (error) {
       notification.error({
         message: getErrorMessage(error),
@@ -472,6 +470,22 @@ const ReviewPage = () => {
               ))}
             </div>
           )}
+          {selectedFileData === 'FAILED_TO_LOAD_FILE' ? (
+            <p style={{ color: '#333' }}>Failed to load file.</p>
+          ) : fileExtension === 'pdf' ? (
+            <div
+              style={{
+                flexGrow: 1,
+                overflow: 'auto',
+              }}
+            >
+              <Viewer
+                plugins={[defaultLayoutPluginInstance]}
+                fileUrl={selectedFileData}
+                onDocumentLoad={() => setImageLoading(false)}
+              />
+            </div>
+          ) : (
             <div
               style={{
                 flexGrow: 1,
@@ -479,15 +493,9 @@ const ReviewPage = () => {
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
+                overflowX: 'visible',
               }}
             >
-            <Spin spinning={imageLoading}>
-              {selectedFileData === 'FAILED_TO_LOAD_FILE' ? (
-                <p style={{ color: '#333' }}>Failed to load file.</p>
-              ) : fileExtension === 'pdf' ? (
-                <Viewer fileUrl={selectedFileData} />
-              ) : (
-                <>
               <img
                 style={{
                   maxHeight: '100%',
@@ -510,10 +518,9 @@ const ReviewPage = () => {
                   onClose={() => setLightBox(false)}
                 ></Lightbox>
               )}
-                </>
-              )}
-            </Spin>
             </div>
+          )}
+          <Spin spinning={imageLoading}></Spin>
 
           <div
             style={{
@@ -717,7 +724,9 @@ const ReviewPage = () => {
                     style={{ background: shouldRevised ? 'yellow' : '' }}
                     size='small'
                     value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
-                    onChange={(e) =>handleUpdateFileInField(data, e.target.value)}
+                    onChange={(e) =>
+                      handleUpdateFileInField(data, e.target.value)
+                    }
                   />
                 </div>
               );