From a9ae6549573cdfaf698998dc815dd1e47b9486aa Mon Sep 17 00:00:00 2001
From: phanphan <lh.phan@samsung.com>
Date: Thu, 6 Jun 2024 11:05:05 +0700
Subject: [PATCH] improve some ui

---
 cope2n-fe/package.json                    |  1 +
 cope2n-fe/src/pages/reviews2/FileCard.tsx | 40 +++++++++++++---------
 cope2n-fe/src/pages/reviews2/api.ts       |  2 +-
 cope2n-fe/src/pages/reviews2/index.tsx    | 41 ++++++++++++++---------
 4 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/cope2n-fe/package.json b/cope2n-fe/package.json
index 9cfce13..06c2cfc 100644
--- a/cope2n-fe/package.json
+++ b/cope2n-fe/package.json
@@ -41,6 +41,7 @@
     "history": "^5.3.0",
     "lodash-es": "^4.17.21",
     "mousetrap": "^1.6.5",
+    "openseadragon": "^4.1.1",
     "pdfjs-dist": "^3.11.174",
     "process": "^0.11.10",
     "react": "^18.3.1",
diff --git a/cope2n-fe/src/pages/reviews2/FileCard.tsx b/cope2n-fe/src/pages/reviews2/FileCard.tsx
index 7156e9d..79efa76 100644
--- a/cope2n-fe/src/pages/reviews2/FileCard.tsx
+++ b/cope2n-fe/src/pages/reviews2/FileCard.tsx
@@ -8,10 +8,9 @@ import { Button, Tag } from 'antd';
 const FileCard = ({ file, isSelected, onClick }) => {
   const fileName = file['File Name'];
   const extensionType = fileName.split('.').pop();
-  let status = true;
-  if (file['Is Required'] && !file['Is Reviewed']) {
-    status = false;
-  }
+  const isRequired = file['Is Required'];
+  const isReviewd = file['Is Reviewed'];
+
   return (
     <div
       style={{
@@ -52,20 +51,29 @@ const FileCard = ({ file, isSelected, onClick }) => {
           >
             {fileName
               ? fileName.substring(0, 25).replace('temp_', '')
-              : fileName}
-            {' '}({extensionType})
+              : fileName}{' '}
+            ({extensionType})
           </span>
         </div>
-        <Tag
-          color={status ? 'success' : 'warning'}
-          icon={
-            status ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />
-          }
-          style={{ display: 'inline-block', fontWeight: 'bold' }}
-          // bordered={false}
-        >
-          {status ? 'Good' : 'Warning'}{' '}
-        </Tag>
+        <div style={{display: 'flex', justifyContent: 'space-between', alignItems:'center'}}>
+          <Tag
+            color={isRequired ? 'warning' : ''}
+            style={{ display: 'inline-block', fontWeight: 'bold' , textTransform: 'capitalize' }}
+            // bordered={false}
+          >
+            Required: {isRequired.toString()}
+          </Tag>
+
+
+          <Tag
+            color={isReviewd ? 'success' : 'warning'}
+            style={{ display: 'inline-block', fontWeight: 'bold', textTransform: 'capitalize' }}
+            // bordered={false}
+          >
+            Reviewed: {isReviewd.toString()}
+          </Tag>
+
+        </div>
       </div>
       <Button
         style={{
diff --git a/cope2n-fe/src/pages/reviews2/api.ts b/cope2n-fe/src/pages/reviews2/api.ts
index 998dd20..29123f8 100644
--- a/cope2n-fe/src/pages/reviews2/api.ts
+++ b/cope2n-fe/src/pages/reviews2/api.ts
@@ -56,7 +56,7 @@ export const updateRevisedData = async (requestID: any) => {
     console.log(error);
     throw error;
   });
-  if (result.status != 200) {
+  if (!result.ok) {
     throw new Error('Could not update revised data');
   }
 };
diff --git a/cope2n-fe/src/pages/reviews2/index.tsx b/cope2n-fe/src/pages/reviews2/index.tsx
index 4601dbf..cd03908 100644
--- a/cope2n-fe/src/pages/reviews2/index.tsx
+++ b/cope2n-fe/src/pages/reviews2/index.tsx
@@ -53,6 +53,8 @@ import {
 } from './const';
 import FileCard from './FileCard';
 import RecentRequest from './RecentRequest';
+import './style.css';
+
 const ReviewPage = () => {
   const [loading, setLoading] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
@@ -137,13 +139,19 @@ const ReviewPage = () => {
       SOURCE_OBJECT_NAMES.forEach((name) => {
         tempData[k][name] = fileContent[name][k];
       });
-      if (
-        (isEmpty(tempData[k][REVIEWED_RESULT]) ||
-          (tempData[k][REVIEWED_RESULT].length == 1 &&
-            isEmpty(tempData[k][REVIEWED_RESULT][0]))) &&
-        !isEmpty(tempData[k][PREDICTED_RESULT])
-      ) {
-        tempData[k][REVIEWED_RESULT] = tempData[k][PREDICTED_RESULT];
+      if (!isEmpty(tempData[k][PREDICTED_RESULT])) {
+        let isEmptyResult = false;
+        if (isEmpty(tempData[k][REVIEWED_RESULT])) {
+          isEmptyResult = true;
+        }
+        if (tempData[k][REVIEWED_RESULT].length > 0) {
+          isEmptyResult = tempData[k][REVIEWED_RESULT].every((r: any) =>
+            isEmpty(r),
+          );
+        }
+        if (isEmptyResult) {
+          tempData[k][REVIEWED_RESULT] = tempData[k][PREDICTED_RESULT];
+        }
       }
     });
 
@@ -277,8 +285,8 @@ const ReviewPage = () => {
     );
     if (isConfirmed) {
       try {
-        addRecentRequest(currentRequest?.RequestID);
         await updateRevisedData(currentRequest?.RequestID);
+        addRecentRequest(currentRequest?.RequestID);
         setCurrentRequest({
           ...currentRequest,
           ['Is Reviewed']: true,
@@ -327,6 +335,8 @@ const ReviewPage = () => {
   // use left/right keys to navigate
   useHotkeys('left', gotoPreviousRequest);
   useHotkeys('right', gotoNextRequest);
+  useHotkeys('u', submitRevisedData);
+  useHotkeys('c', handleConfirmReview);
 
   const fileExtension = selectedFileName
     ? selectedFileName.split('.').pop()
@@ -527,13 +537,12 @@ const ReviewPage = () => {
                 overflowX: 'visible',
               }}
             >
-              <Spin spinning={imageLoading}>
+              <Spin spinning={imageLoading} wrapperClassName='image-spin'>
                 <img
                   style={{
-                    maxHeight: '100%',
-                    maxWidth: '100%',
-                    height: 'auto',
-                    width: 'auto',
+                    height: '100%',
+                    width: '100%',
+                    objectFit: 'contain',
                     cursor: 'zoom-in',
                   }}
                   src={selectedFileData}
@@ -666,7 +675,7 @@ const ReviewPage = () => {
               style={{ minWidth: '120px' }}
               onClick={handleConfirmReview}
             >
-              Confirm request
+              (C) Confirm request
             </Button>
           </div>
         </div>
@@ -721,7 +730,7 @@ const ReviewPage = () => {
                 }
               } catch (error) {}
               return (
-                <div style={{ margin: '0 0 8px' }}>
+                <div style={{ margin: '0 0 8px' }} className='file-input-group'>
                   <div
                     style={{
                       display: 'flex',
@@ -828,7 +837,7 @@ const ReviewPage = () => {
               }}
               onClick={submitRevisedData}
             >
-              Update File
+              (U) Update File
             </Button>
           </div>
         </div>