@@ -71,15 +71,21 @@ const ApplicationDetailCard = ( | |||||
filename:fileDetail.filename, | filename:fileDetail.filename, | ||||
}); | }); | ||||
}; | }; | ||||
// useEffect(() => { | |||||
// //upload latest data to parent | |||||
// const values = getValues(); | |||||
// const objectData ={ | |||||
// ...values, | |||||
// locked: locked, | |||||
// const onStatusClick = () => () => { | |||||
// if(params.id > 0 ){ | |||||
// axios.post(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`) | |||||
// .then((response) => { | |||||
// if (response.status === 200) { | |||||
// navigate(`/application/${params.id}`); | |||||
// } | |||||
// }) | |||||
// .catch(error => { | |||||
// console.log(error); | |||||
// return false; | |||||
// }); | |||||
// } | // } | ||||
// updateUserObject(objectData); | |||||
// }, [isCollectData]); | |||||
// }; | |||||
return ( | return ( | ||||
@@ -131,54 +137,60 @@ const ApplicationDetailCard = ( | |||||
spacing={2} | spacing={2} | ||||
mb={2} | mb={2} | ||||
> | > | ||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#52b202' | |||||
}}> | |||||
<DoneIcon/> | |||||
<Typography ml={1}> Complete</Typography> | |||||
</Button> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#52b202' | |||||
}}> | |||||
<DoneIcon/> | |||||
<Typography ml={1}> Accept</Typography> | |||||
</Button> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#ffa733' | |||||
}}> | |||||
<CloseIcon/> | |||||
<Typography ml={1}> Reject</Typography> | |||||
</Button> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#ffa733' | |||||
}}> | |||||
<CloseIcon/> | |||||
<Typography ml={1}> Withdraw</Typography> | |||||
</Button> | |||||
{currentApplicationDetailData.status =="submitted"? | |||||
<> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#52b202' | |||||
}}> | |||||
<DoneIcon/> | |||||
<Typography ml={1}> Accept</Typography> | |||||
</Button> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#ffa733' | |||||
}}> | |||||
<CloseIcon/> | |||||
<Typography ml={1}> Reject</Typography> | |||||
</Button> | |||||
</>: | |||||
<> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#52b202' | |||||
}}> | |||||
<DoneIcon/> | |||||
<Typography ml={1}> Complete</Typography> | |||||
</Button> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#ffa733' | |||||
}}> | |||||
<CloseIcon/> | |||||
<Typography ml={1}> Withdraw</Typography> | |||||
</Button> | |||||
</> | |||||
} | |||||
</Stack> | </Stack> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> |
@@ -0,0 +1,417 @@ | |||||
// material-ui | |||||
import { | |||||
FormControl, | |||||
Button, | |||||
Grid, | |||||
// InputAdornment, | |||||
Typography, FormLabel, | |||||
OutlinedInput, | |||||
Stack | |||||
} from '@mui/material'; | |||||
// import MainCard from "../../components/MainCard"; | |||||
const MainCard = Loadable(lazy(() => import('components/MainCard'))); | |||||
import {useForm} from "react-hook-form"; | |||||
import { | |||||
useEffect, | |||||
useState | |||||
} from "react"; | |||||
// import Checkbox from "@mui/material/Checkbox"; | |||||
import Loadable from 'components/Loadable'; | |||||
import { lazy } from 'react'; | |||||
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | |||||
// 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 DoneIcon from '@mui/icons-material/Done'; | |||||
import CloseIcon from '@mui/icons-material/Close'; | |||||
import EditNoteIcon from '@mui/icons-material/EditNote'; | |||||
import DownloadIcon from '@mui/icons-material/Download'; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
const ApplicationDetailCard = ( | |||||
{ applicationDetailData, | |||||
// isCollectData, | |||||
// updateUserObject, | |||||
// isNewRecord | |||||
} | |||||
) => { | |||||
// const params = useParams(); | |||||
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); | |||||
const [companyName, setCompanyName] = useState({}); | |||||
const [fileDetail, setfileDetail] = useState({}); | |||||
const [onReady,setOnReady] = useState(false); | |||||
const {register, | |||||
// getValues | |||||
} = useForm() | |||||
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 | |||||
// 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, | |||||
}); | |||||
}; | |||||
// const onStatusClick = () => () => { | |||||
// if(params.id > 0 ){ | |||||
// axios.post(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`) | |||||
// .then((response) => { | |||||
// if (response.status === 200) { | |||||
// navigate(`/application/${params.id}`); | |||||
// } | |||||
// }) | |||||
// .catch(error => { | |||||
// console.log(error); | |||||
// return false; | |||||
// }); | |||||
// } | |||||
// }; | |||||
return ( | |||||
!onReady ? | |||||
<LoadingComponent/> | |||||
: | |||||
<MainCard elevation={0} | |||||
border={false} | |||||
content={false} | |||||
> | |||||
<Grid container spacing={4} direction="row"> | |||||
<Grid item xs={4} > | |||||
<Stack | |||||
direction="row" | |||||
justifyContent="space-between" | |||||
alignItems="center" | |||||
spacing={2} | |||||
mb={2} | |||||
> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
}}> | |||||
<BorderColorOutlinedIcon/> | |||||
<Typography ml={1}> Edit</Typography> | |||||
</Button> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end' | |||||
}}> | |||||
<EditNoteIcon/> | |||||
<Typography ml={1}> Create Proof</Typography> | |||||
</Button> | |||||
</Stack> | |||||
</Grid> | |||||
<Grid item xs={8} > | |||||
<Stack | |||||
direction="row" | |||||
justifyContent="space-between" | |||||
alignItems="center" | |||||
spacing={2} | |||||
mb={2} | |||||
> | |||||
{currentApplicationDetailData.status =="submitted"? | |||||
<> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#52b202' | |||||
}}> | |||||
<DoneIcon/> | |||||
<Typography ml={1}> Accept</Typography> | |||||
</Button> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#ffa733' | |||||
}}> | |||||
<CloseIcon/> | |||||
<Typography ml={1}> Reject</Typography> | |||||
</Button> | |||||
</>: | |||||
<> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#52b202' | |||||
}}> | |||||
<DoneIcon/> | |||||
<Typography ml={1}> Complete</Typography> | |||||
</Button> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
// onClick={handleNewUserClick} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor:'#ffa733' | |||||
}}> | |||||
<CloseIcon/> | |||||
<Typography ml={1}> Withdraw</Typography> | |||||
</Button> | |||||
</> | |||||
} | |||||
</Stack> | |||||
</Grid> | |||||
</Grid> | |||||
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}> | |||||
Application Details | |||||
</Typography> | |||||
<form> | |||||
<Grid container direction="column"> | |||||
<Grid item xs={12} md={12}> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormLabel>Application No:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<FormControl variant="outlined" fullWidth > | |||||
<OutlinedInput | |||||
fullWidth | |||||
size="small" | |||||
{...register("appNo", | |||||
{ | |||||
value: currentApplicationDetailData.appNo, | |||||
})} | |||||
id='appNo' | |||||
/> | |||||
</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.getStatusByText(currentApplicationDetailData.status)} | |||||
</FormControl> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormLabel>Applicant:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<FormControl variant="outlined" fullWidth > | |||||
{ currentApplicationDetailData.orgId===null? | |||||
<OutlinedInput | |||||
fullWidth | |||||
size="small" | |||||
{...register("contactPerson", | |||||
{ | |||||
value: currentApplicationDetailData.contactPerson, | |||||
})} | |||||
id='contactPerson' | |||||
/>: | |||||
<OutlinedInput | |||||
fullWidth | |||||
size="small" | |||||
{...register("companyName", | |||||
{ | |||||
value: companyName.enCompanyName, | |||||
})} | |||||
id='companyName' | |||||
/> | |||||
} | |||||
</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={4} lg={4} | |||||
sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormLabel>Contact Phone:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={8} lg={8}> | |||||
<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 container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormLabel>Contect Person:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<FormControl variant="outlined" fullWidth > | |||||
<OutlinedInput | |||||
fullWidth | |||||
size="small" | |||||
{...register("contactPerson", | |||||
{ | |||||
value: currentApplicationDetailData.contactPerson, | |||||
})} | |||||
id='contactPerson' | |||||
/> | |||||
</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={4} lg={4} | |||||
sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormLabel>Contact Fax:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={8} lg={8}> | |||||
<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 container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={12} lg={12} mt={1}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={12} lg={12}> | |||||
<Grid container direction="row"> | |||||
<Grid item xs={12} md={2} lg={2} | |||||
sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormLabel>Manuscript File:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={6} lg={6} sx={{display: 'flex', alignItems: 'center'}}> | |||||
<Grid container direction="row" justifyContent="flex-start"> | |||||
<Grid item xs={12} md={5} lg={5} sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormControl variant="outlined" fullWidth > | |||||
<Typography | |||||
fullWidth | |||||
id='fileName' | |||||
> | |||||
{fileDetail.filename} | |||||
</Typography> | |||||
</FormControl> | |||||
</Grid> | |||||
<Grid item md={2} lg={2}> | |||||
<Button | |||||
size="small" | |||||
variant="contained" | |||||
onClick={onDownloadClick()} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
}}> | |||||
<DownloadIcon/> | |||||
</Button> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</form> | |||||
</MainCard> | |||||
); | |||||
}; | |||||
export default ApplicationDetailCard; |
@@ -0,0 +1,357 @@ | |||||
// material-ui | |||||
import { | |||||
FormControl, | |||||
Button, | |||||
Grid, | |||||
// InputAdornment, | |||||
Typography, FormLabel, | |||||
OutlinedInput, | |||||
Stack | |||||
} from '@mui/material'; | |||||
import MainCard from "../../components/MainCard"; | |||||
import * as React from "react"; | |||||
import {useForm} from "react-hook-form"; | |||||
import { | |||||
useEffect, | |||||
useState | |||||
} from "react"; | |||||
// import Checkbox from "@mui/material/Checkbox"; | |||||
import Loadable from 'components/Loadable'; | |||||
import { lazy } from 'react'; | |||||
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | |||||
//import {useParams} from "react-router-dom"; | |||||
import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch'; | |||||
import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline'; | |||||
import HighlightOff from '@mui/icons-material/HighlightOff'; | |||||
import {useNavigate} from "react-router-dom"; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
const ClientDetailCard = ( | |||||
{ applicationDetailData, | |||||
// isCollectData, | |||||
// updateUserObject, | |||||
// isNewRecord | |||||
} | |||||
) => { | |||||
// const params = useParams(); | |||||
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); | |||||
const [onReady,setOnReady] = useState(false); | |||||
const [companyName, setCompanyName] = useState({}); | |||||
const {register, | |||||
// getValues | |||||
} = useForm() | |||||
const navigate = useNavigate() | |||||
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 | |||||
// console.log(currentApplicationDetailData) | |||||
if (Object.keys(currentApplicationDetailData).length > 0) { | |||||
setOnReady(true); | |||||
} | |||||
}, [currentApplicationDetailData]); | |||||
const handleViewClick = () => () => { | |||||
console.log(currentApplicationDetailData) | |||||
currentApplicationDetailData.type == "ORG"? | |||||
navigate('/orgUser/'+ currentApplicationDetailData.id): | |||||
navigate('/indUser/'+ currentApplicationDetailData.id); | |||||
}; | |||||
// useEffect(() => { | |||||
// //upload latest data to parent | |||||
// const values = getValues(); | |||||
// const objectData ={ | |||||
// ...values, | |||||
// locked: locked, | |||||
// } | |||||
// updateUserObject(objectData); | |||||
// }, [isCollectData]); | |||||
return ( | |||||
!onReady ? | |||||
<LoadingComponent/> | |||||
: | |||||
<MainCard elevation={0} | |||||
border={false} | |||||
content={false} | |||||
sx={{xs:"12", md:"7"}}> | |||||
<Grid container spacing={1} direction="row"> | |||||
<Grid item xs={12} md={7} > | |||||
<Stack | |||||
direction="row" | |||||
justifyContent="flex-start" | |||||
alignItems="center" | |||||
spacing={2} | |||||
mb={2} | |||||
> | |||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
onClick={handleViewClick()} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
}}> | |||||
<ContentPasteSearchIcon/> | |||||
<Typography ml={1} mr={1}> View</Typography> | |||||
</Button> | |||||
</Stack> | |||||
</Grid> | |||||
</Grid> | |||||
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}> | |||||
Client Details | |||||
</Typography> | |||||
<form> | |||||
<Grid container direction="column" justifyContent="flex-start" | |||||
alignItems="flex-start"> | |||||
<Grid item xs={12} md={12} lg={12} mb={1} > | |||||
{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 container direction="column" justifyContent="flex-start" | |||||
alignItems="flex-start"> | |||||
<Grid item xs={12} md={12} lg={12} mb={1} > | |||||
<FormLabel>Client Type:</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("type", | |||||
{ | |||||
value: currentApplicationDetailData.type, | |||||
})} | |||||
id='type' | |||||
/> | |||||
</FormControl> | |||||
</Grid> | |||||
</Grid> | |||||
{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 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 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 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 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 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 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 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 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> | |||||
</> | |||||
} | |||||
</form> | |||||
</MainCard> | |||||
); | |||||
}; | |||||
export default ClientDetailCard; |
@@ -0,0 +1,189 @@ | |||||
// material-ui | |||||
import { | |||||
FormControl, | |||||
// Button, | |||||
Grid, | |||||
// InputAdornment, | |||||
Typography, FormLabel, | |||||
OutlinedInput, | |||||
} from '@mui/material'; | |||||
import MainCard from "../../components/MainCard"; | |||||
import * as React from "react"; | |||||
import {useForm} from "react-hook-form"; | |||||
import { | |||||
useEffect, | |||||
useState | |||||
} from "react"; | |||||
// import Checkbox from "@mui/material/Checkbox"; | |||||
import Loadable from 'components/Loadable'; | |||||
import { lazy } from 'react'; | |||||
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | |||||
//import {useParams} from "react-router-dom"; | |||||
import * as DateUtils from "utils/DateUtils"; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
const GazetteDetailCard = ( | |||||
{ applicationDetailData, | |||||
// isCollectData, | |||||
// updateUserObject, | |||||
// isNewRecord | |||||
} | |||||
) => { | |||||
// const params = useParams(); | |||||
// 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, | |||||
// getValues | |||||
} = useForm() | |||||
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 | |||||
// console.log(currentApplicationDetailData) | |||||
if (issueNum.length > 0) { | |||||
setOnReady(true); | |||||
} | |||||
}, [issueNum]); | |||||
// useEffect(() => { | |||||
// //upload latest data to parent | |||||
// const values = getValues(); | |||||
// const objectData ={ | |||||
// ...values, | |||||
// locked: locked, | |||||
// } | |||||
// updateUserObject(objectData); | |||||
// }, [isCollectData]); | |||||
return ( | |||||
!onReady ? | |||||
<LoadingComponent/> | |||||
: | |||||
<MainCard elevation={0} | |||||
border={false} | |||||
content={false} | |||||
> | |||||
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}> | |||||
Gazette Details | |||||
</Typography> | |||||
<form> | |||||
<Grid container direction="column"> | |||||
<Grid item xs={12} md={12}> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormLabel>Issue Number:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<FormControl variant="outlined" fullWidth > | |||||
<OutlinedInput | |||||
fullWidth | |||||
size="small" | |||||
{...register("issueNum", | |||||
{ | |||||
value: issueNum, | |||||
})} | |||||
id='issueNum' | |||||
/> | |||||
</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>Gazette Code:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<FormControl variant="outlined" fullWidth > | |||||
<OutlinedInput | |||||
fullWidth | |||||
size="small" | |||||
{...register("gazetteCode", | |||||
{ | |||||
value: gazetteCode, | |||||
})} | |||||
id='gazetteCode' | |||||
/> | |||||
</FormControl> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={6} lg={6} sx={{mb: 1}}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormLabel>Issue Date:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<FormControl variant="outlined" fullWidth > | |||||
<OutlinedInput | |||||
fullWidth | |||||
size="small" | |||||
{...register("issueDate", | |||||
{ | |||||
value: issueDate, | |||||
})} | |||||
id='issueDate' | |||||
/> | |||||
</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={4} lg={4} | |||||
sx={{display: 'flex', alignItems: 'center'}}> | |||||
<FormLabel>Group Title:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={8} lg={8}> | |||||
<FormControl variant="outlined" fullWidth > | |||||
<OutlinedInput | |||||
fullWidth | |||||
size="small" | |||||
{...register("groupTitle", | |||||
{ | |||||
value: groupTitle, | |||||
})} | |||||
id='groupTitle' | |||||
/> | |||||
</FormControl> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</form> | |||||
</MainCard> | |||||
); | |||||
}; | |||||
export default GazetteDetailCard; |
@@ -0,0 +1,131 @@ | |||||
import { | |||||
useEffect, | |||||
useState | |||||
} from "react"; | |||||
// material-ui | |||||
import { | |||||
Grid, | |||||
Typography, | |||||
Stack, | |||||
Box | |||||
} from '@mui/material'; | |||||
import Loadable from 'components/Loadable'; | |||||
import { lazy } from 'react'; | |||||
import { | |||||
// useNavigate, | |||||
useParams | |||||
} from "react-router-dom"; | |||||
import axios from "axios"; | |||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||||
const ApplicationDetailCard = Loadable(lazy(() => import('./ApplicationDetailCard'))); | |||||
const GazetteDetailCard = Loadable(lazy(() => import('./GazetteDetailCard'))); | |||||
const ClientDetailCard = Loadable(lazy(() => import('./ClientDetailCard'))); | |||||
const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable'))); | |||||
import { | |||||
GET_PUBLIC_NOTICE_APPLY_DETAIL, | |||||
} from "utils/ApiPathConst"; | |||||
// ==============================|| Body - DEFAULT ||============================== // | |||||
const DashboardDefault = () => { | |||||
const params = useParams(); | |||||
const [applicationDetailData, setApplicationDetailData] = useState({}); | |||||
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); | |||||
const BackgroundHead = { | |||||
backgroundImage: `url(${titleBackgroundImg})`, | |||||
width: '100%', | |||||
height: '100%', | |||||
backgroundSize:'cover' | |||||
} | |||||
const appNo = "G2023-343" | |||||
const gazetteIssue = "2023 Vol 027" | |||||
const issueNo = "No. 36" | |||||
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 ( | |||||
<Grid container sx={{maxnHeight: '500vh',backgroundColor:'#ffffff'}} direction="column"> | |||||
<Grid item xs={12}> | |||||
<div style={BackgroundHead}> | |||||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||||
<Typography ml={15} color='#FFF' variant="h4">Application</Typography> | |||||
</Stack> | |||||
</div> | |||||
</Grid> | |||||
<Grid item xs={12} > | |||||
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center"> | |||||
<Typography ml={4} mt={3} variant="h4">Application / {appNo}, {gazetteIssue}, {issueNo} , {issueDate}</Typography> | |||||
</Stack> | |||||
</Grid> | |||||
<Grid item xs={12} > | |||||
<Grid container direction="row"> | |||||
<Grid item xs={12} md={10}> | |||||
<Grid container direction="column"> | |||||
<Grid item> | |||||
<Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||||
<ApplicationDetailCard | |||||
// updateUserObject={updateUserObject} | |||||
applicationDetailData={applicationDetailData} | |||||
// isCollectData={isCollectData} | |||||
// isNewRecord={isNewRecord} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
<Grid item xs={12}> | |||||
<Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||||
<GazetteDetailCard | |||||
// updateUserObject={updateUserObject} | |||||
applicationDetailData={applicationDetailData} | |||||
// isCollectData={isCollectData} | |||||
// isNewRecord={isNewRecord} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
<Grid item xs={12}> | |||||
<Box xs={12} ml={4} mt={3}> | |||||
<TabTableDetail applicationDetailData={applicationDetailData}/> | |||||
</Box> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid item xs={12} md={2} lg={2}> | |||||
<Grid container> | |||||
<Grid item xs={12}> | |||||
<Box ml={1} mt={3} mr={1} height='800px' sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||||
<ClientDetailCard | |||||
// updateUserObject={updateUserObject} | |||||
applicationDetailData={applicationDetailData} | |||||
// isCollectData={isCollectData} | |||||
// isNewRecord={isNewRecord} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
); | |||||
}; | |||||
export default DashboardDefault; |
@@ -0,0 +1,93 @@ | |||||
// material-ui | |||||
import * as React from 'react'; | |||||
import { | |||||
DataGrid, | |||||
} from "@mui/x-data-grid"; | |||||
import { | |||||
Button | |||||
} from '@mui/material'; | |||||
import * as DateUtils from "utils/DateUtils" | |||||
// import * as StatusUtils from "./PublicNoteStatusUtils"; | |||||
// ==============================|| EVENT TABLE ||============================== // | |||||
export default function BaseGrid({rows}) { | |||||
const [rowModesModel] = React.useState({}); | |||||
const columns = [ | |||||
{ | |||||
id: 'appNo', | |||||
field: 'appNo', | |||||
headerName: 'Application No.', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'created', | |||||
field: 'created', | |||||
headerName: 'Created', | |||||
flex: 1, | |||||
valueGetter:(params)=>{ | |||||
return DateUtils.datetimeStr(params?.value); | |||||
} | |||||
}, | |||||
{ | |||||
id: 'contactPerson', | |||||
field: 'contactPerson', | |||||
headerName: 'Contact Person', | |||||
flex: 2, | |||||
renderCell: (params) => { | |||||
let phone = JSON.parse(params.row.contactTelNo); | |||||
let faxNo = JSON.parse(params.row.contactFaxNo); | |||||
let contact = ""; | |||||
if (phone) { | |||||
contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber | |||||
} | |||||
if (faxNo) { | |||||
if (contact != "") | |||||
contact = contact + ", " | |||||
contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber | |||||
} | |||||
return (<> | |||||
{params?.value}<br /> | |||||
{contact} | |||||
</>); | |||||
} | |||||
}, | |||||
{ | |||||
id: 'remarks', | |||||
field: 'remarks', | |||||
headerName: 'remarks', | |||||
flex: 3, | |||||
}, | |||||
{ | |||||
field: 'actions', | |||||
type: 'actions', | |||||
headerName: '', | |||||
width: 50, | |||||
cellClassName: 'actions', | |||||
renderCell: () => { | |||||
return <Button onClick={()=>{}}>查看詳細</Button>; | |||||
}, | |||||
} | |||||
]; | |||||
return ( | |||||
<div style={{height:'20%', width: '100%'}}> | |||||
<DataGrid | |||||
rows={rows} | |||||
columns={columns} | |||||
editMode="row" | |||||
rowModesModel={rowModesModel} | |||||
initialState={{ | |||||
pagination: { | |||||
paginationModel: {page: 0, pageSize: 5}, | |||||
}, | |||||
}} | |||||
pageSizeOptions={[5, 10]} | |||||
autoHeight = {true} | |||||
/> | |||||
</div> | |||||
); | |||||
} |
@@ -0,0 +1,141 @@ | |||||
// material-ui | |||||
import * as React from 'react'; | |||||
import { | |||||
DataGrid, | |||||
} from "@mui/x-data-grid"; | |||||
import { | |||||
Stack, | |||||
Typography, | |||||
Button, | |||||
Dialog, DialogTitle, DialogContent, DialogActions | |||||
} from '@mui/material'; | |||||
import * as DateUtils from "utils/DateUtils" | |||||
// import * as StatusUtils from "./PublicNoteStatusUtils"; | |||||
// ==============================|| EVENT TABLE ||============================== // | |||||
export default function SubmittedTab({ rows }) { | |||||
const [selectedRowItems, setSelectedRowItems] = React.useState([]); | |||||
const [isPopUp, setIsPopUp] = React.useState(false); | |||||
const columns = [ | |||||
{ | |||||
id: 'appNo', | |||||
field: 'appNo', | |||||
headerName: '申請編號', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'created', | |||||
field: 'created', | |||||
headerName: '提交日期', | |||||
flex: 1, | |||||
valueGetter: (params) => { | |||||
return DateUtils.datetimeStr(params.value); | |||||
} | |||||
}, | |||||
{ | |||||
id: 'contactPerson', | |||||
field: 'contactPerson', | |||||
headerName: '聯絡人', | |||||
flex: 2, | |||||
renderCell: (params) => { | |||||
let phone = JSON.parse(params.row.contactTelNo); | |||||
let faxNo = JSON.parse(params.row.contactFaxNo); | |||||
let contact = ""; | |||||
if (phone) { | |||||
contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber | |||||
} | |||||
if (faxNo) { | |||||
if (contact != "") | |||||
contact = contact + ", " | |||||
contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber | |||||
} | |||||
return (<> | |||||
{params?.value}<br /> | |||||
{contact} | |||||
</>); | |||||
} | |||||
}, | |||||
{ | |||||
id: 'remarks', | |||||
field: 'remarks', | |||||
headerName: '我的備註', | |||||
flex: 3, | |||||
}, | |||||
{ | |||||
field: 'actions', | |||||
type: 'actions', | |||||
headerName: '', | |||||
width: 50, | |||||
cellClassName: 'actions', | |||||
renderCell: () => { | |||||
return <Button onClick={() => { }}>查看詳細</Button>; | |||||
}, | |||||
} | |||||
]; | |||||
const getWindowContent = () => { | |||||
var content = []; | |||||
const datas = rows?.filter((row) => | |||||
selectedRowItems.includes(row.id) | |||||
); | |||||
for (var i = 0; i < datas?.length; i++) { | |||||
content.push(<> | |||||
<Stack direction="row" justifyContent="space-between"><Typography variant="h5">申請編號: {datas[i].appNo}</Typography>({DateUtils.datetimeStr(datas[i].created)})</Stack> | |||||
備註: {datas[i].remarks} | |||||
<br /><br /> | |||||
</>); | |||||
} | |||||
return content; | |||||
} | |||||
return ( | |||||
<> | |||||
<div style={{ height: 400, width: '100%' }}> | |||||
<DataGrid | |||||
checkboxSelection | |||||
disableRowSelectionOnClick | |||||
rows={rows} | |||||
columns={columns} | |||||
editMode="row" | |||||
rowSelectionModel={selectedRowItems} | |||||
initialState={{ | |||||
pagination: { | |||||
paginationModel: { page: 0, pageSize: 5 }, | |||||
}, | |||||
}} | |||||
pageSizeOptions={[5, 10]} | |||||
autoHeight={true} | |||||
onRowSelectionModelChange={(newSelection) => { | |||||
setSelectedRowItems(newSelection); | |||||
}} | |||||
/> | |||||
<Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button> | |||||
</div> | |||||
<div> | |||||
<Dialog open={isPopUp} onClose={() => setIsPopUp(false)} > | |||||
<DialogTitle></DialogTitle> | |||||
<Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography> | |||||
<DialogContent style={{ display: 'flex', }}> | |||||
<Stack direction="column" justifyContent="space-between"> | |||||
{getWindowContent()} | |||||
</Stack> | |||||
</DialogContent> | |||||
<DialogActions> | |||||
<Button onClick={() => setIsPopUp(false)}>Close</Button> | |||||
<Button onClick={() => setIsPopUp(false)}>確認</Button> | |||||
</DialogActions> | |||||
</Dialog> | |||||
</div> | |||||
</> | |||||
); | |||||
} |
@@ -0,0 +1,76 @@ | |||||
// material-ui | |||||
import * as React from 'react'; | |||||
import { | |||||
DataGrid, | |||||
} from "@mui/x-data-grid"; | |||||
import { | |||||
Button | |||||
} from '@mui/material'; | |||||
// import * as DateUtils from "utils/DateUtils" | |||||
// import * as StatusUtils from "./PublicNoteStatusUtils"; | |||||
// ==============================|| EVENT TABLE ||============================== // | |||||
export default function ProofTab({rows}) { | |||||
const [rowModesModel] = React.useState({}); | |||||
const columns = [ | |||||
{ | |||||
id: 'proofRef', | |||||
field: 'proofRef', | |||||
headerName: 'Proof Ref.', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'proofSent', | |||||
field: 'proofSent', | |||||
headerName: 'Proof Return', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'proofReturn', | |||||
field: 'proofReturn', | |||||
headerName: 'Proof Return', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'status', | |||||
field: 'status', | |||||
headerName: 'Status', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'fee', | |||||
field: 'fee', | |||||
headerName: 'Fee (HKD)', | |||||
flex: 2, | |||||
}, | |||||
{ | |||||
field: 'detail', | |||||
type: 'actions', | |||||
headerName: '', | |||||
width: 50, | |||||
cellClassName: 'actions', | |||||
renderCell: () => { | |||||
return <Button onClick={()=>{}}>查看詳細</Button>; | |||||
}, | |||||
} | |||||
]; | |||||
return ( | |||||
<div style={{height:'20%', width: '100%'}}> | |||||
<DataGrid | |||||
rows={rows} | |||||
columns={columns} | |||||
editMode="row" | |||||
rowModesModel={rowModesModel} | |||||
initialState={{ | |||||
pagination: { | |||||
paginationModel: {page: 0, pageSize: 5}, | |||||
}, | |||||
}} | |||||
pageSizeOptions={[5, 10]} | |||||
autoHeight = {true} | |||||
/> | |||||
</div> | |||||
); | |||||
} |
@@ -0,0 +1,64 @@ | |||||
// material-ui | |||||
import * as React from 'react'; | |||||
import { | |||||
DataGrid, | |||||
} from "@mui/x-data-grid"; | |||||
// import dayjs from "dayjs"; | |||||
// import { | |||||
// Button | |||||
// } from '@mui/material'; | |||||
// import * as DateUtils from "utils/DateUtils" | |||||
import * as StatusUtils from "../../PublicNotice/ListPanel/PublicNoteStatusUtils"; | |||||
// ==============================|| EVENT TABLE ||============================== // | |||||
export default function StatusHistoryTab({rows}) { | |||||
const [rowModesModel] = React.useState({}); | |||||
const columns = [ | |||||
{ | |||||
id: 'created', | |||||
field: 'created', | |||||
headerName: 'Date', | |||||
valueGetter: (params) => { | |||||
const value = params.value | |||||
return value[0]+"/"+value[1]+"/"+value[2]+" "+value[3]+":"+value[4]+":"+value[5] | |||||
}, | |||||
// valueFormatter: (params) => dayjs(params.value).format('DD/MM/YYYY'), | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'createdBy', | |||||
field: 'createdBy', | |||||
headerName: 'Changed By', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'status', | |||||
field: 'status', | |||||
headerName: 'Status', | |||||
flex: 1, | |||||
renderCell: (params) => { | |||||
return [StatusUtils.getStatusEng(params)] | |||||
}, | |||||
}, | |||||
]; | |||||
return ( | |||||
<div style={{height:'20%', width: '100%'}}> | |||||
<DataGrid | |||||
rows={rows} | |||||
columns={columns} | |||||
editMode="row" | |||||
rowModesModel={rowModesModel} | |||||
initialState={{ | |||||
pagination: { | |||||
paginationModel: {page: 0, pageSize: 5}, | |||||
}, | |||||
}} | |||||
pageSizeOptions={[5, 10]} | |||||
autoHeight = {true} | |||||
/> | |||||
</div> | |||||
); | |||||
} |
@@ -0,0 +1,113 @@ | |||||
// material-ui | |||||
import { | |||||
Grid, | |||||
// Typography, | |||||
Tab, | |||||
Box, | |||||
// Button | |||||
} from '@mui/material'; | |||||
import { TabPanel, TabContext, TabList } from '@mui/lab'; | |||||
import { | |||||
useEffect, | |||||
useState } from "react"; | |||||
// import { useNavigate } from "react-router-dom"; | |||||
import * as React from "react"; | |||||
// import * as HttpUtils from "../../../utils/HttpUtils"; | |||||
// import * as UrlUtils from "../../../utils/ApiPathConst"; | |||||
import Loadable from 'components/Loadable'; | |||||
import { lazy } from 'react'; | |||||
const BaseGrid = Loadable(lazy(() => import('./BaseGrid'))); | |||||
const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab'))); | |||||
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | |||||
const ProofTab = Loadable(lazy(() => import('./ProofTab'))); | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
const PublicNotice = ({applicationDetailData}) => { | |||||
const [submittedList, ] = useState([]); | |||||
const [inProgressList, ] = useState([]); | |||||
const [onReady,setOnReady] = useState(false); | |||||
const [selectedTab, setSelectedTab] = useState("1"); | |||||
// const navigate = useNavigate(); | |||||
const [statusHistoryList, setStatusHistoryList] = useState([]); | |||||
// useEffect(() => { | |||||
// loadData(); | |||||
// }, []); | |||||
const reloadPage = () => { | |||||
window.location.reload(false); | |||||
} | |||||
useEffect(() => { | |||||
//if user data from parent are not null | |||||
// console.log(applicationDetailData) | |||||
if (Object.keys(applicationDetailData).length > 0) { | |||||
setStatusHistoryList(applicationDetailData.statusHistoryList); | |||||
} | |||||
}, [applicationDetailData]); | |||||
useEffect(() => { | |||||
//if state data are ready and assign to different field | |||||
if (statusHistoryList.length > 0) { | |||||
setOnReady(true); | |||||
} | |||||
}, [statusHistoryList]); | |||||
// useEffect(() => { | |||||
// setLoding(false); | |||||
// }, [submittedList]); | |||||
const handleChange = (event, newValue) => { | |||||
setSelectedTab(newValue); | |||||
} | |||||
// const onBtnClick = () => { | |||||
// navigate('/publicNotice/apply') | |||||
// } | |||||
return ( | |||||
!onReady ? | |||||
<LoadingComponent /> | |||||
: | |||||
<Grid container sx={{minHeight: '40vh'}}> | |||||
{/*col 2*/} | |||||
<Grid item xs={12}> | |||||
<TabContext value={selectedTab}> | |||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||||
<TabList onChange={handleChange} aria-label="lab API tabs example"> | |||||
<Tab label={"Proof(" + submittedList.length + ")"} value="1" /> | |||||
<Tab label={"Payment(" + inProgressList.length + ")"} value="2" /> | |||||
<Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" /> | |||||
</TabList> | |||||
</Box> | |||||
<TabPanel value="1"> | |||||
<ProofTab | |||||
rows={submittedList} | |||||
reloadFunction={reloadPage} | |||||
/> | |||||
</TabPanel> | |||||
<TabPanel value="2"> | |||||
<BaseGrid | |||||
rows={inProgressList} | |||||
reloadFunction={reloadPage} | |||||
/> | |||||
</TabPanel> | |||||
<TabPanel value="3"> | |||||
<StatusHistoryTab | |||||
rows={statusHistoryList} | |||||
reloadFunction={reloadPage} | |||||
/> | |||||
</TabPanel> | |||||
</TabContext> | |||||
</Grid> | |||||
</Grid> | |||||
); | |||||
}; | |||||
export default PublicNotice; |
@@ -7,7 +7,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout'))); | |||||
// render - dashboard | // render - dashboard | ||||
const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard'))); | const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard'))); | ||||
const ApplicationDetail = Loadable(lazy(() => import('pages/gldApplicationDetailPage'))); | |||||
const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail_GLD'))); | |||||
const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD'))); | const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD'))); | ||||
// ==============================|| MAIN ROUTING ||============================== // | // ==============================|| MAIN ROUTING ||============================== // | ||||