tannedcung/sbt-idp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix imei number space

Browse Source
This commit is contained in:
phanphan 2024-05-09 16:12:14 +07:00
parent 04c1551204
commit 1f0027c4c5
4 changed files with 85 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
cope2n-fe/src/pages/reviews2/FileCard.tsx
View File

@ -1,5 +1,5 @@
import { DownloadOutlined } from "@ant-design/icons"; import { DownloadOutlined } from '@ant-design/icons';
import { Button } from "antd"; import { Button } from 'antd';
const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => { const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
const fileName = file['File Name']; const fileName = file['File Name'];
@ -10,10 +10,8 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
border: '1px solid #ccc', border: '1px solid #ccc',
backgroundColor: isSelected ? '#d4ecff' : '#fff', backgroundColor: isSelected ? '#d4ecff' : '#fff',
padding: '4px 8px', padding: '4px 8px',
marginRight: '4px', margin: '0 0 4px',
position: 'relative', cursor: 'pointer',
height: '100px',
cursor: 'pointer'
}} }}
onClick={onClick} onClick={onClick}
> >
@ -23,8 +21,8 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
fontSize: '12px', fontSize: '12px',
color: '#333', color: '#333',
fontWeight: 'bold', fontWeight: 'bold',
padding: '4px 8px',
cursor: 'default', cursor: 'default',
margin: '4px',
}} }}
> >
{file['Doc Type'].toUpperCase()} {file['Doc Type'].toUpperCase()}
@ -45,7 +43,9 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
</div> </div>
<div <div
style={{ style={{
display: 'flex' display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}} }}
> >
<Button <Button

129
cope2n-fe/src/pages/reviews2/index.tsx
View File

@ -22,7 +22,7 @@ import {
Spin, Spin,
Tag, Tag,
} from 'antd'; } from 'antd';
import React, { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Lightbox from 'react-awesome-lightbox'; import Lightbox from 'react-awesome-lightbox';
import 'react-awesome-lightbox/build/style.css'; import 'react-awesome-lightbox/build/style.css';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
@ -41,14 +41,6 @@ import {
} from './const'; } from './const';
import FileCard from './FileCard'; import FileCard from './FileCard';
const siderStyle: React.CSSProperties = {
backgroundColor: '#fafafa',
padding: 10,
flexBasis: 400,
flexShrink: 0,
};
// type EditableTableProps = Parameters<typeof Table>[0];
const ReviewPage = () => { const ReviewPage = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
@ -78,6 +70,7 @@ const ReviewPage = () => {
const [otherReason, setOtherReason] = useState(''); const [otherReason, setOtherReason] = useState('');
const [solution, setSolution] = useState(''); const [solution, setSolution] = useState('');
const [otherSolution, setOtherSolution] = useState(''); const [otherSolution, setOtherSolution] = useState('');
const [imageLoading, setImageLoading] = useState(false);
useEffect(() => { useEffect(() => {
if (reason) { if (reason) {
@ -89,6 +82,7 @@ const ReviewPage = () => {
setSelectedFileId(index); setSelectedFileId(index);
if (!requestData['Files'][index]) { if (!requestData['Files'][index]) {
setSelectedFileData('FAILED_TO_LOAD_FILE'); setSelectedFileData('FAILED_TO_LOAD_FILE');
setImageLoading(false);
return; return;
} }
const fileName = requestData['Files'][index]['File Name']; const fileName = requestData['Files'][index]['File Name'];
@ -101,12 +95,14 @@ const ReviewPage = () => {
console.log('URL: ' + fileURL); console.log('URL: ' + fileURL);
} else { } else {
setSelectedFileData('FAILED_TO_LOAD_FILE'); setSelectedFileData('FAILED_TO_LOAD_FILE');
setImageLoading(false);
} }
}; };
console.log(dataSource); console.log(dataSource);
const loadCurrentRequest = (requestIndex) => { const loadCurrentRequest = (requestIndex) => {
setLoading(true); setLoading(true);
setImageLoading(true);
fetchAllRequests( fetchAllRequests(
filterDateRange, filterDateRange,
filterSubsidiaries, filterSubsidiaries,
@ -145,7 +141,6 @@ const ReviewPage = () => {
tableRows.push(instance); tableRows.push(instance);
} }
setDataSource(tableRows); setDataSource(tableRows);
setLoading(false);
setAndLoadSelectedFile(data, 0); setAndLoadSelectedFile(data, 0);
}) })
.finally(() => { .finally(() => {
@ -411,14 +406,12 @@ const ReviewPage = () => {
height: fullscreen ? 'calc(100% - 32px)' : 'calc(100% - 32px)', height: fullscreen ? 'calc(100% - 32px)' : 'calc(100% - 32px)',
maxWidth: '100%', maxWidth: '100%',
display: 'flex', display: 'flex',
background: '#efefef',
}} }}
> >
<div <div
style={{ style={{
textAlign: 'center', textAlign: 'center',
color: '#fff', color: '#fff',
backgroundColor: '#efefef',
height: '100%', height: '100%',
display: 'flex', display: 'flex',
flexBasis: '200px', flexBasis: '200px',
@ -434,7 +427,7 @@ const ReviewPage = () => {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'start', alignItems: 'start',
flexGrow: 0, flexGrow: 0,
padding: '0 4px', padding: '0',
}} }}
> >
<div <div
@ -459,6 +452,7 @@ const ReviewPage = () => {
isSelected={index === selectedFileId} isSelected={index === selectedFileId}
onClick={() => { onClick={() => {
setAndLoadSelectedFile(currentRequest, index); setAndLoadSelectedFile(currentRequest, index);
setImageLoading(true);
}} }}
setIsReasonModalOpen={setIsReasonModalOpen} setIsReasonModalOpen={setIsReasonModalOpen}
/> />
@ -478,14 +472,14 @@ const ReviewPage = () => {
<b>Request ID</b> <b>Request ID</b>
<Input <Input
size='small' size='small'
style={{ margin: '4px 0px 6px' }} style={{ margin: '2px 0px 4px' }}
readOnly readOnly
value={currentRequest ? currentRequest.RequestID : ''} value={currentRequest ? currentRequest.RequestID : ''}
/> />
<b>Redemption</b> <b>Redemption</b>
<Input <Input
size='small' size='small'
style={{ margin: '4px 0px 6px' }} style={{ margin: '2px 0px 4px' }}
readOnly readOnly
value={ value={
currentRequest?.RedemptionID currentRequest?.RedemptionID
@ -493,17 +487,17 @@ const ReviewPage = () => {
: '' : ''
} }
/> />
<b>Uploaded date</b> <b>Created date</b>
<Input <Input
size='small' size='small'
style={{ margin: '4px 0px 6px' }} style={{ margin: '2px 0px 4px' }}
readOnly readOnly
value={currentRequest ? currentRequest.created_at : ''} value={currentRequest ? currentRequest.created_at : ''}
/> />
<b>Request time</b> <b>Request time</b>
<Input <Input
size='small' size='small'
style={{ margin: '4px 0px 6px' }} style={{ margin: '2px 0px 4px' }}
readOnly readOnly
value={ value={
currentRequest currentRequest
@ -514,7 +508,7 @@ const ReviewPage = () => {
<b>Processing time</b> <b>Processing time</b>
<Input <Input
size='small' size='small'
style={{ margin: '4px 0px 6px' }} style={{ margin: '2px 0px 4px' }}
readOnly readOnly
value={ value={
currentRequest currentRequest
@ -525,7 +519,7 @@ const ReviewPage = () => {
<b>Raw accuracy</b> <b>Raw accuracy</b>
<Input <Input
size='small' size='small'
style={{ margin: '4px 0px 6px' }} style={{ margin: '2px 0px 4px' }}
readOnly readOnly
value={currentRequest ? currentRequest['raw_accuracy'] : ''} value={currentRequest ? currentRequest['raw_accuracy'] : ''}
/> />
@ -536,13 +530,14 @@ const ReviewPage = () => {
</div> </div>
<div <div
style={{ style={{
borderLeft: '1px solid #ccc', // borderLeft: '1px solid #ccc',
height: '100%', height: '100%',
// width: '300px', // width: '300px',
flexGrow: 1, flexGrow: 1,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
position: 'relative', position: 'relative',
padding: '0 16px',
// overflow: 'auto' // overflow: 'auto'
}} }}
> >
@ -551,36 +546,40 @@ const ReviewPage = () => {
flexGrow: 1, flexGrow: 1,
textAlign: 'center', textAlign: 'center',
overflow: 'auto', overflow: 'auto',
padding: '4px',
}} }}
> >
{selectedFileData === 'FAILED_TO_LOAD_FILE' ? ( <Spin spinning={imageLoading}>
<p style={{ color: '#333' }}>Failed to load file.</p> {selectedFileData === 'FAILED_TO_LOAD_FILE' ? (
) : fileExtension === 'pdf' ? ( <p style={{ color: '#333' }}>Failed to load file.</p>
<Viewer fileUrl={selectedFileData} /> ) : fileExtension === 'pdf' ? (
) : ( <Viewer fileUrl={selectedFileData} />
<> ) : (
<img <>
style={{ <img
maxHeight: '100%', style={{
maxWidth: '100%', maxHeight: '100%',
height: 'auto', maxWidth: '100%',
width: 'auto', height: 'auto',
cursor: 'zoom-in', width: 'auto',
}} cursor: 'zoom-in',
src={selectedFileData} }}
alt='file' src={selectedFileData}
onClick={() => setLightBox(true)} alt='file'
/> onClick={() => setLightBox(true)}
onLoad={() => {
setImageLoading(false);
}}
/>
{lightBox && ( {lightBox && (
<Lightbox <Lightbox
image={selectedFileData} image={selectedFileData}
onClose={() => setLightBox(false)} onClose={() => setLightBox(false)}
></Lightbox> ></Lightbox>
)} )}
</> </>
)} )}
</Spin>
</div> </div>
<div <div
@ -588,6 +587,7 @@ const ReviewPage = () => {
flexGrow: 0, flexGrow: 0,
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
margin: '8px 0 0',
alignItems: 'center', alignItems: 'center',
}} }}
> >
@ -596,7 +596,6 @@ const ReviewPage = () => {
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
margin: '8px 0 4px',
}} }}
> >
<h3 style={{ margin: '0 8px ' }}> <h3 style={{ margin: '0 8px ' }}>
@ -688,18 +687,33 @@ const ReviewPage = () => {
</div> </div>
</div> </div>
</div> </div>
<div style={siderStyle}> <div
<div> style={{
// backgroundColor: '#fafafa',
padding: 8,
flexBasis: 400,
flexShrink: 0,
display: 'flex',
flexDirection: 'column',
}}
>
<div style={{ flexGrow: 1 }}>
{dataSource?.map((data) => { {dataSource?.map((data) => {
return ( return (
<div style={{ margin: '0 0 8px' }}> <div style={{ margin: '0 0 8px' }}>
<div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", margin: '0 0 4px' }}> <div
<p style={{ fontWeight: 'bold', margin: 0 }}> style={{
{data.key} display: 'flex',
</p> justifyContent: 'space-between',
alignItems: 'center',
margin: '0 0 4px',
}}
>
<p style={{ fontWeight: 'bold', margin: 0 }}>{data.key}</p>
<Button <Button
shape='round' shape='round'
type="primary" ghost type='primary'
ghost
icon={<CopyOutlined />} icon={<CopyOutlined />}
size='small' size='small'
/> />
@ -725,6 +739,9 @@ const ReviewPage = () => {
); );
})} })}
</div> </div>
<Button type='primary' shape='round' size='middle' style={{width: '120px', alignSelf: 'flex-end'}}>
Save
</Button>
</div> </div>
</div> </div>
<Modal <Modal

2
cope2n-fe/src/request/api.ts
View File

@ -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 AXIOS_TIMEOUT_MS = 30 * 60 * 1000; // This config sastified long-live upload file request
const EXPIRED_PASSWORD_SIGNAL = 'expired_password'; const EXPIRED_PASSWORD_SIGNAL = 'expired_password';
export const baseURL = environment === 'development' ? 'http://107.120.133.27:9881/api' : '/api'; export const baseURL = environment === 'development' ? 'http://107.120.133.27:9000/api' : '/api';
// export const baseURL = '/api'; // export const baseURL = '/api';

3
cope2n-fe/src/utils/field-value-process.ts
View File

@ -21,6 +21,9 @@ const normalizeData = (key, value) => {
if (["imei_number", "purchase_date"].includes(key) && typeof(value) === "string") { if (["imei_number", "purchase_date"].includes(key) && typeof(value) === "string") {
value = value.split(","); value = value.split(",");
} }
if(key === 'imei_number' && value === null){
value = [null]
}
if (typeof (value) === "object" && value?.length > 0) { if (typeof (value) === "object" && value?.length > 0) {
for (let i = 0; i < value.length; i++) { for (let i = 0; i < value.length; i++) {
value[i] = normalizeData("text", value[i]); value[i] = normalizeData("text", value[i]);