alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update ui

master
Anna Ho 1 year ago
parent
d865a59e33
commit
3dc6cb34de
4 changed files with 133 additions and 243 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +50
    -156
      src/pages/ProofCreate_FromApp/ApplicationDetails.js
  2. +55
    -77
      src/pages/ProofCreate_FromApp/GazetteDetails.js
  3. +25
    -10
      src/pages/ProofCreate_FromApp/index.js
  4. +3
    -0
      src/utils/ApiPathConst.js

+ 50
- 156
src/pages/ProofCreate_FromApp/ApplicationDetails.js View File

@@ -3,8 +3,7 @@ import {
CardContent, CardContent,
Grid, Grid,
Stack, Stack,
FormControl,
OutlinedInput,
TextField,
FormLabel, FormLabel,
} from '@mui/material'; } from '@mui/material';
import MainCard from "components/MainCard"; import MainCard from "components/MainCard";
@@ -13,29 +12,40 @@ import { useFormik } from 'formik';
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const SearchPublicNoticeForm = (formData) => {
const SearchPublicNoticeForm = ({formData}) => {

const [data, setData] = React.useState({});

React.useEffect(() => {
if(formData)
setData(formData);
}, [formData]);

const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, 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": { "& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000", WebkitTextFillColor: "#000000",
background: "#f8f8f8", background: "#f8f8f8",
}, },
}}
/>
</FormControl>;
width: width ? width : '100%'
}
}
/>;
} }




@@ -53,7 +63,7 @@ const SearchPublicNoticeForm = (formData) => {
</CardContent> </CardContent>


{/*row 2*/} {/*row 2*/}
<Grid container direction="column">
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }}>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="space-between" <Grid container direction="row" justifyContent="space-between"
alignItems="center"> alignItems="center">
@@ -68,38 +78,10 @@ const SearchPublicNoticeForm = (formData) => {
<DisplayField <DisplayField
name='appNo' 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>
</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>
<Grid container direction="row" justifyContent="space-between" <Grid container direction="row" justifyContent="space-between"
alignItems="center"> alignItems="center">
@@ -111,34 +93,9 @@ const SearchPublicNoticeForm = (formData) => {
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <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> </Grid>
</Grid> </Grid>
@@ -151,39 +108,14 @@ const SearchPublicNoticeForm = (formData) => {


<Grid item xs={12} md={8} lg={8}> <Grid item xs={12} md={8} lg={8}>
<Stack direction="row"> <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> </Stack>
</Grid> </Grid>
</Grid> </Grid>
@@ -199,20 +131,9 @@ const SearchPublicNoticeForm = (formData) => {
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <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> </Grid>
</Grid> </Grid>
@@ -225,41 +146,14 @@ const SearchPublicNoticeForm = (formData) => {


<Grid item xs={12} md={8} lg={8}> <Grid item xs={12} md={8} lg={8}>
<Stack direction="row"> <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> </Stack>
</Grid> </Grid>
</Grid> </Grid>


+ 55
- 77
src/pages/ProofCreate_FromApp/GazetteDetails.js View File

@@ -1,9 +1,9 @@
// material-ui // material-ui
import { import {
FormControl,
Grid,
FormLabel,
OutlinedInput,
Grid,
CardContent,
FormLabel,
TextField,
} from '@mui/material'; } from '@mui/material';
import MainCard from "components/MainCard"; import MainCard from "components/MainCard";
import * as React from "react"; import * as React from "react";
@@ -11,33 +11,52 @@ import { useFormik } from 'formik';
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const GazetteDetails = ({formData}) => {
const GazetteDetails = ({ formData }) => {

const [data, setData] = React.useState({});

React.useEffect(() => {
if (formData)
setData(formData);
}, [formData]);


const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, 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 ( return (
<MainCard xs={12} md={12} lg={12} <MainCard xs={12} md={12} lg={12}
border={false} border={false}
content={false}>
content={false}
style={{ height: '100%'}}
>


<form onSubmit={handleSubmit(onSubmit)}>
<form style={{ height: '100%'}}>
{/*row 1*/} {/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}> <CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center"> <Grid item justifyContent="space-between" alignItems="center">
@@ -46,7 +65,7 @@ const GazetteDetails = ({formData}) => {
</CardContent> </CardContent>


{/*row 2*/} {/*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 item xs={12} md={12}>
<Grid container direction="row" justifyContent="space-between" <Grid container direction="row" justifyContent="space-between"
alignItems="center"> alignItems="center">
@@ -58,20 +77,10 @@ const GazetteDetails = ({formData}) => {
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <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> </Grid>
</Grid> </Grid>
@@ -83,20 +92,10 @@ const GazetteDetails = ({formData}) => {
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <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> </Grid>
</Grid> </Grid>
@@ -111,20 +110,10 @@ const GazetteDetails = ({formData}) => {
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <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> </Grid>
</Grid> </Grid>
@@ -136,20 +125,9 @@ const GazetteDetails = ({formData}) => {
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <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> </Grid>
</Grid> </Grid>


+ 25
- 10
src/pages/ProofCreate_FromApp/index.js View File

@@ -11,7 +11,7 @@ import { useParams } from "react-router-dom";
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails'))); 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'))); const EventTable = Loadable(React.lazy(() => import('./DataGrid')));


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -32,33 +32,48 @@ const Index = () => {




const loadForm = () => { const loadForm = () => {
if(params.id > 0){
if (params.id > 0) {


HttpUtils.get({ 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 ( return (
!onReady ? !onReady ?
<LoadingComponent /> <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*/} {/*row 1*/}
<Grid item xs={12} md={12} lg={12}> <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}> <Grid item xs={12} md={12} lg={8}>
<ApplicationDetails <ApplicationDetails
formData={record} formData={record}
style={{
display: "flex",
height: "100%",
flex: 1
}}
/> />
</Grid> </Grid>
<Grid item xs={12} md={12} lg={4}>
<ApplicationDetails
<Grid item xs={12} md={12} lg={4} >
<GazetteDetails
formData={record} formData={record}
style={{
display: "flex",
height: "100%",
flex: 1
}}
/> />
</Grid> </Grid>
</Grid> </Grid>


+ 3
- 0
src/utils/ApiPathConst.js View File

@@ -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_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 //User Group
export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save';

Write Preview
Loading…
Cancel
Save