Integrate APIs
This commit is contained in:
Viet Anh Nguyen
parent
5fed071439
commit
15a550ae36
@ -1,6 +1,6 @@
|
||||
import { t } from '@lingui/macro';
|
||||
import { Button, Input, Table, Tag, DatePicker, Form, Modal, Select, Space, Checkbox } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Layout } from 'antd';
|
||||
import {
|
||||
EditOutlined, DownloadOutlined, CheckCircleOutlined,
|
||||
@ -13,6 +13,8 @@ import {
|
||||
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';
|
||||
|
||||
const siderStyle: React.CSSProperties = {
|
||||
backgroundColor: '#fafafa',
|
||||
@ -38,22 +40,6 @@ const StyledEditOutlined = styled(EditOutlined)`
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
const fileList = [
|
||||
{
|
||||
name: "invoice.pdf",
|
||||
url: "/dummpy.pdf",
|
||||
type: "invoice",
|
||||
isBadQuality: false,
|
||||
},
|
||||
{
|
||||
name: "invoice.pdf",
|
||||
url: "/dummpy.pdf",
|
||||
type: "imei",
|
||||
isBadQuality: true,
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
key: 'retailer_name',
|
||||
@ -102,6 +88,7 @@ const columns = [
|
||||
title: 'Key',
|
||||
dataIndex: 'key',
|
||||
key: 'key',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: 'Accuracy',
|
||||
@ -110,6 +97,7 @@ const columns = [
|
||||
render: (text, record) => {
|
||||
return <div>100%</div>;
|
||||
},
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Predicted',
|
||||
@ -142,6 +130,8 @@ const columns = [
|
||||
|
||||
|
||||
const FileCard = ({ file, isSelected, onClick }) => {
|
||||
const fileName = file["File Name"];
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
border: '1px solid #ccc',
|
||||
@ -160,14 +150,19 @@ const FileCard = ({ file, isSelected, onClick }) => {
|
||||
fontWeight: 'bold',
|
||||
padding: '4px 8px',
|
||||
cursor: 'default',
|
||||
}}>{file.type.toUpperCase()}</span>
|
||||
}}>{file["Doc Type"].toUpperCase()}</span>
|
||||
<span style={{
|
||||
fontSize: '12px',
|
||||
color: '#aaa',
|
||||
fontWeight: 'bold',
|
||||
padding: '4px 8px',
|
||||
cursor: 'default',
|
||||
}}>{file.name}</span>
|
||||
maxWidth: '50px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}>
|
||||
{fileName? fileName.substring(0, 10) : fileName }
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
padding: '4px',
|
||||
@ -191,6 +186,48 @@ 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'): '';
|
||||
let filterStr = "";
|
||||
filterStr += `page=${page}&page_size=${page_size}&`;
|
||||
if (filterSubsidiaries) {
|
||||
filterStr += `subsidiary=${filterSubsidiaries}&`;
|
||||
}
|
||||
if (filterReviewState) {
|
||||
filterStr += `is_reviewed=${filterReviewState}&`;
|
||||
}
|
||||
if (filterIncludeTests) {
|
||||
filterStr += `includes_tests=${filterIncludeTests}&`;
|
||||
}
|
||||
if (startDate && endDate) {
|
||||
filterStr += `start_date=${startDate}&end_date=${endDate}&`;
|
||||
}
|
||||
const token = localStorage.getItem('sbt-token') || '';
|
||||
const data = await fetch(`${baseURL}/ctel/request_list/?${filterStr}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Authorization": `${JSON.parse(token)}`
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
const data = await res.json();
|
||||
return data;
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
const fetchRequest = async (id) => {
|
||||
const token = localStorage.getItem('sbt-token') || '';
|
||||
const response = await fetch(`${baseURL}/ctel/request/${id}/`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Authorization": `${JSON.parse(token)}`
|
||||
}
|
||||
});
|
||||
return await (await response.json()).subscription_requests[0];
|
||||
};
|
||||
|
||||
const ReviewPage = () => {
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
@ -198,9 +235,86 @@ const ReviewPage = () => {
|
||||
const selectFileByIndex = (index) => {
|
||||
setSelectedFileId(index);
|
||||
};
|
||||
const [filterDateRange, setFilterDateRange] = useState(null);
|
||||
const [filterSubsidiaries, setFilterSubsidiaries] = useState('');
|
||||
const [filterReviewState, setFilterReviewState] = useState('');
|
||||
|
||||
// Default date range: 1 month ago to today
|
||||
const [filterDateRange, setFilterDateRange] = useState([
|
||||
moment().subtract(1,'month'),
|
||||
moment(),
|
||||
]);
|
||||
|
||||
const [filterSubsidiaries, setFilterSubsidiaries] = useState('ALL');
|
||||
const [filterReviewState, setFilterReviewState] = useState('all');
|
||||
const [filterIncludeTests, setFilterIncludesTests] = useState('true');
|
||||
const [requests, setRequests] = useState([]);
|
||||
const [currentRequest, setCurrentRequest] = useState(null);
|
||||
const [currentRequestIndex, setCurrentRequestIndex] = useState(1);
|
||||
const [hasNextRequest, setHasNextRequest] = useState(true);
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
|
||||
const gotoNextRequest = () => {
|
||||
const nextRequestIndex = currentRequestIndex + 1;
|
||||
setCurrentRequestIndex(nextRequestIndex);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, nextRequestIndex, 2).then((data) => {
|
||||
setRequests(data?.subscription_requests);
|
||||
setHasNextRequest(data?.subscription_requests.length > 1);
|
||||
setTotalPages(data?.page?.total_pages);
|
||||
const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
|
||||
requestData.then(async (data) => {
|
||||
console.log(data)
|
||||
if (data) setCurrentRequest(data);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const gotoPreviousRequest = () => {
|
||||
if (currentRequestIndex === 1) {
|
||||
return;
|
||||
}
|
||||
const previousRequestIndex = currentRequestIndex - 1;
|
||||
setCurrentRequestIndex(previousRequestIndex);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, previousRequestIndex, 2).then((data) => {
|
||||
setRequests(data?.subscription_requests);
|
||||
setHasNextRequest(data?.subscription_requests.length > 1);
|
||||
setTotalPages(data?.page?.total_pages);
|
||||
const requestData = fetchRequest(data?.subscription_requests[0].RequestID);
|
||||
requestData.then(async (data) => {
|
||||
console.log(data)
|
||||
if (data) setCurrentRequest(data);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const reloadFilters = () => {
|
||||
setCurrentRequestIndex(1);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
|
||||
setTotalPages(data?.page?.total_pages);
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentRequestIndex(1);
|
||||
fetchAllRequests(filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, currentRequestIndex, 2).then((data) => {
|
||||
setTotalPages(data?.page?.total_pages);
|
||||
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);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
const fileURL = currentRequest ? baseURL + currentRequest["Files"][selectedFileId]["File URL"].replace("http://be-ctel-sbt:9000/api", "") : "dummy.pdf";
|
||||
|
||||
return (
|
||||
<div style={fullscreen ? {
|
||||
@ -225,8 +339,8 @@ const ReviewPage = () => {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
maxWidth: '100%',
|
||||
minHeight: '60%',
|
||||
maxHeight: '60%',
|
||||
minHeight: '70%',
|
||||
maxHeight: '70%',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
}}>
|
||||
@ -249,10 +363,10 @@ const ReviewPage = () => {
|
||||
style={{
|
||||
color: "#333",
|
||||
padding: 10,
|
||||
fontWeight: 'bold'
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>Files ({fileList.length})</h2>
|
||||
{fileList.map((file, index) => (
|
||||
>Files ({currentRequest?.Files?.length})</h2>
|
||||
{currentRequest?.Files.map((file, index) => (
|
||||
<FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
|
||||
() => {
|
||||
setSelectedFileId(index);
|
||||
@ -267,7 +381,7 @@ const ReviewPage = () => {
|
||||
}}>
|
||||
<FileViewer documents={
|
||||
[
|
||||
{ uri: "/dummy.pdf" }
|
||||
{ uri: fileURL }
|
||||
]
|
||||
} config={{
|
||||
header: {
|
||||
@ -280,9 +394,11 @@ const ReviewPage = () => {
|
||||
}} />
|
||||
</div>
|
||||
</Content>
|
||||
<Sider width="300px" style={siderStyle}>
|
||||
<Sider width="400px" style={siderStyle}>
|
||||
<Space.Compact style={{ width: '100%', marginBottom: 16 }}>
|
||||
<Input defaultValue="All" readOnly />
|
||||
<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}`
|
||||
} readOnly />
|
||||
<Button type="primary" size="large"
|
||||
onClick={() => {
|
||||
setIsModalOpen(true);
|
||||
@ -293,11 +409,24 @@ const ReviewPage = () => {
|
||||
</Space.Compact>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
|
||||
<div>
|
||||
<Button type="default">
|
||||
<Button type="default"
|
||||
disabled={currentRequestIndex === 1}
|
||||
onClick={() => {
|
||||
gotoPreviousRequest();
|
||||
}}
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
Previous
|
||||
</Button>
|
||||
<Button type="default">
|
||||
<Button type="default"
|
||||
disabled={!hasNextRequest}
|
||||
onClick={() => {
|
||||
if (!hasNextRequest) {
|
||||
return;
|
||||
}
|
||||
gotoNextRequest();
|
||||
}}
|
||||
>
|
||||
Next
|
||||
<ArrowRightOutlined />
|
||||
</Button>
|
||||
@ -306,12 +435,12 @@ const ReviewPage = () => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 style={{ margin: "20px 0 10px 0" }}>Request Review</h2>
|
||||
<Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly />
|
||||
<Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly />
|
||||
<Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly />
|
||||
<Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly />
|
||||
<Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly />
|
||||
<h2 style={{ margin: "20px 0 10px 0" }}>{totalPages ? ("Request: " + currentRequestIndex + "/" + totalPages) : "No Request. Adjust your search criteria to see more results."}</h2>
|
||||
<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 : "<Unknown>"} />
|
||||
<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 }}>
|
||||
@ -330,6 +459,7 @@ const ReviewPage = () => {
|
||||
onOk={
|
||||
() => {
|
||||
setIsModalOpen(false);
|
||||
reloadFilters();
|
||||
}
|
||||
}
|
||||
onCancel={
|
||||
@ -359,40 +489,42 @@ const ReviewPage = () => {
|
||||
<DatePicker.RangePicker
|
||||
value={filterDateRange}
|
||||
onChange={(value) => {
|
||||
console.log(value);
|
||||
setFilterDateRange(value);
|
||||
}}
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<div style={{ marginTop: 10, display: 'flex' }}>
|
||||
<Form.Item
|
||||
name='subsidiary'
|
||||
label={t`Subsidiary`}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select a subsidiary',
|
||||
},
|
||||
<Form.Item
|
||||
name='subsidiary'
|
||||
label={t`Subsidiary`}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select a subsidiary',
|
||||
},
|
||||
]}
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
placeholder='Select a subsidiary'
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ value: 'ALL', label: 'ALL' },
|
||||
{ value: 'SEAU', label: 'SEAU' },
|
||||
{ value: 'SESP', label: 'SESP' },
|
||||
{ value: 'SME', label: 'SME' },
|
||||
{ value: 'SEPCO', label: 'SEPCO' },
|
||||
{ value: 'TSE', label: 'TSE' },
|
||||
{ value: 'SEIN', label: 'SEIN' },
|
||||
]}
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
placeholder='Select a subsidiary'
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ value: 'ALL', label: 'ALL' },
|
||||
{ value: 'SEAU', label: 'SEAU' },
|
||||
{ value: 'SESP', label: 'SESP' },
|
||||
{ value: 'SME', label: 'SME' },
|
||||
{ value: 'SEPCO', label: 'SEPCO' },
|
||||
{ value: 'TSE', label: 'TSE' },
|
||||
{ value: 'SEIN', label: 'SEIN' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
value={filterSubsidiaries}
|
||||
defaultValue={filterSubsidiaries}
|
||||
onChange={setFilterSubsidiaries}
|
||||
/>
|
||||
</Form.Item>
|
||||
<div style={{ marginTop: 10, display: 'flex', marginLeft: 0, padding: 0 }}>
|
||||
<Form.Item
|
||||
name='reviewed'
|
||||
label={t`Reviewed`}
|
||||
@ -402,28 +534,51 @@ const ReviewPage = () => {
|
||||
message: 'Please select review status',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ label: 'All', value: 'all' },
|
||||
{ label: 'Reviewed', value: 'reviewed' },
|
||||
{ label: 'Not Reviewed', value: 'not_reviewed' },
|
||||
]}
|
||||
value={filterReviewState}
|
||||
defaultValue={filterReviewState}
|
||||
onChange={setFilterReviewState}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name='is_test'
|
||||
label={t`Is Test`}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select test status',
|
||||
},
|
||||
]}
|
||||
style={{ marginLeft: 16 }}
|
||||
>
|
||||
<Select
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ value: 'ALL', label: 'ALL' },
|
||||
{ value: 'YES', label: 'YES' },
|
||||
{ value: 'NO', label: 'NO' },
|
||||
{ label: 'Include tests', value: 'true' },
|
||||
{ label: 'Exclude tests', value: 'false' },
|
||||
]}
|
||||
defaultValue={'ALL'}
|
||||
value={filterIncludeTests}
|
||||
defaultValue={filterIncludeTests}
|
||||
onChange={setFilterIncludesTests}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
<div
|
||||
<div
|
||||
style={{
|
||||
height: '40%',
|
||||
height: '25%',
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
<StyledTable dataSource={dataSource} columns={columns}
|
||||
<StyledTable dataSource={dataSource} columns={columns}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,7 @@ const environment = process.env.NODE_ENV;
|
||||
const AXIOS_TIMEOUT_MS = 30 * 60 * 1000; // This config sastified long-live upload file request
|
||||
const EXPIRED_PASSWORD_SIGNAL = 'expired_password';
|
||||
|
||||
export const baseURL = environment === 'development' ? 'http://42.96.42.13:9000/api' : '/api';
|
||||
export const baseURL = environment === 'development' ? 'http://42.96.42.13:9881/api' : '/api';
|
||||
|
||||
export const API = axios.create({
|
||||
timeout: AXIOS_TIMEOUT_MS,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user