diff --git a/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js b/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js index 6c925f8..514a827 100644 --- a/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js +++ b/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js @@ -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 ? - <> - - - : - <>{ - currentApplicationDetailData.status=="submitted"? - - - - : - null - } - - } - {currentApplicationDetailData.status == "accepted" ? : currentApplicationDetailData.status == "paid" ? @@ -420,7 +306,7 @@ const ApplicationDetailCard = ( - + - + - + - + - + - {/* - - - - - - Remarks: - - - - - - - - - - - - - */} diff --git a/src/pages/PublicNoticeDetail_GLD/StatusChangeDialog.js b/src/pages/PublicNoticeDetail_GLD/StatusChangeDialog.js index db32a95..e3a837a 100644 --- a/src/pages/PublicNoticeDetail_GLD/StatusChangeDialog.js +++ b/src/pages/PublicNoticeDetail_GLD/StatusChangeDialog.js @@ -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( + + {text} + + ); + } + + const getNotAcceptedContent = () => { + setContent( + + { + setRemarks(newValues); + setHelperText(""); + }} + > + + + + ); + } + + const getGazetteCodeContent = () => { + setContent( + + + + Target Issue: + + + + {props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate} + + + + + + + + Grazette Group: + + + 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) => } + /> + + + + + ); + } + return ( - - - - - - - {status} Application - - - + + + + + + + {dialogTitle} + + - - -
- - - {props.getStatus == "accept"? - - - - - Target Issue: - - - - {props.gazetteIssue+", "}{props.issueNum+", "}{props.issueDate} - - - - - - - - Grazette Group: - - - 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) => } - /> - - - - : - - - - Are you really {status} the Application? - - - - } - - -
- - - - - - - - - - + + + +
+ + + {content} + + +
+ + + + + + + + + + ); }; diff --git a/src/pages/PublicNoticeDetail_GLD/index.js b/src/pages/PublicNoticeDetail_GLD/index.js index a5c4d0f..c1ae869 100644 --- a/src/pages/PublicNoticeDetail_GLD/index.js +++ b/src/pages/PublicNoticeDetail_GLD/index.js @@ -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 ( - - + +
@@ -260,43 +289,43 @@ const PublicNoticeDetail_GLD = () => {
- - {title} - + + {title} + - - {isLoading&&editMode? - : - + {isLoading && editMode ? + : + } - - + - + @@ -304,18 +333,18 @@ const PublicNoticeDetail_GLD = () => { - - + - + ); diff --git a/src/themes/palette.js b/src/themes/palette.js index d20075f..0246acb 100644 --- a/src/themes/palette.js +++ b/src/themes/palette.js @@ -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', + }, } }); }; diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index 01b40d2..f157ebc 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -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';