public notice

src/pages/PublicNotice/ApplyForm/index.js

@@ -2,15 +2,20 @@
 import {
     Grid, 
     Typography, 
-    Button
+    Button,
+    Radio,
+    RadioGroup,
+    FormControlLabel 
 } from '@mui/material';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 import * as React from "react";
-import * as HttpUtils from "../../../utils/HttpUtils";
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as FieldUtils from "../../../utils/FieldUtils";
+import * as HttpUtils from "utils/HttpUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as FieldUtils from "utils/FieldUtils";
+import * as DateUtils from "utils/DateUtils";
 
+import {useNavigate} from "react-router-dom";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
  const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
@@ -22,6 +27,9 @@ const PublicNoticeApplyForm = () => {
     const [userData, setUserData]  = React.useState([]);
     const [isLoading, setLoding] = React.useState(true);
     const [attachment, setAttachment]  = React.useState({});
+    const [defaultIssueId, setDefaultIssueId]  = React.useState(0);
+    const navigate=useNavigate();
+
 
     const formik = useFormik({
         enableReinitialize:true,
@@ -30,7 +38,6 @@ const PublicNoticeApplyForm = () => {
             group: yup.string().max(255),
             groupTitle: yup.string().max(255),
             groupNo: yup.string().max(255),
-            issueId: yup.string().max(255).nullable(),
             contactPerson: yup.string().max(40).nullable(),
             tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
             fax_countryCode: yup.string().min(3,'請輸入3位數字'),
@@ -53,18 +60,17 @@ const PublicNoticeApplyForm = () => {
                         countryCode: values.fax_countryCode,
                         faxNumber: values.faxNumber
                     },
+                    issueId:values.issueId,
                     remarks:values.remarks,
                 },
                 files: [attachment],
                 onSuccess: function(){
-                        loadDataFun();
+                    navigate("/publicNotice");
                 }
             });
         }
     });
 
-
-
     React.useEffect(()=>{
         loadUserData();
     },[]);
@@ -78,6 +84,8 @@ const PublicNoticeApplyForm = () => {
                 response["phoneNumber"] = response?.contactTelNo?.phoneNumber;
                 response["fax_countryCode"] = response?.contactFaxNo?.countryCode;
                 response["faxNumber"] = response?.contactFaxNo?.faxNumber;
+                response["issueId"] = response?.gazetteIssueList[0].id;
+                setDefaultIssueId(response?.gazetteIssueList[0].id);
                 setUserData(response);
             }
         });
@@ -95,6 +103,25 @@ const PublicNoticeApplyForm = () => {
         setAttachment(event.target.files[0]);
     }
 
+    const getIssueSelection=()=>{
+        var selection = [];
+        for (var i = 0; i < userData?.gazetteIssueList?.length; i++) {
+            let data = userData.gazetteIssueList[i];
+            "2023 Vol 027, No. 36, 8 Sep 2023 (Fri)"
+            let label = data.year
+            +" Vol. "+zeroPad(data.volume,3)
+            +", No. "+zeroPad(data.issueNo,2)
+            +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
+            selection.push(<FormControlLabel value={data.id} control={<Radio />} label={label} />);
+        }
+        return selection;
+    }
+
+    function zeroPad(num, places) {
+        var zero = places - num.toString().length + 1;
+        return Array(+(zero > 0 && zero)).join("0") + num;
+    }
+
     return (
         isLoading ?
             <LoadingComponent/>
@@ -134,14 +161,26 @@ const PublicNoticeApplyForm = () => {
                     })}
                 <Grid item lg={4}></Grid>
                 <Grid item lg={4}></Grid>
-                {FieldUtils.getPhoneField({
-                        label:"Issue:",
-                        valueName:{
-                            code: "issueId",
-                            num:"issueId"
-                        },
-                        form: formik
-                    })}
+                <Grid item lg={4}>
+                    <Grid container alignItems={"center"}>
+                        <Grid item xs={4} s={4} md={4} lg={4}
+                                sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                            目標期數:
+                        </Grid>
+                        <Grid item xs={7} s={7} md={7} lg={6}>
+                            <RadioGroup
+                                aria-labelledby="demo-radio-buttons-group-label"
+                                id="issueId"
+                                name="issueId"
+                                defaultValue={defaultIssueId}
+                            >
+                                {
+                                    getIssueSelection()
+                                }
+                            </RadioGroup>
+                        </Grid>
+                    </Grid>
+                </Grid>
                 <Grid item lg={4}></Grid>
                 <Grid item lg={4}></Grid>
                 {FieldUtils.getTextArea({

src/utils/DateUtils.js

@@ -1,13 +1,12 @@
 import dayjs from 'dayjs';
 
 export const datetimeStr = (date) =>{
-    date = convertToDate(date);
-    return dayjs(date).format("DD-MM-YYYY HH:mm:ss")
+    
+    return dateFormat(date,"DD-MM-YYYY HH:mm:ss")
 };
 
 export const dateStr = (date) =>{
-    date = convertToDate(date);
-    return dayjs(date).format("YYYY-MM-DD")
+    return dateFormat(date,"YYYY-MM-DD")
 };
 
 export const convertToDate = (date)=>{
@@ -21,4 +20,9 @@ export const convertToDate = (date)=>{
     }
     
     return date;
-}
+}
+
+export const dateFormat = (date, format) =>{
+    date = convertToDate(date);
+    return dayjs(date).format(format);
+};