From f8232bdb5bb5e1c510fcbea75383bc0792672011 Mon Sep 17 00:00:00 2001 From: phanphan Date: Fri, 24 May 2024 12:59:34 +0700 Subject: [PATCH] update data by field and confirm review --- cope2n-fe/src/pages/reviews2/FileCard.tsx | 89 ++++-- cope2n-fe/src/pages/reviews2/api.ts | 29 +- cope2n-fe/src/pages/reviews2/index.tsx | 366 ++++++++++------------ 3 files changed, 249 insertions(+), 235 deletions(-) diff --git a/cope2n-fe/src/pages/reviews2/FileCard.tsx b/cope2n-fe/src/pages/reviews2/FileCard.tsx index 2fd0130..1e76926 100644 --- a/cope2n-fe/src/pages/reviews2/FileCard.tsx +++ b/cope2n-fe/src/pages/reviews2/FileCard.tsx @@ -1,50 +1,78 @@ -import { DownloadOutlined } from '@ant-design/icons'; -import { Button } from 'antd'; +import { + 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 (
-

+

+ {file['Doc Type'].toUpperCase()} +

+ + {fileName + ? fileName.substring(0, 25).replace('temp_', '') + : fileName} + +
+ : + } + style={{ display: 'inline-block', fontWeight: 'bold' }} + // bordered={false} > - {file['Doc Type'].toUpperCase()} -

- - {fileName ? fileName.substring(0, 25).replace('temp_', '') : fileName} - + {status ? 'Good' : 'Warning'}{' '} +
- ); }; diff --git a/cope2n-fe/src/pages/reviews2/api.ts b/cope2n-fe/src/pages/reviews2/api.ts index a8c1885..75def5b 100644 --- a/cope2n-fe/src/pages/reviews2/api.ts +++ b/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({ - reviewed_result: newRevisedData, - }), + body: JSON.stringify({"request_file_results": []}), }).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}/`, { diff --git a/cope2n-fe/src/pages/reviews2/index.tsx b/cope2n-fe/src/pages/reviews2/index.tsx index 2310db6..fca81ca 100644 --- a/cope2n-fe/src/pages/reviews2/index.tsx +++ b/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 { fetchAllRequests, fetchRequest } from './api'; +import { getErrorMessage } from 'utils/error-handler'; +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" - interface DataType { - key: string; - accuracy: number; - submitted: string; - revised: string; - } - - 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 + const handleConfirmReview = async () => { + const isConfirmed = window.confirm( + 'Are you sure you want to confirm this request is reviewed?', + ); + if (isConfirmed) { + try { + await updateRevisedData(currentRequest?.RequestID); setCurrentRequest({ ...currentRequest, ['Is Reviewed']: true, }); - }) - .then(() => { - setDataSource(newData); - }) - .catch((error) => { - message.error( - 'Could not update revised data. Please check the format.', - ); - }); + notification.success({ message: 'Update file success' }); + } catch (error) { + notification.error({ + message: getErrorMessage(error), + }); + } + } }; const submitRevisedData = async () => { - const newData = [...dataSource]; - 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, - }); + const fileId = selectedFileName.split('.')[0]; + + let request_file_result = {}; + SOURCE_KEYS.forEach((k) => { + request_file_result[k] = selectedFileDataSource[k][REVIEWED_RESULT]; }); + 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 (
{ size='large' />
-
- - {totalRequests ? ( -
-
-   Request ID:   - {currentRequest?.RequestID} -
{' '} -
-   Redemption ID:   - {currentRequest?.RedemptionID} -
{' '} -
-   Created at:   - {currentRequest?.created_at} -
{' '} -
-   Request time:   - {currentRequest?.['Client Request Time (ms)']} -
{' '} -
-   Processing time:   - {currentRequest?.['Server Processing Time (ms)']} -
{' '} -
-   Raw accuracy:   - {currentRequest?.raw_accuracy} -
{' '} -
- ) : ( - '' - )} - {/*
- - -
*/} -
+
+
+ + {totalRequests && ( +
+
+ Request ID:   + {currentRequest?.RequestID} +
{' '} +
+ Created at:   + {currentRequest?.created_at} +
{' '} +
+ Request time:   + {currentRequest?.['Client Request Time (ms)']} +
{' '} +
+ Redemption ID:   + {currentRequest?.RedemptionID} +
{' '} +
+ Raw accuracy:   + {currentRequest?.raw_accuracy} +
{' '} +
+ Processing time:   + {currentRequest?.['Server Processing Time (ms)']} +
{' '} +
+ )} +
{totalRequests > 0 && (
{ flexDirection: 'row', alignItems: 'center', flexGrow: 0, + margin: '8px 0 0 0', }} >

{

{
-
+
{SOURCE_KEYS?.map((data) => { let shouldRevised = false; try { @@ -755,25 +718,15 @@ const ReviewPage = () => { value={selectedFileDataSource[data]?.[PREDICTED_RESULT]} /> handleUpdateFileInField(data, e.target.value)} />
); })} - - {/*
- -
*/} {t`Bad image reason:`}
{ > { setOtherReason(e.target.value); }} @@ -810,7 +763,7 @@ const ReviewPage = () => { > { @@ -828,6 +781,19 @@ const ReviewPage = () => { )}
+
+ +