View images on review UI
This commit is contained in:
Viet Anh Nguyen
parent
21a805334a
commit
4a483e1519
10
cope2n-fe/package-lock.json
generated
10
cope2n-fe/package-lock.json
generated
@ -25,6 +25,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hotkeys-hook": "^4.5.0",
|
||||
"react-json-view-lite": "^1.2.1",
|
||||
"react-office-viewer": "^1.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
@ -11407,6 +11408,15 @@
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hotkeys-hook": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz",
|
||||
"integrity": "sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.1",
|
||||
"react-dom": ">=16.8.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-i18next": {
|
||||
"version": "11.18.6",
|
||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz",
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hotkeys-hook": "^4.5.0",
|
||||
"react-json-view-lite": "^1.2.1",
|
||||
"react-office-viewer": "^1.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
|
||||
@ -9,12 +9,14 @@ import {
|
||||
ArrowRightOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
ClockCircleFilled,
|
||||
} from '@ant-design/icons';
|
||||
import FileViewer from '@cyntler/react-doc-viewer';
|
||||
import styled from 'styled-components';
|
||||
const { Sider, Content } = Layout;
|
||||
import { baseURL } from "request/api";
|
||||
import moment from 'moment';
|
||||
import { useHotkeys } from "react-hotkeys-hook";
|
||||
|
||||
|
||||
const siderStyle: React.CSSProperties = {
|
||||
@ -138,15 +140,6 @@ const defaultColumns = [
|
||||
key: 'key',
|
||||
width: 200,
|
||||
},
|
||||
// {
|
||||
// title: 'Accuracy',
|
||||
// dataIndex: 'acc',
|
||||
// key: 'acc',
|
||||
// render: (text, record) => {
|
||||
// return <div>100%</div>;
|
||||
// },
|
||||
// width: 150,
|
||||
// },
|
||||
{
|
||||
title: 'Predicted',
|
||||
dataIndex: 'predicted',
|
||||
@ -166,7 +159,7 @@ const defaultColumns = [
|
||||
];
|
||||
|
||||
|
||||
const FileCard = ({ file, isSelected, onClick }) => {
|
||||
const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
|
||||
const fileName = file["File Name"];
|
||||
|
||||
return (
|
||||
@ -179,6 +172,7 @@ const FileCard = ({ file, isSelected, onClick }) => {
|
||||
marginTop: '2px',
|
||||
position: 'relative',
|
||||
height: '100px',
|
||||
overflow: 'hidden',
|
||||
}} onClick={onClick}>
|
||||
<div>
|
||||
<span style={{
|
||||
@ -209,7 +203,11 @@ const FileCard = ({ file, isSelected, onClick }) => {
|
||||
}}>
|
||||
<Button style={{
|
||||
margin: '4px 2px',
|
||||
}}>
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsReasonModalOpen(true);
|
||||
}}
|
||||
>
|
||||
Review
|
||||
</Button>
|
||||
<Button style={{
|
||||
@ -227,8 +225,8 @@ const FileCard = ({ file, isSelected, onClick }) => {
|
||||
};
|
||||
|
||||
const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, page = 1, page_size = 20) => {
|
||||
const startDate = (filterDateRange && filterDateRange[0]) ? filterDateRange[0].format('YYYY-MM-DD') : '';
|
||||
const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1].format('YYYY-MM-DD') : '';
|
||||
const startDate = (filterDateRange && filterDateRange[0]) ? filterDateRange[0] : '';
|
||||
const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1] : '';
|
||||
let filterStr = "";
|
||||
filterStr += `page=${page}&page_size=${page_size}&`;
|
||||
if (filterSubsidiaries) {
|
||||
@ -238,7 +236,7 @@ const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterRevie
|
||||
filterStr += `is_reviewed=${filterReviewState}&`;
|
||||
}
|
||||
if (filterIncludeTests) {
|
||||
filterStr += `includes_tests=${filterIncludeTests}&`;
|
||||
filterStr += `includes_test=${filterIncludeTests}&`;
|
||||
}
|
||||
if (startDate && endDate) {
|
||||
filterStr += `start_date=${startDate}&end_date=${endDate}&`;
|
||||
@ -272,13 +270,14 @@ const ReviewPage = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isReasonModalOpen, setIsReasonModalOpen] = useState(false);
|
||||
const [selectedFileId, setSelectedFileId] = useState(0);
|
||||
const [selectedFileData, setSelectedFileData] = useState(null);
|
||||
const [selectedFileName, setSelectedFileName] = useState(null);
|
||||
|
||||
// Default date range: 1 month ago to today
|
||||
const [filterDateRange, setFilterDateRange] = useState([
|
||||
moment().subtract(1, 'month'),
|
||||
moment(),
|
||||
"", ""
|
||||
]);
|
||||
|
||||
const [filterSubsidiaries, setFilterSubsidiaries] = useState('ALL');
|
||||
@ -288,17 +287,36 @@ const ReviewPage = () => {
|
||||
const [currentRequest, setCurrentRequest] = useState(null);
|
||||
const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
|
||||
const [hasNextRequest, setHasNextRequest] = useState(true);
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
const [totalRequests, setTotalPages] = useState(0);
|
||||
const [dataSource, setDataSource] = useState([]);
|
||||
|
||||
const [pageIndexToGoto, setPageIndexToGoto] = useState(1);
|
||||
|
||||
const setAndLoadSelectedFile = async (requestData, index) => {
|
||||
setSelectedFileId(index);
|
||||
if (!requestData["Files"][index]) {
|
||||
setSelectedFileData("FAILED_TO_LOAD_FILE");
|
||||
return;
|
||||
};
|
||||
const fileName = requestData["Files"][index]["File Name"];
|
||||
const fileURL = requestData["Files"][index]["File URL"];
|
||||
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");
|
||||
}
|
||||
};
|
||||
|
||||
const loadCurrentRequest = (requestID) => {
|
||||
setLoading(true);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, requestID, 2).then((data) => {
|
||||
setRequests(data?.subscription_requests);
|
||||
setHasNextRequest(data?.subscription_requests.length > 1);
|
||||
setTotalPages(data?.page?.total_pages);
|
||||
setTotalPages(data?.page?.total_requests);
|
||||
const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
|
||||
requestData.then(async (data) => {
|
||||
if (data) setCurrentRequest(data);
|
||||
@ -317,6 +335,7 @@ const ReviewPage = () => {
|
||||
}
|
||||
setDataSource(tableRows);
|
||||
setLoading(false);
|
||||
setAndLoadSelectedFile(data, 0);
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
@ -326,6 +345,9 @@ const ReviewPage = () => {
|
||||
};
|
||||
|
||||
const gotoNextRequest = () => {
|
||||
if (currentRequestIndex >= totalRequests) {
|
||||
return;
|
||||
}
|
||||
const nextRequestIndex = currentRequestIndex + 1;
|
||||
setCurrentRequestIndex(nextRequestIndex);
|
||||
loadCurrentRequest(nextRequestIndex);
|
||||
@ -340,32 +362,16 @@ const ReviewPage = () => {
|
||||
loadCurrentRequest(previousRequestIndex);
|
||||
};
|
||||
|
||||
const setAndLoadSelectedFile = (index) => {
|
||||
setCurrentRequestIndex(index);
|
||||
const fileURL = currentRequest["Files"][index]["File URL"];
|
||||
fetch(fileURL)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onload = () => {
|
||||
setSelectedFileData(reader.result);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const reloadFilters = () => {
|
||||
setCurrentRequestIndex(1);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
|
||||
setTotalPages(data?.page?.total_pages);
|
||||
setTotalPages(data?.page?.total_requests);
|
||||
setRequests(data?.subscription_requests);
|
||||
setHasNextRequest(data?.subscription_requests.length > 1);
|
||||
const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
|
||||
firstRequest.then(async (data) => {
|
||||
if (data) setCurrentRequest(data);
|
||||
setTimeout(() => {
|
||||
setAndLoadSelectedFile(0);
|
||||
}, 300);
|
||||
setAndLoadSelectedFile(data, 0);
|
||||
});
|
||||
});
|
||||
|
||||
@ -374,13 +380,13 @@ const ReviewPage = () => {
|
||||
useEffect(() => {
|
||||
setCurrentRequestIndex(1);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
|
||||
setTotalPages(data?.page?.total_pages);
|
||||
setTotalPages(data?.page?.total_requests);
|
||||
setRequests(data?.subscription_requests);
|
||||
setHasNextRequest(data?.subscription_requests.length > 1);
|
||||
const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
|
||||
firstRequest.then(async (data) => {
|
||||
console.log(firstRequest)
|
||||
if (data) setCurrentRequest(data);
|
||||
setAndLoadSelectedFile(data, 0);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
@ -403,7 +409,6 @@ const ReviewPage = () => {
|
||||
const updateRevisedData = async (newRevisedData: any) => {
|
||||
const requestID = newRevisedData.request_id;
|
||||
const token = localStorage.getItem('sbt-token') || '';
|
||||
console.log(newRevisedData)
|
||||
await fetch(`${baseURL}/ctel/request/${requestID}/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@ -432,7 +437,13 @@ const ReviewPage = () => {
|
||||
for (let i = 0; i < newData.length; i++) {
|
||||
newRevisedData[newData[i].key] = newData[i].revised;
|
||||
}
|
||||
updateRevisedData(newRevisedData);
|
||||
updateRevisedData(newRevisedData).then(() => {
|
||||
// "[Is Reviewed]" => true
|
||||
setCurrentRequest({
|
||||
...currentRequest,
|
||||
["Is Reviewed"]: true,
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
const columns = defaultColumns.map((col) => {
|
||||
@ -443,7 +454,7 @@ const ReviewPage = () => {
|
||||
...col,
|
||||
onCell: (record: DataType) => ({
|
||||
record,
|
||||
editable: col.editable,
|
||||
editable: col.key != "request_id" && col.editable,
|
||||
dataIndex: col.dataIndex,
|
||||
title: col.title,
|
||||
handleSave,
|
||||
@ -451,6 +462,12 @@ const ReviewPage = () => {
|
||||
};
|
||||
});
|
||||
|
||||
// use left/right keys to navigate
|
||||
useHotkeys("left", gotoPreviousRequest);
|
||||
useHotkeys("right", gotoNextRequest);
|
||||
|
||||
const fileExtension = selectedFileName ? selectedFileName.split('.').pop() : '';
|
||||
|
||||
return (
|
||||
<div style={fullscreen ? {
|
||||
position: 'fixed',
|
||||
@ -485,7 +502,7 @@ const ReviewPage = () => {
|
||||
{fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
|
||||
{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
|
||||
</Button>
|
||||
<b>Request ID:</b> {currentRequest?.RequestID}
|
||||
{totalRequests ? <> <b>Request ID:</b> {currentRequest?.RequestID}</> : ""}
|
||||
</div>
|
||||
<Layout style={{
|
||||
overflow: 'auto',
|
||||
@ -505,7 +522,7 @@ const ReviewPage = () => {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
}}>
|
||||
<div
|
||||
{totalRequests > 0 && <div
|
||||
style={{
|
||||
width: "200px",
|
||||
display: "flex",
|
||||
@ -522,17 +539,17 @@ const ReviewPage = () => {
|
||||
{currentRequest?.Files.map((file, index) => (
|
||||
<FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
|
||||
() => {
|
||||
setAndLoadSelectedFile(index);
|
||||
setAndLoadSelectedFile(currentRequest, index);
|
||||
}
|
||||
} />
|
||||
} setIsReasonModalOpen={setIsReasonModalOpen} />
|
||||
))}
|
||||
</div>
|
||||
</div>}
|
||||
<div style={{
|
||||
border: "1px solid #ccc",
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
}}>
|
||||
{selectedFileData && <FileViewer documents={[
|
||||
{selectedFileData === "FAILED_TO_LOAD_FILE" ? <p style={{ color: "#333" }}>Failed to load file.</p> : ( fileExtension === "pdf" ? (<FileViewer documents={[
|
||||
{ uri: selectedFileData }
|
||||
]} config={{
|
||||
header: {
|
||||
@ -542,13 +559,17 @@ const ReviewPage = () => {
|
||||
},
|
||||
csvDelimiter: ",", // "," as default,
|
||||
pdfVerticalScrollByDefault: true, // false as default
|
||||
}} />}
|
||||
}} />) : <div style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
overflow: "auto",
|
||||
}}><img width={"100%"} src={selectedFileData} alt="file" /></div>)}
|
||||
</div>
|
||||
</Content>
|
||||
<Sider width="400px" style={siderStyle}>
|
||||
<Space.Compact style={{ width: '100%', marginBottom: 16 }}>
|
||||
<Input value={
|
||||
`Sub: ${filterSubsidiaries}, Date:${filterDateRange[0] ? (filterDateRange[0]?.format('YYYY-MM-DD') + " to " + filterDateRange[1].format('YYYY-MM-DD')) : "All"}, Reviewed: ${filterReviewState}, Tests: ${filterIncludeTests}`
|
||||
`Sub: ${filterSubsidiaries}, Date:${filterDateRange[0] ? (filterDateRange[0] + " to " + filterDateRange[1]) : "All"}, Reviewed: ${filterReviewState}, Tests: ${filterIncludeTests}`
|
||||
} readOnly />
|
||||
<Button type="primary" size="large"
|
||||
onClick={() => {
|
||||
@ -567,7 +588,7 @@ const ReviewPage = () => {
|
||||
}}
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
Previous
|
||||
Previou
|
||||
</Button>
|
||||
<Button type="default" style={{ height: 38 }}
|
||||
disabled={!hasNextRequest}
|
||||
@ -584,7 +605,7 @@ const ReviewPage = () => {
|
||||
<Input size='middle' addonBefore="To" style={{ marginBottom: "4px", marginLeft: "4px", width: 180 }} defaultValue={currentRequestIndex} addonAfter={
|
||||
<Button type="default"
|
||||
onClick={() => {
|
||||
if (pageIndexToGoto > totalPages) {
|
||||
if (pageIndexToGoto > totalRequests) {
|
||||
message.error("RequestID is out of range.");
|
||||
return;
|
||||
}
|
||||
@ -605,21 +626,21 @@ const ReviewPage = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h2 style={{ margin: "20px 0 10px 0" }}>{totalPages ? ("Request: " + currentRequestIndex + "/" + totalPages) : "No Request. Adjust your search criteria to see more results."}</h2>
|
||||
<h2 style={{ margin: "20px 0 10px 0" }}>{totalRequests ? ("Request: " + currentRequestIndex + "/" + totalRequests) : "No Request. Adjust your search criteria to see more results."}</h2>
|
||||
{totalRequests > 0 && <div>
|
||||
<Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.RequestID : ""} />
|
||||
<Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly value={currentRequest?.RedemptionID ? currentRequest.RedemptionID : ""} />
|
||||
<Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.created_at : ""} />
|
||||
<Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Client Request Time (ms)"] : ""} />
|
||||
<Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Server Processing Time (ms)"] : ""} />
|
||||
<div style={{ marginBottom: "8px", marginTop: "8px", display: "flex" }}>
|
||||
<Button type="primary">Mark Not-reviewed</Button>
|
||||
{/* <Tag icon={<ClockCircleOutlined />} color="warning" style={{ padding: "4px 16px", marginLeft: 8 }}>
|
||||
Not Reviewed
|
||||
</Tag> */}
|
||||
<Tag icon={<CheckCircleOutlined />} color="success" style={{ padding: "4px 16px", marginLeft: 8 }}>
|
||||
{currentRequest && (currentRequest["Is Reviewed"] ? <Tag icon={<CheckCircleOutlined />} color="success" style={{ padding: "4px 16px" }}>
|
||||
Reviewed
|
||||
</Tag>
|
||||
</Tag> : <Tag icon={<ClockCircleFilled />} color="warning" style={{ padding: "4px 16px" }}>
|
||||
Not Reviewed
|
||||
</Tag>)}
|
||||
</div>
|
||||
</div>}
|
||||
</Sider>
|
||||
</Layout>
|
||||
<Modal
|
||||
@ -657,6 +678,9 @@ const ReviewPage = () => {
|
||||
}}
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
onChange={(date, dateString) => {
|
||||
setFilterDateRange(dateString);
|
||||
}}
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
@ -738,7 +762,50 @@ const ReviewPage = () => {
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
<div
|
||||
<Modal
|
||||
title={t`Review`}
|
||||
open={isReasonModalOpen}
|
||||
width={700}
|
||||
onOk={
|
||||
() => {
|
||||
|
||||
}
|
||||
}
|
||||
onCancel={
|
||||
() => {
|
||||
setIsReasonModalOpen(false);
|
||||
}
|
||||
}
|
||||
>
|
||||
{currentRequest && JSON.stringify(currentRequest["Files"][selectedFileId])}
|
||||
<Form
|
||||
style={{
|
||||
marginTop: 30,
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
name='reason'
|
||||
label={t`Reason for bad quality:`}
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
placeholder='Select a reason'
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ value: 'invalid_image', label: t`Invalid image` },
|
||||
{ value: 'missing_information', label: t`Missing information` },
|
||||
{ value: 'too_blurry_text', label: t`Too blurry text` },
|
||||
{ value: 'too_small_text', label: t`Too small text` },
|
||||
{ value: 'handwritten', label: t`Handwritten` },
|
||||
{ value: 'recheck', label: t`Recheck` },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
{totalRequests > 0 && <div
|
||||
style={{
|
||||
height: '25%',
|
||||
overflowY: 'auto',
|
||||
@ -748,7 +815,7 @@ const ReviewPage = () => {
|
||||
rowClassName={() => 'editable-row'}
|
||||
bordered dataSource={dataSource} columns={columns}
|
||||
/>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user