From 3dc6cb34de7d7255307c0bf744dedfd93f0497bd Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Thu, 5 Oct 2023 15:39:09 +0800
Subject: [PATCH] update ui

---
 .../ProofCreate_FromApp/ApplicationDetails.js | 206 +++++-------------
 .../ProofCreate_FromApp/GazetteDetails.js     | 132 +++++------
 src/pages/ProofCreate_FromApp/index.js        |  35 ++-
 src/utils/ApiPathConst.js                     |   3 +
 4 files changed, 133 insertions(+), 243 deletions(-)

diff --git a/src/pages/ProofCreate_FromApp/ApplicationDetails.js b/src/pages/ProofCreate_FromApp/ApplicationDetails.js
index 474391c..f91d8f4 100644
--- a/src/pages/ProofCreate_FromApp/ApplicationDetails.js
+++ b/src/pages/ProofCreate_FromApp/ApplicationDetails.js
@@ -3,8 +3,7 @@ import {
     CardContent,
     Grid,
     Stack,
-    FormControl,
-    OutlinedInput,
+    TextField,
     FormLabel,
 } from '@mui/material';
 import MainCard from "components/MainCard";
@@ -13,29 +12,40 @@ import { useFormik } from 'formik';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = (formData) => {
-    
+const SearchPublicNoticeForm = ({formData}) => {
+
+    const [data, setData] = React.useState({});
+
+    React.useEffect(() => {
+        if(formData)
+            setData(formData);
+    }, [formData]);
+
     const formik = useFormik({
         enableReinitialize: true,
-        initialValues: formData,
+        initialValues: data,
     });
 
-    const DisplayField = ({name}) => {
-        return <FormControl variant="outlined" fullWidth disabled >
-            <OutlinedInput
-                fullWidth
-                size="small"
-                onChange={formik.handleChange}
-                id={name}
-                name={name}
-                sx={{
+    const DisplayField = ({ name, width }) => {
+        return <TextField
+            fullWidth
+            disabled
+            size="small"
+            onChange={formik.handleChange}
+            id={name}
+            name={name}
+            value={formik.values[name]}
+            variant="outlined"
+            sx={
+                {
                     "& .MuiInputBase-input.Mui-disabled": {
                         WebkitTextFillColor: "#000000",
                         background: "#f8f8f8",
                     },
-                }}
-            />
-        </FormControl>;
+                    width: width ? width : '100%'
+                }
+            }
+        />;
     }
 
 
@@ -53,7 +63,7 @@ const SearchPublicNoticeForm = (formData) => {
                 </CardContent>
 
                 {/*row 2*/}
-                <Grid container direction="column">
+                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }}>
                     <Grid item xs={12} md={12}>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
@@ -68,38 +78,10 @@ const SearchPublicNoticeForm = (formData) => {
                                         <DisplayField
                                             name='appNo'
                                         />
-                                        <FormControl variant="outlined" fullWidth disabled >
-                                            <OutlinedInput
-                                                fullWidth
-                                                size="small"
-                                                onChange={formik.handleChange}
-                                                id='appNo'
-                                                name='appNo'
-                                                sx={{
-                                                    "& .MuiInputBase-input.Mui-disabled": {
-                                                        WebkitTextFillColor: "#000000",
-                                                        background: "#f8f8f8",
-                                                    },
-                                                }}
-                                            />
-                                        </FormControl>
                                     </Grid>
                                 </Grid>
                             </Grid>
-                            {/* <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
-                                <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
-                                        sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel>Status:</FormLabel>
-                                    </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
-                                        <FormControl variant="outlined" fullWidth  >
-                                            {StatusUtils.getStatusByTextEng(currentApplicationDetailData.status)}
-                                        </FormControl>
-                                    </Grid>
-                                </Grid>
-                            </Grid> */}
                         </Grid>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
@@ -111,34 +93,9 @@ const SearchPublicNoticeForm = (formData) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <FormControl variant="outlined" fullWidth disabled >
-                                            {formik.values.orgId === null ?
-                                                <OutlinedInput
-                                                    fullWidth
-                                                    size="small"
-                                            
-                                                    id='contactPerson'
-                                                    sx={{
-                                                        "& .MuiInputBase-input.Mui-disabled": {
-                                                            WebkitTextFillColor: "#000000",
-                                                            background: "#f8f8f8",
-                                                        },
-                                                    }}
-                                                /> :
-                                                <OutlinedInput
-                                                    fullWidth
-                                                    size="small"
-                                                  
-                                                    id='companyName'
-                                                    sx={{
-                                                        "& .MuiInputBase-input.Mui-disabled": {
-                                                            WebkitTextFillColor: "#000000",
-                                                            background: "#f8f8f8",
-                                                        },
-                                                    }}
-                                                />
-                                            }
-                                        </FormControl>
+                                        <DisplayField
+                                            name={formik.values?.orgId ? 'enCompanyName' : 'contactPerson'}
+                                        />
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -151,39 +108,14 @@ const SearchPublicNoticeForm = (formData) => {
 
                                     <Grid item xs={12} md={8} lg={8}>
                                         <Stack direction="row">
-                                            <FormControl variant="outlined" sx={{ width: '25%' }} disabled >
-                                                <OutlinedInput
-                                                    size="small"
-                                                  
-                                                    id='countryCode'
-                                                    sx={{
-                                                        "& .MuiInputBase-input.Mui-disabled": {
-                                                            WebkitTextFillColor: "#000000",
-                                                            background: "#f8f8f8",
-                                                        },
-                                                    }}
-                                                    inputProps={{
-                                                        maxLength: 3,
-                                                    }}
-                                                />
-                                            </FormControl>
-                                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
-                                                <OutlinedInput
-                                                    size="small"
-                                                    type="tel"
-                                                   
-                                                    id='phoneNumber'
-                                                    sx={{
-                                                        "& .MuiInputBase-input.Mui-disabled": {
-                                                            WebkitTextFillColor: "#000000",
-                                                            background: "#f8f8f8",
-                                                        },
-                                                    }}
-                                                    inputProps={{
-                                                        maxLength: 11,
-                                                    }}
-                                                />
-                                            </FormControl>
+                                            <DisplayField
+                                                name='tel_countryCode'
+                                                width='25%'
+                                            />
+                                            <DisplayField
+                                                name='phoneNumber'
+                                                width='75%'
+                                            />
                                         </Stack>
                                     </Grid>
                                 </Grid>
@@ -199,20 +131,9 @@ const SearchPublicNoticeForm = (formData) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <FormControl variant="outlined" fullWidth disabled>
-                                            <OutlinedInput
-                                                fullWidth
-                                                size="small"
-                                                
-                                                id='contactPerson'
-                                                sx={{
-                                                    "& .MuiInputBase-input.Mui-disabled": {
-                                                        WebkitTextFillColor: "#000000",
-                                                        background: "#f8f8f8",
-                                                    },
-                                                }}
-                                            />
-                                        </FormControl>
+                                        <DisplayField
+                                            name='contactPerson'
+                                        />
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -225,41 +146,14 @@ const SearchPublicNoticeForm = (formData) => {
 
                                     <Grid item xs={12} md={8} lg={8}>
                                         <Stack direction="row">
-                                            <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
-                                                <OutlinedInput
-                                                    size="small"
-                                                  
-                                                    id='countryCode'
-                                                    sx={{
-                                                        "& .MuiInputBase-input.Mui-disabled": {
-                                                            WebkitTextFillColor: "#000000",
-                                                            background: "#f8f8f8",
-                                                        },
-                                                    }}
-                                                    inputProps={{
-                                                        maxLength: 3,
-                                                        type: "tel"
-                                                    }}
-
-                                                />
-                                            </FormControl>
-                                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
-                                                <OutlinedInput
-                                                    size="small"
-                                                    type="tel"
-                                                  
-                                                    id='faxNumber'
-                                                    sx={{
-                                                        "& .MuiInputBase-input.Mui-disabled": {
-                                                            WebkitTextFillColor: "#000000",
-                                                            background: "#f8f8f8",
-                                                        },
-                                                    }}
-                                                    inputProps={{
-                                                        maxLength: 8,
-                                                    }}
-                                                />
-                                            </FormControl>
+                                            <DisplayField
+                                                name='fax_countryCode'
+                                                width='25%'
+                                            />
+                                            <DisplayField
+                                                name='faxNumber'
+                                                width='75%'
+                                            />
                                         </Stack>
                                     </Grid>
                                 </Grid>
diff --git a/src/pages/ProofCreate_FromApp/GazetteDetails.js b/src/pages/ProofCreate_FromApp/GazetteDetails.js
index c77b148..c6cba0f 100644
--- a/src/pages/ProofCreate_FromApp/GazetteDetails.js
+++ b/src/pages/ProofCreate_FromApp/GazetteDetails.js
@@ -1,9 +1,9 @@
 // material-ui
 import {
-    FormControl, 
-    Grid, 
- FormLabel,
-    OutlinedInput,
+    Grid,
+    CardContent,
+    FormLabel,
+    TextField,
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -11,33 +11,52 @@ import { useFormik } from 'formik';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const GazetteDetails = ({formData}) => {
+const GazetteDetails = ({ formData }) => {
+
+    const [data, setData] = React.useState({});
+
+    React.useEffect(() => {
+        if (formData)
+            setData(formData);
+    }, [formData]);
 
     const formik = useFormik({
         enableReinitialize: true,
-        initialValues: formData,
+        initialValues: data,
     });
 
-    // function getIssueLabel(data) {
-    //     if (data == {}) return "";
-    //     return data.year
-    //         + " Vol. " + zeroPad(data.volume, 3)
-    //         + ", No. " + zeroPad(data.issueNo, 2)
-    //         + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
-    // }
 
-    // function zeroPad(num, places) {
-    //     num = num ? num : 0;
-    //     var zero = places - num.toString().length + 1;
-    //     return Array(+(zero > 0 && zero)).join("0") + num;
-    // }
+    const DisplayField = ({ name, width }) => {
+        return <TextField
+            fullWidth
+            disabled
+            size="small"
+            onChange={formik.handleChange}
+            id={name}
+            name={name}
+            value={formik.values[name]}
+            variant="outlined"
+            sx={
+                {
+                    "& .MuiInputBase-input.Mui-disabled": {
+                        WebkitTextFillColor: "#000000",
+                        background: "#f8f8f8",
+                    },
+                    width: width ? width : '100%'
+                }
+            }
+        />;
+    }
+
 
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
-            content={false}>
+            content={false}
+            style={{ height: '100%'}}
+            >
 
-            <form onSubmit={handleSubmit(onSubmit)}>
+            <form style={{ height: '100%'}}>
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
@@ -46,7 +65,7 @@ const GazetteDetails = ({formData}) => {
                 </CardContent>
 
                 {/*row 2*/}
-                <Grid container direction="column">
+                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} style={{ height: '100%'}}>
                     <Grid item xs={12} md={12}>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
@@ -58,20 +77,10 @@ const GazetteDetails = ({formData}) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <FormControl variant="outlined" fullWidth disabled >
-                                            <OutlinedInput
-                                                fullWidth
-                                                size="small"
-                                                id='issueNum'
-                                                onChange={formik.handleChange}
-                                                sx={{
-                                                    "& .MuiInputBase-input.Mui-disabled": {
-                                                        WebkitTextFillColor: "#000000",
-                                                        background: "#f8f8f8",
-                                                    },
-                                                }}
-                                            />
-                                        </FormControl>
+                                        <DisplayField
+                                            name="issueNum"
+
+                                        />
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -83,20 +92,10 @@ const GazetteDetails = ({formData}) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <FormControl variant="outlined" fullWidth disabled >
-                                            <OutlinedInput
-                                                fullWidth
-                                                size="small"
-                                              
-                                                id='gazetteCode'
-                                                sx={{
-                                                    "& .MuiInputBase-input.Mui-disabled": {
-                                                        WebkitTextFillColor: "#000000",
-                                                        background: "#f8f8f8",
-                                                    },
-                                                }}
-                                            />
-                                        </FormControl>
+                                        <DisplayField
+                                            name="gazetteCode"
+
+                                        />
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -111,20 +110,10 @@ const GazetteDetails = ({formData}) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <FormControl variant="outlined" fullWidth disabled >
-                                            <OutlinedInput
-                                                fullWidth
-                                                size="small"
-                                        
-                                                id='issueDate'
-                                                sx={{
-                                                    "& .MuiInputBase-input.Mui-disabled": {
-                                                        WebkitTextFillColor: "#000000",
-                                                        background: "#f8f8f8",
-                                                    },
-                                                }}
-                                            />
-                                        </FormControl>
+                                        <DisplayField
+                                            name="issueDate"
+
+                                        />
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -136,20 +125,9 @@ const GazetteDetails = ({formData}) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <FormControl variant="outlined" fullWidth disabled >
-                                            <OutlinedInput
-                                                fullWidth
-                                                size="small"
-                                             
-                                                id='groupTitle'
-                                                sx={{
-                                                    "& .MuiInputBase-input.Mui-disabled": {
-                                                        WebkitTextFillColor: "#000000",
-                                                        background: "#f8f8f8",
-                                                    },
-                                                }}
-                                            />
-                                        </FormControl>
+                                        <DisplayField
+                                            name="groupTitle"
+                                        />
                                     </Grid>
                                 </Grid>
                             </Grid>
diff --git a/src/pages/ProofCreate_FromApp/index.js b/src/pages/ProofCreate_FromApp/index.js
index 7d6cb9a..87a75be 100644
--- a/src/pages/ProofCreate_FromApp/index.js
+++ b/src/pages/ProofCreate_FromApp/index.js
@@ -11,7 +11,7 @@ import { useParams } from "react-router-dom";
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails')));
-//const GazetteDetails = Loadable(React.lazy(() => import('./GazetteDetails')));
+const GazetteDetails = Loadable(React.lazy(() => import('./GazetteDetails')));
 const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -32,33 +32,48 @@ const Index = () => {
 
 
     const loadForm = () => {
-        if(params.id > 0){
+        if (params.id > 0) {
 
             HttpUtils.get({
-                url: UrlUtils.GET_PUBLIC_NOTICE_APPLY_DETAIL+"/"+params.id,
-                onSuccess:(responseData)=>{
-                    setRecord(responseData);
+                url: UrlUtils.GET_PROOF_APP + "/" + params.id,
+                onSuccess: (responseData) => {
+                    responseData.data["phoneNumber"] = JSON.parse(responseData.data.contactTelNo).phoneNumber;
+                    responseData.data["tel_countryCode"] = JSON.parse(responseData.data.contactTelNo).countryCode;
+
+                    responseData.data["faxNumber"] = JSON.parse(responseData.data.contactFaxNo).faxNumber;
+                    responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode;
+                    setRecord(responseData.data);
                 }
             });
         }
-      }
+    }
 
     return (
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{ minHeight: '85vh', backgroundColor: '#eee' }} direction="column"  spacing={1} >
+            <Grid container sx={{ minHeight: '85vh', backgroundColor: '#eee' }} direction="column" spacing={1} >
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12}>
-                    <Grid container  spacing={1}>
+                    <Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={1}>
                         <Grid item xs={12} md={12} lg={8}>
                             <ApplicationDetails
                                 formData={record}
+                                style={{
+                                    display: "flex",
+                                    height: "100%",
+                                    flex: 1
+                                }}
                             />
                         </Grid>
-                        <Grid item xs={12} md={12} lg={4}>
-                            <ApplicationDetails
+                        <Grid item xs={12} md={12} lg={4} >
+                            <GazetteDetails
                                 formData={record}
+                                style={{
+                                    display: "flex",
+                                    height: "100%",
+                                    flex: 1
+                                }}
                             />
                         </Grid>
                     </Grid>
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 9b6ebc3..86f06ad 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -69,5 +69,8 @@ export const UPDATE_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/save';
 
 export const GET_ISSUE_COMBO = apiPath+'/gazette-issue/combo';
 
+export const GET_PROOF_APP = apiPath+'/proof/create-from-app';
+export const GET_LIST_PROOF = apiPath+'/proof/create-from-app';
+
 //User Group
 export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save';
\ No newline at end of file