@@ -8,11 +8,17 @@ import { | |||
} from '@mui/material'; | |||
import * as DateUtils from "utils/DateUtils" | |||
import * as StatusUtils from "./PublicNoteStatusUtils"; | |||
import {useNavigate} from "react-router-dom"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function BaseGrid({rows}) { | |||
const [rowModesModel] = React.useState({}); | |||
const navigate = useNavigate() | |||
const handleDetailClick = (params) => () => { | |||
navigate('/publicNotice/'+ params.id); | |||
}; | |||
const columns = [ | |||
{ | |||
id: 'appNo', | |||
@@ -75,8 +81,8 @@ export default function BaseGrid({rows}) { | |||
headerName: '', | |||
width: 80, | |||
cellClassName: 'actions', | |||
renderCell: () => { | |||
return <Button onClick={()=>{}}>查看詳細</Button>; | |||
renderCell: (params) => { | |||
return <Button onClick={handleDetailClick(params)}>查看詳細</Button>; | |||
}, | |||
} | |||
]; | |||
@@ -11,12 +11,17 @@ import { | |||
} from '@mui/material'; | |||
import * as DateUtils from "utils/DateUtils" | |||
import * as StatusUtils from "./PublicNoteStatusUtils"; | |||
import {useNavigate} from "react-router-dom"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SubmittedTab({ rows }) { | |||
const [selectedRowItems, setSelectedRowItems] = React.useState([]); | |||
const [isPopUp, setIsPopUp] = React.useState(false); | |||
const navigate = useNavigate() | |||
const handleDetailClick = (params) => () => { | |||
navigate('/publicNotice/'+ params.id); | |||
}; | |||
const columns = [ | |||
{ | |||
@@ -82,8 +87,8 @@ export default function SubmittedTab({ rows }) { | |||
headerName: '', | |||
width: 100, | |||
cellClassName: 'actions', | |||
renderCell: () => { | |||
return <Button onClick={() => { }}>查看詳細</Button>; | |||
renderCell: (params) => { | |||
return <Button onClick={handleDetailClick(params)}>查看詳細</Button>; | |||
}, | |||
} | |||
]; | |||
@@ -9,11 +9,17 @@ import { | |||
import { useEffect } from "react"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import * as StatusUtils from "./PublicNoteStatusUtils"; | |||
import {useNavigate} from "react-router-dom"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SearchPublicNoticeTable({ recordList }) { | |||
const [rows, setRows] = React.useState(recordList); | |||
const [rowModesModel] = React.useState({}); | |||
const navigate = useNavigate() | |||
const handleDetailClick = (params) => () => { | |||
navigate('/publicNotice/'+ params.id); | |||
}; | |||
useEffect(() => { | |||
setRows(recordList); | |||
@@ -82,8 +88,8 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||
headerName: '', | |||
width: 100, | |||
cellClassName: 'actions', | |||
renderCell: () => { | |||
return <Button onClick={() => { }}>查看詳細</Button>; | |||
renderCell: (params) => { | |||
return <Button onClick={handleDetailClick(params)}>查看詳細</Button>; | |||
}, | |||
} | |||
]; | |||
@@ -23,9 +23,10 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo | |||
// import {useParams} from "react-router-dom"; | |||
import * as HttpUtils from "utils/HttpUtils" | |||
import * as StatusUtils from "../PublicNotice/ListPanel/PublicNoteStatusUtils"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined'; | |||
import DoneIcon from '@mui/icons-material/Done'; | |||
// 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'; | |||
@@ -42,6 +43,8 @@ const ApplicationDetailCard = ( | |||
const [companyName, setCompanyName] = useState({}); | |||
const [fileDetail, setfileDetail] = useState({}); | |||
const [onReady,setOnReady] = useState(false); | |||
const [issueNum,setIssueNum] = useState(""); | |||
const [issueDate,setIssueDate] = useState(""); | |||
const {register, | |||
// getValues | |||
} = useForm() | |||
@@ -49,10 +52,14 @@ const ApplicationDetailCard = ( | |||
useEffect(() => { | |||
//if user data from parent are not null | |||
// console.log(applicationDetailData) | |||
if (Object.keys(applicationDetailData).length > 0) { | |||
if (Object.keys(applicationDetailData).length > 0 &&applicationDetailData.data!==null) { | |||
setCurrentApplicationDetailData(applicationDetailData.data); | |||
setCompanyName(applicationDetailData.companyName); | |||
setfileDetail(applicationDetailData.fileDetail); | |||
setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.year | |||
+" No. "+applicationDetailData.gazetteIssueDetail.issueNo); | |||
setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); | |||
} | |||
}, [applicationDetailData]); | |||
@@ -96,8 +103,8 @@ const ApplicationDetailCard = ( | |||
border={false} | |||
content={false} | |||
> | |||
<Grid container spacing={4} direction="row"> | |||
<Grid item xs={4} > | |||
<Grid container spacing={1} direction="row"> | |||
<Grid item xs={12}> | |||
<Stack | |||
direction="row" | |||
justifyContent="space-between" | |||
@@ -105,17 +112,6 @@ const ApplicationDetailCard = ( | |||
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" | |||
@@ -125,59 +121,9 @@ const ApplicationDetailCard = ( | |||
alignItems: 'end' | |||
}}> | |||
<EditNoteIcon/> | |||
<Typography ml={1}> Create Proof</Typography> | |||
<Typography ml={1}> 支付</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 | |||
<Button | |||
// size="large" | |||
variant="contained" | |||
// onClick={handleNewUserClick} | |||
@@ -187,15 +133,13 @@ const ApplicationDetailCard = ( | |||
backgroundColor:'#ffa733' | |||
}}> | |||
<CloseIcon/> | |||
<Typography ml={1}> Withdraw</Typography> | |||
<Typography ml={1}> 取消</Typography> | |||
</Button> | |||
</> | |||
} | |||
</Stack> | |||
</Grid> | |||
</Grid> | |||
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}> | |||
Application Details | |||
公共啟事申請資料 | |||
</Typography> | |||
<form> | |||
<Grid container direction="column"> | |||
@@ -206,7 +150,7 @@ const ApplicationDetailCard = ( | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Application No:</FormLabel> | |||
<FormLabel>申請編號:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
@@ -228,7 +172,7 @@ const ApplicationDetailCard = ( | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Status:</FormLabel> | |||
<FormLabel>申請狀態:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
@@ -245,7 +189,7 @@ const ApplicationDetailCard = ( | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Applicant:</FormLabel> | |||
<FormLabel>申請人:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
@@ -276,31 +220,21 @@ const ApplicationDetailCard = ( | |||
</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} | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Contact Phone:</FormLabel> | |||
<FormLabel>憲報期數:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={8} lg={8}> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<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%'}}> | |||
<FormControl variant="outlined" fullWidth > | |||
<OutlinedInput | |||
size="small" | |||
{...register("phoneNumber", | |||
{...register("issueNum", | |||
{ | |||
value: currentApplicationDetailData.contactTelNo.phoneNumber, | |||
value: issueNum, | |||
})} | |||
id='phoneNumber' | |||
id='issueNum' | |||
/> | |||
</FormControl> | |||
</Stack> | |||
@@ -314,7 +248,7 @@ const ApplicationDetailCard = ( | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Contect Person:</FormLabel> | |||
<FormLabel>聯絡人:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
@@ -334,31 +268,21 @@ const ApplicationDetailCard = ( | |||
</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} | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Contact Fax:</FormLabel> | |||
<FormLabel>發布日期:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={8} lg={8}> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<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%'}}> | |||
<FormControl variant="outlined" fullWidth> | |||
<OutlinedInput | |||
size="small" | |||
{...register("faxNumber", | |||
{...register("issueDate", | |||
{ | |||
value: currentApplicationDetailData.contactFaxNo.faxNumber, | |||
value: issueDate, | |||
})} | |||
id='faxNumber' | |||
id='issueDate' | |||
/> | |||
</FormControl> | |||
</Stack> | |||
@@ -366,17 +290,83 @@ const ApplicationDetailCard = ( | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<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>聯絡電話:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<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 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>傳真號碼:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<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 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 item xs={12} md={6} lg={6}> | |||
<Grid container direction="row"> | |||
<Grid item xs={12} md={2} lg={2} | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{display: 'flex', alignItems: 'center'}}> | |||
<FormLabel>Manuscript File:</FormLabel> | |||
<FormLabel>犒件檔案:</FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={6} lg={6} sx={{display: 'flex', alignItems: 'center'}}> | |||
<Grid item xs={12} md={9} lg={9} 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 > | |||
@@ -1,357 +0,0 @@ | |||
// 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; |
@@ -1,189 +0,0 @@ | |||
// 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; |
@@ -20,12 +20,11 @@ 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'))); | |||
// const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable'))); | |||
import { | |||
GET_PUBLIC_NOTICE_APPLY_DETAIL, | |||
} from "utils/ApiPathConst"; | |||
import {useNavigate} from "react-router-dom"; | |||
// ==============================|| Body - DEFAULT ||============================== // | |||
@@ -33,7 +32,9 @@ import { | |||
const DashboardDefault = () => { | |||
const params = useParams(); | |||
const [applicationDetailData, setApplicationDetailData] = useState({}); | |||
const [appNo, setAapNo] = useState(""); | |||
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); | |||
const navigate = useNavigate() | |||
const BackgroundHead = { | |||
backgroundImage: `url(${titleBackgroundImg})`, | |||
@@ -41,10 +42,7 @@ const DashboardDefault = () => { | |||
height: '100%', | |||
backgroundSize:'cover' | |||
} | |||
const appNo = "G2023-343" | |||
const gazetteIssue = "2023 Vol 027" | |||
const issueNo = "No. 36" | |||
const issueDate = "A001" | |||
// const appNo = "G2023-343" | |||
useEffect(() => { | |||
if(params.id > 0 ){ | |||
@@ -52,7 +50,7 @@ const DashboardDefault = () => { | |||
.then((response) => { | |||
if (response.status === 200) { | |||
setApplicationDetailData(response.data); | |||
// setRefApplicationDetailData(response.data); | |||
setAapNo(response.data.data.appNo); | |||
} | |||
}) | |||
.catch(error => { | |||
@@ -62,26 +60,32 @@ const DashboardDefault = () => { | |||
} | |||
}, []); | |||
useEffect(() => { | |||
if(applicationDetailData.data === null){ | |||
navigate('/publicNotice'); | |||
} | |||
}, [applicationDetailData]); | |||
return ( | |||
<Grid container sx={{maxnHeight: '500vh',backgroundColor:'#ffffff'}} direction="column"> | |||
<Grid container sx={{minHeight: '110vh',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> | |||
<Typography ml={15} color='#FFF' variant="h4">我的公共啟事</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> | |||
<Typography ml={3} mt={3} variant="h4">我的公共啟事 / {appNo}</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'}}> | |||
<Grid item xs={12} md={12}> | |||
<Grid container direction="column" justifyContent="flex-start" alignItems="center"> | |||
{/* <Grid item xs={12} md={12} > */} | |||
{/* <Grid container direction="column" alignItems="center"> */} | |||
<Grid item width="75%"> | |||
<Box xs={12} mt={6} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}> | |||
<ApplicationDetailCard | |||
// updateUserObject={updateUserObject} | |||
applicationDetailData={applicationDetailData} | |||
@@ -90,37 +94,13 @@ const DashboardDefault = () => { | |||
/> | |||
</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}> | |||
{/* <Grid item xs={12} md={12} width="85%"> | |||
<Box xs={12} 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> */} | |||
</Grid> | |||
</Grid> | |||
@@ -34,6 +34,10 @@ const DashboardDefault = () => { | |||
const params = useParams(); | |||
const [applicationDetailData, setApplicationDetailData] = useState({}); | |||
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); | |||
const [appNo, setAapNo] = useState(""); | |||
const [gazetteIssue, setGazetteIssue] = useState(""); | |||
const [groupNo, setGroupNo] = useState(""); | |||
const [groupTitle, setGroupTitle] = useState(""); | |||
const BackgroundHead = { | |||
backgroundImage: `url(${titleBackgroundImg})`, | |||
@@ -41,10 +45,10 @@ const DashboardDefault = () => { | |||
height: '100%', | |||
backgroundSize:'cover' | |||
} | |||
const appNo = "G2023-343" | |||
const gazetteIssue = "2023 Vol 027" | |||
const issueNo = "No. 36" | |||
const issueDate = "A001" | |||
// const appNo = "G2023-343" | |||
// const gazetteIssue = "2023 Vol 027" | |||
// const issueNo = "No. 36" | |||
// const issueDate = "A001" | |||
useEffect(() => { | |||
if(params.id > 0 ){ | |||
@@ -52,7 +56,13 @@ const DashboardDefault = () => { | |||
.then((response) => { | |||
if (response.status === 200) { | |||
setApplicationDetailData(response.data); | |||
const gazetteIssueDetail = response.data.gazetteIssueDetail; | |||
// setRefApplicationDetailData(response.data); | |||
setAapNo(response.data.data.appNo); | |||
setGazetteIssue(gazetteIssueDetail.year +" Vol "+gazetteIssueDetail.volume); | |||
setGroupNo("No. "+gazetteIssueDetail.data.groupNo); | |||
setGroupTitle("No. "+gazetteIssueDetail.data.groupTitle); | |||
} | |||
}) | |||
.catch(error => { | |||
@@ -73,7 +83,7 @@ const DashboardDefault = () => { | |||
</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> | |||
<Typography ml={4} mt={3} variant="h4">Application / {appNo}, {gazetteIssue}, {groupNo} , {groupTitle}</Typography> | |||
</Stack> | |||
</Grid> | |||
<Grid item xs={12} > | |||
@@ -10,6 +10,7 @@ const DashboardDefault = Loadable(lazy(() => import('pages/publicDashboard'))); | |||
const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage'))); | |||
const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel'))); | |||
const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm'))); | |||
const PublicNoticeDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail'))); | |||
// ==============================|| MAIN ROUTING ||============================== // | |||
@@ -39,7 +40,11 @@ const PublicDashboard = { | |||
{ | |||
path: 'publicNotice/apply', | |||
element: <PublicNoticeApplyForm/> | |||
} | |||
}, | |||
{ | |||
path: 'publicNotice/:id', | |||
element: <PublicNoticeDetail/> | |||
}, | |||
] | |||
}, | |||
] | |||