alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update proof GLD

master
Anna Ho 1 year ago
parent
65240bdb21
commit
038b5da8cc
7 changed files with 603 additions and 2 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +244
    -0
      src/pages/ProofReply_GLD/ApplicationDetails.js
  2. +108
    -0
      src/pages/ProofReply_GLD/ProofForm.js
  3. +111
    -0
      src/pages/ProofReply_GLD/UploadFileTable.js
  4. +133
    -0
      src/pages/ProofReply_GLD/index.js
  5. +1
    -1
      src/pages/ProofReply_Public/ProofForm.js
  6. +1
    -1
      src/pages/ProofSearch/DataGrid.js
  7. +5
    -0
      src/routes/GLDUserRoutes.js

+ 244
- 0
src/pages/ProofReply_GLD/ApplicationDetails.js View File

@@ -0,0 +1,244 @@
// material-ui
import {
FormControl,
Grid,
Typography,
FormLabel,
TextField,
} from '@mui/material';

import { useFormik } from 'formik';
import * as React from "react";
import * as DateUtils from "utils/DateUtils"
import { useParams } from "react-router-dom";
import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
import * as StatusUtils from "../PublicNotice/ListPanel/PublicNoteStatusUtils";
import FileList from "components/FileList"
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = ({ formData, }) => {

const params = useParams();

const [data, setData] = React.useState({});
//const [proofId, setProofId] = React.useState();

React.useEffect(() => {
if (formData) {
setData(formData);
//setProofId(formData.id);
}
}, [formData]);

const formik = useFormik({
enableReinitialize: true,
initialValues: data,
});

const DisplayField = ({ name, width }) => {
return <TextField
fullWidth
disabled
size="small"
onChange={formik.handleChange}
id={name}
name={name}
value={formik.values[name]}
variant="outlined"
sx={
{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
width: width ? width : '100%'
}
}
/>;
}

function currencyFormat(num) {
let val = num ? num : 0;
return val.toLocaleString('en-US', {
minimumFractionDigits: 2
});
}


return (
<MainCard elevation={0}
border={false}
content={false}
>
<Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
Public Notice: Proofreading Reply
</Typography>
<form>
<Grid container direction="column">
<Grid item xs={12} md={12} lg={12}>
<Grid container direction="row" justifyContent="space-between"
alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>App No.:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<DisplayField name="appNo" />
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid container alignItems={"left"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Status:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
<FormControl variant="outlined">
{StatusUtils.getStatusByText(data.appStatus)}
</FormControl>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid container direction="row" justifyContent="space-between"
alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Applicant:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth disabled >
{data.orgId === null ?
<DisplayField name="contactPerson" />
:
<DisplayField name="applicant" />
}
</FormControl>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Issue No:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<DisplayField name="issueNoStr" />
</Grid>
</Grid>
</Grid>
</Grid>
<Grid container direction="row" justifyContent="space-between"
alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Contact Person:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<DisplayField name="contactPerson" />

</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Issue Date:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<DisplayField name="issueDateStr" />
</Grid>
</Grid>
</Grid>
</Grid>
{/* <Grid container direction="row" justifyContent="space-between"
alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
<Grid container alignItems="left">
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>Remarks:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<Stack direction="row">
<DisplayField name="appRemarks" />
</Stack>
</Grid>
</Grid>
</Grid>
</Grid> */}

<Grid container direction="row" justifyContent="space-between"
alignItems="center">

<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography>Print file：</Typography>
</Grid>
</Grid>
<FileList
refId={params.id}
refType={"proof"}
dateHideable={true}
disablePagination
disableSelectionOnClick
disableColumnMenu
disableColumnSelector
hideFooter
/>
</Grid>

<Grid item xs={12} md={4} lg={4} sx={{ mb: 1, }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={12} lg={12}
sx={{ display: 'flex', alignItems: 'center' }}>
<Typography>Deadline for payment and reply：</Typography>
</Grid>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
<Typography>{DateUtils.dateStr(data.returnBeforeDate)} Before 2:00 PM</Typography>
</Grid>
<Grid item xs={12} md={3} lg={3}
sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
<Typography>Fee:</Typography>
</Grid>
<Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
<Typography style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</Typography>
</Grid>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
{
formik.values.groupType == "A"
?
<Typography>( {data.noOfPages} page x $6,552 )</Typography>
:
<Typography>( {data.length} cm x {data.colCount == 2 ? "$364 Double Column" : "$182 Single Column"} )</Typography>
}
</Grid>
</Grid>
</Grid>
</Grid>

</Grid>
</Grid>
</form>
</MainCard>
);
};

export default ApplicationDetailCard;

+ 108
- 0
src/pages/ProofReply_GLD/ProofForm.js View File

@@ -0,0 +1,108 @@
// material-ui
import {
Typography,
Grid,
} from '@mui/material';
import FileList from "components/FileList"
import MainCard from "components/MainCard";
import * as React from "react";
import { useParams } from "react-router-dom";
import { useFormik } from 'formik';
import * as DateUtils from "utils/DateUtils"


// ==============================|| DASHBOARD - DEFAULT ||============================== //


const FormPanel = ({ formData }) => {

const [data, setData] = React.useState({});
const params = useParams();

React.useEffect(() => {
if (formData) {
setData(formData);
}
}, [formData]);

const formik = useFormik({
enableReinitialize: true,
initialValues: data,
});



const isOverTime = () => {
let returnBeforeDate = DateUtils.convertToDate(formik.values?.returnBeforeDate);
if (!returnBeforeDate) return true;
returnBeforeDate = returnBeforeDate.setHours(14, 0, 0, 0);

let current = new Date();
return current.getTime() > returnBeforeDate;
}



return (
<MainCard xs={12} md={12} lg={12}
border={false}
content={false}>

<Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
Public Notice: Proofreading Reply
</Typography>

<form onSubmit={formik.handleSubmit}>

{
formik.values.replyDate ?
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
<Grid item xs={12} md={12} textAlign="left">
Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)}
</Grid>
<Grid item xs={12} md={12} textAlign="left">
Reply: {formik.values.action ? (<span style={{color:'green'}}>Ready for printing (correct manuscript).</span>) : (<span style={{color:'red'}}>Not ready for printing (requires modification).</span>)}
</Grid>
{
formik.values.action ?
null
:
<Grid item xs={12} md={12} textAlign="left">
<FileList
refId={params.id}
refType={"proofReply"}
dateHideable={true}
disablePagination
disableSelectionOnClick
disableColumnMenu
disableColumnSelector
hideFooter
/>
</Grid>
}

</Grid>
:
(
isOverTime() ?
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
<Grid item xs={12} md={12} textAlign="left">
The response timed out, please apply again.
</Grid>
</Grid>
:
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
<Grid item xs={12} md={12} textAlign="left">
Wait for reply.
</Grid>
</Grid>
)


}
</form>
</MainCard>
);
};

export default FormPanel;

+ 111
- 0
src/pages/ProofReply_GLD/UploadFileTable.js View File

@@ -0,0 +1,111 @@
// material-ui
import * as React from 'react';
import {
DataGrid,
GridActionsCellItem,
GridRowModes
} from "@mui/x-data-grid";
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
import {useEffect} from "react";
// import {useNavigate} from "react-router-dom";
// import { useTheme } from '@mui/material/styles';
import {
Box,
Stack
} from '@mui/material';
// ==============================|| EVENT TABLE ||============================== //

export default function UploadFileTable({recordList, setRecordList,}) {
const [rows, setRows] = React.useState(recordList);
const [rowModesModel,setRowModesModel] = React.useState({});
// const theme = useTheme();

// const navigate = useNavigate()

useEffect(() => {
setRows(recordList);
// console.log(disableDelete);
}, [recordList]);

function NoRowsOverlay() {
return (
<Stack height="100%" alignItems="center" justifyContent="center">
No File Record
{/* <pre>(rows=&#123;[]&#125;)</pre> */}
</Stack>
);
}

const handleCancelClick = (id) => () => {
setRowModesModel({
...rowModesModel,
[id]: { mode: GridRowModes.View, ignoreModifications: true },
});
console.log("Starting Delete")
const editedRow = rows.find((row) => row.id === id);
console.log(editedRow)
console.log(editedRow.isNew)
setRecordList(rows.filter((row) => row.id !== id));
setRows(rows.filter((row) => row.id !== id));
}

const columns = [
{
field: 'actions',
type: 'actions',
headerName: '',
width: 30,
cellClassName: 'actions',
// hide:true,
getActions: ({id}) => {
return [
<GridActionsCellItem
key="OutSave"
icon={<RemoveCircleOutlineIcon/>}
label="delete"
className="textPrimary"
onClick={handleCancelClick(id)}
color="error"
/>]
},
},
{
id: 'name',
field: 'name',
headerName: '檔案名稱',
flex: 1,
},
{
id: 'size',
field: 'size',
headerName: '檔案大小',
valueGetter: (params) => {
// console.log(params)
return Math.ceil(params.value/1024)+" KB";
},
flex: 1,
},
];

return (
<Box
style={{ height: '200px', width: '75%' }}
>
<DataGrid
rows={rows}
columns={columns}
editMode="row"
sx={{border:1}}
rowModesModel={rowModesModel}
components={{ NoRowsOverlay, }}
// hideFooterPagination={true}
disablePagination
disableSelectionOnClick
disableColumnMenu
disableColumnSelector
hideFooter
/>
</Box>
);
}

+ 133
- 0
src/pages/ProofReply_GLD/index.js View File

@@ -0,0 +1,133 @@
// material-ui
import {
Grid,
Typography,
Stack,
Box
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as DateUtils from "utils/DateUtils";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails')));
const ProofForm = Loadable(React.lazy(() => import('./ProofForm')));
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%',
height: '100%',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E',
backgroundPosition: 'right'
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {
const params = useParams();
const navigate = useNavigate()

const [record, setRecord] = React.useState();
const [onReady, setOnReady] = React.useState(false);

React.useEffect(() => {
loadForm();
}, []);

React.useEffect(() => {
setOnReady(true);
}, [record]);


const loadForm = () => {
if (params.id > 0) {

HttpUtils.get({
url: UrlUtils.GET_PROOF + "/" + params.id,
onSuccess: (responseData) => {
if(!responseData.data?.id){
navigate("/proof/search");
}
responseData.data["phoneNumber"] = JSON.parse(responseData.data.contactTelNo).phoneNumber;
responseData.data["tel_countryCode"] = JSON.parse(responseData.data.contactTelNo).countryCode;

responseData.data["faxNumber"] = JSON.parse(responseData.data.contactFaxNo).faxNumber;
responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode;

responseData.data["issueNoStr"] = responseData.data.issueYear
+ " Vol. " + zeroPad(responseData.data.issueVolume, 3)
+ ", No. " + zeroPad(responseData.data.issueNo, 2);

responseData.data["issueDateStr"] = DateUtils.dateFormat(responseData.data.issueDate, "D MMM YYYY (ddd)");

responseData.data["groupType"] = responseData.data.groupNo.charAt(0);
responseData.data["action"] = responseData.data.replyDate ? responseData.data.action : true;
setRecord(responseData.data);
}
});
}
}

function zeroPad(num, places) {
num = num ? num : 0;
var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num;
}


return (
!onReady ?
<LoadingComponent />
:
(
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
<Grid item xs={12} width="100%">
<div style={BackgroundHead} width="100%">
<Stack direction="row" height='70px'>
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>校對記錄</Typography>
</Stack>
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} >
<Grid container justifyContent="flex-start" alignItems="center" >
<center>
<Grid item xs={12} md={12} sx={{ pt: 2 }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
<ApplicationDetails
formData={record}
style={{
display: "flex",
height: "100%",
flex: 1
}}
/>
</Box>
</Grid>
<Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
<ProofForm
formData={record}
/>
</Box>
</Grid>
</center>
</Grid>
</Grid>
{/*row 2*/}
</Grid >

)


);
};

export default Index;

+ 1
- 1
src/pages/ProofReply_Public/ProofForm.js View File

@@ -148,7 +148,7 @@ const FormPanel = ({ formData }) => {
校對回覆日期: {DateUtils.datetimeStr_Cht(formik.values.replyDate)}
</Grid>
<Grid item xs={12} md={12} textAlign="left">
校對回覆: {formik.values.action ? "可以付印（稿件正確）" : "未能付印（需要修改）"}
校對回覆: {formik.values.action ? (<span style={{color:'green'}}>可以付印（稿件正確）</span>): (<span style={{color:'red'}}>未能付印（需要修改）</span>)}
</Grid>
{
formik.values.action ?


+ 1
- 1
src/pages/ProofSearch/DataGrid.js View File

@@ -17,7 +17,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
}, [recordList]);

const handleEditClick = (params) => () => {
navigate('/application/'+ params.row.appId);
navigate('/proof/reply/'+ params.row.id);
};




+ 5
- 0
src/routes/GLDUserRoutes.js View File

@@ -11,6 +11,7 @@ const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail_G
const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD')));
const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch')));
const ProofCreate_FromApp = Loadable(lazy(() => import('pages/ProofCreate_FromApp')));
const ProofReply_GLD = Loadable(lazy(() => import('pages/ProofReply_GLD')));
// ==============================|| MAIN ROUTING ||============================== //

const GLDUserRoutes = {
@@ -43,6 +44,10 @@ const GLDUserRoutes = {
{
path: '/proof/create/:id',
element: <ProofCreate_FromApp/>
},
{
path: '/proof/reply/:id',
element: <ProofReply_GLD/>
}
]
},


Write Preview
Loading…
Cancel
Save