update export issue and proof ui

src/pages/GazetteIssue/ExportForm.js

@@ -0,0 +1,133 @@
+// material-ui
+import {
+    Button,
+    Grid, 
+    TextField,
+    Autocomplete,
+    Typography
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+// import * as DateUtils from "utils/DateUtils";
+import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
+// import * as ComboData from "utils/ComboData";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchGazetteIssueForm = ({ applyExport, comboData, waitDownload}) => {
+    const [selectedYear, setSelectedYear] = React.useState([]);
+    // const [defaultYear, setDefaultYear] = React.useState(searchCriteria.year);
+    const [comboList, setComboList] = React.useState([]);
+    // const [onReady, setOnReady] = React.useState(false);
+
+    const { 
+        // register, 
+        handleSubmit } = useForm()
+
+    const onSubmit = () => {
+        console.log(selectedYear)
+        if (selectedYear !=null && Object.keys(selectedYear).length>0){
+            console.log("okkkkkkkkkkkkkkkk")
+            const temp = {
+                year: selectedYear.label,
+            };
+            applyExport(temp);
+        }
+    };
+
+    React.useEffect(() => {
+        if (comboData && comboData.length > 0) {
+            // console.log(comboData)
+            // const labelValue = comboData.find(obj => obj.label === searchCriteria.year);
+            // console.log(labelValue)
+            // if(selectedYear.length == 0){
+            //     setSelectedYear(comboData[0])
+            // }
+            setComboList(comboData)
+            // setSelectedYear(searchCriteria.dateFrom)
+        }
+    }, [comboData]);
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            >
+
+            <form onSubmit={handleSubmit(onSubmit)} >
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:1}}>
+                        <Typography variant="h5" >
+                            Export Preliminary Gazette Issue From Holiday Year
+                        </Typography>
+                    </Grid>
+                    {/*row 2*/}
+
+                    <Grid container display="flex" alignItems={"center"}>
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                       <Autocomplete
+                            disablePortal
+                            id="year-combo"
+                            value={selectedYear}
+                            // defaultValue={selectedYear}
+                            options={comboList}
+                            // disabled={checkCountry}
+                            getOptionLabel={(option) => option.label ? option.label : ""}
+                            onChange={(event, newValue) => {
+                                setSelectedYear(newValue);
+                            }}
+                            sx={{
+                                "& .MuiInputBase-root": { height: "41px" },
+                                "#year-combo": { padding: "0px 0px 0px 0px" },
+                                "& .MuiAutocomplete-endAdornment": { top: "auto" },
+                            }}
+                            renderInput={(params) => <TextField {...params} placeholder={""}/>}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        {/* <TextField
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                            {...register("dateTo")}
+                            InputProps={{ inputProps: { min: minDate } }}
+                            onChange={(newValue) => {
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
+                            id="dateTo"
+                            type="date"
+                            label="To"
+                            defaultValue={searchCriteria.dateTo}
+                        /> */}
+                    </Grid>
+
+                    {/* <Grid item xs={9} s={6} md={4} lg={3}>
+                    </Grid> */}
+                </Grid>
+                <Grid container justifyContent="center" direction="row"  alignItems="center" spacing={3}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mb: 3, }} >
+                            <Button
+                                variant="contained"
+                                type="submit"
+                                size="large"
+                                disabled={waitDownload}
+                            >
+                                Export
+                            </Button>
+                        </Grid>
+                    </ThemeProvider>
+                </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchGazetteIssueForm;

src/pages/GazetteIssue/SearchForm.js

@@ -60,7 +60,7 @@ const SearchGazetteIssueForm = ({ applySearch, comboData}) => {
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:1}}>
                         <Typography variant="h5" >
-                            Year
+                            Search
                         </Typography>
                     </Grid>
                     {/*row 2*/}

src/pages/GazetteIssue/index.js

@@ -14,6 +14,7 @@ import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 import MainCard from 'components/MainCard';
 
+const ExportForm = Loadable(React.lazy(() => import('./ExportForm')));
 const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
 const GazetteIssueTable = Loadable(React.lazy(() => import('./DataGrid')))
 
@@ -36,13 +37,20 @@ import { notifySaveSuccess } from 'utils/CommonFunction';
 const Index = () => {
     const [record, setRecord] = React.useState([]);
     const [comboData, setComboData] = React.useState([]);
+    const [holidayComboData, setHolidayComboData] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
     const [onSearchReady, setOnSearchReady] = React.useState(false);
+    const [onExportReady, setOnExportReady] = React.useState(false);
     // const navigate = useNavigate()
     const [searchCriteria, setSearchCriteria] = React.useState({
         year: dateStr_Year(new Date()),
         // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
     });
+    
+    const [exportCriteria, setExportCriteria] = React.useState({
+        // year: dateStr_Year(new Date()),
+        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
 
     const [attachments, setAttachments] = React.useState([]);
     const [waitImport, setWaitImport] = React.useState(false);
@@ -78,8 +86,21 @@ const Index = () => {
             onSuccess: (responseData) => {
                 let combo = responseData;
                 setComboData(combo);
-                setOnReady(true);
                 setOnSearchReady(true)
+                loadHolidayCombo(true)
+                // setOnReady(true);
+            }
+        });
+    }
+
+    function loadHolidayCombo() {
+        HttpUtils.get({
+            url: UrlUtils.GET_HOLIDAY_COMBO,
+            onSuccess: (responseData) => {
+                let combo = responseData
+                setHolidayComboData(combo)
+                setOnExportReady(true)
+                setOnReady(true)
             }
         });
     }
@@ -87,6 +108,17 @@ const Index = () => {
     function applySearch(input) {
         setSearchCriteria(input);
     }
+    
+    function applyExport(input) {
+        setExportCriteria(input);
+    }
+
+    React.useEffect(() => {
+        if (Object.keys(exportCriteria).length  > 0) {
+            // console.log(exportCriteria)
+            doExport();
+        }
+    }, [exportCriteria]);
 
     React.useEffect(() => {
         if (attachments.length > 0) {
@@ -116,6 +148,7 @@ const Index = () => {
         setWaitDownload(true)
         HttpUtils.fileDownload({
             url: UrlUtils.GET_ISSUE_LIST,
+            params: exportCriteria,
             onResponse: () => {
                 setTimeout(()=> setWaitDownload(false), 500)
             }
@@ -158,23 +191,18 @@ const Index = () => {
                             </Stack>
                         </div>
                     </Grid>
+                    {!onExportReady?
+                        <LoadingComponent />:
+                        <Grid item xs={12} md={12} lg={12} width="100%">
+                            <ExportForm 
+                                applyExport={applyExport}
+                                comboData={holidayComboData}
+                                waitDownload={waitDownload}
+                            />
+                        </Grid>
+                    }
                     <Grid item xs={12} md={12} lg={6} width="100%">
                         <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2} sx={{ml:2,mt:1}} >
-                        
-                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
-                                <label htmlFor="downloadFileBtn">
-                                    <Button
-                                        component="span"
-                                        variant="contained"
-                                        size="large"
-                                        disabled={waitDownload}
-                                        onClick={doExport}
-                                    >
-                                        <Typography variant="h5">Export</Typography>
-                                    </Button>
-                                </label>
-                            </ThemeProvider>
-                            
                             <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                 <input
                                     id="uploadFileBtn"
@@ -201,14 +229,13 @@ const Index = () => {
                             
                         </Stack>
                     </Grid>
+                  
                     {/*row 1*/}
                     <Grid item xs={12} md={12} lg={12} width="100%">
-                    <SearchForm 
-                        applySearch={applySearch}
-                        // generateXML={generateXML}
-                        searchCriteria={searchCriteria}
-                        comboData={comboData}
-                    />
+                        <SearchForm 
+                            applySearch={applySearch}
+                            comboData={comboData}
+                        />
                     </Grid>
                     {/*row 2*/}
                     {!onSearchReady?

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -231,9 +231,9 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     <Grid item xs={12} md={12} lg={12}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5" display="inline">
-                                            <Typography variant="h5" style={{color:'red'}} display="inline">
+                                            {/* <Typography variant="h5" style={{color:'red'}} display="inline">
                                                 <FormattedMessage id="payAnd" />
-                                            </Typography>
+                                            </Typography> */}
                                             <FormattedMessage id="commentDeadline" />：
                                         </Typography>
                                     </Grid>
@@ -250,7 +250,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     <Grid item xs={12} md={12} lg={12}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5" display="inline">
-                                            <Typography variant="h5" style={{color:'red'}} display="inline">
+                                            <Typography variant="h5" display="inline">
                                                 <FormattedMessage id="payAnd" />
                                             </Typography>
                                             <FormattedMessage id="paymentDeadline" />：

src/translations/en.json

@@ -363,8 +363,8 @@
   "applicationPublishDate": "Publish date",
   "pleaseCheckReminder": "Please download the following printed manuscript file and proofread it carefully",
   "payAnd": "Pay and ",
-  "commentDeadline": "Deadline of Proof with Revise",
-  "paymentDeadline": "Deadline of Confirm Proof and Payment",
+  "commentDeadline": "Deadline for proof with revison",
+  "paymentDeadline": "Deadline for confirm proof and payment",
   "before": "Before",
   "page": "Page",
   "proofReplyDate": "Proof Reply Date",

src/translations/zh-CN.json

@@ -359,7 +359,7 @@
   "pleaseCheckReminder": "请下载下列印刷稿档案，并仔细校对",
   "payAnd": "缴费及",
   "commentDeadline": "返稿最后限期",
-  "paymentDeadline": "付款最后限期",
+  "paymentDeadline": "确定付款及缴费最后限期",
   "before": "前",
   "page": "页",
   "proofReplyDate": "校对回覆日期",

src/translations/zh-HK.json

@@ -364,7 +364,7 @@
   "pleaseCheckReminder": "請下載下列印刷稿檔案，並仔細校對",
   "payAnd": "繳費及",
   "commentDeadline": "返稿最後限期",
-  "paymentDeadline": "付款最後限期",
+  "paymentDeadline": "確定付款及繳費最後限期",
   "before": "前",
   "page": "頁",
   "proofReplyDate": "校對回覆日期",