update status accepted window

src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js

@@ -15,9 +15,11 @@ export function getStatus(params) {
         case "paid":
             return getStatusTag({ color: "#22a13f", text: "待發布" })
         case "published":
-            return getStatusTag({ color: "#f5a83d", text: "已發布" })
+            return getStatusTag({ color: "#f5a83d", text: "待付款" })
         case "withdrawn":
             return getStatusTag({ color: "#8a8784", text: "已撤回" })
+        case "complated":
+            return getStatusTag({ color: "#8a8784", text: "已完成" })
         default:
             return getStatusTag({ text: params.row.status })
     }
@@ -38,9 +40,11 @@ export function getStatusByText(status) {
         case "paid":
             return getStatusTag({ color: "#22a13f", text: "待發布" })
         case "published":
-            return getStatusTag({ color: "#f5a83d", text: "已發布" })
+            return getStatusTag({ color: "#f5a83d", text: "待付款" })
         case "withdrawn":
             return getStatusTag({ color: "#8a8784", text: "已撤回" })
+        case "complated":
+            return getStatusTag({ color: "#8a8784", text: "已完成" })
         default:
             return getStatusTag({ text: params.row.status })
     }
@@ -61,9 +65,11 @@ export function getStatusEng(params) {
         case "paid":
             return getStatusTag({ color: "#22a13f", text: "To be published" })
         case "published":
-            return getStatusTag({ color: "#f5a83d", text: "Published" })
+            return getStatusTag({ color: "#f5a83d", text: "Pending Payment" })
         case "withdrawn":
             return getStatusTag({ color: "#8a8784", text: "Withdrawn" })
+        case "completed":
+            return getStatusTag({ color: "#8a8784", text: "Completed" })
         default:
             return getStatusTag({ text: params.row.status })
     }
@@ -83,9 +89,11 @@ export function getStatusByTextEng(status) {
         case "paid":
             return getStatusTag({ color: "#22a13f", text: "To Be Published" })
         case "published":
-            return getStatusTag({ color: "#f5a83d", text: "Published" })
+            return getStatusTag({ color: "#f5a83d", text: "Pending Payment" })
         case "withdrawn":
             return getStatusTag({ color: "#8a8784", text: "Withdrawn" })
+        case "completed":
+            return getStatusTag({ color: "#8a8784", text: "Completed" })
         default:
             return getStatusTag({ text: params.row.status })
     }

src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js

@@ -22,6 +22,7 @@ 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';
@@ -29,9 +30,15 @@ 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";
+
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     {   applicationDetailData,
+        setStatus,
         // isCollectData,
         // updateUserObject,
         // isNewRecord
@@ -43,6 +50,9 @@ const ApplicationDetailCard = (
     const [verified, setVerified] = useState(null);
     const [fileDetail, setfileDetail] = useState({});
     const [onReady,setOnReady] = useState(false);
+    // const navigate = useNavigate()
+    // const params = useParams();
+
     const {register, 
         // getValues
     } = useForm()
@@ -74,21 +84,21 @@ const ApplicationDetailCard = (
         });
     };
 
-    // const onStatusClick = () => () => {
-    //     if(params.id > 0 ){
-    //         axios.post(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`)
-    //             .then((response) => {
-    //                 if (response.status === 200) {
-    //                     navigate(`/application/${params.id}`);
-    //                 }
-    //             })
-    //             .catch(error => {
-    //                 console.log(error);
-    //                 return false;
-    //             });
-    //     }
-    // };
+    const acceptedClick = () => () =>{
+        setStatus("accepted")
+    };
+
+    const rejectedClick = () => () =>{
+        setStatus("reject")
+    };
+
+    const complatedClick = () => () =>{
+        setStatus("complete")
+    };
 
+    const withdrawnClick = () => () =>{
+        setStatus("withdraw")
+    };
 
     return (
         !onReady ?
@@ -100,7 +110,7 @@ const ApplicationDetailCard = (
             >
                 {verified?
                     <Grid container spacing={4} direction="row">
-                        <Grid item xs={4} >
+                        <Grid item xs={12} md={4} >
                             <Stack 
                                 direction="row"
                                 justifyContent="space-between"
@@ -135,7 +145,7 @@ const ApplicationDetailCard = (
                                 }
                             </Stack>
                         </Grid>
-                        <Grid item xs={8} >
+                        <Grid item xs={12} md={8} >
                             <Stack 
                                 direction="row"
                                 justifyContent="space-between"
@@ -148,7 +158,7 @@ const ApplicationDetailCard = (
                                     <Button
                                         // size="large"
                                         variant="contained"
-                                        // onClick={handleNewUserClick}
+                                        onClick={acceptedClick()}
                                         sx={{
                                             textTransform: 'capitalize',
                                             alignItems: 'end',
@@ -160,7 +170,7 @@ const ApplicationDetailCard = (
                                     <Button
                                         // size="large"
                                         variant="contained"
-                                        // onClick={handleNewUserClick}
+                                        onClick={rejectedClick()}
                                         sx={{
                                             textTransform: 'capitalize',
                                             alignItems: 'end',
@@ -175,7 +185,7 @@ const ApplicationDetailCard = (
                                     <Button
                                         // size="large"
                                         variant="contained"
-                                        // onClick={handleNewUserClick}
+                                        onClick={complatedClick()}
                                         sx={{
                                             textTransform: 'capitalize',
                                             alignItems: 'end',
@@ -187,7 +197,7 @@ const ApplicationDetailCard = (
                                     <Button
                                         // size="large"
                                         variant="contained"
-                                        // onClick={handleNewUserClick}
+                                        onClick={withdrawnClick()}
                                         sx={{
                                             textTransform: 'capitalize',
                                             alignItems: 'end',
@@ -202,7 +212,7 @@ const ApplicationDetailCard = (
                         </Grid>
                     </Grid>:null
                 }
-                <Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
+                <Typography variant="h5" xs={12} md={12} sx={{mb: 2, borderBottom: "1px solid black"}}>
                         Application Details
                 </Typography>
                 <form>

src/pages/PublicNoticeDetail_GLD/StatusChangeDialog.js

@@ -0,0 +1,148 @@
+import {
+  useEffect,
+  // useState
+  } from "react";
+
+// material-ui
+import {
+  Button,
+  // Link,
+  Stack,
+  Typography,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  FormLabel,
+  Autocomplete,
+  TextField
+} from '@mui/material';
+import { Grid } from "../../../node_modules/@mui/material/index";
+import * as ComboData from "utils/ComboData";
+import { useFormik,FormikProvider } from 'formik';
+import * as yup from 'yup';
+
+
+const StatusChangeDialog = (props) => {
+  // const [selectedGazetteGroup, setSelectedGazetteGroup] = useState({});
+  // const [selectedGazetteGroupInputType, setSelectedGazetteGroupInputType] = useState("");
+  const groupTitleComboList = ComboData.groupTitle;
+  
+  useEffect(() => {
+    if(props.getStatus == "accepted"){
+      onAcceptedClick()
+    }else if (props.getStatus == "reject"){
+      onRejectedClick()
+    }else if (props.getStatus == "complete"){
+      onComplatedClick()
+    }else if (props.getStatus == "withdraw"){
+      onWithdrawnClick()
+    }
+  }, [props.getStatus]);
+  
+  const acceptedHandle = () => () =>{
+    // console.log(selectedGazetteGroup)
+    props.setStatusWindowAccepted(true)
+  };
+
+  
+    const formik = useFormik({
+        initialValues:({
+            username:'',
+        }),
+        validationSchema:yup.object().shape({
+        }),
+  });
+
+  // const handleReset = () => {
+  //   setSelectedGazetteGroupInputType("")
+  //   selectedGazetteGroup({});
+  // };
+  
+  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">
+                  Accept Application
+                </Typography>
+              </Stack>
+            </Grid>
+          </Grid>
+        </DialogTitle>
+        <FormikProvider value={formik}>
+            <form>
+              <DialogContent>
+                <DialogContentText>
+                    <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("checkDigit","")
+                                        }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>
+                </DialogContentText>
+              </DialogContent>
+            </form>
+        </FormikProvider>
+        <Stack direction="row" justifyContent="space-around">
+          <DialogActions>
+            <Button variant="contained" color="success" onClick={acceptedHandle()} autoFocus>
+              Accept
+            </Button>
+          </DialogActions>
+          <DialogActions>
+            <Button variant="contained"  onClick={props.handleClose} autoFocus>
+              Cancel
+            </Button>
+          </DialogActions>
+        </Stack>
+      </Dialog>
+  );
+};
+
+export default StatusChangeDialog;

src/pages/PublicNoticeDetail_GLD/index.js

@@ -25,20 +25,31 @@ const ClientDetailCard = Loadable(lazy(() => import('./ClientDetailCard')));
 const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable')));
 import {
   GET_PUBLIC_NOTICE_APPLY_DETAIL,
+  SET_PUBLIC_NOTICE_STATUS_ACCEPTED
 } from "utils/ApiPathConst";
+const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
+import * as DateUtils from "utils/DateUtils";
 
 
 // ==============================|| Body - DEFAULT ||============================== //
 
-const DashboardDefault = () => {
+const PublicNoticeDetail_GLD = () => {
   const params = useParams();
+  // const navigate = useNavigate()
   const [applicationDetailData, setApplicationDetailData] = useState({});
   // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
   const [appNo, setAapNo] = useState("");
   const [gazetteIssue, setGazetteIssue] = useState("");
+  const [issueDate,setIssueDate] = useState("");
+  const [issueNum,setIssueNum] = useState("");
   const [groupNo, setGroupNo] = useState("");
   const [groupTitle, setGroupTitle] = useState("");
-
+  const [open, setOpen] = useState(false);
+  const [getStatus, setStatus] = useState("");
+  const [statusWindowAccepted, setStatusWindowAccepted] = useState(false);
+  const [selectedGazetteGroup, setSelectedGazetteGroup] = useState({});
+  const [selectedGazetteGroupInputType, setSelectedGazetteGroupInputType] = useState("");
+  
   const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -49,29 +60,142 @@ const DashboardDefault = () => {
   const title = groupNo!=""?("Application / "+appNo+", "+gazetteIssue+", "+groupNo+" , "+groupTitle):("Application / "+appNo+", "+gazetteIssue)
 
   useEffect(() => {
+    loadApplicationDetail()
+  }, []);
+
+  const loadApplicationDetail = () => {
     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;
-                  // setRefApplicationDetailData(response.data);
-                  setAapNo(response.data.data.appNo);
-                  setGazetteIssue(gazetteIssueDetail.year +" Vol "+gazetteIssueDetail.volume);
+      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)"));
+                if (gazetteIssueDetail.data!==null&&gazetteIssueDetail.data!==undefined){
                   setGroupNo("No. "+gazetteIssueDetail.data.groupNo);
                   setGroupTitle("No. "+gazetteIssueDetail.data.groupTitle);
-
                 }
-            })
-            .catch(error => {
-                console.log(error);
-                return false;
-            });
+              }
+          })
+          .catch(error => {
+              console.log(error);
+              return false;
+          });
     }
-  }, []);
+  }
+
+  useEffect(() => {
+    // console.log(getStatus)
+    if(getStatus!==""){
+      setOpen(true)
+    }
+  }, [getStatus]);
+
+  const handleClose = () => {
+    handleReset()
+    setOpen(false);
+    setStatus("")
+    setStatusWindowAccepted(false)
+  };
+
+  const handleReset = () => {
+    setSelectedGazetteGroupInputType("")
+    setSelectedGazetteGroup({});
+  };
+
+  useEffect(() => {
+    if(statusWindowAccepted){
+      console.log(selectedGazetteGroup)
+      if(getStatus == "accepted"){
+        onAcceptedClick()
+      }else if (getStatus== "reject"){
+        onRejectedClick()
+      }else if (getStatus == "complete"){
+        onComplatedClick()
+      }else if (getStatus == "withdraw"){
+        onWithdrawnClick()
+      }
+    }
+  }, [statusWindowAccepted]);
+
+  const onAcceptedClick = () => {
+    if(params.id > 0 ){
+        axios.get(`${SET_PUBLIC_NOTICE_STATUS_ACCEPTED}/${params.id}`)
+          .then((response) => {
+              if (response.status === 204) {
+                setOpen(false);
+                handleClose();
+                loadApplicationDetail()
+              }
+          })
+          .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();
+                loadApplicationDetail()
+              }
+          })
+          .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();
+                loadApplicationDetail()
+              }
+          })
+          .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();
+                loadApplicationDetail()
+              }
+          })
+          .catch(error => {
+              console.log(error);
+              return false;
+          });
+    }
+  };
 
   return (
     <Grid container sx={{maxnHeight: '500vh',backgroundColor:'#ffffff'}} direction="column">
+    <StatusChangeDialog open={open} handleClose={handleClose} setStatusWindowAccepted={setStatusWindowAccepted}
+      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">
@@ -88,17 +212,18 @@ const DashboardDefault = () => {
         <Grid container direction="row">
           <Grid item xs={12} md={10}>
             <Grid container direction="column">
-              <Grid item>
+              <Grid item xs={12} md={10}>
                 <Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
                   <ApplicationDetailCard 
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}
+                    setStatus = {setStatus}
                     // isCollectData={isCollectData}
                     // isNewRecord={isNewRecord}
                   />
                 </Box>
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} md={10}>
                 <Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
                   <GazetteDetailCard 
                     // updateUserObject={updateUserObject}
@@ -108,7 +233,7 @@ const DashboardDefault = () => {
                   />
                 </Box>
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} md={10}>
                 <Box xs={12} ml={4} mt={3}>
                   <TabTableDetail applicationDetailData={applicationDetailData}/>
                 </Box>
@@ -117,8 +242,8 @@ const DashboardDefault = () => {
           </Grid>
           <Grid item xs={12} md={2} lg={2}>
             <Grid container>
-              <Grid item xs={12}>
-                <Box ml={1} mt={3} mr={1} height='800px' sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
+              <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 
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}
@@ -129,11 +254,10 @@ const DashboardDefault = () => {
               </Grid>
             </Grid>
           </Grid>
-        </Grid>
-          
+        </Grid>    
       </Grid>
     </Grid>
   );
 };
 
-export default DashboardDefault;
+export default PublicNoticeDetail_GLD;

src/utils/ApiPathConst.js

@@ -58,6 +58,11 @@ export const POST_PUBLIC_NOTICE_APPLY = apiPath+'/application/apply';
 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_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';
 
 //User Group
 export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save';