@@ -71,15 +71,21 @@ const ApplicationDetailCard = ( | |||
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 ( | |||
@@ -131,54 +137,60 @@ const ApplicationDetailCard = ( | |||
spacing={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> | |||
</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 | |||
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'))); | |||
// ==============================|| MAIN ROUTING ||============================== // | |||