@@ -22,7 +22,32 @@ export function getStatus(params) { | |||
return getStatusTag({ text: params.row.status }) | |||
} | |||
} | |||
export function getStatusByText(status) { | |||
switch (status) { | |||
case "submitted": | |||
return getStatusTag({ color: "#f5a83d", text: "已提交" }) | |||
case "rejected": | |||
return getStatusTag({ color: "#d9372b", text: "已拒絕" }) | |||
case "cancelled": | |||
return getStatusTag({ color: "#757373", text: "已取消" }) | |||
case "accepted": | |||
return getStatusTag({ color: "#22a13f", text: "已接受" }) | |||
case "confirmed": | |||
return getStatusTag({ color: "#22a13f", text: "已確認" }) | |||
case "paid": | |||
return getStatusTag({ color: "#22a13f", text: "已付費" }) | |||
case "published": | |||
return getStatusTag({ color: "#f5a83d", text: "已發表" }) | |||
case "withdrawn": | |||
return getStatusTag({ color: "#8a8784", text: "已撤銷" }) | |||
default: | |||
return getStatusTag({ text: params.row.status }) | |||
} | |||
} | |||
export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) { | |||
@@ -8,18 +8,22 @@ import { | |||
OutlinedInput, | |||
Stack | |||
} from '@mui/material'; | |||
import MainCard from "../../components/MainCard"; | |||
import * as React from "react"; | |||
// import MainCard from "../../components/MainCard"; | |||
const MainCard = Loadable(lazy(() => import('components/MainCard'))); | |||
import {useForm} from "react-hook-form"; | |||
import { | |||
// useEffect, | |||
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 {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'; | |||
@@ -27,34 +31,46 @@ import EditNoteIcon from '@mui/icons-material/EditNote'; | |||
import DownloadIcon from '@mui/icons-material/Download'; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const ApplicationDetailCard = ( | |||
// {isCollectData, updateUserObject,userData,isNewRecord} | |||
{ applicationDetailData, | |||
// isCollectData, | |||
// updateUserObject, | |||
// isNewRecord | |||
} | |||
) => { | |||
// const params = useParams(); | |||
const [currentApplicationDetailData, ] = React.useState({}); | |||
// const [locked, setLocked] = useState(false); | |||
const [onReady,] = useState(true); | |||
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); | |||
const [companyName, setCompanyName] = useState({}); | |||
const [fileDetail, setfileDetail] = useState({}); | |||
const [onReady,setOnReady] = useState(false); | |||
const {register, | |||
// getValues | |||
} = useForm() | |||
// useEffect(() => { | |||
// //if user data from parent are not null | |||
// if (Object.keys(userData).length > 0 && userData !== undefined) { | |||
// setCurrentUserData(userData.data); | |||
// } | |||
// }, []); | |||
useEffect(() => { | |||
//if user data from parent are not null | |||
// console.log(applicationDetailData) | |||
if (Object.keys(applicationDetailData).length > 0) { | |||
setCurrentApplicationDetailData(applicationDetailData.data); | |||
setCompanyName(applicationDetailData.companyName); | |||
setfileDetail(applicationDetailData.fileDetail); | |||
} | |||
}, [applicationDetailData]); | |||
// useEffect(() => { | |||
// //if state data are ready and assign to different field | |||
// if (Object.keys(userData).length > 0 &¤tApplicationDetailData !== undefined&¤tApplicationDetailData.id!==undefined) { | |||
// setLocked(currentApplicationDetailData.locked); | |||
// setOnReady(true); | |||
// }else if(isNewRecord){ | |||
// setLocked(false); | |||
// setOnReady(true); | |||
// } | |||
// }, [currentApplicationDetailData]); | |||
useEffect(() => { | |||
//if state data are ready and assign to different field | |||
// console.log(currentApplicationDetailData) | |||
if (Object.keys(currentApplicationDetailData).length > 0) { | |||
setOnReady(true); | |||
} | |||
}, [currentApplicationDetailData]); | |||
const onDownloadClick = () => () => { | |||
HttpUtils.fileDownload({ | |||
fileId:fileDetail.id, | |||
skey:fileDetail.skey, | |||
filename:fileDetail.filename, | |||
}); | |||
}; | |||
// useEffect(() => { | |||
// //upload latest data to parent | |||
// const values = getValues(); | |||
@@ -205,15 +221,7 @@ const ApplicationDetailCard = ( | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormControl variant="outlined" fullWidth > | |||
<OutlinedInput | |||
fullWidth | |||
size="small" | |||
{...register("status", | |||
{ | |||
value: currentApplicationDetailData.status, | |||
})} | |||
id='status' | |||
/> | |||
{StatusUtils.getStatusByText(currentApplicationDetailData.status)} | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
@@ -230,15 +238,26 @@ const ApplicationDetailCard = ( | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormControl variant="outlined" fullWidth > | |||
{ currentApplicationDetailData.orgId===null? | |||
<OutlinedInput | |||
fullWidth | |||
size="small" | |||
{...register("userName", | |||
{...register("contactPerson", | |||
{ | |||
value: currentApplicationDetailData.userName, | |||
value: currentApplicationDetailData.contactPerson, | |||
})} | |||
id='userName' | |||
id='contactPerson' | |||
/>: | |||
<OutlinedInput | |||
fullWidth | |||
size="small" | |||
{...register("companyName", | |||
{ | |||
value: companyName.enCompanyName, | |||
})} | |||
id='companyName' | |||
/> | |||
} | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
@@ -251,17 +270,28 @@ const ApplicationDetailCard = ( | |||
</Grid> | |||
<Grid item xs={12} md={8} lg={8}> | |||
<FormControl variant="outlined" fullWidth > | |||
<OutlinedInput | |||
fullWidth | |||
size="small" | |||
{...register("contactTelNo", | |||
{ | |||
value: currentApplicationDetailData.contactTelNo, | |||
})} | |||
id='contactTelNo' | |||
/> | |||
</FormControl> | |||
<Stack direction="row"> | |||
<FormControl variant="outlined" sx={{width:'25%'}}> | |||
<OutlinedInput | |||
size="small" | |||
{...register("countryCode", | |||
{ | |||
value: currentApplicationDetailData.contactTelNo.countryCode, | |||
})} | |||
id='countryCode' | |||
/> | |||
</FormControl> | |||
<FormControl variant="outlined" sx={{width:'100%'}}> | |||
<OutlinedInput | |||
size="small" | |||
{...register("phoneNumber", | |||
{ | |||
value: currentApplicationDetailData.contactTelNo.phoneNumber, | |||
})} | |||
id='phoneNumber' | |||
/> | |||
</FormControl> | |||
</Stack> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
@@ -298,17 +328,28 @@ const ApplicationDetailCard = ( | |||
</Grid> | |||
<Grid item xs={12} md={8} lg={8}> | |||
<FormControl variant="outlined" fullWidth > | |||
<OutlinedInput | |||
fullWidth | |||
size="small" | |||
{...register("contactFaxNo", | |||
{ | |||
value: currentApplicationDetailData.contactFaxNo, | |||
})} | |||
id='contactFaxNo' | |||
/> | |||
</FormControl> | |||
<Stack direction="row"> | |||
<FormControl variant="outlined" sx={{width:'25%'}}> | |||
<OutlinedInput | |||
size="small" | |||
{...register("countryCode", | |||
{ | |||
value: currentApplicationDetailData.contactFaxNo.countryCode, | |||
})} | |||
id='countryCode' | |||
/> | |||
</FormControl> | |||
<FormControl variant="outlined" sx={{width:'100%'}}> | |||
<OutlinedInput | |||
size="small" | |||
{...register("faxNumber", | |||
{ | |||
value: currentApplicationDetailData.contactFaxNo.faxNumber, | |||
})} | |||
id='faxNumber' | |||
/> | |||
</FormControl> | |||
</Stack> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
@@ -331,7 +372,7 @@ const ApplicationDetailCard = ( | |||
fullWidth | |||
id='fileName' | |||
> | |||
Manuscript File Final.pdf | |||
{fileDetail.filename} | |||
</Typography> | |||
</FormControl> | |||
</Grid> | |||
@@ -339,7 +380,7 @@ const ApplicationDetailCard = ( | |||
<Button | |||
size="small" | |||
variant="contained" | |||
// onClick={handleNewUserClick} | |||
onClick={onDownloadClick()} | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end', | |||
@@ -349,7 +390,6 @@ const ApplicationDetailCard = ( | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
@@ -12,7 +12,7 @@ import MainCard from "../../components/MainCard"; | |||
import * as React from "react"; | |||
import {useForm} from "react-hook-form"; | |||
import { | |||
// useEffect, | |||
useEffect, | |||
useState | |||
} from "react"; | |||
// import Checkbox from "@mui/material/Checkbox"; | |||
@@ -21,35 +21,40 @@ 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'; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const ClientDetailCard = ( | |||
// {isCollectData, updateUserObject,userData,isNewRecord} | |||
{ applicationDetailData, | |||
// isCollectData, | |||
// updateUserObject, | |||
// isNewRecord | |||
} | |||
) => { | |||
// const params = useParams(); | |||
const [currentApplicationDetailData, ] = React.useState({}); | |||
// const [locked, setLocked] = useState(false); | |||
const [onReady,] = useState(true); | |||
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); | |||
const [onReady,setOnReady] = useState(false); | |||
const [companyName, setCompanyName] = useState({}); | |||
const {register, | |||
// getValues | |||
} = useForm() | |||
// useEffect(() => { | |||
// //if user data from parent are not null | |||
// if (Object.keys(userData).length > 0 && userData !== undefined) { | |||
// setCurrentUserData(userData.data); | |||
// } | |||
// }, []); | |||
useEffect(() => { | |||
//if user data from parent are not null | |||
if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) { | |||
setCurrentApplicationDetailData(applicationDetailData.userData); | |||
setCompanyName(applicationDetailData.companyName); | |||
} | |||
}, [applicationDetailData]); | |||
// useEffect(() => { | |||
// //if state data are ready and assign to different field | |||
// if (Object.keys(userData).length > 0 &¤tApplicationDetailData !== undefined&¤tApplicationDetailData.id!==undefined) { | |||
// setLocked(currentApplicationDetailData.locked); | |||
// setOnReady(true); | |||
// }else if(isNewRecord){ | |||
// setLocked(false); | |||
// setOnReady(true); | |||
// } | |||
// }, [currentApplicationDetailData]); | |||
useEffect(() => { | |||
//if state data are ready and assign to different field | |||
// console.log(currentApplicationDetailData) | |||
if (Object.keys(currentApplicationDetailData).length > 0) { | |||
setOnReady(true); | |||
} | |||
}, [currentApplicationDetailData]); | |||
// useEffect(() => { | |||
// //upload latest data to parent | |||
@@ -61,7 +66,6 @@ const ClientDetailCard = ( | |||
// updateUserObject(objectData); | |||
// }, [isCollectData]); | |||
return ( | |||
!onReady ? | |||
<LoadingComponent/> | |||
@@ -69,9 +73,9 @@ const ClientDetailCard = ( | |||
<MainCard elevation={0} | |||
border={false} | |||
content={false} | |||
> | |||
sx={{xs:"12", md:"7"}}> | |||
<Grid container spacing={1} direction="row"> | |||
<Grid item xs={12} md={7} lg={7} > | |||
<Grid item xs={12} md={7} > | |||
<Stack | |||
direction="row" | |||
justifyContent="flex-start" | |||
@@ -100,9 +104,20 @@ const ClientDetailCard = ( | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} > | |||
<Typography> | |||
{currentApplicationDetailData.status} | |||
</Typography> | |||
{currentApplicationDetailData.verifiedBy!==null? | |||
<Stack direction="row"> | |||
<Typography> | |||
Verified | |||
</Typography> | |||
<CheckCircleOutline color="success"/> | |||
</Stack>: | |||
<Stack direction="row"> | |||
<Typography> | |||
Not Verified | |||
</Typography> | |||
<HighlightOff color="error"/> | |||
</Stack> | |||
} | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
@@ -110,114 +125,221 @@ const ClientDetailCard = ( | |||
<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} > | |||
<FormControl variant="outlined" > | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} > | |||
<FormControl variant="outlined" sx={{width:'100%'}} > | |||
<OutlinedInput | |||
size="small" | |||
{...register("userType", | |||
{...register("type", | |||
{ | |||
value: currentApplicationDetailData.userType, | |||
value: currentApplicationDetailData.type, | |||
})} | |||
id='userType' | |||
id='type' | |||
/> | |||
</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 (English):</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} > | |||
<FormControl variant="outlined" > | |||
<OutlinedInput | |||
size="small" | |||
{...register("enCompanyName", | |||
{ | |||
value: currentApplicationDetailData.enCompanyName, | |||
})} | |||
id='enCompanyName' | |||
/> | |||
</FormControl> | |||
{currentApplicationDetailData.type==="ORG"? | |||
<> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Company Name (English):</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} > | |||
<FormControl variant="outlined" sx={{width:'100%'}} > | |||
<OutlinedInput | |||
size="small" | |||
{...register("enCompanyName", | |||
{ | |||
value: companyName.enCompanyName , | |||
})} | |||
id='enCompanyName' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Company Name (Chinese):</FormLabel> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Company Name (Chinese):</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} > | |||
<FormControl variant="outlined" sx={{width:'100%'}} > | |||
<OutlinedInput | |||
size="small" | |||
{...register("chCompanyName", | |||
{ | |||
value: companyName.chCompanyName, | |||
})} | |||
id='chCompanyName' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} > | |||
<FormControl variant="outlined" > | |||
<OutlinedInput | |||
size="small" | |||
{...register("chCompanyName", | |||
{ | |||
value: currentApplicationDetailData.chCompanyName, | |||
})} | |||
id='chCompanyName' | |||
/> | |||
</FormControl> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>English Name:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} > | |||
<FormControl variant="outlined" sx={{width:'100%'}} > | |||
<OutlinedInput | |||
size="small" | |||
{...register("contactPerson", | |||
{ | |||
value: currentApplicationDetailData.contactPerson, | |||
})} | |||
id='contactPerson' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>English Name:</FormLabel> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Contact Phone:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} > | |||
<Stack direction="row"> | |||
<FormControl variant="outlined" sx={{width:'40%'}}> | |||
<OutlinedInput | |||
size="small" | |||
{...register("countryCode", | |||
{ | |||
value: currentApplicationDetailData.contactTel.countryCode, | |||
})} | |||
id='countryCode' | |||
/> | |||
</FormControl> | |||
<FormControl variant="outlined" sx={{width:'100%'}}> | |||
<OutlinedInput | |||
size="small" | |||
{...register("phoneNumber", | |||
{ | |||
value: currentApplicationDetailData.contactTel.phoneNumber, | |||
})} | |||
id='phoneNumber' | |||
/> | |||
</FormControl> | |||
</Stack> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} > | |||
<FormControl variant="outlined" > | |||
<OutlinedInput | |||
size="small" | |||
{...register("contactPerson", | |||
{ | |||
value: currentApplicationDetailData.contactPerson, | |||
})} | |||
id='contactPerson' | |||
/> | |||
</FormControl> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Email:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} > | |||
<FormControl variant="outlined" sx={{width:'100%'}} > | |||
<OutlinedInput | |||
size="small" | |||
{...register("emailBus", | |||
{ | |||
value: currentApplicationDetailData.emailBus, | |||
})} | |||
id='emailBus' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Contact Phone:</FormLabel> | |||
</>: | |||
<> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>English Name:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} > | |||
<FormControl variant="outlined" sx={{width:'100%'}} > | |||
<OutlinedInput | |||
size="small" | |||
{...register("enName", | |||
{ | |||
value: currentApplicationDetailData.enName, | |||
})} | |||
id='enName' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} > | |||
<FormControl variant="outlined" > | |||
<OutlinedInput | |||
size="small" | |||
{...register("phoneNumber", | |||
{ | |||
value: currentApplicationDetailData.phoneNumber, | |||
})} | |||
id='phoneNumber' | |||
/> | |||
</FormControl> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Chinese Name:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} > | |||
<FormControl variant="outlined" sx={{width:'100%'}} > | |||
<OutlinedInput | |||
size="small" | |||
{...register("chName", | |||
{ | |||
value: currentApplicationDetailData.chName, | |||
})} | |||
id='chName' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Email:</FormLabel> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Contact Phone:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} > | |||
<Stack direction="row"> | |||
<FormControl variant="outlined" sx={{width:'40%'}}> | |||
<OutlinedInput | |||
size="small" | |||
{...register("countryCode", | |||
{ | |||
value: currentApplicationDetailData.mobileNumber.countryCode, | |||
})} | |||
id='countryCode' | |||
/> | |||
</FormControl> | |||
<FormControl variant="outlined" sx={{width:'100%'}}> | |||
<OutlinedInput | |||
size="small" | |||
{...register("phoneNumber", | |||
{ | |||
value: currentApplicationDetailData.mobileNumber.phoneNumber, | |||
})} | |||
id='phoneNumber' | |||
/> | |||
</FormControl> | |||
</Stack> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} > | |||
<FormControl variant="outlined" > | |||
<OutlinedInput | |||
size="small" | |||
{...register("emailBus", | |||
{ | |||
value: currentApplicationDetailData.emailBus, | |||
})} | |||
id='emailBus' | |||
/> | |||
</FormControl> | |||
<Grid container direction="column" justifyContent="flex-start" | |||
alignItems="flex-start"> | |||
<Grid item xs={12} md={12} lg={12} mb={1} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Email:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} > | |||
<FormControl variant="outlined" sx={{width:'100%'}} > | |||
<OutlinedInput | |||
size="small" | |||
{...register("emailAddress", | |||
{ | |||
value: currentApplicationDetailData.emailAddress, | |||
})} | |||
id='emailAddress' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
</> | |||
} | |||
</form> | |||
</MainCard> | |||
); | |||
@@ -11,7 +11,7 @@ import MainCard from "../../components/MainCard"; | |||
import * as React from "react"; | |||
import {useForm} from "react-hook-form"; | |||
import { | |||
// useEffect, | |||
useEffect, | |||
useState | |||
} from "react"; | |||
// import Checkbox from "@mui/material/Checkbox"; | |||
@@ -19,36 +19,46 @@ 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 = ( | |||
// {isCollectData, updateUserObject,userData,isNewRecord} | |||
{ applicationDetailData, | |||
// isCollectData, | |||
// updateUserObject, | |||
// isNewRecord | |||
} | |||
) => { | |||
// const params = useParams(); | |||
const [currentApplicationDetailData, ] = React.useState({}); | |||
// const [locked, setLocked] = useState(false); | |||
const [onReady,] = useState(true); | |||
// const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); | |||
const [onReady,setOnReady] = useState(false); | |||
const [issueNum,setIssueNum] = useState(""); | |||
const [issueDate,setIssueDate] = useState(""); | |||
const [gazetteCode,setGazetteCode] = useState(""); | |||
const [groupTitle,setGroupTitle] = useState(""); | |||
const {register, | |||
// getValues | |||
} = useForm() | |||
// useEffect(() => { | |||
// //if user data from parent are not null | |||
// if (Object.keys(userData).length > 0 && userData !== undefined) { | |||
// setCurrentUserData(userData.data); | |||
// } | |||
// }, []); | |||
useEffect(() => { | |||
//if user data from parent are not null | |||
// console.log(applicationDetailData) | |||
if (Object.keys(applicationDetailData).length > 0) { | |||
setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.year | |||
+" No. "+applicationDetailData.gazetteIssueDetail.issueNo); | |||
setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); | |||
setGazetteCode(applicationDetailData.data.groupNo) | |||
setGroupTitle(applicationDetailData.data.groupTitle) | |||
} | |||
}, [applicationDetailData]); | |||
// useEffect(() => { | |||
// //if state data are ready and assign to different field | |||
// if (Object.keys(userData).length > 0 &¤tApplicationDetailData !== undefined&¤tApplicationDetailData.id!==undefined) { | |||
// setLocked(currentApplicationDetailData.locked); | |||
// setOnReady(true); | |||
// }else if(isNewRecord){ | |||
// setLocked(false); | |||
// setOnReady(true); | |||
// } | |||
// }, [currentApplicationDetailData]); | |||
useEffect(() => { | |||
//if state data are ready and assign to different field | |||
// console.log(currentApplicationDetailData) | |||
if (issueNum.length > 0) { | |||
setOnReady(true); | |||
} | |||
}, [issueNum]); | |||
// useEffect(() => { | |||
// //upload latest data to parent | |||
@@ -89,11 +99,11 @@ const GazetteDetailCard = ( | |||
<OutlinedInput | |||
fullWidth | |||
size="small" | |||
{...register("issueNo", | |||
{...register("issueNum", | |||
{ | |||
value: currentApplicationDetailData.issueNo, | |||
value: issueNum, | |||
})} | |||
id='issueNo' | |||
id='issueNum' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
@@ -111,11 +121,11 @@ const GazetteDetailCard = ( | |||
<OutlinedInput | |||
fullWidth | |||
size="small" | |||
{...register("issueNo", | |||
{...register("gazetteCode", | |||
{ | |||
value: currentApplicationDetailData.issueNo, | |||
value: gazetteCode, | |||
})} | |||
id='issueNo' | |||
id='gazetteCode' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
@@ -138,7 +148,7 @@ const GazetteDetailCard = ( | |||
size="small" | |||
{...register("issueDate", | |||
{ | |||
value: currentApplicationDetailData.issueDate, | |||
value: issueDate, | |||
})} | |||
id='issueDate' | |||
/> | |||
@@ -158,11 +168,11 @@ const GazetteDetailCard = ( | |||
<OutlinedInput | |||
fullWidth | |||
size="small" | |||
{...register("issueNo", | |||
{...register("groupTitle", | |||
{ | |||
value: currentApplicationDetailData.issueNo, | |||
value: groupTitle, | |||
})} | |||
id='issueNo' | |||
id='groupTitle' | |||
/> | |||
</FormControl> | |||
</Grid> | |||
@@ -1,4 +1,7 @@ | |||
// import { useState } from 'react'; | |||
import { | |||
useEffect, | |||
useState | |||
} from "react"; | |||
// material-ui | |||
import { | |||
@@ -9,16 +12,29 @@ import { | |||
} 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%', | |||
@@ -30,8 +46,24 @@ const DashboardDefault = () => { | |||
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'}} direction="column"> | |||
<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"> | |||
@@ -52,7 +84,7 @@ const DashboardDefault = () => { | |||
<Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||
<ApplicationDetailCard | |||
// updateUserObject={updateUserObject} | |||
// userData={userData} | |||
applicationDetailData={applicationDetailData} | |||
// isCollectData={isCollectData} | |||
// isNewRecord={isNewRecord} | |||
/> | |||
@@ -62,7 +94,7 @@ const DashboardDefault = () => { | |||
<Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||
<GazetteDetailCard | |||
// updateUserObject={updateUserObject} | |||
// userData={userData} | |||
applicationDetailData={applicationDetailData} | |||
// isCollectData={isCollectData} | |||
// isNewRecord={isNewRecord} | |||
/> | |||
@@ -77,11 +109,11 @@ const DashboardDefault = () => { | |||
</Grid> | |||
<Grid item xs={12} md={2} lg={2}> | |||
<Grid container> | |||
<Grid item xs={12} > | |||
<Box xs={12} ml={1} mt={3} mr={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||
<Grid item xs={12}> | |||
<Box ml={1} mt={3} mr={1} height='800px' sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||
<ClientDetailCard | |||
// updateUserObject={updateUserObject} | |||
// userData={userData} | |||
applicationDetailData={applicationDetailData} | |||
// isCollectData={isCollectData} | |||
// isNewRecord={isNewRecord} | |||
/> | |||
@@ -74,7 +74,7 @@ export default function BaseGrid({rows}) { | |||
]; | |||
return ( | |||
<div style={{height: 400, width: '100%'}}> | |||
<div style={{height:'20%', width: '100%'}}> | |||
<DataGrid | |||
rows={rows} | |||
columns={columns} | |||
@@ -55,6 +55,7 @@ export const POST_PUBLIC_NOTICE_APPLY = apiPath+'/application/apply'; | |||
//GLD User | |||
export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; | |||
export const DELETE_USER = apiPath+'/user'; | |||
export const GET_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/application-detail'; | |||
//User Group | |||
export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; |