rèactor
This commit is contained in:
phanphan
parent
2610601aec
commit
5c93d5f87e
@ -10,8 +10,9 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
|
||||
border: '1px solid #ccc',
|
||||
backgroundColor: isSelected ? '#d4ecff' : '#fff',
|
||||
padding: '4px 8px',
|
||||
margin: '0 0 4px',
|
||||
margin: '0 8px 4px',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
}}
|
||||
onClick={onClick}
|
||||
>
|
||||
@ -41,35 +42,18 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
|
||||
{fileName ? fileName.substring(0, 25).replace('temp_', '') : fileName}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
<Button
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
margin: '4px 2px',
|
||||
}}
|
||||
onClick={() => {
|
||||
const downloadUrl = file['File URL'];
|
||||
window.open(downloadUrl, '_blank');
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
margin: '4px 2px',
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsReasonModalOpen(true);
|
||||
}}
|
||||
>
|
||||
Review
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
margin: '4px 2px',
|
||||
}}
|
||||
onClick={() => {
|
||||
const downloadUrl = file['File URL'];
|
||||
window.open(downloadUrl, '_blank');
|
||||
}}
|
||||
>
|
||||
<DownloadOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
<DownloadOutlined />
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { t } from "@lingui/macro";
|
||||
import { t } from '@lingui/macro';
|
||||
|
||||
export const counter_measure_map = {
|
||||
invalid_image: 'Remove this image from the evaluation report',
|
||||
@ -23,9 +23,9 @@ export const REASON_BAD_QUALITY = [
|
||||
{ value: 'wrong_feedback', label: t`Wrong Feedback` },
|
||||
{ value: 'ocr_cannot_extract', label: t`Ocr cannot extract` },
|
||||
{ value: 'other', label: t`Other` },
|
||||
]
|
||||
];
|
||||
|
||||
export const SOLUTION_BAD_QUALITY =[
|
||||
export const SOLUTION_BAD_QUALITY = [
|
||||
{
|
||||
value: 'Remove this image from the evaluation report',
|
||||
label: t`Remove this image from the evaluation report`,
|
||||
@ -36,7 +36,7 @@ export const SOLUTION_BAD_QUALITY =[
|
||||
label: t`Update revised result and re-calculate accuracy`,
|
||||
},
|
||||
{ value: 'other', label: t`Other` },
|
||||
]
|
||||
];
|
||||
|
||||
export const SUBSIDIARIES = [
|
||||
{ value: 'SEAO', label: 'SEAO' },
|
||||
@ -46,4 +46,25 @@ export const SUBSIDIARIES = [
|
||||
{ value: 'SEPCO', label: 'SEPCO' },
|
||||
{ value: 'TSE', label: 'TSE' },
|
||||
{ value: 'SEIN', label: 'SEIN' },
|
||||
]
|
||||
];
|
||||
|
||||
export const SOURCE_KEYS = [
|
||||
'retailername',
|
||||
'sold_to_party',
|
||||
'invoice_no',
|
||||
'purchase_date',
|
||||
'imei_number',
|
||||
];
|
||||
|
||||
export const FEEDBACK_RESULT = 'Feedback Result';
|
||||
export const FEEDBACK_ACCURACY = 'Feedback Accuracy';
|
||||
export const PREDICTED_RESULT = 'Predicted Result';
|
||||
export const REVIEWED_ACCURACY = 'Reviewed Accuracy';
|
||||
export const REVIEWED_RESULT = 'Reviewed Result';
|
||||
export const SOURCE_OBJECT_NAMES = [
|
||||
FEEDBACK_RESULT,
|
||||
FEEDBACK_ACCURACY,
|
||||
PREDICTED_RESULT,
|
||||
REVIEWED_ACCURACY,
|
||||
REVIEWED_RESULT
|
||||
];
|
||||
|
||||
@ -35,8 +35,14 @@ import { normalizeData } from 'utils/field-value-process';
|
||||
import { fetchAllRequests, fetchRequest } from './api';
|
||||
import {
|
||||
counter_measure_map,
|
||||
FEEDBACK_ACCURACY,
|
||||
FEEDBACK_RESULT,
|
||||
PREDICTED_RESULT,
|
||||
REASON_BAD_QUALITY,
|
||||
REVIEWED_RESULT,
|
||||
SOLUTION_BAD_QUALITY,
|
||||
SOURCE_KEYS,
|
||||
SOURCE_OBJECT_NAMES,
|
||||
SUBSIDIARIES,
|
||||
} from './const';
|
||||
import FileCard from './FileCard';
|
||||
@ -48,6 +54,7 @@ const ReviewPage = () => {
|
||||
const [isReasonModalOpen, setIsReasonModalOpen] = useState(false);
|
||||
const [selectedFileId, setSelectedFileId] = useState(0);
|
||||
const [selectedFileData, setSelectedFileData] = useState(null);
|
||||
const [selectedFileDataSource, setSelectedFileDataSource] = useState({});
|
||||
const [selectedFileName, setSelectedFileName] = useState(null);
|
||||
|
||||
// Default date range: 1 month ago to today
|
||||
@ -78,6 +85,18 @@ const ReviewPage = () => {
|
||||
}
|
||||
}, [reason]);
|
||||
|
||||
const updateSelectedFileDataSource = (fileContent) => {
|
||||
let tempData = {};
|
||||
SOURCE_KEYS.forEach((k) => {
|
||||
tempData[k] = {};
|
||||
SOURCE_OBJECT_NAMES.forEach((name) => {
|
||||
tempData[k][name] = fileContent[name][k];
|
||||
});
|
||||
});
|
||||
|
||||
setSelectedFileDataSource(tempData);
|
||||
};
|
||||
|
||||
const setAndLoadSelectedFile = async (requestData, index) => {
|
||||
setSelectedFileId(index);
|
||||
if (!requestData['Files'][index]) {
|
||||
@ -87,6 +106,8 @@ const ReviewPage = () => {
|
||||
}
|
||||
const fileName = requestData['Files'][index]['File Name'];
|
||||
const fileURL = requestData['Files'][index]['File URL'];
|
||||
updateSelectedFileDataSource(requestData['Files'][index]);
|
||||
|
||||
const response = await fetch(fileURL);
|
||||
if (response.status === 200) {
|
||||
setSelectedFileName(fileName);
|
||||
@ -99,7 +120,6 @@ const ReviewPage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
console.log(dataSource);
|
||||
const loadCurrentRequest = (requestIndex) => {
|
||||
setLoading(true);
|
||||
setImageLoading(true);
|
||||
@ -122,7 +142,6 @@ const ReviewPage = () => {
|
||||
);
|
||||
requestData
|
||||
.then(async (data) => {
|
||||
console.log('🚀 ~ .then ~ data:', data);
|
||||
if (data) setCurrentRequest(data);
|
||||
const predicted =
|
||||
data && data['Predicted Result'] ? data['Predicted Result'] : {};
|
||||
@ -308,6 +327,26 @@ 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];
|
||||
return {
|
||||
...prevData,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
|
||||
// }, [selectedFileDataSource]);
|
||||
console.log('update data:', selectedFileDataSource);
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
@ -361,24 +400,52 @@ const ReviewPage = () => {
|
||||
margin: '0 0 4px 0',
|
||||
}}
|
||||
>
|
||||
<div style={{ flexGrow: 1 }}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setFullscreen(!fullscreen);
|
||||
<Button
|
||||
onClick={() => {
|
||||
setFullscreen(!fullscreen);
|
||||
}}
|
||||
>
|
||||
{fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
|
||||
</Button>
|
||||
{totalRequests ? (
|
||||
<div
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr 1fr',
|
||||
}}
|
||||
>
|
||||
{fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
|
||||
{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
|
||||
</Button>
|
||||
{totalRequests ? (
|
||||
<>
|
||||
<b>Request ID:</b> {currentRequest?.RequestID}
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexBasis: '400px' }}>
|
||||
<div>
|
||||
<b> Request ID: </b>
|
||||
{currentRequest?.RequestID}
|
||||
</div>{' '}
|
||||
<div>
|
||||
<b> Redemption ID: </b>
|
||||
{currentRequest?.RedemptionID}
|
||||
</div>{' '}
|
||||
<div>
|
||||
<b> Created at: </b>
|
||||
{currentRequest?.created_at}
|
||||
</div>{' '}
|
||||
<div>
|
||||
<b> Request time: </b>
|
||||
{currentRequest?.['Client Request Time (ms)']}
|
||||
</div>{' '}
|
||||
<div>
|
||||
<b> Processing time: </b>
|
||||
{currentRequest?.['Server Processing Time (ms)']}
|
||||
</div>{' '}
|
||||
<div>
|
||||
<b> Raw accuracy: </b>
|
||||
{currentRequest?.raw_accuracy}
|
||||
</div>{' '}
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{/* <div
|
||||
style={{ display: 'flex', flexBasis: '400px', alignItems: 'center' }}
|
||||
>
|
||||
<Input
|
||||
size='small'
|
||||
value={`Sub: ${filterSubsidiaries}, Date:${
|
||||
@ -397,7 +464,7 @@ const ReviewPage = () => {
|
||||
>
|
||||
Filters
|
||||
</Button>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
@ -408,126 +475,6 @@ const ReviewPage = () => {
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexBasis: '200px',
|
||||
flexShrink: 0,
|
||||
flexDirection: 'row',
|
||||
}}
|
||||
>
|
||||
{totalRequests > 0 && (
|
||||
<div
|
||||
style={{
|
||||
width: '200px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
flexGrow: 0,
|
||||
padding: '0',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
overflowY: 'auto',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
color: '#333',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
Files ({currentRequest?.Files?.length})
|
||||
</p>
|
||||
{currentRequest?.Files.map((file, index) => (
|
||||
<FileCard
|
||||
key={index}
|
||||
file={file}
|
||||
isSelected={index === selectedFileId}
|
||||
onClick={() => {
|
||||
setAndLoadSelectedFile(currentRequest, index);
|
||||
setImageLoading(true);
|
||||
}}
|
||||
setIsReasonModalOpen={setIsReasonModalOpen}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{totalRequests > 0 && (
|
||||
<div
|
||||
style={{
|
||||
color: 'black',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
padding: '0 4px 0 0',
|
||||
}}
|
||||
>
|
||||
<b>Request ID</b>
|
||||
<Input
|
||||
size='small'
|
||||
style={{ margin: '2px 0px 4px' }}
|
||||
readOnly
|
||||
value={currentRequest ? currentRequest.RequestID : ''}
|
||||
/>
|
||||
<b>Redemption</b>
|
||||
<Input
|
||||
size='small'
|
||||
style={{ margin: '2px 0px 4px' }}
|
||||
readOnly
|
||||
value={
|
||||
currentRequest?.RedemptionID
|
||||
? currentRequest.RedemptionID
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<b>Created date</b>
|
||||
<Input
|
||||
size='small'
|
||||
style={{ margin: '2px 0px 4px' }}
|
||||
readOnly
|
||||
value={currentRequest ? currentRequest.created_at : ''}
|
||||
/>
|
||||
<b>Request time</b>
|
||||
<Input
|
||||
size='small'
|
||||
style={{ margin: '2px 0px 4px' }}
|
||||
readOnly
|
||||
value={
|
||||
currentRequest
|
||||
? currentRequest['Client Request Time (ms)']
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<b>Processing time</b>
|
||||
<Input
|
||||
size='small'
|
||||
style={{ margin: '2px 0px 4px' }}
|
||||
readOnly
|
||||
value={
|
||||
currentRequest
|
||||
? currentRequest['Server Processing Time (ms)']
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<b>Raw accuracy</b>
|
||||
<Input
|
||||
size='small'
|
||||
style={{ margin: '2px 0px 4px' }}
|
||||
readOnly
|
||||
value={currentRequest ? currentRequest['raw_accuracy'] : ''}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
// borderLeft: '1px solid #ccc',
|
||||
@ -537,15 +484,49 @@ const ReviewPage = () => {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: 'relative',
|
||||
padding: '0 16px',
|
||||
padding: '8px 16px',
|
||||
// overflow: 'auto'
|
||||
}}
|
||||
>
|
||||
{totalRequests > 0 && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flexGrow: 0,
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
color: '#333',
|
||||
fontWeight: 'bold',
|
||||
margin: '0 16px 0 0',
|
||||
}}
|
||||
>
|
||||
Files ({currentRequest?.Files?.length})
|
||||
</p>
|
||||
{currentRequest?.Files.map((file, index) => (
|
||||
<FileCard
|
||||
key={index}
|
||||
file={file}
|
||||
isSelected={index === selectedFileId}
|
||||
onClick={() => {
|
||||
setAndLoadSelectedFile(currentRequest, index);
|
||||
setImageLoading(true);
|
||||
}}
|
||||
setIsReasonModalOpen={setIsReasonModalOpen}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
textAlign: 'center',
|
||||
overflow: 'auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Spin spinning={imageLoading}>
|
||||
@ -685,11 +666,18 @@ const ReviewPage = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type='primary'
|
||||
shape='round'
|
||||
size='middle'
|
||||
style={{ width: '120px', alignSelf: 'flex-end' }}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
// backgroundColor: '#fafafa',
|
||||
padding: 8,
|
||||
flexBasis: 400,
|
||||
flexShrink: 0,
|
||||
@ -697,8 +685,43 @@ const ReviewPage = () => {
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
size='middle'
|
||||
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 style={{ flexGrow: 1 }}>
|
||||
{dataSource?.map((data) => {
|
||||
{SOURCE_KEYS?.map((data) => {
|
||||
let shouldRevised = false;
|
||||
try {
|
||||
if (
|
||||
selectedFileDataSource[data]?.[FEEDBACK_ACCURACY].length > 0
|
||||
) {
|
||||
shouldRevised =
|
||||
selectedFileDataSource[data][FEEDBACK_ACCURACY][0] < 1;
|
||||
}
|
||||
} catch (error) {}
|
||||
return (
|
||||
<div style={{ margin: '0 0 8px' }}>
|
||||
<div
|
||||
@ -709,39 +732,102 @@ const ReviewPage = () => {
|
||||
margin: '0 0 4px',
|
||||
}}
|
||||
>
|
||||
<p style={{ fontWeight: 'bold', margin: 0 }}>{data.key}</p>
|
||||
<p style={{ fontWeight: 'bold', margin: 0 }}>{data}</p>
|
||||
<Button
|
||||
shape='round'
|
||||
type='primary'
|
||||
ghost
|
||||
icon={<CopyOutlined />}
|
||||
size='small'
|
||||
onClick={() => updateRevised(data)}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
addonBefore='Feedback'
|
||||
size='small'
|
||||
readOnly
|
||||
value={data?.submitted}
|
||||
value={selectedFileDataSource[data]?.[FEEDBACK_RESULT]}
|
||||
/>
|
||||
<Input
|
||||
addonBefore='Predicted'
|
||||
readOnly
|
||||
size='small'
|
||||
value={data?.predicted}
|
||||
value={selectedFileDataSource[data]?.[PREDICTED_RESULT]}
|
||||
/>
|
||||
<Input
|
||||
addonBefore='Revised '
|
||||
style={{ background: shouldRevised ? 'yellow' : '' }}
|
||||
size='small'
|
||||
value={data?.revised}
|
||||
value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
|
||||
/>
|
||||
</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={{
|
||||
display: 'flex',
|
||||
margin: '8px 0px',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
placeholder='Select a reason'
|
||||
style={{ width: 170, flexBasis: '50%' }}
|
||||
options={REASON_BAD_QUALITY}
|
||||
onChange={setReason}
|
||||
value={reason}
|
||||
/>
|
||||
{reason === 'other' && (
|
||||
<Input
|
||||
placeholder='Other reason'
|
||||
value={otherReason}
|
||||
style={{ width: 170, flexBasis: '50%' }}
|
||||
onChange={(e) => {
|
||||
setOtherReason(e.target.value);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<b>{t`Solution:`}</b>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
margin: '8px 0px',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
placeholder='Select a solution'
|
||||
style={{ width: 170, flexBasis: '50%' }}
|
||||
options={SOLUTION_BAD_QUALITY}
|
||||
onChange={setSolution}
|
||||
value={solution}
|
||||
// defaultValue={solution}
|
||||
/>
|
||||
{solution === 'other' && (
|
||||
<Input
|
||||
style={{ width: 170, flexBasis: '50%' }}
|
||||
placeholder='Other solution'
|
||||
value={otherSolution}
|
||||
onChange={(e) => {
|
||||
setOtherSolution(e.target.value);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button type='primary' shape='round' size='middle' style={{width: '120px', alignSelf: 'flex-end'}}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
|
||||
Loading…
Reference in New Issue
Block a user