Merge pull request #129 from SDSRV-IDP/factory/review

Factory/review

cope2n-fe/src/locales/en/messages.json

@@ -2,6 +2,7 @@
   "Are you sure you want to leave without saving?": "Are you sure you want to leave without saving?",
   "Back": "Back",
   "Back to Dashboard": "Back to Dashboard",
+  "Bad image reason:": "Bad image reason:",
   "Create New Report": "Create New Report",
   "Dashboard": "Dashboard",
   "Date (GMT+8)": "Date (GMT+8)",

cope2n-fe/src/locales/vi/messages.json

@@ -2,6 +2,7 @@
   "Are you sure you want to leave without saving?": "Bạn có chắc chắn muốn rời đi mà không lưu lại không?",
   "Back": "",
   "Back to Dashboard": "",
+  "Bad image reason:": "",
   "Create New Report": "",
   "Dashboard": "",
   "Date (GMT+8)": "",

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(
+      const requestData = await fetchRequest(currentRequest?.RequestID);
-        currentRequest?.RequestID,
+      setCurrentRequest(requestData);
-      );
-      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>
               );