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

update get application detail by backend

master
Alex Cheung 2 years ago
parent
14563ed118
commit
3fae7a6ada
7 changed files with 448 additions and 218 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +25
    -0
      src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js
  2. +101
    -61
      src/pages/gldApplicationDetailPage/ApplicationDetailCard.js
  3. +240
    -118
      src/pages/gldApplicationDetailPage/ClientDetailCard.js
  4. +41
    -31
      src/pages/gldApplicationDetailPage/GazetteDetailCard.js
  5. +39
    -7
      src/pages/gldApplicationDetailPage/index.js
  6. +1
    -1
      src/pages/gldApplicationDetailPage/tabTableDetail/BaseGrid.js
  7. +1
    -0
      src/utils/ApiPathConst.js

+ 25
- 0
src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js View File

@@ -22,7 +22,32 @@ export function getStatus(params) {
return getStatusTag({ text: params.row.status }) return getStatusTag({ text: params.row.status })
} }


}

export function getStatusByText(status) {
switch (status) {
case "submitted":
return getStatusTag({ color: "#f5a83d", text: "已提交" })
case "rejected":
return getStatusTag({ color: "#d9372b", text: "已拒絕" })
case "cancelled":
return getStatusTag({ color: "#757373", text: "已取消" })
case "accepted":
return getStatusTag({ color: "#22a13f", text: "已接受" })
case "confirmed":
return getStatusTag({ color: "#22a13f", text: "已確認" })
case "paid":
return getStatusTag({ color: "#22a13f", text: "已付費" })
case "published":
return getStatusTag({ color: "#f5a83d", text: "已發表" })
case "withdrawn":
return getStatusTag({ color: "#8a8784", text: "已撤銷" })
default:
return getStatusTag({ text: params.row.status })
}


} }


export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) { export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {


+ 101
- 61
src/pages/gldApplicationDetailPage/ApplicationDetailCard.js View File

@@ -8,18 +8,22 @@ import {
OutlinedInput, OutlinedInput,
Stack Stack
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
// import MainCard from "../../components/MainCard";
const MainCard = Loadable(lazy(() => import('components/MainCard')));
import {useForm} from "react-hook-form"; import {useForm} from "react-hook-form";
import { import {
// useEffect,
useEffect,
useState useState
} from "react"; } from "react";
// import Checkbox from "@mui/material/Checkbox"; // import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';

import { lazy } from 'react'; import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
//import {useParams} from "react-router-dom";
// import {useParams} from "react-router-dom";
import * as HttpUtils from "utils/HttpUtils"
import * as StatusUtils from "../PublicNotice/ListPanel/PublicNoteStatusUtils";

import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined'; import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined';
import DoneIcon from '@mui/icons-material/Done'; import DoneIcon from '@mui/icons-material/Done';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
@@ -27,34 +31,46 @@ import EditNoteIcon from '@mui/icons-material/EditNote';
import DownloadIcon from '@mui/icons-material/Download'; import DownloadIcon from '@mui/icons-material/Download';
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = ( const ApplicationDetailCard = (
// {isCollectData, updateUserObject,userData,isNewRecord}
{ applicationDetailData,
// isCollectData,
// updateUserObject,
// isNewRecord
}
) => { ) => {
// const params = useParams(); // const params = useParams();
const [currentApplicationDetailData, ] = React.useState({});
// const [locked, setLocked] = useState(false);
const [onReady,] = useState(true);
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
const [companyName, setCompanyName] = useState({});
const [fileDetail, setfileDetail] = useState({});
const [onReady,setOnReady] = useState(false);
const {register, const {register,
// getValues // getValues
} = useForm() } = useForm()


// useEffect(() => {
// //if user data from parent are not null
// if (Object.keys(userData).length > 0 && userData !== undefined) {
// setCurrentUserData(userData.data);
// }
// }, []);
useEffect(() => {
//if user data from parent are not null
// console.log(applicationDetailData)
if (Object.keys(applicationDetailData).length > 0) {
setCurrentApplicationDetailData(applicationDetailData.data);
setCompanyName(applicationDetailData.companyName);
setfileDetail(applicationDetailData.fileDetail);
}
}, [applicationDetailData]);


// useEffect(() => {
// //if state data are ready and assign to different field
// if (Object.keys(userData).length > 0 &&currentApplicationDetailData !== undefined&&currentApplicationDetailData.id!==undefined) {
// setLocked(currentApplicationDetailData.locked);
// setOnReady(true);
// }else if(isNewRecord){
// setLocked(false);
// setOnReady(true);
// }
// }, [currentApplicationDetailData]);
useEffect(() => {
//if state data are ready and assign to different field
// console.log(currentApplicationDetailData)
if (Object.keys(currentApplicationDetailData).length > 0) {
setOnReady(true);
}
}, [currentApplicationDetailData]);


const onDownloadClick = () => () => {
HttpUtils.fileDownload({
fileId:fileDetail.id,
skey:fileDetail.skey,
filename:fileDetail.filename,
});
};
// useEffect(() => { // useEffect(() => {
// //upload latest data to parent // //upload latest data to parent
// const values = getValues(); // const values = getValues();
@@ -205,15 +221,7 @@ const ApplicationDetailCard = (


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth > <FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("status",
{
value: currentApplicationDetailData.status,
})}
id='status'
/>
{StatusUtils.getStatusByText(currentApplicationDetailData.status)}
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid>
@@ -230,15 +238,26 @@ const ApplicationDetailCard = (


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<FormControl variant="outlined" fullWidth > <FormControl variant="outlined" fullWidth >
{ currentApplicationDetailData.orgId===null?
<OutlinedInput <OutlinedInput
fullWidth fullWidth
size="small" size="small"
{...register("userName",
{...register("contactPerson",
{ {
value: currentApplicationDetailData.userName,
value: currentApplicationDetailData.contactPerson,
})} })}
id='userName'
id='contactPerson'
/>:
<OutlinedInput
fullWidth
size="small"
{...register("companyName",
{
value: companyName.enCompanyName,
})}
id='companyName'
/> />
}
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid>
@@ -251,17 +270,28 @@ const ApplicationDetailCard = (
</Grid> </Grid>


<Grid item xs={12} md={8} lg={8}> <Grid item xs={12} md={8} lg={8}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("contactTelNo",
{
value: currentApplicationDetailData.contactTelNo,
})}
id='contactTelNo'
/>
</FormControl>
<Stack direction="row">
<FormControl variant="outlined" sx={{width:'25%'}}>
<OutlinedInput
size="small"
{...register("countryCode",
{
value: currentApplicationDetailData.contactTelNo.countryCode,
})}
id='countryCode'
/>
</FormControl>
<FormControl variant="outlined" sx={{width:'100%'}}>
<OutlinedInput
size="small"
{...register("phoneNumber",
{
value: currentApplicationDetailData.contactTelNo.phoneNumber,
})}
id='phoneNumber'
/>
</FormControl>
</Stack>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
@@ -298,17 +328,28 @@ const ApplicationDetailCard = (
</Grid> </Grid>


<Grid item xs={12} md={8} lg={8}> <Grid item xs={12} md={8} lg={8}>
<FormControl variant="outlined" fullWidth >
<OutlinedInput
fullWidth
size="small"
{...register("contactFaxNo",
{
value: currentApplicationDetailData.contactFaxNo,
})}
id='contactFaxNo'
/>
</FormControl>
<Stack direction="row">
<FormControl variant="outlined" sx={{width:'25%'}}>
<OutlinedInput
size="small"
{...register("countryCode",
{
value: currentApplicationDetailData.contactFaxNo.countryCode,
})}
id='countryCode'
/>
</FormControl>
<FormControl variant="outlined" sx={{width:'100%'}}>
<OutlinedInput
size="small"
{...register("faxNumber",
{
value: currentApplicationDetailData.contactFaxNo.faxNumber,
})}
id='faxNumber'
/>
</FormControl>
</Stack>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
@@ -331,7 +372,7 @@ const ApplicationDetailCard = (
fullWidth fullWidth
id='fileName' id='fileName'
> >
Manuscript File Final.pdf
{fileDetail.filename}
</Typography> </Typography>
</FormControl> </FormControl>
</Grid> </Grid>
@@ -339,7 +380,7 @@ const ApplicationDetailCard = (
<Button <Button
size="small" size="small"
variant="contained" variant="contained"
// onClick={handleNewUserClick}
onClick={onDownloadClick()}
sx={{ sx={{
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end', alignItems: 'end',
@@ -349,7 +390,6 @@ const ApplicationDetailCard = (
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>

</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>


+ 240
- 118
src/pages/gldApplicationDetailPage/ClientDetailCard.js View File

@@ -12,7 +12,7 @@ import MainCard from "../../components/MainCard";
import * as React from "react"; import * as React from "react";
import {useForm} from "react-hook-form"; import {useForm} from "react-hook-form";
import { import {
// useEffect,
useEffect,
useState useState
} from "react"; } from "react";
// import Checkbox from "@mui/material/Checkbox"; // import Checkbox from "@mui/material/Checkbox";
@@ -21,35 +21,40 @@ import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
//import {useParams} from "react-router-dom"; //import {useParams} from "react-router-dom";
import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch'; import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch';
import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
import HighlightOff from '@mui/icons-material/HighlightOff';

// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
const ClientDetailCard = ( const ClientDetailCard = (
// {isCollectData, updateUserObject,userData,isNewRecord}
{ applicationDetailData,
// isCollectData,
// updateUserObject,
// isNewRecord
}
) => { ) => {
// const params = useParams(); // const params = useParams();
const [currentApplicationDetailData, ] = React.useState({});
// const [locked, setLocked] = useState(false);
const [onReady,] = useState(true);
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
const [onReady,setOnReady] = useState(false);
const [companyName, setCompanyName] = useState({});
const {register, const {register,
// getValues // getValues
} = useForm() } = useForm()


// useEffect(() => {
// //if user data from parent are not null
// if (Object.keys(userData).length > 0 && userData !== undefined) {
// setCurrentUserData(userData.data);
// }
// }, []);
useEffect(() => {
//if user data from parent are not null
if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) {
setCurrentApplicationDetailData(applicationDetailData.userData);
setCompanyName(applicationDetailData.companyName);
}
}, [applicationDetailData]);


// useEffect(() => {
// //if state data are ready and assign to different field
// if (Object.keys(userData).length > 0 &&currentApplicationDetailData !== undefined&&currentApplicationDetailData.id!==undefined) {
// setLocked(currentApplicationDetailData.locked);
// setOnReady(true);
// }else if(isNewRecord){
// setLocked(false);
// setOnReady(true);
// }
// }, [currentApplicationDetailData]);
useEffect(() => {
//if state data are ready and assign to different field
// console.log(currentApplicationDetailData)
if (Object.keys(currentApplicationDetailData).length > 0) {
setOnReady(true);
}
}, [currentApplicationDetailData]);


// useEffect(() => { // useEffect(() => {
// //upload latest data to parent // //upload latest data to parent
@@ -61,7 +66,6 @@ const ClientDetailCard = (
// updateUserObject(objectData); // updateUserObject(objectData);
// }, [isCollectData]); // }, [isCollectData]);



return ( return (
!onReady ? !onReady ?
<LoadingComponent/> <LoadingComponent/>
@@ -69,9 +73,9 @@ const ClientDetailCard = (
<MainCard elevation={0} <MainCard elevation={0}
border={false} border={false}
content={false} content={false}
>
sx={{xs:"12", md:"7"}}>
<Grid container spacing={1} direction="row"> <Grid container spacing={1} direction="row">
<Grid item xs={12} md={7} lg={7} >
<Grid item xs={12} md={7} >
<Stack <Stack
direction="row" direction="row"
justifyContent="flex-start" justifyContent="flex-start"
@@ -100,9 +104,20 @@ const ClientDetailCard = (
<Grid container direction="column" justifyContent="flex-start" <Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start"> alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1} > <Grid item xs={12} md={12} lg={12} mb={1} >
<Typography>
{currentApplicationDetailData.status}
</Typography>
{currentApplicationDetailData.verifiedBy!==null?
<Stack direction="row">
<Typography>
Verified
</Typography>
<CheckCircleOutline color="success"/>
</Stack>:
<Stack direction="row">
<Typography>
Not Verified
</Typography>
<HighlightOff color="error"/>
</Stack>
}
</Grid> </Grid>
</Grid> </Grid>
<Grid container direction="column" justifyContent="flex-start" <Grid container direction="column" justifyContent="flex-start"
@@ -110,114 +125,221 @@ const ClientDetailCard = (
<Grid item xs={12} md={12} lg={12} mb={1} > <Grid item xs={12} md={12} lg={12} mb={1} >
<FormLabel>Client Type:</FormLabel> <FormLabel>Client Type:</FormLabel>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} >
<OutlinedInput <OutlinedInput
size="small" size="small"
{...register("userType",
{...register("type",
{ {
value: currentApplicationDetailData.userType,
value: currentApplicationDetailData.type,
})} })}
id='userType'
id='type'
/> />
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Company Name (English):</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("enCompanyName",
{
value: currentApplicationDetailData.enCompanyName,
})}
id='enCompanyName'
/>
</FormControl>
{currentApplicationDetailData.type==="ORG"?
<>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Company Name (English):</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} >
<OutlinedInput
size="small"
{...register("enCompanyName",
{
value: companyName.enCompanyName ,
})}
id='enCompanyName'
/>
</FormControl>
</Grid>
</Grid> </Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Company Name (Chinese):</FormLabel>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Company Name (Chinese):</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} >
<OutlinedInput
size="small"
{...register("chCompanyName",
{
value: companyName.chCompanyName,
})}
id='chCompanyName'
/>
</FormControl>
</Grid>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("chCompanyName",
{
value: currentApplicationDetailData.chCompanyName,
})}
id='chCompanyName'
/>
</FormControl>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>English Name:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} >
<OutlinedInput
size="small"
{...register("contactPerson",
{
value: currentApplicationDetailData.contactPerson,
})}
id='contactPerson'
/>
</FormControl>
</Grid>
</Grid> </Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>English Name:</FormLabel>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Phone:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<Stack direction="row">
<FormControl variant="outlined" sx={{width:'40%'}}>
<OutlinedInput
size="small"
{...register("countryCode",
{
value: currentApplicationDetailData.contactTel.countryCode,
})}
id='countryCode'
/>
</FormControl>
<FormControl variant="outlined" sx={{width:'100%'}}>
<OutlinedInput
size="small"
{...register("phoneNumber",
{
value: currentApplicationDetailData.contactTel.phoneNumber,
})}
id='phoneNumber'
/>
</FormControl>
</Stack>
</Grid>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("contactPerson",
{
value: currentApplicationDetailData.contactPerson,
})}
id='contactPerson'
/>
</FormControl>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Email:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} >
<OutlinedInput
size="small"
{...register("emailBus",
{
value: currentApplicationDetailData.emailBus,
})}
id='emailBus'
/>
</FormControl>
</Grid>
</Grid> </Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Phone:</FormLabel>
</>:
<>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>English Name:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} >
<OutlinedInput
size="small"
{...register("enName",
{
value: currentApplicationDetailData.enName,
})}
id='enName'
/>
</FormControl>
</Grid>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("phoneNumber",
{
value: currentApplicationDetailData.phoneNumber,
})}
id='phoneNumber'
/>
</FormControl>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Chinese Name:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} >
<OutlinedInput
size="small"
{...register("chName",
{
value: currentApplicationDetailData.chName,
})}
id='chName'
/>
</FormControl>
</Grid>
</Grid> </Grid>
</Grid>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Email:</FormLabel>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Phone:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<Stack direction="row">
<FormControl variant="outlined" sx={{width:'40%'}}>
<OutlinedInput
size="small"
{...register("countryCode",
{
value: currentApplicationDetailData.mobileNumber.countryCode,
})}
id='countryCode'
/>
</FormControl>
<FormControl variant="outlined" sx={{width:'100%'}}>
<OutlinedInput
size="small"
{...register("phoneNumber",
{
value: currentApplicationDetailData.mobileNumber.phoneNumber,
})}
id='phoneNumber'
/>
</FormControl>
</Stack>
</Grid>
</Grid> </Grid>
<Grid item xs={12} md={12} lg={12} mb={1} >
<FormControl variant="outlined" >
<OutlinedInput
size="small"
{...register("emailBus",
{
value: currentApplicationDetailData.emailBus,
})}
id='emailBus'
/>
</FormControl>
<Grid container direction="column" justifyContent="flex-start"
alignItems="flex-start">
<Grid item xs={12} md={12} lg={12} mb={1}
sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Email:</FormLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
<FormControl variant="outlined" sx={{width:'100%'}} >
<OutlinedInput
size="small"
{...register("emailAddress",
{
value: currentApplicationDetailData.emailAddress,
})}
id='emailAddress'
/>
</FormControl>
</Grid>
</Grid> </Grid>
</Grid>
</>
}
</form> </form>
</MainCard> </MainCard>
); );


+ 41
- 31
src/pages/gldApplicationDetailPage/GazetteDetailCard.js View File

@@ -11,7 +11,7 @@ import MainCard from "../../components/MainCard";
import * as React from "react"; import * as React from "react";
import {useForm} from "react-hook-form"; import {useForm} from "react-hook-form";
import { import {
// useEffect,
useEffect,
useState useState
} from "react"; } from "react";
// import Checkbox from "@mui/material/Checkbox"; // import Checkbox from "@mui/material/Checkbox";
@@ -19,36 +19,46 @@ import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
//import {useParams} from "react-router-dom"; //import {useParams} from "react-router-dom";
import * as DateUtils from "utils/DateUtils";


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
const GazetteDetailCard = ( const GazetteDetailCard = (
// {isCollectData, updateUserObject,userData,isNewRecord}
{ applicationDetailData,
// isCollectData,
// updateUserObject,
// isNewRecord
}
) => { ) => {
// const params = useParams(); // const params = useParams();
const [currentApplicationDetailData, ] = React.useState({});
// const [locked, setLocked] = useState(false);
const [onReady,] = useState(true);
// const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
const [onReady,setOnReady] = useState(false);
const [issueNum,setIssueNum] = useState("");
const [issueDate,setIssueDate] = useState("");
const [gazetteCode,setGazetteCode] = useState("");
const [groupTitle,setGroupTitle] = useState("");
const {register, const {register,
// getValues // getValues
} = useForm() } = useForm()


// useEffect(() => {
// //if user data from parent are not null
// if (Object.keys(userData).length > 0 && userData !== undefined) {
// setCurrentUserData(userData.data);
// }
// }, []);
useEffect(() => {
//if user data from parent are not null
// console.log(applicationDetailData)
if (Object.keys(applicationDetailData).length > 0) {
setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.year
+" No. "+applicationDetailData.gazetteIssueDetail.issueNo);
setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
setGazetteCode(applicationDetailData.data.groupNo)
setGroupTitle(applicationDetailData.data.groupTitle)
}
}, [applicationDetailData]);


// useEffect(() => {
// //if state data are ready and assign to different field
// if (Object.keys(userData).length > 0 &&currentApplicationDetailData !== undefined&&currentApplicationDetailData.id!==undefined) {
// setLocked(currentApplicationDetailData.locked);
// setOnReady(true);
// }else if(isNewRecord){
// setLocked(false);
// setOnReady(true);
// }
// }, [currentApplicationDetailData]);
useEffect(() => {
//if state data are ready and assign to different field
// console.log(currentApplicationDetailData)
if (issueNum.length > 0) {
setOnReady(true);
}
}, [issueNum]);


// useEffect(() => { // useEffect(() => {
// //upload latest data to parent // //upload latest data to parent
@@ -89,11 +99,11 @@ const GazetteDetailCard = (
<OutlinedInput <OutlinedInput
fullWidth fullWidth
size="small" size="small"
{...register("issueNo",
{...register("issueNum",
{ {
value: currentApplicationDetailData.issueNo,
value: issueNum,
})} })}
id='issueNo'
id='issueNum'
/> />
</FormControl> </FormControl>
</Grid> </Grid>
@@ -111,11 +121,11 @@ const GazetteDetailCard = (
<OutlinedInput <OutlinedInput
fullWidth fullWidth
size="small" size="small"
{...register("issueNo",
{...register("gazetteCode",
{ {
value: currentApplicationDetailData.issueNo,
value: gazetteCode,
})} })}
id='issueNo'
id='gazetteCode'
/> />
</FormControl> </FormControl>
</Grid> </Grid>
@@ -138,7 +148,7 @@ const GazetteDetailCard = (
size="small" size="small"
{...register("issueDate", {...register("issueDate",
{ {
value: currentApplicationDetailData.issueDate,
value: issueDate,
})} })}
id='issueDate' id='issueDate'
/> />
@@ -158,11 +168,11 @@ const GazetteDetailCard = (
<OutlinedInput <OutlinedInput
fullWidth fullWidth
size="small" size="small"
{...register("issueNo",
{...register("groupTitle",
{ {
value: currentApplicationDetailData.issueNo,
value: groupTitle,
})} })}
id='issueNo'
id='groupTitle'
/> />
</FormControl> </FormControl>
</Grid> </Grid>


+ 39
- 7
src/pages/gldApplicationDetailPage/index.js View File

@@ -1,4 +1,7 @@
// import { useState } from 'react';
import {
useEffect,
useState
} from "react";


// material-ui // material-ui
import { import {
@@ -9,16 +12,29 @@ import {
} from '@mui/material'; } from '@mui/material';
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
import {
// useNavigate,
useParams
} from "react-router-dom";
import axios from "axios";


import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const ApplicationDetailCard = Loadable(lazy(() => import('./ApplicationDetailCard'))); const ApplicationDetailCard = Loadable(lazy(() => import('./ApplicationDetailCard')));
const GazetteDetailCard = Loadable(lazy(() => import('./GazetteDetailCard'))); const GazetteDetailCard = Loadable(lazy(() => import('./GazetteDetailCard')));
const ClientDetailCard = Loadable(lazy(() => import('./ClientDetailCard'))); const ClientDetailCard = Loadable(lazy(() => import('./ClientDetailCard')));
const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable'))); const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable')));
import {
GET_PUBLIC_NOTICE_APPLY_DETAIL,
} from "utils/ApiPathConst";



// ==============================|| Body - DEFAULT ||============================== // // ==============================|| Body - DEFAULT ||============================== //


const DashboardDefault = () => { const DashboardDefault = () => {
const params = useParams();
const [applicationDetailData, setApplicationDetailData] = useState({});
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});

const BackgroundHead = { const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`, backgroundImage: `url(${titleBackgroundImg})`,
width: '100%', width: '100%',
@@ -30,8 +46,24 @@ const DashboardDefault = () => {
const issueNo = "No. 36" const issueNo = "No. 36"
const issueDate = "A001" const issueDate = "A001"


useEffect(() => {
if(params.id > 0 ){
axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`)
.then((response) => {
if (response.status === 200) {
setApplicationDetailData(response.data);
// setRefApplicationDetailData(response.data);
}
})
.catch(error => {
console.log(error);
return false;
});
}
}, []);

return ( return (
<Grid container sx={{maxnHeight: '500vh'}} direction="column">
<Grid container sx={{maxnHeight: '500vh',backgroundColor:'#ffffff'}} direction="column">
<Grid item xs={12}> <Grid item xs={12}>
<div style={BackgroundHead}> <div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -52,7 +84,7 @@ const DashboardDefault = () => {
<Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> <Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
<ApplicationDetailCard <ApplicationDetailCard
// updateUserObject={updateUserObject} // updateUserObject={updateUserObject}
// userData={userData}
applicationDetailData={applicationDetailData}
// isCollectData={isCollectData} // isCollectData={isCollectData}
// isNewRecord={isNewRecord} // isNewRecord={isNewRecord}
/> />
@@ -62,7 +94,7 @@ const DashboardDefault = () => {
<Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> <Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
<GazetteDetailCard <GazetteDetailCard
// updateUserObject={updateUserObject} // updateUserObject={updateUserObject}
// userData={userData}
applicationDetailData={applicationDetailData}
// isCollectData={isCollectData} // isCollectData={isCollectData}
// isNewRecord={isNewRecord} // isNewRecord={isNewRecord}
/> />
@@ -77,11 +109,11 @@ const DashboardDefault = () => {
</Grid> </Grid>
<Grid item xs={12} md={2} lg={2}> <Grid item xs={12} md={2} lg={2}>
<Grid container> <Grid container>
<Grid item xs={12} >
<Box xs={12} ml={1} mt={3} mr={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
<Grid item xs={12}>
<Box ml={1} mt={3} mr={1} height='800px' sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
<ClientDetailCard <ClientDetailCard
// updateUserObject={updateUserObject} // updateUserObject={updateUserObject}
// userData={userData}
applicationDetailData={applicationDetailData}
// isCollectData={isCollectData} // isCollectData={isCollectData}
// isNewRecord={isNewRecord} // isNewRecord={isNewRecord}
/> />


+ 1
- 1
src/pages/gldApplicationDetailPage/tabTableDetail/BaseGrid.js View File

@@ -74,7 +74,7 @@ export default function BaseGrid({rows}) {
]; ];


return ( return (
<div style={{height: 400, width: '100%'}}>
<div style={{height:'20%', width: '100%'}}>
<DataGrid <DataGrid
rows={rows} rows={rows}
columns={columns} columns={columns}


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

@@ -55,6 +55,7 @@ export const POST_PUBLIC_NOTICE_APPLY = apiPath+'/application/apply';
//GLD User //GLD User
export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry';
export const DELETE_USER = apiPath+'/user'; export const DELETE_USER = apiPath+'/user';
export const GET_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/application-detail';


//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