update data by field and confirm review

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

@@ -1,50 +1,78 @@
-import { DownloadOutlined } from '@ant-design/icons';
+import {
-import { Button } from 'antd';
+  CheckCircleOutlined,
+  DownloadOutlined,
+  ExclamationCircleOutlined,
+} from '@ant-design/icons';
+import { Button, Tag } from 'antd';
 
 const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
   const fileName = file['File Name'];
-
+  let status = true;
+  if (file['Is Required'] && !file['Is Reviewed']) {
+    status = false;
+  }
   return (
     <div
       style={{
-        border: '1px solid #ccc',
+        border: `1px solid #ccc`,
-        backgroundColor: isSelected ? '#d4ecff' : '#fff',
+        backgroundColor: isSelected ? '#f4f4f4' : '#fff',
         padding: '4px 8px',
         margin: '0 8px 4px',
-        cursor: 'pointer',
         display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
       }}
       onClick={onClick}
     >
       <div>
-        <p
+        <div>
-          style={{
+          <p
-            fontSize: '12px',
+            style={{
-            color: '#333',
+              fontSize: '12px',
-            fontWeight: 'bold',
+              color: '#333',
-            cursor: 'default',
+              fontWeight: 'bold',
-            margin: '4px',
+              cursor: 'default',
-          }}
+              margin: '4px 8px 4px 0',
+              display: 'inline-block',
+            }}
+          >
+            {file['Doc Type'].toUpperCase()}
+          </p>
+          <span
+            style={{
+              fontSize: '12px',
+              color: '#aaa',
+              fontWeight: 'bold',
+              cursor: 'default',
+              maxWidth: '40px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {fileName
+              ? fileName.substring(0, 25).replace('temp_', '')
+              : fileName}
+          </span>
+        </div>
+        <Tag
+          color={status ? 'success' : 'warning'}
+          icon={
+            status ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />
+          }
+          style={{ display: 'inline-block', fontWeight: 'bold' }}
+          // bordered={false}
         >
-          {file['Doc Type'].toUpperCase()}
+          {status ? 'Good' : 'Warning'}{' '}
-        </p>
+        </Tag>
-        <span
-          style={{
-            fontSize: '12px',
-            color: '#aaa',
-            fontWeight: 'bold',
-            cursor: 'default',
-            maxWidth: '40px',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          }}
-        >
-          {fileName ? fileName.substring(0, 25).replace('temp_', '') : fileName}
-        </span>
       </div>
       <Button
         style={{
-          margin: '4px 2px',
+          width: '24px',
+          height: '24px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginLeft: '8px',
         }}
         onClick={() => {
           const downloadUrl = file['File URL'];
@@ -53,7 +81,6 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
       >
         <DownloadOutlined />
       </Button>
-
     </div>
   );
 };

cope2n-fe/src/pages/reviews2/api.ts

@@ -43,7 +43,6 @@ export const fetchAllRequests = async (
 
 export const updateRevisedData = async (
   requestID: any,
-  newRevisedData: any,
 ) => {
   // const requestID = ;
   const token = localStorage.getItem('sbt-token') || '';
@@ -53,9 +52,7 @@ export const updateRevisedData = async (
       Authorization: `${JSON.parse(token)}`,
       'Content-Type': 'application/json',
     },
-    body: JSON.stringify({
+    body: JSON.stringify({"request_file_results": []}),
-      reviewed_result: newRevisedData,
-    }),
   }).catch((error) => {
     console.log(error);
     throw error;
@@ -65,6 +62,30 @@ export const updateRevisedData = async (
   }
 };
 
+export const updateRevisedDataByFile = async (
+  requestID: any,
+  fileID: any,
+  newRevisedData: any,
+) => {
+  // const requestID = ;
+  const token = localStorage.getItem('sbt-token') || '';
+  const result = await fetch(`${baseURL}/ctel/request_image/${requestID}/${fileID}/`, {
+    method: 'POST',
+    headers: {
+      Authorization: `${JSON.parse(token)}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(newRevisedData),
+  }).catch((error) => {
+    console.log(error);
+    throw error;
+  });
+  if (result.status != 200) {
+    throw new Error('Could not update revised data');
+  }
+};
+
+
 export const fetchRequest = async (id) => {
   const token = localStorage.getItem('sbt-token') || '';
   const response = await fetch(`${baseURL}/ctel/request/${id}/`, {

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

@@ -26,13 +26,17 @@ 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 { baseURL } from 'request/api';
 // Import the styles
 import '@react-pdf-viewer/core/lib/styles/index.css';
 
 import { badQualityReasonSubmit } from 'request';
-import { normalizeData } from 'utils/field-value-process';
+import { getErrorMessage } from 'utils/error-handler';
-import { fetchAllRequests, fetchRequest } from './api';
+import {
+  fetchAllRequests,
+  fetchRequest,
+  updateRevisedData,
+  updateRevisedDataByFile,
+} from './api';
 import {
   counter_measure_map,
   FEEDBACK_ACCURACY,
@@ -56,6 +60,7 @@ const ReviewPage = () => {
   const [selectedFileData, setSelectedFileData] = useState(null);
   const [selectedFileDataSource, setSelectedFileDataSource] = useState({});
   const [selectedFileName, setSelectedFileName] = useState(null);
+  const [disableUpdateFileBtn, setDisableUpdateFileBtn] = useState(false);
 
   // Default date range: 1 month ago to today
   const [filterDateRange, setFilterDateRange] = useState(['', '']);
@@ -69,7 +74,6 @@ const ReviewPage = () => {
   const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
   const [hasNextRequest, setHasNextRequest] = useState(true);
   const [totalRequests, setTotalPages] = useState(0);
-  const [dataSource, setDataSource] = useState([]);
 
   const [pageIndexToGoto, setPageIndexToGoto] = useState(1);
 
@@ -106,14 +110,32 @@ const ReviewPage = () => {
     }
     const fileName = requestData['Files'][index]['File Name'];
     const fileURL = requestData['Files'][index]['File URL'];
-    updateSelectedFileDataSource(requestData['Files'][index]);
+    let fileDataSource = requestData['Files'][index];
+    updateSelectedFileDataSource(fileDataSource);
+    let reason = fileDataSource.Reason;
+    let solution = fileDataSource['Counter Measures'];
 
+    if (!reason) {
+      setReason(null);
+    } else if (REASON_BAD_QUALITY.some((r) => r.value === reason)) {
+      setReason(reason);
+    } else {
+      setReason('other');
+      setOtherReason(reason);
+    }
+    if (!solution) {
+      setSolution(null);
+    } else if (SOLUTION_BAD_QUALITY.some((r) => r.value === solution)) {
+      setSolution(solution);
+    } else {
+      setSolution('other');
+      setOtherSolution(solution);
+    }
+
+    setSelectedFileName(fileName);
     const response = await fetch(fileURL);
     if (response.status === 200) {
-      setSelectedFileName(fileName);
       setSelectedFileData(fileURL);
-      console.log('Loading file: ' + fileName);
-      console.log('URL: ' + fileURL);
     } else {
       setSelectedFileData('FAILED_TO_LOAD_FILE');
       setImageLoading(false);
@@ -143,23 +165,6 @@ const ReviewPage = () => {
         requestData
           .then(async (data) => {
             if (data) setCurrentRequest(data);
-            const predicted =
-              data && data['Predicted Result'] ? data['Predicted Result'] : {};
-            const submitted =
-              data && data['Feedback Result'] ? data['Feedback Result'] : {};
-            const revised =
-              data && data['Reviewed Result'] ? data['Reviewed Result'] : {};
-            const keys = Object.keys(predicted);
-            const tableRows = [];
-            for (let i = 0; i < keys.length; i++) {
-              let instance = {};
-              instance['key'] = keys[i];
-              instance['predicted'] = predicted[keys[i]];
-              instance['submitted'] = submitted[keys[i]];
-              instance['revised'] = revised[keys[i]];
-              tableRows.push(instance);
-            }
-            setDataSource(tableRows);
             setAndLoadSelectedFile(data, 0);
           })
           .finally(() => {
@@ -241,80 +246,58 @@ const ReviewPage = () => {
     });
   }, []);
 
-  // "Key", "Accuracy", "Submitted", "Revised"
+  const handleConfirmReview = async () => {
-  interface DataType {
+    const isConfirmed = window.confirm(
-    key: string;
+      'Are you sure you want to confirm this request is reviewed?',
-    accuracy: number;
+    );
-    submitted: string;
+    if (isConfirmed) {
-    revised: string;
+      try {
-  }
+        await updateRevisedData(currentRequest?.RequestID);
-
-  const updateRevisedData = async (newRevisedData: any) => {
-    const requestID = currentRequest.RequestID;
-    const token = localStorage.getItem('sbt-token') || '';
-    const result = await fetch(`${baseURL}/ctel/request/${requestID}/`, {
-      method: 'POST',
-      headers: {
-        Authorization: `${JSON.parse(token)}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        reviewed_result: newRevisedData,
-      }),
-    }).catch((error) => {
-      console.log(error);
-      throw error;
-    });
-    if (result.status != 200) {
-      throw new Error('Could not update revised data');
-    }
-  };
-
-  const handleSave = (row: DataType) => {
-    const newData = [...dataSource];
-    const index = newData.findIndex((item) => row.key === item.key);
-    const item = newData[index];
-    newData.splice(index, 1, {
-      ...item,
-      ...row,
-    });
-    const newRevisedData = {};
-    for (let i = 0; i < newData.length; i++) {
-      newData[i].revised = normalizeData(newData[i].key, newData[i].revised);
-      newRevisedData[newData[i].key] = newData[i].revised;
-    }
-    updateRevisedData(newRevisedData)
-      .then(() => {
-        // "[Is Reviewed]" => true
         setCurrentRequest({
           ...currentRequest,
           ['Is Reviewed']: true,
         });
-      })
+        notification.success({ message: 'Update file success' });
-      .then(() => {
+      } catch (error) {
-        setDataSource(newData);
+        notification.error({
-      })
+          message: getErrorMessage(error),
-      .catch((error) => {
+        });
-        message.error(
+      }
-          'Could not update revised data. Please check the format.',
+    }
-        );
-      });
   };
 
   const submitRevisedData = async () => {
-    const newData = [...dataSource];
+    const fileId = selectedFileName.split('.')[0];
-    const newRevisedData = {};
+
-    for (let i = 0; i < newData.length; i++) {
+    let request_file_result = {};
-      newData[i].revised = normalizeData(newData[i].key, newData[i].revised);
+    SOURCE_KEYS.forEach((k) => {
-      newRevisedData[newData[i].key] = newData[i].revised;
+      request_file_result[k] = selectedFileDataSource[k][REVIEWED_RESULT];
-    }
-    updateRevisedData(newRevisedData).then(() => {
-      // "[Is Reviewed]" => true
-      setCurrentRequest({
-        ...currentRequest,
-        ['Is Reviewed']: true,
-      });
     });
+    let data = {
+      request_file_result,
+      reason: reason ? reason : otherReason,
+      solution: solution ? solution : otherSolution,
+    };
+    try {
+      await updateRevisedDataByFile(currentRequest?.RequestID, fileId, data);
+
+      let newData = currentRequest;
+      newData.Files[selectedFileId]['Is Reviewed'] = true;
+
+      setCurrentRequest({
+        ...newData,
+      });
+      notification.success({ message: 'Update file success' });
+
+      const requestData = await fetchRequest(
+        currentRequest?.RequestID,
+      );
+      setCurrentRequest(requestData)
+    } catch (error) {
+      notification.error({
+        message: getErrorMessage(error),
+      });
+    }
   };
 
   // use left/right keys to navigate
@@ -328,12 +311,6 @@ const ReviewPage = () => {
   const [lightBox, setLightBox] = useState(false);
 
   const updateRevised = (fieldName) => {
-    console.log('🚀 ~ updateRevised ~ fieldName:', fieldName);
-    // const tempData = Object.assign({}, selectedFileDataSource);
-    // tempData[fieldName][REVIEWED_RESULT] = tempData[fieldName][FEEDBACK_RESULT];
-    // console.log('🚀 ~ updateRevised ~ tempData:', tempData);
-    // updateSelectedFileDataSource(tempData);
-
     setSelectedFileDataSource((prevData) => {
       prevData[fieldName][REVIEWED_RESULT] =
         prevData[fieldName][FEEDBACK_RESULT];
@@ -343,10 +320,15 @@ const ReviewPage = () => {
     });
   };
 
-  // useEffect(() => {
+  const handleUpdateFileInField = (fieldName, fieldValue) => {
+    setSelectedFileDataSource((prevData) => {
+      prevData[fieldName][REVIEWED_RESULT] = fieldValue;
+      return {
+        ...prevData,
+      };
+    });
+  };
 
-  // }, [selectedFileDataSource]);
-  console.log('update data:', selectedFileDataSource);
   return (
     <div
       style={
@@ -393,101 +375,76 @@ const ReviewPage = () => {
           size='large'
         />
       </div>
-      <div
+
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          margin: '0 0 4px 0',
-        }}
-      >
-        <Button
-          onClick={() => {
-            setFullscreen(!fullscreen);
-          }}
-        >
-          {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
-        </Button>
-        {totalRequests ? (
-          <div
-            style={{
-              flexGrow: 1,
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr 1fr',
-            }}
-          >
-            <div>
-              <b>&nbsp;&nbsp;Request ID: &nbsp;</b>
-              {currentRequest?.RequestID}
-            </div>{' '}
-            <div>
-              <b>&nbsp;&nbsp;Redemption ID: &nbsp;</b>
-              {currentRequest?.RedemptionID}
-            </div>{' '}
-            <div>
-              <b>&nbsp;&nbsp;Created at: &nbsp;</b>
-              {currentRequest?.created_at}
-            </div>{' '}
-            <div>
-              <b>&nbsp;&nbsp;Request time: &nbsp;</b>
-              {currentRequest?.['Client Request Time (ms)']}
-            </div>{' '}
-            <div>
-              <b>&nbsp;&nbsp;Processing time: &nbsp;</b>
-              {currentRequest?.['Server Processing Time (ms)']}
-            </div>{' '}
-            <div>
-              <b>&nbsp;&nbsp;Raw accuracy: &nbsp;</b>
-              {currentRequest?.raw_accuracy}
-            </div>{' '}
-          </div>
-        ) : (
-          ''
-        )}
-        {/* <div
-          style={{ display: 'flex', flexBasis: '400px', alignItems: 'center' }}
-        >
-          <Input
-            size='small'
-            value={`Sub: ${filterSubsidiaries}, Date:${
-              filterDateRange[0]
-                ? filterDateRange[0] + ' to ' + filterDateRange[1]
-                : 'All'
-            }, Reviewed: ${filterReviewState}, Tests: ${filterIncludeTests}`}
-            readOnly
-          />
-          <Button
-            type='primary'
-            size='middle'
-            onClick={() => {
-              setIsModalOpen(true);
-            }}
-          >
-            Filters
-          </Button>
-        </div> */}
-      </div>
       <div
         style={{
           overflow: 'auto',
           width: '100%',
-          height: fullscreen ? 'calc(100% - 32px)' : 'calc(100% - 32px)',
+          height: fullscreen ? 'calc(100% - 32px)' : '100%',
           maxWidth: '100%',
           display: 'flex',
         }}
       >
         <div
           style={{
-            // borderLeft: '1px solid #ccc',
             height: '100%',
-            // width: '300px',
             flexGrow: 1,
             display: 'flex',
             flexDirection: 'column',
             position: 'relative',
-            padding: '8px 16px',
-            // overflow: 'auto'
           }}
         >
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              margin: '0 0 4px 0',
+            }}
+          >
+            <Button
+              onClick={() => {
+                setFullscreen(!fullscreen);
+              }}
+            >
+              {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+            </Button>
+            {totalRequests && (
+              <div
+                style={{
+                  flexGrow: 1,
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 1fr 1fr',
+                  marginLeft: '16px',
+                }}
+              >
+                <div style={{ gridColumn: 'span 2 / span 2' }}>
+                  <b>Request ID: &nbsp;</b>
+                  {currentRequest?.RequestID}
+                </div>{' '}
+                <div>
+                  <b>Created at: &nbsp;</b>
+                  {currentRequest?.created_at}
+                </div>{' '}
+                <div>
+                  <b>Request time: &nbsp;</b>
+                  {currentRequest?.['Client Request Time (ms)']}
+                </div>{' '}
+                <div style={{ gridColumn: 'span 2 / span 2' }}>
+                  <b>Redemption ID: &nbsp;</b>
+                  {currentRequest?.RedemptionID}
+                </div>{' '}
+                <div>
+                  <b>Raw accuracy: &nbsp;</b>
+                  {currentRequest?.raw_accuracy}
+                </div>{' '}
+                <div style={{ gridColumn: 'span 2 / span 2' }}>
+                  <b>Processing time: &nbsp;</b>
+                  {currentRequest?.['Server Processing Time (ms)']}
+                </div>{' '}
+              </div>
+            )}
+          </div>
           {totalRequests > 0 && (
             <div
               style={{
@@ -495,6 +452,7 @@ const ReviewPage = () => {
                 flexDirection: 'row',
                 alignItems: 'center',
                 flexGrow: 0,
+                margin: '8px 0 0 0',
               }}
             >
               <p
@@ -668,28 +626,30 @@ const ReviewPage = () => {
             </div>
             <Button
               type='primary'
-              shape='round'
+              shape='default'
               size='middle'
-              style={{ width: '120px', alignSelf: 'flex-end' }}
+              style={{ minWidth: '120px', alignSelf: 'flex-end' }}
+              onClick={handleConfirmReview}
             >
-              Save
+              Confirm request
             </Button>
           </div>
         </div>
         <div
           style={{
-            padding: 8,
             flexBasis: 400,
             flexShrink: 0,
             display: 'flex',
             flexDirection: 'column',
+            paddingLeft: '8px',
           }}
         >
           <div
             style={{
               display: 'flex',
               alignItems: 'center',
-              justifyContent: 'center'
+              justifyContent: 'center',
+              marginBottom: '8px',
             }}
           >
             <Input
@@ -704,6 +664,9 @@ const ReviewPage = () => {
             <Button
               type='primary'
               size='middle'
+              style={{
+                height: '36px',
+              }}
               onClick={() => {
                 setIsModalOpen(true);
               }}
@@ -711,7 +674,7 @@ const ReviewPage = () => {
               Filters
             </Button>
           </div>
-          <div style={{ flexGrow: 1 }}>
+          <div style={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}>
             {SOURCE_KEYS?.map((data) => {
               let shouldRevised = false;
               try {
@@ -755,25 +718,15 @@ const ReviewPage = () => {
                     value={selectedFileDataSource[data]?.[PREDICTED_RESULT]}
                   />
                   <Input
-                    addonBefore='Revised&nbsp; &nbsp;'
+                    addonBefore='Revised'
                     style={{ background: shouldRevised ? 'yellow' : '' }}
                     size='small'
                     value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
+                    onChange={(e) =>handleUpdateFileInField(data, e.target.value)}
                   />
                 </div>
               );
             })}
-
-            {/* <Form
-                style={{
-                  marginTop: 30,
-                }}
-              >
-                <Form.Item
-                  name='reason'
-                  label={t`Reason for bad quality:`}
-                ></Form.Item>
-              </Form> */}
             <b>{t`Bad image reason:`}</b>
             <div
               style={{
@@ -784,7 +737,7 @@ const ReviewPage = () => {
             >
               <Select
                 placeholder='Select a reason'
-                style={{ width: 170, flexBasis: '50%' }}
+                style={{ width: 170, flexBasis: '50%', height: '32px' }}
                 options={REASON_BAD_QUALITY}
                 onChange={setReason}
                 value={reason}
@@ -793,7 +746,7 @@ const ReviewPage = () => {
                 <Input
                   placeholder='Other reason'
                   value={otherReason}
-                  style={{ width: 170, flexBasis: '50%' }}
+                  style={{ width: 170, flexBasis: '50%', height: '32px' }}
                   onChange={(e) => {
                     setOtherReason(e.target.value);
                   }}
@@ -810,7 +763,7 @@ const ReviewPage = () => {
             >
               <Select
                 placeholder='Select a solution'
-                style={{ width: 170, flexBasis: '50%' }}
+                style={{ width: 170, flexBasis: '50%', height: '32px' }}
                 options={SOLUTION_BAD_QUALITY}
                 onChange={setSolution}
                 value={solution}
@@ -818,7 +771,7 @@ const ReviewPage = () => {
               />
               {solution === 'other' && (
                 <Input
-                  style={{ width: 170, flexBasis: '50%' }}
+                  style={{ width: 170, flexBasis: '50%', height: '32px' }}
                   placeholder='Other solution'
                   value={otherSolution}
                   onChange={(e) => {
@@ -828,6 +781,19 @@ const ReviewPage = () => {
               )}
             </div>
           </div>
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button
+              type='primary'
+              color='success'
+              size='middle'
+              style={{
+                height: '36px',
+              }}
+              onClick={submitRevisedData}
+            >
+              Update File
+            </Button>
+          </div>
         </div>
       </div>
       <Modal