@@ -28,6 +28,8 @@ const FormPanel = ({ formData }) => { | |||||
const [columnPrice, setColumnPrice] = React.useState(ComboData.proofPrice[0]); | const [columnPrice, setColumnPrice] = React.useState(ComboData.proofPrice[0]); | ||||
const [attachments, setAttachments] = React.useState([]); | const [attachments, setAttachments] = React.useState([]); | ||||
const [wait, setWait] = React.useState(false); | |||||
const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); | const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); | ||||
const [warningText, setWarningText] = React.useState(""); | const [warningText, setWarningText] = React.useState(""); | ||||
@@ -45,10 +47,10 @@ const FormPanel = ({ formData }) => { | |||||
React.useEffect(() => { | React.useEffect(() => { | ||||
if (!attachments || attachments.length <= 0){ | |||||
formik.setFieldValue("length",0); | |||||
formik.setFieldValue("noOfPages",0); | |||||
formik.setFieldValue("fee",0); | |||||
if (!attachments || attachments.length <= 0) { | |||||
formik.setFieldValue("length", 0); | |||||
formik.setFieldValue("noOfPages", 0); | |||||
formik.setFieldValue("fee", 0); | |||||
return; | return; | ||||
} | } | ||||
@@ -56,10 +58,12 @@ const FormPanel = ({ formData }) => { | |||||
}, [attachments]); | }, [attachments]); | ||||
const doCalculate=()=>{ | |||||
if (!attachments || attachments.length <= 0){ | |||||
setWarningText("無法計算,請上傳有效文件。"); | |||||
const doCalculate = () => { | |||||
setWait(true); | |||||
if (!attachments || attachments.length <= 0) { | |||||
setWarningText("Unable to calculate, please upload a valid document."); | |||||
setIsWarningPopUp(true); | setIsWarningPopUp(true); | ||||
setWait(false); | |||||
return; | return; | ||||
} | } | ||||
HttpUtils.postWithFiles({ | HttpUtils.postWithFiles({ | ||||
@@ -69,23 +73,25 @@ const FormPanel = ({ formData }) => { | |||||
}, | }, | ||||
files: attachments, | files: attachments, | ||||
onSuccess: function (responseData) { | onSuccess: function (responseData) { | ||||
if(responseData.data.detail){ | |||||
setWarningText("無法計算,請上傳有效文件或手動輸入。"); | |||||
if (responseData.data.detail) { | |||||
setWarningText("Unable to calculate, please upload a valid document or input manually."); | |||||
setIsWarningPopUp(true); | setIsWarningPopUp(true); | ||||
return; | return; | ||||
} | } | ||||
formik.setFieldValue("length",responseData.data.length); | |||||
formik.setFieldValue("length", responseData.data.length); | |||||
let colValue = 0; | let colValue = 0; | ||||
setColumnPrice(ComboData.proofPrice.find(obj=>{ | |||||
setColumnPrice(ComboData.proofPrice.find(obj => { | |||||
colValue = obj.value; | colValue = obj.value; | ||||
return obj.colCount === responseData.data.column | return obj.colCount === responseData.data.column | ||||
})); | })); | ||||
formik.setFieldValue("noOfPages",responseData.data.no_of_page); | |||||
formik.setFieldValue("fee",(data.groupType == "A"?6552*responseData.data.no_of_page :responseData.data.length*colValue)); | |||||
formik.setFieldValue("noOfPages", responseData.data.no_of_page); | |||||
formik.setFieldValue("fee", (data.groupType == "A" ? 6552 * responseData.data.no_of_page : responseData.data.length * colValue)); | |||||
setWait(false); | |||||
}, | }, | ||||
onError: function(){ | |||||
setWarningText("無法計算,請手動輸入。"); | |||||
onError: function () { | |||||
setWarningText("Unable to calculate, please input manually."); | |||||
setIsWarningPopUp(true); | setIsWarningPopUp(true); | ||||
setWait(false); | |||||
} | } | ||||
}); | }); | ||||
} | } | ||||
@@ -95,7 +101,7 @@ const FormPanel = ({ formData }) => { | |||||
initialValues: data, | initialValues: data, | ||||
onSubmit: values => { | onSubmit: values => { | ||||
if (!attachments || attachments.length <= 0) { | if (!attachments || attachments.length <= 0) { | ||||
setWarningText("請選擇上傳檔案"); | |||||
setWarningText("Please upload file."); | |||||
setIsWarningPopUp(true); | setIsWarningPopUp(true); | ||||
return; | return; | ||||
} | } | ||||
@@ -121,13 +127,13 @@ const FormPanel = ({ formData }) => { | |||||
let file = event.target.files[0]; | let file = event.target.files[0]; | ||||
if (file) { | if (file) { | ||||
if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) { | if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) { | ||||
setWarningText("請上傳有效檔案 (檔案格式: .pdf)"); | |||||
setWarningText("Please upload a valid file (File format: .pdf)."); | |||||
setIsWarningPopUp(true); | setIsWarningPopUp(true); | ||||
document.getElementById("uploadFileBtn").value = ""; | document.getElementById("uploadFileBtn").value = ""; | ||||
return; | return; | ||||
} | } | ||||
if (file.size >= (10 * 1024 * 1034)) { | if (file.size >= (10 * 1024 * 1034)) { | ||||
setWarningText("上傳檔案大小應<10MB"); | |||||
setWarningText("The file size for uploading should be less than 10MB"); | |||||
setIsWarningPopUp(true); | setIsWarningPopUp(true); | ||||
return; | return; | ||||
} | } | ||||
@@ -186,17 +192,27 @@ const FormPanel = ({ formData }) => { | |||||
<UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} /> | <UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} /> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12}> | |||||
<Button | |||||
size="large" | |||||
variant="contained" | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end' | |||||
}}> | |||||
Calculate | |||||
</Button> | |||||
</Grid> | |||||
{ | |||||
wait ? | |||||
<Grid item xs={12} md={12}> | |||||
Doing calculate, please wait ... | |||||
</Grid> | |||||
: | |||||
<Grid item xs={12} md={12}> | |||||
<Button | |||||
size="large" | |||||
variant="contained" | |||||
onClick={doCalculate} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end' | |||||
}}> | |||||
Calculate | |||||
</Button> | |||||
</Grid> | |||||
} | |||||
{ | { | ||||
formik.values.groupType == "A" ? | formik.values.groupType == "A" ? | ||||
@@ -352,7 +368,7 @@ const FormPanel = ({ formData }) => { | |||||
</form> | </form> | ||||
<div> | <div> | ||||
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} > | <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} > | ||||
<DialogTitle>注意</DialogTitle> | |||||
<DialogTitle>Warning</DialogTitle> | |||||
<DialogContent style={{ display: 'flex', }}> | <DialogContent style={{ display: 'flex', }}> | ||||
<Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography> | <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography> | ||||
</DialogContent> | </DialogContent> | ||||
@@ -0,0 +1,126 @@ | |||||
// material-ui | |||||
import { | |||||
Grid, | |||||
Typography, | |||||
Stack, | |||||
Button, | |||||
} from '@mui/material'; | |||||
import * as UrlUtils from "utils/ApiPathConst"; | |||||
import * as React from "react"; | |||||
import * as HttpUtils from "utils/HttpUtils"; | |||||
import { useParams } from "react-router-dom"; | |||||
import { useNavigate } from "react-router-dom"; | |||||
import * as DateUtils from "utils/DateUtils" | |||||
import Loadable from 'components/Loadable'; | |||||
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | |||||
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_PAY + "/" + params.id, | |||||
onSuccess: (responseData) => { | |||||
if (!responseData.data?.id) { | |||||
navigate("/proof/search"); | |||||
} | |||||
setRecord(responseData.data); | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
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={8} > | |||||
<Typography variant="h2" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}> | |||||
公共啟事:交對完成及付款 | |||||
</Typography> | |||||
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}> | |||||
我們已收到申請編號: {record?.appNo} 的稿件交對確定及可付印的指示。 | |||||
<br /><br /> | |||||
請於 <span style={{ color: "red" }}>{DateUtils.dateStr_Cht(record?.returnBeforeDate)} 下午 2:00 前</span> 完成繳費,我們將於收到繳費確認後處理刊出事宜。 | |||||
<br /><br /> | |||||
如你在憲報期數 {record?.issueYear} 年 {record?.issueVolume} 卷, 第 {record?.issueNo} 期內有多於一個公共啟事的申請,你可選擇完成所有此期所有稿件交對確定後,於繳費期限前在「我的公共啟事」內合併付款。 | |||||
</Typography> | |||||
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}> | |||||
請按以下完成繳費: | |||||
<Button | |||||
component="span" | |||||
variant="contained" | |||||
size="large" | |||||
sx={{ m: 4}} | |||||
>繼續:網上繳費</Button> | |||||
或 | |||||
<Button | |||||
component="span" | |||||
variant="contained" | |||||
size="large" | |||||
sx={{ m: 4}} | |||||
onClick={()=>{ | |||||
navigate("/publicNotice"); | |||||
}} | |||||
>返回「我的公共啟事」</Button> | |||||
</Typography> | |||||
</Grid> | |||||
</center> | |||||
</Grid> | |||||
</Grid> | |||||
{/*row 2*/} | |||||
</Grid > | |||||
) | |||||
); | |||||
}; | |||||
export default Index; |
@@ -0,0 +1,115 @@ | |||||
// material-ui | |||||
import { | |||||
Grid, | |||||
Typography, | |||||
Stack, | |||||
Button, | |||||
} from '@mui/material'; | |||||
import * as UrlUtils from "utils/ApiPathConst"; | |||||
import * as React from "react"; | |||||
import * as HttpUtils from "utils/HttpUtils"; | |||||
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'))); | |||||
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_PAY + "/" + params.id, | |||||
onSuccess: (responseData) => { | |||||
if (!responseData.data?.id) { | |||||
navigate("/proof/search"); | |||||
} | |||||
setRecord(responseData.data); | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
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={8} > | |||||
<Typography variant="h2" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}> | |||||
公共啟事:交對完成 | |||||
</Typography> | |||||
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}> | |||||
我們已收到你已確定申請編號: {record?.appNo} 的稿件交對確定及可付印的指示,並將安排刊登於憲報 | |||||
期數 {record?.appNo} 年 {record?.issueVolume} 卷 第 {record?.issueNo} 期內。 | |||||
<br/><br/> | |||||
此公共啟事申請的費用將於下期發出的繳費發票時收取,請依時繳費。 | |||||
</Typography> | |||||
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}> | |||||
<Button | |||||
component="span" | |||||
variant="contained" | |||||
size="large" | |||||
sx={{ m: 4}} | |||||
onClick={()=>{ | |||||
navigate("/publicNotice"); | |||||
}} | |||||
>返回「我的公共啟事」</Button> | |||||
</Typography> | |||||
</Grid> | |||||
</center> | |||||
</Grid> | |||||
</Grid> | |||||
{/*row 2*/} | |||||
</Grid > | |||||
) | |||||
); | |||||
}; | |||||
export default Index; |
@@ -0,0 +1,16 @@ | |||||
import * as React from "react"; | |||||
import Loadable from 'components/Loadable'; | |||||
const Pay = Loadable(React.lazy(() => import('./Pay'))); | |||||
const Pay_Creditor = Loadable(React.lazy(() => import('./Pay_Creditor'))); | |||||
const Index = () => { | |||||
return ( | |||||
JSON.parse(localStorage.getItem('userData')).creditor? | |||||
<Pay_Creditor/> | |||||
: | |||||
<Pay/> | |||||
); | |||||
} | |||||
export default Index; |
@@ -92,13 +92,13 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | ||||
<Grid container alignItems={"center"}> | |||||
<Grid container alignItems={"left"}> | |||||
<Grid item xs={12} md={3} lg={3} | <Grid item xs={12} md={3} lg={3} | ||||
sx={{ display: 'flex', alignItems: 'center' }}> | sx={{ display: 'flex', alignItems: 'center' }}> | ||||
<FormLabel>申請狀態:</FormLabel> | <FormLabel>申請狀態:</FormLabel> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | |||||
<Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormControl variant="outlined"> | <FormControl variant="outlined"> | ||||
{StatusUtils.getStatusByText(data.appStatus)} | {StatusUtils.getStatusByText(data.appStatus)} | ||||
</FormControl> | </FormControl> | ||||
@@ -191,7 +191,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}> | <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}> | ||||
<Grid container alignItems={"center"}> | <Grid container alignItems={"center"}> | ||||
<Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}> | ||||
<FormLabel>請下載下列印刷稿檔案,並仔細校對:</FormLabel> | |||||
<Typography>請下載下列印刷稿檔案,並仔細校對:</Typography> | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
<FileList | <FileList | ||||
@@ -211,25 +211,25 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<Grid container alignItems={"center"}> | <Grid container alignItems={"center"}> | ||||
<Grid item xs={12} md={12} lg={12} | <Grid item xs={12} md={12} lg={12} | ||||
sx={{ display: 'flex', alignItems: 'center' }}> | sx={{ display: 'flex', alignItems: 'center' }}> | ||||
<FormLabel>繳費及返稿最後限期:</FormLabel> | |||||
<Typography>繳費及返稿最後限期:</Typography> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | ||||
<FormLabel>{DateUtils.dateStr_Cht(data.returnBeforeDate)} 下午 2:00前</FormLabel> | |||||
<Typography>{DateUtils.dateStr_Cht(data.returnBeforeDate)} 下午 2:00前</Typography> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={3} lg={3} | <Grid item xs={12} md={3} lg={3} | ||||
sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | ||||
<FormLabel>應繳費用:</FormLabel> | |||||
<Typography>應繳費用:</Typography> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | ||||
<FormLabel style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</FormLabel> | |||||
<Typography style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</Typography> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | ||||
{ | { | ||||
formik.values.groupType == "A" | formik.values.groupType == "A" | ||||
? | ? | ||||
<FormLabel>( {data.length} 頁 x $6,552 )</FormLabel> | |||||
<Typography>( {data.noOfPages} 頁 x $6,552 )</Typography> | |||||
: | : | ||||
<FormLabel>( {data.length} cm x {data.colCount == 2 ? "$364 二格位" : "$182 一格位"} )</FormLabel> | |||||
<Typography>( {data.length} cm x {data.colCount == 2 ? "$364 二格位" : "$182 一格位"} )</Typography> | |||||
} | } | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -31,6 +31,8 @@ const FormPanel = ({ formData }) => { | |||||
const [data, setData] = React.useState({}); | const [data, setData] = React.useState({}); | ||||
const [attachments, setAttachments] = React.useState([]); | const [attachments, setAttachments] = React.useState([]); | ||||
const [actionValue, setActionValue] = React.useState(true); | |||||
const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); | const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); | ||||
const [warningText, setWarningText] = React.useState(""); | const [warningText, setWarningText] = React.useState(""); | ||||
@@ -50,24 +52,34 @@ const FormPanel = ({ formData }) => { | |||||
vaild: yup.string().max(255, "請輸入你的登入密碼").required('請輸入你的登入密碼'), | vaild: yup.string().max(255, "請輸入你的登入密碼").required('請輸入你的登入密碼'), | ||||
}), | }), | ||||
onSubmit: values => { | onSubmit: values => { | ||||
if (!values.action) { | |||||
if (!actionValue) { | |||||
if (!attachments || attachments.length <= 0) { | if (!attachments || attachments.length <= 0) { | ||||
setWarningText("請選擇上傳檔案"); | setWarningText("請選擇上傳檔案"); | ||||
setIsWarningPopUp(true); | setIsWarningPopUp(true); | ||||
return; | return; | ||||
} | } | ||||
} | } | ||||
if (isOverTime()) { | |||||
setWarningText("回覆逾時,請重新申請。"); | |||||
setIsWarningPopUp(true); | |||||
return; | |||||
} | |||||
// console.log(values); | // console.log(values); | ||||
HttpUtils.postWithFiles({ | HttpUtils.postWithFiles({ | ||||
url: UrlUtils.REPLY_PROOF, | url: UrlUtils.REPLY_PROOF, | ||||
params: { | params: { | ||||
id: data.id, | id: data.id, | ||||
action: values.action, | |||||
action: actionValue, | |||||
vaild: values.vaild, | vaild: values.vaild, | ||||
}, | }, | ||||
files: attachments ? attachments : [], | files: attachments ? attachments : [], | ||||
onSuccess: function () { | onSuccess: function () { | ||||
navigate("/proof/search"); | |||||
if (actionValue) { | |||||
navigate("/proof/pay/"+params.id); | |||||
} else { | |||||
navigate("/proof/search"); | |||||
} | |||||
}, | }, | ||||
onFail: function (response) { | onFail: function (response) { | ||||
setWarningText("行動失敗: 請檢查內容並再次提交回覆"); | setWarningText("行動失敗: 請檢查內容並再次提交回覆"); | ||||
@@ -138,19 +150,25 @@ const FormPanel = ({ formData }) => { | |||||
<Grid item xs={12} md={12} textAlign="left"> | <Grid item xs={12} md={12} textAlign="left"> | ||||
校對回覆: {formik.values.action ? "可以付印(稿件正確)" : "未能付印(需要修改)"} | 校對回覆: {formik.values.action ? "可以付印(稿件正確)" : "未能付印(需要修改)"} | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12} textAlign="left"> | |||||
<FileList | |||||
lang="ch" | |||||
refId={params.id} | |||||
refType={"proofReply"} | |||||
dateHideable={true} | |||||
disablePagination | |||||
disableSelectionOnClick | |||||
disableColumnMenu | |||||
disableColumnSelector | |||||
hideFooter | |||||
/> | |||||
</Grid> | |||||
{ | |||||
formik.values.action ? | |||||
null | |||||
: | |||||
<Grid item xs={12} md={12} textAlign="left"> | |||||
<FileList | |||||
lang="ch" | |||||
refId={params.id} | |||||
refType={"proofReply"} | |||||
dateHideable={true} | |||||
disablePagination | |||||
disableSelectionOnClick | |||||
disableColumnMenu | |||||
disableColumnSelector | |||||
hideFooter | |||||
/> | |||||
</Grid> | |||||
} | |||||
</Grid> | </Grid> | ||||
: | : | ||||
( | ( | ||||
@@ -169,57 +187,67 @@ const FormPanel = ({ formData }) => { | |||||
id="action" | id="action" | ||||
name="action" | name="action" | ||||
defaultValue={true} | defaultValue={true} | ||||
onChange={(event) => { | |||||
setActionValue(event.target.value == "true" ? true : false); | |||||
}} | |||||
> | > | ||||
<FormControlLabel value={true} control={<Radio />} label="可以付印(稿件正確)" /> | <FormControlLabel value={true} control={<Radio />} label="可以付印(稿件正確)" /> | ||||
<FormControlLabel value={false} control={<Radio />} label="未能付印(需要修改)" /> | <FormControlLabel value={false} control={<Radio />} label="未能付印(需要修改)" /> | ||||
</RadioGroup> | </RadioGroup> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12} textAlign="left"> | |||||
請上載稿件修改的檔案: | |||||
</Grid> | |||||
<Grid item xs={12} md={12} textAlign="left"> | |||||
<input | |||||
id="uploadFileBtn" | |||||
name="file" | |||||
type="file" | |||||
accept=".pdf" | |||||
style={{ display: 'none' }} | |||||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | |||||
onChange={(event) => { | |||||
readFile(event) | |||||
}} | |||||
/> | |||||
<label htmlFor="uploadFileBtn"> | |||||
<Button | |||||
component="span" | |||||
variant="contained" | |||||
size="large" | |||||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | |||||
>上載</Button> | |||||
</label> | |||||
</Grid> | |||||
<Grid item xs={12} md={12} textAlign="left"> | |||||
<UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} /> | |||||
</Grid> | |||||
{ | |||||
actionValue ? | |||||
null | |||||
: | |||||
<> | |||||
<Grid item xs={12} md={12} textAlign="left"> | |||||
請上載稿件修改的檔案: | |||||
</Grid> | |||||
<Grid item xs={12} md={12} textAlign="left"> | |||||
<input | |||||
id="uploadFileBtn" | |||||
name="file" | |||||
type="file" | |||||
accept=".pdf" | |||||
style={{ display: 'none' }} | |||||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | |||||
onChange={(event) => { | |||||
readFile(event) | |||||
}} | |||||
/> | |||||
<label htmlFor="uploadFileBtn"> | |||||
<Button | |||||
component="span" | |||||
variant="contained" | |||||
size="large" | |||||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | |||||
>上載</Button> | |||||
</label> | |||||
</Grid> | |||||
<Grid item xs={12} md={12} textAlign="left"> | |||||
<UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} /> | |||||
</Grid> | |||||
</> | |||||
} | |||||
<Grid item xs={12} md={12} lg={12}> | <Grid item xs={12} md={12} lg={12}> | ||||
<Stack direction="row" alignItems="center"> | <Stack direction="row" alignItems="center"> | ||||
<FormLabel sx={{ paddingRight: 2, textAlign: "center" }}> | |||||
<FormLabel sx={{ paddingRight: 2, paddingBottom: 3, textAlign: "center" }}> | |||||
簽署: | 簽署: | ||||
</FormLabel> | </FormLabel> | ||||
<TextField | <TextField | ||||
fullWidth | fullWidth | ||||
type="text" | |||||
type="password" | |||||
onChange={formik.handleChange} | onChange={formik.handleChange} | ||||
name="vaild" | name="vaild" | ||||
variant="outlined" | variant="outlined" | ||||
error={Boolean(formik.errors["vaild"])} | error={Boolean(formik.errors["vaild"])} | ||||
helperText={formik.errors["vaild"] ? formik.errors["vaild"] : ''} | |||||
helperText={formik.errors["vaild"] ? formik.errors["vaild"] : ' '} | |||||
placeholder="請輸入你的登入密碼" | placeholder="請輸入你的登入密碼" | ||||
sx={ | sx={ | ||||
{ | { | ||||
@@ -17,7 +17,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu | |||||
}) => { | }) => { | ||||
const [type, setType] = React.useState([]); | const [type, setType] = React.useState([]); | ||||
const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' }); | |||||
const [status, setStatus] = React.useState(ComboData.proofStatus[0]); | |||||
const [orgSelected, setOrgSelected] = React.useState({}); | const [orgSelected, setOrgSelected] = React.useState({}); | ||||
const [orgCombo, setOrgCombo] = React.useState(); | const [orgCombo, setOrgCombo] = React.useState(); | ||||
const [issueSelected, setIssueSelected] = React.useState({}); | const [issueSelected, setIssueSelected] = React.useState({}); | ||||
@@ -66,7 +66,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu | |||||
function resetForm() { | function resetForm() { | ||||
setType([]); | setType([]); | ||||
setStatus({ key: 0, label: 'All', type: 'all' }); | |||||
setStatus(ComboData.proofStatus[0]); | |||||
setOrgSelected({}); | setOrgSelected({}); | ||||
setIssueSelected({}); | setIssueSelected({}); | ||||
setGroupSelected({}); | setGroupSelected({}); | ||||
@@ -138,9 +138,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu | |||||
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""} | inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""} | ||||
getOptionLabel={(option)=>getIssueLabel(option)} | getOptionLabel={(option)=>getIssueLabel(option)} | ||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
if (newValue !== null) { | |||||
setIssueSelected(newValue); | |||||
} | |||||
setIssueSelected(newValue); | |||||
}} | }} | ||||
renderInput={(params) => ( | renderInput={(params) => ( | ||||
<TextField {...params} | <TextField {...params} | ||||
@@ -163,9 +161,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu | |||||
inputValue={(groupSelected?.label)?groupSelected?.label:""} | inputValue={(groupSelected?.label)?groupSelected?.label:""} | ||||
getOptionLabel={(option)=>option.label} | getOptionLabel={(option)=>option.label} | ||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
if (newValue !== null) { | |||||
setGroupSelected(newValue); | |||||
} | |||||
setGroupSelected(newValue); | |||||
}} | }} | ||||
renderInput={(params) => ( | renderInput={(params) => ( | ||||
<TextField {...params} | <TextField {...params} | ||||
@@ -264,9 +260,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issu | |||||
value={orgSelected} | value={orgSelected} | ||||
inputValue={(orgSelected?.label) ? orgSelected?.label : ""} | inputValue={(orgSelected?.label) ? orgSelected?.label : ""} | ||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
if (newValue !== null) { | |||||
setOrgSelected(newValue); | |||||
} | |||||
setOrgSelected(newValue); | |||||
}} | }} | ||||
renderInput={(params) => ( | renderInput={(params) => ( | ||||
<TextField {...params} | <TextField {...params} | ||||
@@ -20,6 +20,23 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
navigate('/proof/reply/' + params.row.id); | navigate('/proof/reply/' + params.row.id); | ||||
}; | }; | ||||
const getGroupTitle = (title) => { | |||||
switch (title) { | |||||
case 'Private Bill': | |||||
return "私人帳單"; | |||||
case 'Companies Ordinance': | |||||
return "公司條例"; | |||||
case 'High Court': | |||||
return "高等法院"; | |||||
case 'Notices': | |||||
return "通知"; | |||||
case 'Miscellaneous (Companies)': | |||||
return "其他"; | |||||
default: | |||||
return title; | |||||
} | |||||
} | |||||
const columns = [ | const columns = [ | ||||
{ | { | ||||
@@ -82,7 +99,7 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
headerName: '憲報類型', | headerName: '憲報類型', | ||||
flex: 1, | flex: 1, | ||||
valueGetter: (params) => { | valueGetter: (params) => { | ||||
return (params?.value) ? (params?.value) : ""; | |||||
return getGroupTitle(params?.value); | |||||
} | } | ||||
}, | }, | ||||
{ | { | ||||
@@ -17,7 +17,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
}) => { | }) => { | ||||
const [type, setType] = React.useState([]); | const [type, setType] = React.useState([]); | ||||
const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' }); | |||||
const [status, setStatus] = React.useState(ComboData.proofStatus[0]); | |||||
const [issueSelected, setIssueSelected] = React.useState({}); | const [issueSelected, setIssueSelected] = React.useState({}); | ||||
const [issueCombo, setIssueCombo] = React.useState([]); | const [issueCombo, setIssueCombo] = React.useState([]); | ||||
const [groupSelected, setGroupSelected] = React.useState({}); | const [groupSelected, setGroupSelected] = React.useState({}); | ||||
@@ -42,7 +42,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
gazettGroup: groupSelected?.type, | gazettGroup: groupSelected?.type, | ||||
dateFrom: data.dateFrom, | dateFrom: data.dateFrom, | ||||
dateTo: data.dateTo, | dateTo: data.dateTo, | ||||
contact: data.contact, | |||||
//contact: data.contact, | |||||
replyed: (status?.type && status?.type != 'all') ? status?.type : "", | replyed: (status?.type && status?.type != 'all') ? status?.type : "", | ||||
}; | }; | ||||
applySearch(temp); | applySearch(temp); | ||||
@@ -57,8 +57,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
function resetForm() { | function resetForm() { | ||||
setType([]); | setType([]); | ||||
setStatus({ key: 0, label: 'All', type: 'all' }); | |||||
setOrgSelected({}); | |||||
setStatus(ComboData.proofStatus[0]); | |||||
setIssueSelected({}); | setIssueSelected({}); | ||||
setGroupSelected({}); | setGroupSelected({}); | ||||
reset(); | reset(); | ||||
@@ -129,9 +128,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""} | inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""} | ||||
getOptionLabel={(option)=>getIssueLabel(option)} | getOptionLabel={(option)=>getIssueLabel(option)} | ||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
if (newValue !== null) { | |||||
setIssueSelected(newValue); | |||||
} | |||||
setIssueSelected(newValue); | |||||
}} | }} | ||||
renderInput={(params) => ( | renderInput={(params) => ( | ||||
<TextField {...params} | <TextField {...params} | ||||
@@ -154,9 +151,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
inputValue={(groupSelected?.labelCht)?groupSelected?.labelCht:""} | inputValue={(groupSelected?.labelCht)?groupSelected?.labelCht:""} | ||||
getOptionLabel={(option)=>option.labelCht} | getOptionLabel={(option)=>option.labelCht} | ||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
if (newValue !== null) { | |||||
setGroupSelected(newValue); | |||||
} | |||||
setGroupSelected(newValue); | |||||
}} | }} | ||||
renderInput={(params) => ( | renderInput={(params) => ( | ||||
<TextField {...params} | <TextField {...params} | ||||
@@ -205,7 +200,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
/> | /> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | |||||
{/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | |||||
<TextField | <TextField | ||||
fullWidth | fullWidth | ||||
{...register("contact")} | {...register("contact")} | ||||
@@ -217,7 +212,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
}} | }} | ||||
/> | /> | ||||
</Grid> | |||||
</Grid> */} | |||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | ||||
<Autocomplete | <Autocomplete | ||||
@@ -43,6 +43,7 @@ const PublicNoticeDetail_GLD = () => { | |||||
const params = useParams(); | const params = useParams(); | ||||
// const navigate = useNavigate() | // const navigate = useNavigate() | ||||
const [applicationDetailData, setApplicationDetailData] = useState({}); | const [applicationDetailData, setApplicationDetailData] = useState({}); | ||||
const [proofList, setProofList] = useState([]); | |||||
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); | // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); | ||||
const [isLoading, setLoading] = useState(false); | const [isLoading, setLoading] = useState(false); | ||||
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | ||||
@@ -83,7 +84,7 @@ const PublicNoticeDetail_GLD = () => { | |||||
const title = groupNo != null ? ("Application / " + appNo + ", " + gazetteIssue + ", " + issueNum + " , " + groupNo) : ("Application / " + appNo + ", " + gazetteIssue + ", " + issueNum) | const title = groupNo != null ? ("Application / " + appNo + ", " + gazetteIssue + ", " + issueNum + " , " + groupNo) : ("Application / " + appNo + ", " + gazetteIssue + ", " + issueNum) | ||||
useEffect(() => { | useEffect(() => { | ||||
loadApplicationDetail() | |||||
loadApplicationDetail(); | |||||
}, []); | }, []); | ||||
// useEffect(() => { | // useEffect(() => { | ||||
@@ -110,6 +111,7 @@ const PublicNoticeDetail_GLD = () => { | |||||
setIssueNum(" No. " + gazetteIssueDetail.issueNo); | setIssueNum(" No. " + gazetteIssueDetail.issueNo); | ||||
setIssueDate(DateUtils.dateFormat(gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); | setIssueDate(DateUtils.dateFormat(gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); | ||||
setGroupNo(response.data.data.groupNo); | setGroupNo(response.data.data.groupNo); | ||||
setProofList(response.data.proofList); | |||||
setLoading(false); | setLoading(false); | ||||
} | } | ||||
}) | }) | ||||
@@ -171,9 +173,9 @@ const PublicNoticeDetail_GLD = () => { | |||||
onComplatedClick() | onComplatedClick() | ||||
} else if (getStatus == "withdraw") { | } else if (getStatus == "withdraw") { | ||||
onWithdrawnClick() | onWithdrawnClick() | ||||
} else if (getStatus == "notAccepted"){ | |||||
} else if (getStatus == "notAccepted") { | |||||
onNotAcceptClick(getReason); | onNotAcceptClick(getReason); | ||||
} else if (getStatus == "resubmit"){ | |||||
} else if (getStatus == "resubmit") { | |||||
onReSubmitClick(); | onReSubmitClick(); | ||||
} | } | ||||
} | } | ||||
@@ -266,8 +268,8 @@ const PublicNoticeDetail_GLD = () => { | |||||
}; | }; | ||||
useEffect(() => { | useEffect(() => { | ||||
const status = applicationDetailData.data!=undefined?applicationDetailData.data.status:"" | |||||
if(status === "submitted" && params.id > 0 && getUploadStatus){ | |||||
const status = applicationDetailData.data != undefined ? applicationDetailData.data.status : "" | |||||
if (status === "submitted" && params.id > 0 && getUploadStatus) { | |||||
axios.get(`${SET_PUBLIC_NOTICE_STATUS_REVIEWED}/${params.id}`) | axios.get(`${SET_PUBLIC_NOTICE_STATUS_REVIEWED}/${params.id}`) | ||||
.then((response) => { | .then((response) => { | ||||
if (response.status === 204) { | if (response.status === 204) { | ||||
@@ -279,7 +281,7 @@ const PublicNoticeDetail_GLD = () => { | |||||
console.log(error); | console.log(error); | ||||
return false; | return false; | ||||
}); | }); | ||||
}else{ | |||||
} else { | |||||
setUploadStatus(false); | setUploadStatus(false); | ||||
} | } | ||||
}, [getUploadStatus]); | }, [getUploadStatus]); | ||||
@@ -346,7 +348,10 @@ const PublicNoticeDetail_GLD = () => { | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={10}> | <Grid item xs={12} md={10}> | ||||
<Box xs={12} ml={4} mt={3}> | <Box xs={12} ml={4} mt={3}> | ||||
<TabTableDetail applicationDetailData={applicationDetailData} /> | |||||
<TabTableDetail | |||||
applicationDetailData={applicationDetailData} | |||||
proofList={proofList} | |||||
/> | |||||
</Box> | </Box> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -1,54 +1,53 @@ | |||||
// material-ui | // material-ui | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import * as DateUtils from "utils/DateUtils"; | |||||
import {FiDataGrid} from "components/FiDataGrid"; | import {FiDataGrid} from "components/FiDataGrid"; | ||||
import { | |||||
Button | |||||
} from '@mui/material'; | |||||
// ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
export default function ProofTab({rows}) { | export default function ProofTab({rows}) { | ||||
function currencyFormat(num) { | |||||
return num.toLocaleString('en-US', { | |||||
minimumFractionDigits: 2 | |||||
}); | |||||
} | |||||
const columns = [ | const columns = [ | ||||
{ | { | ||||
id: 'proofRef', | |||||
field: 'proofRef', | |||||
headerName: 'Proof Ref.', | |||||
id: 'refNo', | |||||
field: 'refNo', | |||||
headerName: 'Proof No.', | |||||
flex: 1, | flex: 1, | ||||
}, | }, | ||||
{ | { | ||||
id: 'proofSent', | |||||
field: 'proofSent', | |||||
headerName: 'Proof Return', | |||||
id: 'created', | |||||
field: 'created', | |||||
headerName: 'Proof Date', | |||||
flex: 1, | flex: 1, | ||||
valueGetter: (params) => { | |||||
return DateUtils.datetimeStr(params?.value); | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
id: 'proofReturn', | |||||
field: 'proofReturn', | |||||
headerName: 'Proof Return', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'status', | |||||
field: 'status', | |||||
headerName: 'Status', | |||||
id: 'replyDate', | |||||
field: 'replyDate', | |||||
headerName: 'Confirmed/Return Date', | |||||
flex: 1, | flex: 1, | ||||
valueGetter: (params) => { | |||||
return params?.value?DateUtils.datetimeStr(params?.value):""; | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
id: 'fee', | id: 'fee', | ||||
field: 'fee', | field: 'fee', | ||||
headerName: 'Fee (HKD)', | |||||
flex: 2, | |||||
headerName: 'Fee', | |||||
flex: 1, | |||||
valueGetter: (params) => { | |||||
return (params?.value)?"$ "+currencyFormat(params?.value):""; | |||||
} | |||||
}, | }, | ||||
{ | |||||
field: 'detail', | |||||
type: 'actions', | |||||
headerName: '', | |||||
width: 50, | |||||
cellClassName: 'actions', | |||||
renderCell: () => { | |||||
return <Button onClick={()=>{}}>查看詳細</Button>; | |||||
}, | |||||
} | |||||
]; | ]; | ||||
return ( | return ( | ||||
@@ -21,31 +21,28 @@ const ProofTab = Loadable(lazy(() => import('./ProofTab'))); | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
const PublicNotice = ({applicationDetailData}) => { | |||||
const [submittedList, ] = React.useState([]); | |||||
const [inProgressList, ] = React.useState([]); | |||||
const PublicNotice = ({applicationDetailData, proofList}) => { | |||||
const [_proofList, setProofList] = React.useState([]); | |||||
const [inProgressList,] = React.useState([]); | |||||
const [onReady,setOnReady] = React.useState(false); | const [onReady,setOnReady] = React.useState(false); | ||||
const [selectedTab, setSelectedTab] = React.useState("1"); | const [selectedTab, setSelectedTab] = React.useState("1"); | ||||
// const navigate = useNavigate(); | // const navigate = useNavigate(); | ||||
const [statusHistoryList, setStatusHistoryList] = React.useState([]); | const [statusHistoryList, setStatusHistoryList] = React.useState([]); | ||||
// useEffect(() => { | |||||
// loadData(); | |||||
// }, []); | |||||
const reloadPage = () => { | const reloadPage = () => { | ||||
window.location.reload(false); | window.location.reload(false); | ||||
} | } | ||||
React.useEffect(() => { | React.useEffect(() => { | ||||
//if user data from parent are not null | |||||
// console.log(applicationDetailData) | |||||
if (Object.keys(applicationDetailData).length > 0) { | if (Object.keys(applicationDetailData).length > 0) { | ||||
setStatusHistoryList(applicationDetailData.statusHistoryList); | setStatusHistoryList(applicationDetailData.statusHistoryList); | ||||
} | } | ||||
}, [applicationDetailData]); | }, [applicationDetailData]); | ||||
React.useEffect(() => { | |||||
setProofList(proofList); | |||||
}, [proofList]); | |||||
React.useEffect(() => { | React.useEffect(() => { | ||||
//if state data are ready and assign to different field | //if state data are ready and assign to different field | ||||
if (statusHistoryList.length > 0) { | if (statusHistoryList.length > 0) { | ||||
@@ -75,14 +72,14 @@ const PublicNotice = ({applicationDetailData}) => { | |||||
<TabContext value={selectedTab}> | <TabContext value={selectedTab}> | ||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | ||||
<TabList onChange={handleChange} aria-label="lab API tabs example"> | <TabList onChange={handleChange} aria-label="lab API tabs example"> | ||||
<Tab label={"Proof(" + submittedList.length + ")"} value="1" /> | |||||
<Tab label={"Proof(" + (_proofList?.length?_proofList?.length:0) + ")"} value="1" /> | |||||
<Tab label={"Payment(" + inProgressList.length + ")"} value="2" /> | <Tab label={"Payment(" + inProgressList.length + ")"} value="2" /> | ||||
<Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" /> | <Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" /> | ||||
</TabList> | </TabList> | ||||
</Box> | </Box> | ||||
<TabPanel value="1"> | <TabPanel value="1"> | ||||
<ProofTab | <ProofTab | ||||
rows={submittedList} | |||||
rows={_proofList} | |||||
reloadFunction={reloadPage} | reloadFunction={reloadPage} | ||||
/> | /> | ||||
</TabPanel> | </TabPanel> | ||||
@@ -141,6 +141,7 @@ const BusCustomFormWizard = (props) => { | |||||
data.address1 !==""&& | data.address1 !==""&& | ||||
data.email !==""&& | data.email !==""&& | ||||
data.emailConfirm !==""&& | data.emailConfirm !==""&& | ||||
data.email == data.emailConfirm&& | |||||
data.phone !==""&& | data.phone !==""&& | ||||
data.phoneCountryCode !==""&& | data.phoneCountryCode !==""&& | ||||
termsAndConAccept == true&& | termsAndConAccept == true&& | ||||
@@ -389,13 +390,12 @@ const BusCustomFormWizard = (props) => { | |||||
} | } | ||||
function handleEmail(email) { | function handleEmail(email) { | ||||
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; | |||||
// var result = reg.test(email); | |||||
var result = email.match(validRegex); | |||||
if (result == false) { | |||||
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; | |||||
if (!email.match(validRegex)) { | |||||
return false; | return false; | ||||
}else{ | |||||
return true; | |||||
} | } | ||||
return true; | |||||
} | } | ||||
const formik = useFormik({ | const formik = useFormik({ | ||||
@@ -136,6 +136,7 @@ const CustomFormWizard = (props) => { | |||||
data.address1 !==""&& | data.address1 !==""&& | ||||
data.email !==""&& | data.email !==""&& | ||||
data.emailConfirm !==""&& | data.emailConfirm !==""&& | ||||
data.email == data.emailConfirm&& | |||||
data.phone !==""&& | data.phone !==""&& | ||||
data.phoneCountryCode !==""&& | data.phoneCountryCode !==""&& | ||||
termsAndConAccept == true&& | termsAndConAccept == true&& | ||||
@@ -409,13 +410,11 @@ const CustomFormWizard = (props) => { | |||||
function handleEmail(email) { | function handleEmail(email) { | ||||
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; | var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; | ||||
// var result = reg.test(email); | |||||
var result = email.match(validRegex); | |||||
if (result == false) { | |||||
if (!email.match(validRegex)) { | |||||
return false; | return false; | ||||
}else{ | |||||
return true; | |||||
} | } | ||||
console.log("email true") | |||||
return true; | |||||
} | } | ||||
const formik = useFormik({ | const formik = useFormik({ | ||||
@@ -58,31 +58,31 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
}), | }), | ||||
onSubmit: (values) => { | onSubmit: (values) => { | ||||
HttpUtils.post({ | HttpUtils.post({ | ||||
url: UrlUtils.POST_IND_USER + "/" + userData.id, | |||||
url: UrlUtils.POST_ORG_USER + "/" + userData.id, | |||||
params: { | params: { | ||||
contactTel: { | contactTel: { | ||||
countryCode: values.tel_countryCode, | countryCode: values.tel_countryCode, | ||||
phoneNumber: values.phoneNumber | phoneNumber: values.phoneNumber | ||||
}, | }, | ||||
faxNo: { | |||||
countryCode: values.fax_countryCode, | |||||
faxNumber: values.faxNumber | |||||
}, | |||||
addressBus: { | |||||
country: values.country, | |||||
district: values.district, | |||||
addressLine1: values.addressLine1, | |||||
addressLine2: values.addressLine2, | |||||
addressLine3: values.addressLine3, | |||||
}, | |||||
// faxNo: { | |||||
// countryCode: values.fax_countryCode, | |||||
// faxNumber: values.faxNumber | |||||
// }, | |||||
// addressBus: { | |||||
// country: values.country, | |||||
// district: values.district, | |||||
// addressLine1: values.addressLine1, | |||||
// addressLine2: values.addressLine2, | |||||
// addressLine3: values.addressLine3, | |||||
// }, | |||||
identification: values.identification, | identification: values.identification, | ||||
emailBus: values.emailBus, | emailBus: values.emailBus, | ||||
contactPerson: values.contactPerson, | contactPerson: values.contactPerson, | ||||
enCompanyName: values.enCompanyName, | |||||
chCompanyName: values.chCompanyName, | |||||
// enCompanyName: values.enCompanyName, | |||||
// chCompanyName: values.chCompanyName, | |||||
orgId: values.orgId, | orgId: values.orgId, | ||||
brNo: values.brNo, | |||||
brExpiryDate: values.brExpiryDate, | |||||
// brNo: values.brNo, | |||||
// brExpiryDate: values.brExpiryDate, | |||||
}, | }, | ||||
onSuccess: function () { | onSuccess: function () { | ||||
@@ -307,7 +307,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
); | ); | ||||
return displayOptions; | return displayOptions; | ||||
}, | }, | ||||
getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? item["brNo"] + "-" + item["enCompanyName"] : "") : "", | |||||
getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? item["brNo"] + "-" + item["enCompanyName"]: "") : "", | |||||
isOptionEqualToValue: (option, newValue, setValue, setInputValue) => { | isOptionEqualToValue: (option, newValue, setValue, setInputValue) => { | ||||
if (option.id == newValue) { | if (option.id == newValue) { | ||||
setValue(option); | setValue(option); | ||||
@@ -463,13 +463,16 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
Organization | Organization | ||||
</Typography> | </Typography> | ||||
</Grid> | </Grid> | ||||
<Grid item lg={2} > | |||||
<Button variant="contained" | |||||
onClick={createOrgClick} | |||||
> | |||||
Create Organization | |||||
</Button> | |||||
</Grid> | |||||
{currentUserData.orgId==null? | |||||
<Grid item lg={2} > | |||||
<Button variant="contained" | |||||
onClick={createOrgClick} | |||||
> | |||||
Create Organization | |||||
</Button> | |||||
</Grid> | |||||
:null | |||||
} | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -477,7 +480,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
{FieldUtils.getTextField({ | {FieldUtils.getTextField({ | ||||
label: "Org.Name (English):", | label: "Org.Name (English):", | ||||
valueName: "enCompanyName", | valueName: "enCompanyName", | ||||
disabled: (!editMode), | |||||
disabled: true, | |||||
form: formik | form: formik | ||||
})} | })} | ||||
</Grid> | </Grid> | ||||
@@ -486,7 +489,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
{FieldUtils.getTextField({ | {FieldUtils.getTextField({ | ||||
label: "Org.Name (Chinese):", | label: "Org.Name (Chinese):", | ||||
valueName: "chCompanyName", | valueName: "chCompanyName", | ||||
disabled: (!editMode), | |||||
disabled: true, | |||||
form: formik | form: formik | ||||
})} | })} | ||||
</Grid> | </Grid> | ||||
@@ -495,7 +498,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
{FieldUtils.getTextField({ | {FieldUtils.getTextField({ | ||||
label: "BR No.:", | label: "BR No.:", | ||||
valueName: "brNo", | valueName: "brNo", | ||||
disabled: (!editMode), | |||||
disabled: true, | |||||
form: formik | form: formik | ||||
})} | })} | ||||
</Grid> | </Grid> | ||||
@@ -505,7 +508,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
label: "Country:", | label: "Country:", | ||||
valueName: "country", | valueName: "country", | ||||
dataList: ComboData.country, | dataList: ComboData.country, | ||||
disabled: (!editMode), | |||||
disabled: true, | |||||
form: formik | form: formik | ||||
})} | })} | ||||
</Grid> | </Grid> | ||||
@@ -517,7 +520,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
code: "fax_countryCode", | code: "fax_countryCode", | ||||
num: "faxNumber" | num: "faxNumber" | ||||
}, | }, | ||||
disabled: (!editMode), | |||||
disabled: true, | |||||
form: formik | form: formik | ||||
})} | })} | ||||
</Grid> | </Grid> | ||||
@@ -526,7 +529,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
{FieldUtils.getDateField({ | {FieldUtils.getDateField({ | ||||
label: "BR Expiry Date.:", | label: "BR Expiry Date.:", | ||||
valueName: "brExpiryDate", | valueName: "brExpiryDate", | ||||
disabled: (!editMode), | |||||
disabled: true, | |||||
form: formik | form: formik | ||||
})} | })} | ||||
</Grid> | </Grid> | ||||
@@ -535,7 +538,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
{FieldUtils.getAddressField({ | {FieldUtils.getAddressField({ | ||||
label: "Address:", | label: "Address:", | ||||
valueName: ["addressLine1", "addressLine2", "addressLine3"], | valueName: ["addressLine1", "addressLine2", "addressLine3"], | ||||
disabled: (!editMode), | |||||
disabled: true, | |||||
form: formik | form: formik | ||||
})} | })} | ||||
</Grid> | </Grid> | ||||
@@ -545,7 +548,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => | |||||
label: "District:", | label: "District:", | ||||
valueName: "district", | valueName: "district", | ||||
dataList: ComboData.district, | dataList: ComboData.district, | ||||
disabled: (!editMode), | |||||
disabled: true, | |||||
form: formik | form: formik | ||||
})} | })} | ||||
</Grid> | </Grid> | ||||
@@ -27,7 +27,7 @@ const UserMaintainPage_Organization = () => { | |||||
useEffect(()=>{ | useEffect(()=>{ | ||||
console.log(userData); | |||||
// console.log(userData); | |||||
loadData(); | loadData(); | ||||
},[]); | },[]); | ||||
@@ -40,9 +40,24 @@ const UserMaintainPage_Organization = () => { | |||||
HttpUtils.get({ | HttpUtils.get({ | ||||
url: `${UrlUtils.GET_ORG_USER_PATH}/${params.id}`, | url: `${UrlUtils.GET_ORG_USER_PATH}/${params.id}`, | ||||
onSuccess: function(response){ | onSuccess: function(response){ | ||||
response.data["addressBus"] = JSON.parse(response.data["addressBus"]); | |||||
response.data["contactTel"] = JSON.parse(response.data["contactTel"]); | |||||
response.data["faxNo"] = JSON.parse(response.data["faxNo"]); | |||||
console.log(response) | |||||
if(response.data.orgId !=null){ | |||||
response.data["addressBus"] = response.orgDetail.data["addressTemp"]; | |||||
response.data["contactTel"] = response.orgDetail.data["contactTel"]; | |||||
response.data["faxNo"] = response.orgDetail.data["faxNo"]; | |||||
response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate?DateUtils.dateStr(response.orgDetail.data.brExpiryDate):""; | |||||
response.data["brNo"] = response.orgDetail.data.brNo; | |||||
response.data["enCompanyName"] = response.orgDetail.data.enCompanyName; | |||||
response.data["chCompanyName"] = response.orgDetail.data.chCompanyName; | |||||
response.data["chCompanyName"] = response.orgDetail.data.chCompanyName; | |||||
}else{ | |||||
response.data["addressBus"] = JSON.parse(response.data["addressBus"]); | |||||
response.data["contactTel"] = JSON.parse(response.data["contactTel"]); | |||||
response.data["faxNo"] = JSON.parse(response.data["faxNo"]); | |||||
response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):""; | |||||
} | |||||
let createDate = DateUtils.datetimeStr(response.data.created); | let createDate = DateUtils.datetimeStr(response.data.created); | ||||
let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy; | let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy; | ||||
@@ -64,10 +79,9 @@ const UserMaintainPage_Organization = () => { | |||||
response.data["faxNumber"] = response.data.faxNo?.faxNumber; | response.data["faxNumber"] = response.data.faxNo?.faxNumber; | ||||
response.data["fax_countryCode"] = response.data.faxNo?.countryCode; | response.data["fax_countryCode"] = response.data.faxNo?.countryCode; | ||||
response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):""; | |||||
//response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):""; | //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):""; | ||||
setUserData(response.data); | setUserData(response.data); | ||||
setOrgData(response.orgList); | setOrgData(response.orgList); | ||||
} | } | ||||
@@ -13,6 +13,7 @@ const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/App | |||||
const PublicNoticeDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail'))); | const PublicNoticeDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail'))); | ||||
const ProofReply = Loadable(lazy(() => import('pages/ProofReply_Public'))); | const ProofReply = Loadable(lazy(() => import('pages/ProofReply_Public'))); | ||||
const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch_Public'))); | const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch_Public'))); | ||||
const ProofPayment = Loadable(lazy(() => import('pages/ProofPayment'))); | |||||
// ==============================|| MAIN ROUTING ||============================== // | // ==============================|| MAIN ROUTING ||============================== // | ||||
@@ -55,6 +56,10 @@ const PublicDashboard = { | |||||
path: 'proof/search', | path: 'proof/search', | ||||
element: <ProofSearch/> | element: <ProofSearch/> | ||||
}, | }, | ||||
{ | |||||
path: 'proof/pay/:id', | |||||
element: <ProofPayment/> | |||||
}, | |||||
] | ] | ||||
}, | }, | ||||
] | ] | ||||
@@ -20,6 +20,7 @@ export const GET_IND_USER_VERIFY = apiPath+'/user/verify'; | |||||
export const POST_IND_USER = apiPath+'/user/ind'; | export const POST_IND_USER = apiPath+'/user/ind'; | ||||
export const GET_ORG_USER_PATH = apiPath+'/user/org'; | export const GET_ORG_USER_PATH = apiPath+'/user/org'; | ||||
export const POST_ORG_USER = apiPath+'/user/org'; | |||||
export const GET_ORG_PATH = apiPath+'/org'; | export const GET_ORG_PATH = apiPath+'/org'; | ||||
export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user'; | export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user'; | ||||
@@ -75,6 +76,8 @@ export const CREATE_PROOF = apiPath+'/proof/create';//POST | |||||
export const GET_PROOF = apiPath+'/proof/details';//GET | export const GET_PROOF = apiPath+'/proof/details';//GET | ||||
export const REPLY_PROOF = apiPath+'/proof/reply';//GET | export const REPLY_PROOF = apiPath+'/proof/reply';//GET | ||||
export const PROOF_CHECK_PRICE = apiPath+'/proof/check-price';//GET | export const PROOF_CHECK_PRICE = apiPath+'/proof/check-price';//GET | ||||
export const GET_PROOF_PAY = apiPath+'/proof/pay-details';//GET | |||||
//User Group | //User Group | ||||
export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; | export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; |