update public status cancel

src/pages/PublicNoticeDetail/ApplicationDetailCard.js

@@ -33,7 +33,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     {   applicationDetailData,
-        // isCollectData,
+        setStatus,
         // updateUserObject,
         // isNewRecord
     }
@@ -79,21 +79,9 @@ 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 cancelledClick = () => () =>{
+        setStatus("cancel")
+    };
 
     return (
         !onReady ?
@@ -116,6 +104,7 @@ const ApplicationDetailCard = (
                                 // size="large"
                                 variant="contained"
                                 // onClick={handleNewUserClick}
+                                disabled= {currentApplicationDetailData.status =="rejected"||currentApplicationDetailData.status =="cancelled"||currentApplicationDetailData.status =="paid"}
                                 sx={{
                                     textTransform: 'capitalize',
                                     alignItems: 'end'
@@ -126,7 +115,8 @@ const ApplicationDetailCard = (
                             <Button
                                     // size="large"
                                     variant="contained"
-                                    // onClick={handleNewUserClick}
+                                    onClick={cancelledClick()}
+                                    disabled= {currentApplicationDetailData.status !=="submitted"}
                                     sx={{
                                         textTransform: 'capitalize',
                                         alignItems: 'end',
@@ -154,7 +144,7 @@ const ApplicationDetailCard = (
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
-                                            <FormControl variant="outlined" fullWidth  >
+                                            <FormControl variant="outlined" fullWidth  disabled>
                                                 <OutlinedInput
                                                     fullWidth
                                                     size="small"
@@ -193,7 +183,7 @@ const ApplicationDetailCard = (
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
-                                            <FormControl variant="outlined" fullWidth  >
+                                            <FormControl variant="outlined" fullWidth disabled >
                                                 { currentApplicationDetailData.orgId===null?
                                                 <OutlinedInput
                                                     fullWidth
@@ -227,7 +217,7 @@ const ApplicationDetailCard = (
 
                                         <Grid item xs={12} md={9} lg={9}>
                                             <Stack direction="row">
-                                                <FormControl variant="outlined" fullWidth >
+                                                <FormControl variant="outlined" fullWidth disabled>
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("issueNum",
@@ -252,7 +242,7 @@ const ApplicationDetailCard = (
                                         </Grid>
 
                                         <Grid item xs={12} md={9} lg={9}>
-                                            <FormControl variant="outlined" fullWidth  >
+                                            <FormControl variant="outlined" fullWidth  disabled>
                                                 <OutlinedInput
                                                     fullWidth
                                                     size="small"
@@ -275,7 +265,7 @@ const ApplicationDetailCard = (
 
                                         <Grid item xs={12} md={9} lg={9}>
                                             <Stack direction="row">
-                                                <FormControl variant="outlined" fullWidth>
+                                                <FormControl variant="outlined" fullWidth disabled>
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("issueDate",
@@ -299,7 +289,7 @@ const ApplicationDetailCard = (
 
                                     <Grid item xs={12} md={9} lg={9}>
                                         <Stack direction="row">
-                                            <FormControl variant="outlined" sx={{width:'25%'}}>
+                                            <FormControl variant="outlined" sx={{width:'25%'}} disabled>
                                                 <OutlinedInput
                                                     size="small"
                                                     {...register("countryCode",
@@ -309,7 +299,7 @@ const ApplicationDetailCard = (
                                                     id='countryCode'
                                                 />
                                             </FormControl>
-                                            <FormControl variant="outlined" sx={{width:'100%'}}>
+                                            <FormControl variant="outlined" sx={{width:'100%'}} disabled>
                                                 <OutlinedInput
                                                     size="small"
                                                     {...register("phoneNumber",
@@ -332,7 +322,7 @@ const ApplicationDetailCard = (
 
                                     <Grid item xs={12} md={9} lg={9}>
                                         <Stack direction="row">
-                                            <FormControl variant="outlined" sx={{width:'25%'}}>
+                                            <FormControl variant="outlined" sx={{width:'25%'}} disabled>
                                                 <OutlinedInput
                                                     size="small"
                                                     {...register("countryCode",
@@ -342,7 +332,7 @@ const ApplicationDetailCard = (
                                                     id='countryCode'
                                                 />
                                             </FormControl>
-                                            <FormControl variant="outlined" sx={{width:'100%'}}>
+                                            <FormControl variant="outlined" sx={{width:'100%'}} disabled>
                                                 <OutlinedInput
                                                     size="small"
                                                     {...register("faxNumber",

src/pages/PublicNoticeDetail/StatusChangeDialog.js

@@ -0,0 +1,102 @@
+import {
+  useEffect,
+  useState
+  } from "react";
+
+// material-ui
+import {
+  Button,
+  // Link,
+  Stack,
+  Typography,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  FormLabel,
+} from '@mui/material';
+import { Grid } from "../../../node_modules/@mui/material/index";
+import { useFormik,FormikProvider } from 'formik';
+import * as yup from 'yup';
+
+
+const StatusChangeDialog = (props) => {
+  const [status, setStatus] = useState("");
+  
+  useEffect(() => {
+    console.log(Object.keys(!props.selectedGazetteGroup).length)
+    if(props.getStatus == "cancel"){
+      setStatus("取消")
+    }
+  }, [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={'xs'}
+      >
+        <DialogTitle >
+          <Grid container>
+            <Grid item>
+              <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                <Typography variant="h4" color="error">
+                  {status}公共啟事
+                </Typography>
+              </Stack>
+            </Grid>
+          </Grid>
+        </DialogTitle>
+        <FormikProvider value={formik}>
+            <form>
+              <DialogContent>
+                <DialogContentText>
+                  <Grid container direction="row" justifyContent="center" alignItems="center">
+                      <Grid item xs={12} md={5} lg={5} sx={{mb: 5,}}>
+                        <FormLabel sx={{fontSize: "18px", color:"#000000",textAlign:"center"}}>
+                          確定{status}公共啟事?
+                        </FormLabel>
+                      </Grid>
+                    </Grid>   
+                </DialogContentText>
+              </DialogContent>
+            </form>
+        </FormikProvider>
+        <Stack direction="row" justifyContent="space-around">
+          <DialogActions>
+            <Button variant="contained"  onClick={props.handleClose} autoFocus>
+              取消
+            </Button>
+          </DialogActions>
+          <DialogActions>
+            <Button variant="contained"  color="error" onClick={acceptedHandle()} autoFocus >
+              確定
+            </Button>
+          </DialogActions>
+        </Stack>
+      </Dialog>
+  );
+};
+
+export default StatusChangeDialog;

src/pages/PublicNoticeDetail/index.js

@@ -23,9 +23,10 @@ const ApplicationDetailCard = Loadable(lazy(() => import('./ApplicationDetailCar
 // const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable')));
 import {
   GET_PUBLIC_NOTICE_APPLY_DETAIL,
+  SET_PUBLIC_NOTICE_STATUS_CANCELLED
 } from "utils/ApiPathConst";
 import {useNavigate} from "react-router-dom";
-
+const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
 
 // ==============================|| Body - DEFAULT ||============================== //
 
@@ -36,6 +37,11 @@ const DashboardDefault = () => {
   // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
   const navigate = useNavigate()
 
+  //statusWindow
+  const [open, setOpen] = useState(false);
+  const [getStatus, setStatus] = useState("");
+  const [statusWindowAccepted, setStatusWindowAccepted] = useState(false);
+
   const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -45,20 +51,24 @@ const DashboardDefault = () => {
   // const appNo = "G2023-343"
 
   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);
-                  setAapNo(response.data.data.appNo);
-                }
-            })
-            .catch(error => {
-                console.log(error);
-                return false;
-            });
+      axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`)
+          .then((response) => {
+              if (response.status === 200) {
+                setApplicationDetailData(response.data);
+                setAapNo(response.data.data.appNo);
+              }
+          })
+          .catch(error => {
+              console.log(error);
+              return false;
+          });
     }
-  }, []);
+  }
 
   useEffect(() => {
     if(applicationDetailData.data === null){
@@ -66,8 +76,47 @@ const DashboardDefault = () => {
     }
   }, [applicationDetailData]);
 
+  const handleClose = () => {
+    setOpen(false);
+    setStatus("")
+    setStatusWindowAccepted(false)
+  };
+
+  useEffect(() => {
+    if(statusWindowAccepted){
+      if(getStatus == "cancel"){
+        onCancelledClick()
+      }
+    }
+  }, [statusWindowAccepted]);
+
+  useEffect(() => {
+    // console.log(getStatus)
+    if(getStatus!==""){
+      setOpen(true)
+    }
+  }, [getStatus]);
+
+  const onCancelledClick = () => {
+    if(params.id > 0 ){
+        axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`)
+          .then((response) => {
+              if (response.status === 204) {
+                setOpen(false);
+                handleClose();
+                loadApplicationDetail()
+              }
+          })
+          .catch(error => {
+              console.log(error);
+              return false;
+          });
+    }
+  };
+
   return (
     <Grid container sx={{minHeight: '110vh',backgroundColor:'#ffffff'}} direction="column">
+      <StatusChangeDialog open={open} handleClose={handleClose} setStatusWindowAccepted={setStatusWindowAccepted} getStatus={getStatus}/>
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -87,7 +136,7 @@ const DashboardDefault = () => {
               <Grid item width="75%">
                 <Box xs={12} mt={6} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
                   <ApplicationDetailCard 
-                    // updateUserObject={updateUserObject}
+                    setStatus = {setStatus}
                     applicationDetailData={applicationDetailData}
                     // isCollectData={isCollectData}
                     // isNewRecord={isNewRecord}

src/pages/PublicNoticeDetail_GLD/index.js

@@ -245,11 +245,11 @@ const PublicNoticeDetail_GLD = () => {
 
   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}
-      />
+      <StatusChangeDialog open={open} handleClose={handleClose} 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">