@@ -3,97 +3,44 @@ import { | |||
FormControl, | |||
Button, | |||
Grid, | |||
// InputAdornment, | |||
Typography, FormLabel, | |||
OutlinedInput, | |||
Stack | |||
} from '@mui/material'; | |||
// import MainCard from "../../components/MainCard"; | |||
const MainCard = Loadable(lazy(() => import('components/MainCard'))); | |||
import { useForm } from "react-hook-form"; | |||
import { | |||
useEffect, | |||
useState | |||
} from "react"; | |||
// import Checkbox from "@mui/material/Checkbox"; | |||
import Loadable from 'components/Loadable'; | |||
import { lazy } from 'react'; | |||
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | |||
// import {useParams} from "react-router-dom"; | |||
import * as HttpUtils from "utils/HttpUtils" | |||
// import * as ApiPathConst from "utils/ApiPathConst" | |||
import * as StatusUtils from "../PublicNotice/ListPanel/PublicNoteStatusUtils"; | |||
import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined'; | |||
import DoneIcon from '@mui/icons-material/Done'; | |||
import CloseIcon from '@mui/icons-material/Close'; | |||
import EditNoteIcon from '@mui/icons-material/EditNote'; | |||
import DownloadIcon from '@mui/icons-material/Download'; | |||
// import { Params } from '../../../node_modules/react-router-dom/dist/index'; | |||
// import {useNavigate} from "react-router-dom"; | |||
// import axios from "axios"; | |||
// import { makeStyles } from '@material-ui/core/styles'; | |||
// const useStyles = makeStyles({ | |||
// input: { | |||
// '& input[type=number]': { | |||
// '-moz-appearance': 'textfield' | |||
// }, | |||
// '& input[type=number]::-webkit-outer-spin-button': { | |||
// '-webkit-appearance': 'none', | |||
// margin: 0 | |||
// }, | |||
// '& input[type=number]::-webkit-inner-spin-button': { | |||
// '-webkit-appearance': 'none', | |||
// margin: 0 | |||
// } | |||
// }, | |||
// }); | |||
import ReplayIcon from '@mui/icons-material/Replay'; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const ApplicationDetailCard = ( | |||
{ applicationDetailData, | |||
setStatus, | |||
// setReload, | |||
isEditMode, | |||
setUpdateApplicationObject, | |||
setiIsSave, | |||
// isNewRecord | |||
} | |||
) => { | |||
// const params = useParams(); | |||
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); | |||
const [companyName, setCompanyName] = useState({}); | |||
const [verified, setVerified] = useState(null); | |||
const [fileDetail, setfileDetail] = useState({}); | |||
const [onReady, setOnReady] = useState(false); | |||
// const [reload, setReload] = useState(false); | |||
// const classes = useStyles(); | |||
// const navigate = useNavigate() | |||
// const params = useParams(); | |||
const [editMode, setEditMode] = useState(false); | |||
const onEditClick = () => () => { | |||
setEditMode(true); | |||
isEditMode(true); | |||
}; | |||
const onSaveClick = () => () => { | |||
//upload latest data to parent | |||
const values = getValues(); | |||
const objectData = { | |||
...values, | |||
} | |||
setUpdateApplicationObject({ objectData }); | |||
setiIsSave(true) | |||
}; | |||
const { register, | |||
getValues, | |||
// setValue | |||
} = useForm() | |||
const { register } = useForm() | |||
useEffect(() => { | |||
//if user data from parent are not null | |||
@@ -102,7 +49,7 @@ const ApplicationDetailCard = ( | |||
loadApplicationDetail() | |||
} | |||
}, [applicationDetailData]); | |||
useEffect(() => { | |||
//if state data are ready and assign to different field | |||
// console.log(currentApplicationDetailData) | |||
@@ -127,24 +74,13 @@ const ApplicationDetailCard = ( | |||
}); | |||
}; | |||
// useEffect(() => { | |||
// if (Object.keys(applicationDetailData).length > 0) { | |||
// loadApplicationDetail() | |||
// } | |||
// }, [reload]); | |||
const reloadHandle = () => () => { | |||
// setReload(true) | |||
setEditMode(false) | |||
location.reload(); | |||
}; | |||
const acceptedClick = () => () => { | |||
setStatus("accept") | |||
const reSubmitClick = () => () => { | |||
setStatus("resubmit") | |||
}; | |||
const rejectedClick = () => () => { | |||
setStatus("reject") | |||
const notAcceptedClick = () => () => { | |||
setStatus("notAccepted") | |||
}; | |||
const complatedClick = () => () => { | |||
@@ -155,7 +91,7 @@ const ApplicationDetailCard = ( | |||
setStatus("withdraw") | |||
}; | |||
const onProofClick=()=>{ | |||
const onProofClick = () => { | |||
window.open("/proof/create/" + currentApplicationDetailData.id, "_blank", "noreferrer"); | |||
window.addEventListener("focus", onFocus) | |||
} | |||
@@ -183,58 +119,11 @@ const ApplicationDetailCard = ( | |||
spacing={2} | |||
mb={2} | |||
> | |||
{editMode ? | |||
<> | |||
<Button | |||
size="large" | |||
variant="contained" | |||
onClick={reloadHandle()} | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end' | |||
}} | |||
> | |||
Reset & Back | |||
</Button> | |||
<Button | |||
size="large" | |||
variant="contained" | |||
onClick={onSaveClick()} | |||
color="success" | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end' | |||
}} | |||
> | |||
Save | |||
</Button> | |||
</> : | |||
<>{ | |||
currentApplicationDetailData.status=="submitted"? | |||
<Grid item sx={{ ml: 3, mr: 3 }}> | |||
<Button | |||
// size="large" | |||
variant="contained" | |||
onClick={onEditClick()} | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end', | |||
}}> | |||
<BorderColorOutlinedIcon /> | |||
<Typography ml={1}> Edit</Typography> | |||
</Button> | |||
</Grid> | |||
: | |||
null | |||
} | |||
</> | |||
} | |||
{currentApplicationDetailData.status == "accepted" ? | |||
<Button | |||
// size="large" | |||
variant="contained" | |||
onClick={()=>{onProofClick()}} | |||
onClick={() => { onProofClick() }} | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end' | |||
@@ -259,26 +148,23 @@ const ApplicationDetailCard = ( | |||
<Button | |||
// size="large" | |||
variant="contained" | |||
onClick={acceptedClick()} | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end', | |||
backgroundColor: '#52b202' | |||
}}> | |||
<DoneIcon /> | |||
<Typography ml={1}> Accept</Typography> | |||
onClick={reSubmitClick()} | |||
color="orange" | |||
> | |||
<ReplayIcon /> | |||
<Typography ml={1}> Re-Submit</Typography> | |||
</Button> | |||
<Button | |||
// size="large" | |||
variant="contained" | |||
onClick={rejectedClick()} | |||
onClick={notAcceptedClick()} | |||
color="error" | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end', | |||
backgroundColor: '#ffa733' | |||
}}> | |||
<CloseIcon /> | |||
<Typography ml={1}> Reject</Typography> | |||
<Typography ml={1}>Not accepted</Typography> | |||
</Button> | |||
</> : | |||
currentApplicationDetailData.status == "paid" ? | |||
@@ -420,7 +306,7 @@ const ApplicationDetailCard = ( | |||
<Grid item xs={12} md={8} lg={8}> | |||
<Stack direction="row"> | |||
<FormControl variant="outlined" sx={{ width: '25%' }} disabled={!editMode} > | |||
<FormControl variant="outlined" sx={{ width: '25%' }} disabled > | |||
<OutlinedInput | |||
size="small" | |||
{...register("contactTelNo.countryCode", | |||
@@ -439,7 +325,7 @@ const ApplicationDetailCard = ( | |||
}} | |||
/> | |||
</FormControl> | |||
<FormControl variant="outlined" sx={{ width: '100%' }} disabled={!editMode} > | |||
<FormControl variant="outlined" sx={{ width: '100%' }} disabled > | |||
<OutlinedInput | |||
size="small" | |||
type="tel" | |||
@@ -474,7 +360,7 @@ const ApplicationDetailCard = ( | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormControl variant="outlined" fullWidth disabled={!editMode}> | |||
<FormControl variant="outlined" fullWidth disabled> | |||
<OutlinedInput | |||
fullWidth | |||
size="small" | |||
@@ -503,7 +389,7 @@ const ApplicationDetailCard = ( | |||
<Grid item xs={12} md={8} lg={8}> | |||
<Stack direction="row"> | |||
<FormControl variant="outlined" sx={{ width: '25%' }} disabled={!editMode}> | |||
<FormControl variant="outlined" sx={{ width: '25%' }} disabled> | |||
<OutlinedInput | |||
size="small" | |||
{...register("contactFaxNo.countryCode", | |||
@@ -519,12 +405,12 @@ const ApplicationDetailCard = ( | |||
}} | |||
inputProps={{ | |||
maxLength: 3, | |||
type:"tel" | |||
type: "tel" | |||
}} | |||
/> | |||
</FormControl> | |||
<FormControl variant="outlined" sx={{ width: '100%' }} disabled={!editMode}> | |||
<FormControl variant="outlined" sx={{ width: '100%' }} disabled> | |||
<OutlinedInput | |||
size="small" | |||
type="tel" | |||
@@ -590,46 +476,6 @@ const ApplicationDetailCard = ( | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
{/* <Grid container direction="row" justifyContent="space-between" | |||
alignItems="center"> | |||
<Grid item xs={12} md={6} lg={6} mt={1}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={12} lg={12}> | |||
<Grid container direction="row"> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center top' }}> | |||
<FormLabel>Remarks:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}> | |||
<Grid container direction="row" justifyContent="flex-start"> | |||
<FormControl variant="outlined" fullWidth disabled={!editMode}> | |||
<OutlinedInput | |||
fullWidth | |||
multiline={true} | |||
// maxRows={4} | |||
// minRows={4} | |||
rows={4} | |||
size="small" | |||
{...register("remarks", | |||
{ | |||
value: currentApplicationDetailData.remarks, | |||
})} | |||
id='remarks' | |||
sx={{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
}} | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> */} | |||
</Grid> | |||
</Grid> | |||
</form> | |||
@@ -1,7 +1,7 @@ | |||
import { | |||
useEffect, | |||
useState | |||
} from "react"; | |||
} from "react"; | |||
// material-ui | |||
import { | |||
@@ -20,138 +20,190 @@ import { | |||
} from '@mui/material'; | |||
import { Grid } from "../../../node_modules/@mui/material/index"; | |||
import * as ComboData from "utils/ComboData"; | |||
import { useFormik,FormikProvider } from 'formik'; | |||
import { useFormik, FormikProvider } from 'formik'; | |||
import * as yup from 'yup'; | |||
const StatusChangeDialog = (props) => { | |||
const [status, setStatus] = useState(""); | |||
const [content, setContent] = useState(); | |||
const [dialogTitle, setDialogTitle] = useState("Confirm"); | |||
const [prositiveBtnText, setPrositiveBtnText] = useState("Confirm"); | |||
const [remarks, setRemarks] = useState(""); | |||
const [helperText, setHelperText] = useState(""); | |||
// const [selectedGazetteGroupInputType, setSelectedGazetteGroupInputType] = useState(""); | |||
const groupTitleComboList = ComboData.groupTitle; | |||
useEffect(() => { | |||
// console.log(Object.keys(!props.selectedGazetteGroup).length) | |||
if(props.getStatus == "accept"){ | |||
setStatus("Accept") | |||
}else if (props.getStatus == "reject"){ | |||
setStatus("Reject") | |||
}else if (props.getStatus == "complete"){ | |||
setStatus("Complete") | |||
}else if (props.getStatus == "withdraw"){ | |||
setStatus("Withdraw") | |||
// if (props.getStatus == "resubmit") { | |||
// setStatus("Accept") | |||
// } else if (props.getStatus == "reject") { | |||
// setStatus("Reject") | |||
// } else if (props.getStatus == "complete") { | |||
// setStatus("Complete") | |||
// } else if (props.getStatus == "withdraw") { | |||
// setStatus("Withdraw") | |||
// } | |||
if (props.getStatus == "genGazetteCode") { | |||
setDialogTitle("Gen Gazette Code"); | |||
setPrositiveBtnText("Gen"); | |||
return getGazetteCodeContent() | |||
} else if (props.getStatus == "notAccepted") { | |||
setDialogTitle("Not Accept Reason"); | |||
setPrositiveBtnText("Mark Not Accept"); | |||
return getNotAcceptedContent(); | |||
} else { | |||
setDialogTitle("Action Confirm"); | |||
setPrositiveBtnText("Confirm"); | |||
let str = "Are you sure you want to "+props.getStatus+" this application?" | |||
return getConfirmContent(str); | |||
} | |||
}, [props.getStatus]); | |||
const acceptedHandle = () => () =>{ | |||
const acceptedHandle = () => () => { | |||
// console.log(selectedGazetteGroup) | |||
props.setStatusWindowAccepted(true) | |||
if(props.getStatus == "notAccepted"){ | |||
if(!remarks || remarks=="" ) | |||
setHelperText("Please enter reason"); | |||
} | |||
if(!helperText){ | |||
props.onWindowCallback(props.getStatus,{"reason": remarks}); | |||
} | |||
props.setStatusWindowAccepted(true); | |||
}; | |||
const formik = useFormik({ | |||
initialValues:({ | |||
username:'', | |||
}), | |||
validationSchema:yup.object().shape({ | |||
}), | |||
initialValues: ({ | |||
username: '', | |||
}), | |||
validationSchema: yup.object().shape({ | |||
}), | |||
}); | |||
// const handleReset = () => { | |||
// setSelectedGazetteGroupInputType("") | |||
// selectedGazetteGroup({}); | |||
// }; | |||
const getConfirmContent = (text) => { | |||
setContent(<Grid container direction="row" justifyContent="center" alignItems="center"> | |||
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}> | |||
{text} | |||
</FormLabel> | |||
</Grid>); | |||
} | |||
const getNotAcceptedContent = () => { | |||
setContent(<Grid container direction="row" justifyContent="center" alignItems="center"> | |||
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1, }}> | |||
<TextField | |||
fullWidth | |||
multiline | |||
row={10} | |||
minRows={4} | |||
maxRows={4} | |||
inputProps={{ maxLength: 255 }} | |||
placeholder="Please enter reason" | |||
helperText={helperText} | |||
onChange={(newValues)=>{ | |||
setRemarks(newValues); | |||
setHelperText(""); | |||
}} | |||
> | |||
</TextField> | |||
</Grid> | |||
</Grid> | |||
); | |||
} | |||
const getGazetteCodeContent = () => { | |||
setContent(<Grid container direction="row" justifyContent="center" alignItems="center"> | |||
<Grid item xs={12} md={8} lg={8} sx={{ mb: 1, }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={2} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<Typography>Target Issue:</Typography> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormLabel> | |||
{props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate} | |||
</FormLabel> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={8} lg={8} sx={{ mb: 1, height: "180px" }}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<Typography>Grazette Group:</Typography> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<Autocomplete | |||
disablePortal | |||
id="gazetteGroup" | |||
options={groupTitleComboList} | |||
filterOptions={(options) => options} | |||
inputValue={props.selectedGazetteGroupInputType} | |||
onChange={(event, newValue) => { | |||
if (newValue != null && newValue != {}) { | |||
props.setSelectedGazetteGroupInputType(newValue.label); | |||
props.setSelectedGazetteGroup(newValue); | |||
formik.setFieldValue("gazetteGroup", "") | |||
} else { | |||
props.setSelectedGazetteGroupInputType(""); | |||
} | |||
}} | |||
// sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} | |||
renderInput={(params) => <TextField {...params} placeholder="" />} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
); | |||
} | |||
return ( | |||
<Dialog | |||
open={props.open} | |||
onClose={props.handleClose} | |||
fullWidth={true} | |||
maxWidth={'md'} | |||
> | |||
<DialogTitle > | |||
<Grid container> | |||
<Grid item> | |||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||
<Typography variant="h4"> | |||
{status} Application | |||
</Typography> | |||
</Stack> | |||
</Grid> | |||
<Dialog | |||
open={props.open} | |||
onClose={props.handleClose} | |||
fullWidth={true} | |||
maxWidth={'md'} | |||
> | |||
<DialogTitle > | |||
<Grid container> | |||
<Grid item> | |||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||
<Typography variant="h4"> | |||
{dialogTitle} | |||
</Typography> | |||
</Stack> | |||
</Grid> | |||
</DialogTitle> | |||
<FormikProvider value={formik}> | |||
<form> | |||
<DialogContent> | |||
<DialogContentText> | |||
{props.getStatus == "accept"? | |||
<Grid container direction="row" justifyContent="center" alignItems="center"> | |||
<Grid item xs={12} md={8} lg={8} sx={{mb: 1,}}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={2} lg={3} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<Typography>Target Issue:</Typography> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormLabel> | |||
{props.gazetteIssue+", "}{props.issueNum+", "}{props.issueDate} | |||
</FormLabel> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={8} lg={8} sx={{mb: 1,height:"180px"}}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<Typography>Grazette Group:</Typography> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<Autocomplete | |||
disablePortal | |||
id="gazetteGroup" | |||
options={groupTitleComboList} | |||
filterOptions={(options)=>options} | |||
inputValue={props.selectedGazetteGroupInputType} | |||
onChange={(event, newValue) => { | |||
if (newValue!=null && newValue != {}){ | |||
props.setSelectedGazetteGroupInputType(newValue.label); | |||
props.setSelectedGazetteGroup(newValue); | |||
formik.setFieldValue("gazetteGroup","") | |||
}else{ | |||
props.setSelectedGazetteGroupInputType(""); | |||
} | |||
}} | |||
// sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} | |||
renderInput={(params) => <TextField {...params} placeholder=""/>} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid>: | |||
<Grid container direction="row" justifyContent="center" alignItems="center"> | |||
<Grid item xs={12} md={5} lg={5} sx={{mb: 5,}}> | |||
<FormLabel sx={{fontSize: "20px", color:"#000000",textAlign:"center"}}> | |||
Are you really {status} the Application? | |||
</FormLabel> | |||
</Grid> | |||
</Grid> | |||
} | |||
</DialogContentText> | |||
</DialogContent> | |||
</form> | |||
</FormikProvider> | |||
<Stack direction="row" justifyContent="space-around"> | |||
<DialogActions> | |||
<Button variant="contained" onClick={props.handleClose} autoFocus > | |||
Cancel | |||
</Button> | |||
</DialogActions> | |||
<DialogActions> | |||
<Button variant="contained" color="success" onClick={acceptedHandle()} autoFocus disabled={Object.keys(props.selectedGazetteGroup).length === 0&&status==="Accept"}> | |||
{status==="Accept"?"Confirm":status} | |||
</Button> | |||
</DialogActions> | |||
</Stack> | |||
</Dialog> | |||
</Grid> | |||
</DialogTitle> | |||
<FormikProvider value={formik}> | |||
<form> | |||
<DialogContent> | |||
<DialogContentText> | |||
{content} | |||
</DialogContentText> | |||
</DialogContent> | |||
</form> | |||
</FormikProvider> | |||
<Stack direction="row" justifyContent="space-around"> | |||
<DialogActions> | |||
<Button variant="contained" onClick={props.handleClose} autoFocus > | |||
Cancel | |||
</Button> | |||
</DialogActions> | |||
<DialogActions> | |||
<Button variant="contained" color="success" onClick={acceptedHandle()} autoFocus disabled={Object.keys(props.selectedGazetteGroup).length === 0 && status === "Accept"}> | |||
{prositiveBtnText} | |||
</Button> | |||
</DialogActions> | |||
</Stack> | |||
</Dialog> | |||
); | |||
}; | |||
@@ -1,7 +1,7 @@ | |||
import { | |||
useEffect, | |||
useState | |||
} from "react"; | |||
} from "react"; | |||
// material-ui | |||
import { | |||
@@ -17,7 +17,7 @@ import { | |||
useParams | |||
} from "react-router-dom"; | |||
import axios from "axios"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||
const ApplicationDetailCard = Loadable(lazy(() => import('./ApplicationDetailCard'))); | |||
const GazetteDetailCard = Loadable(lazy(() => import('./GazetteDetailCard'))); | |||
@@ -27,7 +27,7 @@ import { | |||
GET_PUBLIC_NOTICE_APPLY_DETAIL, | |||
UPDATE_PUBLIC_NOTICE_APPLY_DETAIL, | |||
SET_PUBLIC_NOTICE_STATUS_ACCEPTED, | |||
SET_PUBLIC_NOTICE_STATUS_REJRCTED, | |||
SET_PUBLIC_NOTICE_STATUS_NOT_ACCEPT, | |||
SET_PUBLIC_NOTICE_STATUS_COMPLATED, | |||
SET_PUBLIC_NOTICE_STATUS_WITHDRAW | |||
} from "utils/ApiPathConst"; | |||
@@ -42,24 +42,24 @@ const PublicNoticeDetail_GLD = () => { | |||
// const navigate = useNavigate() | |||
const [applicationDetailData, setApplicationDetailData] = useState({}); | |||
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); | |||
const [isLoading,setLoading] = useState(false); | |||
const [isLoading, setLoading] = useState(false); | |||
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | |||
//pageTitle | |||
const [appNo, setAapNo] = useState(""); | |||
const [gazetteIssue, setGazetteIssue] = useState(""); | |||
const [issueDate,setIssueDate] = useState(""); | |||
const [issueNum,setIssueNum] = useState(""); | |||
const [issueDate, setIssueDate] = useState(""); | |||
const [issueNum, setIssueNum] = useState(""); | |||
const [groupNo, setGroupNo] = useState(""); | |||
// const [groupTitle, setGroupTitle] = useState(""); | |||
//statusWindow | |||
const [open, setOpen] = useState(false); | |||
const [getStatus, setStatus] = useState(""); | |||
const [statusWindowAccepted, setStatusWindowAccepted] = useState(false); | |||
const [selectedGazetteGroup, setSelectedGazetteGroup] = useState({}); | |||
const [selectedGazetteGroupInputType, setSelectedGazetteGroupInputType] = useState(""); | |||
//editMode | |||
const [updateApplicationObject, setUpdateApplicationObject] = useState({}); | |||
const [editMode, isEditMode] = useState(false); | |||
@@ -70,78 +70,78 @@ const PublicNoticeDetail_GLD = () => { | |||
backgroundImage: `url(${titleBackgroundImg})`, | |||
width: '100%', | |||
height: '100%', | |||
backgroundSize:'contain', | |||
backgroundSize: 'contain', | |||
backgroundRepeat: 'no-repeat', | |||
backgroundColor: '#0C489E', | |||
backgroundPosition: 'right' | |||
} | |||
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(() => { | |||
loadApplicationDetail() | |||
loadApplicationDetail() | |||
}, []); | |||
// useEffect(() => { | |||
// if (reload){ | |||
// loadApplicationDetail() | |||
// } | |||
// }, [reload]); | |||
useEffect(() => { | |||
if(editMode&&isSave){ | |||
onUpdateClick(updateApplicationObject) | |||
} | |||
if (editMode && isSave) { | |||
onUpdateClick(updateApplicationObject) | |||
} | |||
}, [updateApplicationObject]); | |||
const loadApplicationDetail = () => { | |||
if(params.id > 0){ | |||
if (params.id > 0) { | |||
axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`) | |||
.then((response) => { | |||
if (response.status === 200) { | |||
setApplicationDetailData(response.data); | |||
const gazetteIssueDetail = response.data.gazetteIssueDetail; | |||
setAapNo(response.data.data.appNo); | |||
setGazetteIssue(gazetteIssueDetail.year +" Vol "+gazetteIssueDetail.volume); | |||
setIssueNum(" No. "+gazetteIssueDetail.issueNo); | |||
setIssueDate(DateUtils.dateFormat(gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); | |||
setGroupNo(response.data.data.groupNo); | |||
setLoading(false); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
.then((response) => { | |||
if (response.status === 200) { | |||
setApplicationDetailData(response.data); | |||
const gazetteIssueDetail = response.data.gazetteIssueDetail; | |||
setAapNo(response.data.data.appNo); | |||
setGazetteIssue(gazetteIssueDetail.year + " Vol " + gazetteIssueDetail.volume); | |||
setIssueNum(" No. " + gazetteIssueDetail.issueNo); | |||
setIssueDate(DateUtils.dateFormat(gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); | |||
setGroupNo(response.data.data.groupNo); | |||
setLoading(false); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
} | |||
} | |||
const onUpdateClick = (updateApplicationObject) => { | |||
const data = updateApplicationObject.objectData | |||
if(params.id > 0 ){ | |||
setLoading(true); | |||
axios.post(`${UPDATE_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`, | |||
{ | |||
contactPerson:data.contactPerson, | |||
contactFaxNo:data.contactFaxNo, | |||
contactTelNo:data.contactTelNo, | |||
if (params.id > 0) { | |||
setLoading(true); | |||
axios.post(`${UPDATE_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`, | |||
{ | |||
contactPerson: data.contactPerson, | |||
contactFaxNo: data.contactFaxNo, | |||
contactTelNo: data.contactTelNo, | |||
} | |||
) | |||
.then((response) => { | |||
if (response.status === 200) { | |||
location.reload(); | |||
} | |||
) | |||
.then((response) => { | |||
if (response.status === 200) { | |||
location.reload(); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
} | |||
}; | |||
useEffect(() => { | |||
// console.log(getStatus) | |||
if(getStatus!==""){ | |||
if (getStatus !== "") { | |||
setOpen(true) | |||
} | |||
}, [getStatus]); | |||
@@ -159,99 +159,128 @@ const PublicNoticeDetail_GLD = () => { | |||
}; | |||
useEffect(() => { | |||
if(statusWindowAccepted){ | |||
if(getStatus == "accept"){ | |||
if (statusWindowAccepted) { | |||
if (getStatus == "accept") { | |||
onAcceptedClick() | |||
}else if (getStatus== "reject"){ | |||
onRejectedClick() | |||
}else if (getStatus == "complete"){ | |||
} else if (getStatus == "reject") { | |||
onNotAcceptClick() | |||
} else if (getStatus == "complete") { | |||
onComplatedClick() | |||
}else if (getStatus == "withdraw"){ | |||
} else if (getStatus == "withdraw") { | |||
onWithdrawnClick() | |||
} | |||
} | |||
}, [statusWindowAccepted]); | |||
const onWindowCallback = (status, data) => { | |||
if (status == "genGazetteCode") { | |||
onAcceptedClick() | |||
} else if (getStatus == "notAccepted") { | |||
onNotAcceptClick(data.reason); | |||
} else if (getStatus == "complete") { | |||
onComplatedClick() | |||
} else if (getStatus == "withdraw") { | |||
onWithdrawnClick() | |||
} | |||
} | |||
const onAcceptedClick = () => { | |||
if(params.id > 0 ){ | |||
axios.post(`${SET_PUBLIC_NOTICE_STATUS_ACCEPTED}/${params.id}`, | |||
{ | |||
"groupTitle": selectedGazetteGroup.title, | |||
"groupNo": selectedGazetteGroup.type, | |||
if (params.id > 0) { | |||
axios.post(`${SET_PUBLIC_NOTICE_STATUS_ACCEPTED}/${params.id}`, | |||
{ | |||
"groupTitle": selectedGazetteGroup.title, | |||
"groupNo": selectedGazetteGroup.type, | |||
} | |||
) | |||
.then((response) => { | |||
if (response.status === 204) { | |||
setOpen(false); | |||
handleClose(); | |||
location.reload(); | |||
} | |||
) | |||
.then((response) => { | |||
if (response.status === 204) { | |||
setOpen(false); | |||
handleClose(); | |||
location.reload(); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
} | |||
}; | |||
const onRejectedClick = () => { | |||
if(params.id > 0 ){ | |||
axios.get(`${SET_PUBLIC_NOTICE_STATUS_REJRCTED}/${params.id}`) | |||
.then((response) => { | |||
if (response.status === 204) { | |||
setOpen(false); | |||
handleClose(); | |||
location.reload(); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
} | |||
}; | |||
const onNotAcceptClick = (reason) => { | |||
if (params.id <= 0) return; | |||
HttpUtils.post({ | |||
url: `${SET_PUBLIC_NOTICE_STATUS_NOT_ACCEPT}/${params.id}`, | |||
params: { | |||
reason: reason | |||
}, | |||
onSuccess: function () { | |||
location.reload(); | |||
} | |||
}); | |||
// axios.get(`${SET_PUBLIC_NOTICE_STATUS_REJRCTED}/${params.id}`) | |||
// .then((response) => { | |||
// if (response.status === 204) { | |||
// setOpen(false); | |||
// handleClose(); | |||
// location.reload(); | |||
// } | |||
// }) | |||
// .catch(error => { | |||
// console.log(error); | |||
// return false; | |||
// }); | |||
// } | |||
} | |||
const onComplatedClick = () => { | |||
if(params.id > 0 ){ | |||
axios.get(`${SET_PUBLIC_NOTICE_STATUS_COMPLATED}/${params.id}`) | |||
.then((response) => { | |||
if (response.status === 204) { | |||
setOpen(false); | |||
handleClose(); | |||
location.reload(); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
if (params.id > 0) { | |||
axios.get(`${SET_PUBLIC_NOTICE_STATUS_COMPLATED}/${params.id}`) | |||
.then((response) => { | |||
if (response.status === 204) { | |||
setOpen(false); | |||
handleClose(); | |||
location.reload(); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
} | |||
}; | |||
const onWithdrawnClick = () => { | |||
if(params.id > 0 ){ | |||
axios.get(`${SET_PUBLIC_NOTICE_STATUS_WITHDRAW}/${params.id}`) | |||
.then((response) => { | |||
if (response.status === 204) { | |||
setOpen(false); | |||
handleClose(); | |||
location.reload(); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
if (params.id > 0) { | |||
axios.get(`${SET_PUBLIC_NOTICE_STATUS_WITHDRAW}/${params.id}`) | |||
.then((response) => { | |||
if (response.status === 204) { | |||
setOpen(false); | |||
handleClose(); | |||
location.reload(); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
} | |||
}; | |||
return ( | |||
<Grid container sx={{maxnHeight: '500vh',backgroundColor:'#ffffff'}} direction="column"> | |||
<StatusChangeDialog open={open} handleClose={handleClose} setStatusWindowAccepted={setStatusWindowAccepted} | |||
getStatus={getStatus} issueDate={issueDate} issueNum={issueNum} gazetteIssue={gazetteIssue} | |||
selectedGazetteGroup={selectedGazetteGroup} setSelectedGazetteGroup={setSelectedGazetteGroup} | |||
selectedGazetteGroupInputType={selectedGazetteGroupInputType} setSelectedGazetteGroupInputType={setSelectedGazetteGroupInputType} | |||
/> | |||
<Grid container sx={{ maxnHeight: '500vh', backgroundColor: '#ffffff' }} direction="column"> | |||
<StatusChangeDialog open={open} | |||
handleClose={handleClose} | |||
onWindowCallback={onWindowCallback} | |||
setStatusWindowAccepted={setStatusWindowAccepted} | |||
getStatus={getStatus} | |||
issueDate={issueDate} | |||
issueNum={issueNum} | |||
gazetteIssue={gazetteIssue} | |||
selectedGazetteGroup={selectedGazetteGroup} | |||
setSelectedGazetteGroup={setSelectedGazetteGroup} | |||
selectedGazetteGroupInputType={selectedGazetteGroupInputType} | |||
setSelectedGazetteGroupInputType={setSelectedGazetteGroupInputType} | |||
/> | |||
<Grid item xs={12}> | |||
<div style={BackgroundHead}> | |||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||
@@ -260,43 +289,43 @@ const PublicNoticeDetail_GLD = () => { | |||
</div> | |||
</Grid> | |||
<Grid item xs={12} > | |||
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center"> | |||
<Typography ml={4} mt={3} variant="h4">{title}</Typography> | |||
</Stack> | |||
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center"> | |||
<Typography ml={4} mt={3} variant="h4">{title}</Typography> | |||
</Stack> | |||
</Grid> | |||
<Grid item xs={12} > | |||
<Grid container direction="row"> | |||
<Grid item xs={12} md={10}> | |||
<Grid container direction="column"> | |||
<Grid item xs={12} md={10}> | |||
<Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||
{isLoading&&editMode? | |||
<LoadingComponent/>: | |||
<ApplicationDetailCard | |||
applicationDetailData={applicationDetailData} | |||
setStatus = {setStatus} | |||
// setReload = {setReload} | |||
setUpdateApplicationObject={setUpdateApplicationObject} | |||
isEditMode = {isEditMode} | |||
setiIsSave={setiIsSave} | |||
<Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}> | |||
{isLoading && editMode ? | |||
<LoadingComponent /> : | |||
<ApplicationDetailCard | |||
applicationDetailData={applicationDetailData} | |||
setStatus={setStatus} | |||
// setReload = {setReload} | |||
setUpdateApplicationObject={setUpdateApplicationObject} | |||
isEditMode={isEditMode} | |||
setiIsSave={setiIsSave} | |||
// isNewRecord={isNewRecord} | |||
/> | |||
} | |||
</Box> | |||
</Grid> | |||
<Grid item xs={12} md={10}> | |||
<Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||
<GazetteDetailCard | |||
<Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}> | |||
<GazetteDetailCard | |||
// updateUserObject={updateUserObject} | |||
applicationDetailData={applicationDetailData} | |||
// isCollectData={isCollectData} | |||
// isNewRecord={isNewRecord} | |||
// isCollectData={isCollectData} | |||
// isNewRecord={isNewRecord} | |||
/> | |||
</Box> | |||
</Grid> | |||
<Grid item xs={12} md={10}> | |||
<Box xs={12} ml={4} mt={3}> | |||
<TabTableDetail applicationDetailData={applicationDetailData}/> | |||
<TabTableDetail applicationDetailData={applicationDetailData} /> | |||
</Box> | |||
</Grid> | |||
</Grid> | |||
@@ -304,18 +333,18 @@ const PublicNoticeDetail_GLD = () => { | |||
<Grid item xs={12} md={2} lg={2}> | |||
<Grid container> | |||
<Grid item xs={12} md={12}> | |||
<Box xs={12} md={12} ml={1} mt={3} mr={1} height='800px' sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||
<ClientDetailCard | |||
<Box xs={12} md={12} ml={1} mt={3} mr={1} height='800px' sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}> | |||
<ClientDetailCard | |||
// updateUserObject={updateUserObject} | |||
applicationDetailData={applicationDetailData} | |||
// isCollectData={isCollectData} | |||
// isNewRecord={isNewRecord} | |||
// isCollectData={isCollectData} | |||
// isNewRecord={isNewRecord} | |||
/> | |||
</Box> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
); | |||
@@ -52,7 +52,31 @@ const Palette = (mode) => { | |||
background: { | |||
paper: paletteColor.grey[0], | |||
default: paletteColor.grey.A50 | |||
} | |||
}, | |||
ochre: { | |||
main: '#E3D026', | |||
light: '#E9DB5D', | |||
dark: '#A29415', | |||
contrastText: '#242105', | |||
}, | |||
red: { | |||
main: '#f05b5b', | |||
light: '#ff5e5e', | |||
dark: '#c91616', | |||
contrastText: '#fff', | |||
}, | |||
pink: { | |||
main: '#ed138a', | |||
light: '#ff5e5e', | |||
dark: '#ba1c73', | |||
contrastText: '#fff', | |||
}, | |||
orange: { | |||
main: '#ed9740', | |||
light: '#ff5e5e', | |||
dark: '#b0671e', | |||
contrastText: '#fff', | |||
}, | |||
} | |||
}); | |||
}; | |||
@@ -59,7 +59,7 @@ export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; | |||
export const DELETE_USER = apiPath+'/user'; | |||
export const GET_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/application-detail'; | |||
export const SET_PUBLIC_NOTICE_STATUS_ACCEPTED = apiPath+'/application/application-detail-status-accepted'; | |||
export const SET_PUBLIC_NOTICE_STATUS_REJRCTED = apiPath+'/application/application-detail-status-rejected'; | |||
export const SET_PUBLIC_NOTICE_STATUS_NOT_ACCEPT = apiPath+'/application/application-detail-status-not-accept'; | |||
export const SET_PUBLIC_NOTICE_STATUS_CANCELLED = apiPath+'/application/application-detail-status-cancelled'; | |||
export const SET_PUBLIC_NOTICE_STATUS_COMPLATED = apiPath+'/application/application-detail-status-complated'; | |||
export const SET_PUBLIC_NOTICE_STATUS_WITHDRAW = apiPath+'/application/application-detail-status-withdrawn'; | |||