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

Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

master
Anna Ho 2 years ago
parent
e8d0721a07 82d575e3bf
commit
1ca6263252
9 changed files with 174 additions and 718 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -2
      src/pages/PublicNotice/ListPanel/BaseGrid.js
  2. +7
    -2
      src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
  3. +8
    -2
      src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
  4. +104
    -114
      src/pages/PublicNoticeDetail/ApplicationDetailCard.js
  5. +0
    -357
      src/pages/PublicNoticeDetail/ClientDetailCard.js
  6. +0
    -189
      src/pages/PublicNoticeDetail/GazetteDetailCard.js
  7. +26
    -46
      src/pages/PublicNoticeDetail/index.js
  8. +15
    -5
      src/pages/PublicNoticeDetail_GLD/index.js
  9. +6
    -1
      src/routes/PublicUserRoutes.js

+ 8
- 2
src/pages/PublicNotice/ListPanel/BaseGrid.js View File

@@ -8,11 +8,17 @@ import {
} from '@mui/material'; } from '@mui/material';
import * as DateUtils from "utils/DateUtils" import * as DateUtils from "utils/DateUtils"
import * as StatusUtils from "./PublicNoteStatusUtils"; import * as StatusUtils from "./PublicNoteStatusUtils";
import {useNavigate} from "react-router-dom";

// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function BaseGrid({rows}) { export default function BaseGrid({rows}) {
const [rowModesModel] = React.useState({}); const [rowModesModel] = React.useState({});
const navigate = useNavigate()


const handleDetailClick = (params) => () => {
navigate('/publicNotice/'+ params.id);
};
const columns = [ const columns = [
{ {
id: 'appNo', id: 'appNo',
@@ -75,8 +81,8 @@ export default function BaseGrid({rows}) {
headerName: '', headerName: '',
width: 80, width: 80,
cellClassName: 'actions', cellClassName: 'actions',
renderCell: () => {
return <Button onClick={()=>{}}>查看詳細</Button>;
renderCell: (params) => {
return <Button onClick={handleDetailClick(params)}>查看詳細</Button>;
}, },
} }
]; ];


+ 7
- 2
src/pages/PublicNotice/ListPanel/PendingPaymentTab.js View File

@@ -11,12 +11,17 @@ import {
} from '@mui/material'; } from '@mui/material';
import * as DateUtils from "utils/DateUtils" import * as DateUtils from "utils/DateUtils"
import * as StatusUtils from "./PublicNoteStatusUtils"; import * as StatusUtils from "./PublicNoteStatusUtils";
import {useNavigate} from "react-router-dom";
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function SubmittedTab({ rows }) { export default function SubmittedTab({ rows }) {
const [selectedRowItems, setSelectedRowItems] = React.useState([]); const [selectedRowItems, setSelectedRowItems] = React.useState([]);
const [isPopUp, setIsPopUp] = React.useState(false); const [isPopUp, setIsPopUp] = React.useState(false);
const navigate = useNavigate()


const handleDetailClick = (params) => () => {
navigate('/publicNotice/'+ params.id);
};


const columns = [ const columns = [
{ {
@@ -82,8 +87,8 @@ export default function SubmittedTab({ rows }) {
headerName: '', headerName: '',
width: 100, width: 100,
cellClassName: 'actions', cellClassName: 'actions',
renderCell: () => {
return <Button onClick={() => { }}>查看詳細</Button>;
renderCell: (params) => {
return <Button onClick={handleDetailClick(params)}>查看詳細</Button>;
}, },
} }
]; ];


+ 8
- 2
src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js View File

@@ -9,11 +9,17 @@ import {
import { useEffect } from "react"; import { useEffect } from "react";
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
import * as StatusUtils from "./PublicNoteStatusUtils"; import * as StatusUtils from "./PublicNoteStatusUtils";
import {useNavigate} from "react-router-dom";
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function SearchPublicNoticeTable({ recordList }) { export default function SearchPublicNoticeTable({ recordList }) {
const [rows, setRows] = React.useState(recordList); const [rows, setRows] = React.useState(recordList);
const [rowModesModel] = React.useState({}); const [rowModesModel] = React.useState({});
const navigate = useNavigate()

const handleDetailClick = (params) => () => {
navigate('/publicNotice/'+ params.id);
};


useEffect(() => { useEffect(() => {
setRows(recordList); setRows(recordList);
@@ -82,8 +88,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
headerName: '', headerName: '',
width: 100, width: 100,
cellClassName: 'actions', cellClassName: 'actions',
renderCell: () => {
return <Button onClick={() => { }}>查看詳細</Button>;
renderCell: (params) => {
return <Button onClick={handleDetailClick(params)}>查看詳細</Button>;
}, },
} }
]; ];


+ 104
- 114
src/pages/PublicNoticeDetail/ApplicationDetailCard.js View File

@@ -23,9 +23,10 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
// import {useParams} from "react-router-dom"; // import {useParams} from "react-router-dom";
import * as HttpUtils from "utils/HttpUtils" import * as HttpUtils from "utils/HttpUtils"
import * as StatusUtils from "../PublicNotice/ListPanel/PublicNoteStatusUtils"; 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 CloseIcon from '@mui/icons-material/Close';
import EditNoteIcon from '@mui/icons-material/EditNote'; import EditNoteIcon from '@mui/icons-material/EditNote';
import DownloadIcon from '@mui/icons-material/Download'; import DownloadIcon from '@mui/icons-material/Download';
@@ -42,6 +43,8 @@ const ApplicationDetailCard = (
const [companyName, setCompanyName] = useState({}); const [companyName, setCompanyName] = useState({});
const [fileDetail, setfileDetail] = useState({}); const [fileDetail, setfileDetail] = useState({});
const [onReady,setOnReady] = useState(false); const [onReady,setOnReady] = useState(false);
const [issueNum,setIssueNum] = useState("");
const [issueDate,setIssueDate] = useState("");
const {register, const {register,
// getValues // getValues
} = useForm() } = useForm()
@@ -49,10 +52,14 @@ const ApplicationDetailCard = (
useEffect(() => { useEffect(() => {
//if user data from parent are not null //if user data from parent are not null
// console.log(applicationDetailData) // console.log(applicationDetailData)
if (Object.keys(applicationDetailData).length > 0) {
if (Object.keys(applicationDetailData).length > 0 &&applicationDetailData.data!==null) {
setCurrentApplicationDetailData(applicationDetailData.data); setCurrentApplicationDetailData(applicationDetailData.data);
setCompanyName(applicationDetailData.companyName); setCompanyName(applicationDetailData.companyName);
setfileDetail(applicationDetailData.fileDetail); 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]); }, [applicationDetailData]);


@@ -96,8 +103,8 @@ const ApplicationDetailCard = (
border={false} border={false}
content={false} content={false}
> >
<Grid container spacing={4} direction="row">
<Grid item xs={4} >
<Grid container spacing={1} direction="row">
<Grid item xs={12}>
<Stack <Stack
direction="row" direction="row"
justifyContent="space-between" justifyContent="space-between"
@@ -105,17 +112,6 @@ const ApplicationDetailCard = (
spacing={2} spacing={2}
mb={2} mb={2}
> >
<Button
// size="large"
variant="contained"
// onClick={handleNewUserClick}
sx={{
textTransform: 'capitalize',
alignItems: 'end',
}}>
<BorderColorOutlinedIcon/>
<Typography ml={1}> Edit</Typography>
</Button>
<Button <Button
// size="large" // size="large"
variant="contained" variant="contained"
@@ -125,59 +121,9 @@ const ApplicationDetailCard = (
alignItems: 'end' alignItems: 'end'
}}> }}>
<EditNoteIcon/> <EditNoteIcon/>
<Typography ml={1}> Create Proof</Typography>
<Typography ml={1}> 支付</Typography>
</Button> </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" // size="large"
variant="contained" variant="contained"
// onClick={handleNewUserClick} // onClick={handleNewUserClick}
@@ -187,15 +133,13 @@ const ApplicationDetailCard = (
backgroundColor:'#ffa733' backgroundColor:'#ffa733'
}}> }}>
<CloseIcon/> <CloseIcon/>
<Typography ml={1}> Withdraw</Typography>
<Typography ml={1}> 取消</Typography>
</Button> </Button>
</>
}
</Stack> </Stack>
</Grid> </Grid>
</Grid> </Grid>
<Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}> <Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
Application Details
公共啟事申請資料
</Typography> </Typography>
<form> <form>
<Grid container direction="column"> <Grid container direction="column">
@@ -206,7 +150,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}> sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Application No:</FormLabel>
<FormLabel>申請編號:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -228,7 +172,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}> sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Status:</FormLabel>
<FormLabel>申請狀態:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -245,7 +189,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}> sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Applicant:</FormLabel>
<FormLabel>申請人:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -276,31 +220,21 @@ const ApplicationDetailCard = (
</Grid> </Grid>
<Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}> <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
<Grid container alignItems={"center"}> <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'}}> sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Phone:</FormLabel>
<FormLabel>憲報期數:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={8} lg={8}>
<Grid item xs={12} md={9} lg={9}>
<Stack direction="row"> <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 <OutlinedInput
size="small" size="small"
{...register("phoneNumber",
{...register("issueNum",
{ {
value: currentApplicationDetailData.contactTelNo.phoneNumber,
value: issueNum,
})} })}
id='phoneNumber'
id='issueNum'
/> />
</FormControl> </FormControl>
</Stack> </Stack>
@@ -314,7 +248,7 @@ const ApplicationDetailCard = (
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}> sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contect Person:</FormLabel>
<FormLabel>聯絡人:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
@@ -334,31 +268,21 @@ const ApplicationDetailCard = (
</Grid> </Grid>
<Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}> <Grid item xs={12} md={5} lg={5} sx={{mb: 1, ml:1}}>
<Grid container alignItems={"center"}> <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'}}> sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Contact Fax:</FormLabel>
<FormLabel>發布日期:</FormLabel>
</Grid> </Grid>


<Grid item xs={12} md={8} lg={8}>
<Grid item xs={12} md={9} lg={9}>
<Stack direction="row"> <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 <OutlinedInput
size="small" size="small"
{...register("faxNumber",
{...register("issueDate",
{ {
value: currentApplicationDetailData.contactFaxNo.faxNumber,
value: issueDate,
})} })}
id='faxNumber'
id='issueDate'
/> />
</FormControl> </FormControl>
</Stack> </Stack>
@@ -366,17 +290,83 @@ const ApplicationDetailCard = (
</Grid> </Grid>
</Grid> </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" <Grid container direction="row" justifyContent="space-between"
alignItems="center"> alignItems="center">
<Grid item xs={12} md={12} lg={12} mt={1}> <Grid item xs={12} md={12} lg={12} mt={1}>
<Grid container alignItems={"center"}> <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 container direction="row">
<Grid item xs={12} md={2} lg={2}
<Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center'}}> sx={{display: 'flex', alignItems: 'center'}}>
<FormLabel>Manuscript File:</FormLabel>
<FormLabel>犒件檔案:</FormLabel>
</Grid> </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 container direction="row" justifyContent="flex-start">
<Grid item xs={12} md={5} lg={5} sx={{display: 'flex', alignItems: 'center'}}> <Grid item xs={12} md={5} lg={5} sx={{display: 'flex', alignItems: 'center'}}>
<FormControl variant="outlined" fullWidth > <FormControl variant="outlined" fullWidth >


+ 0
- 357
src/pages/PublicNoticeDetail/ClientDetailCard.js View File

@@ -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;

+ 0
- 189
src/pages/PublicNoticeDetail/GazetteDetailCard.js View File

@@ -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;

+ 26
- 46
src/pages/PublicNoticeDetail/index.js View File

@@ -20,12 +20,11 @@ import axios from "axios";


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




// ==============================|| Body - DEFAULT ||============================== // // ==============================|| Body - DEFAULT ||============================== //
@@ -33,7 +32,9 @@ import {
const DashboardDefault = () => { const DashboardDefault = () => {
const params = useParams(); const params = useParams();
const [applicationDetailData, setApplicationDetailData] = useState({}); const [applicationDetailData, setApplicationDetailData] = useState({});
const [appNo, setAapNo] = useState("");
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
const navigate = useNavigate()


const BackgroundHead = { const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`, backgroundImage: `url(${titleBackgroundImg})`,
@@ -41,10 +42,7 @@ const DashboardDefault = () => {
height: '100%', height: '100%',
backgroundSize:'cover' backgroundSize:'cover'
} }
const appNo = "G2023-343"
const gazetteIssue = "2023 Vol 027"
const issueNo = "No. 36"
const issueDate = "A001"
// const appNo = "G2023-343"


useEffect(() => { useEffect(() => {
if(params.id > 0 ){ if(params.id > 0 ){
@@ -52,7 +50,7 @@ const DashboardDefault = () => {
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
setApplicationDetailData(response.data); setApplicationDetailData(response.data);
// setRefApplicationDetailData(response.data);
setAapNo(response.data.data.appNo);
} }
}) })
.catch(error => { .catch(error => {
@@ -62,26 +60,32 @@ const DashboardDefault = () => {
} }
}, []); }, []);


useEffect(() => {
if(applicationDetailData.data === null){
navigate('/publicNotice');
}
}, [applicationDetailData]);

return ( return (
<Grid container sx={{maxnHeight: '500vh',backgroundColor:'#ffffff'}} direction="column">
<Grid container sx={{minHeight: '110vh',backgroundColor:'#ffffff'}} direction="column">
<Grid item xs={12}> <Grid item xs={12}>
<div style={BackgroundHead}> <div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4">Application</Typography>
<Typography ml={15} color='#FFF' variant="h4">我的公共啟事</Typography>
</Stack> </Stack>
</div> </div>
</Grid> </Grid>
<Grid item xs={12} > <Grid item xs={12} >
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center"> <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> </Stack>
</Grid> </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 <ApplicationDetailCard
// updateUserObject={updateUserObject} // updateUserObject={updateUserObject}
applicationDetailData={applicationDetailData} applicationDetailData={applicationDetailData}
@@ -90,37 +94,13 @@ const DashboardDefault = () => {
/> />
</Box> </Box>
</Grid> </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}/> <TabTableDetail applicationDetailData={applicationDetailData}/>
</Box> </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>
</Grid> </Grid>


+ 15
- 5
src/pages/PublicNoticeDetail_GLD/index.js View File

@@ -34,6 +34,10 @@ const DashboardDefault = () => {
const params = useParams(); const params = useParams();
const [applicationDetailData, setApplicationDetailData] = useState({}); const [applicationDetailData, setApplicationDetailData] = useState({});
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
const [appNo, setAapNo] = useState("");
const [gazetteIssue, setGazetteIssue] = useState("");
const [groupNo, setGroupNo] = useState("");
const [groupTitle, setGroupTitle] = useState("");


const BackgroundHead = { const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`, backgroundImage: `url(${titleBackgroundImg})`,
@@ -41,10 +45,10 @@ const DashboardDefault = () => {
height: '100%', height: '100%',
backgroundSize:'cover' 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(() => { useEffect(() => {
if(params.id > 0 ){ if(params.id > 0 ){
@@ -52,7 +56,13 @@ const DashboardDefault = () => {
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
setApplicationDetailData(response.data); setApplicationDetailData(response.data);
const gazetteIssueDetail = response.data.gazetteIssueDetail;
// setRefApplicationDetailData(response.data); // 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 => { .catch(error => {
@@ -73,7 +83,7 @@ const DashboardDefault = () => {
</Grid> </Grid>
<Grid item xs={12} > <Grid item xs={12} >
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center"> <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> </Stack>
</Grid> </Grid>
<Grid item xs={12} > <Grid item xs={12} >


+ 6
- 1
src/routes/PublicUserRoutes.js View File

@@ -10,6 +10,7 @@ const DashboardDefault = Loadable(lazy(() => import('pages/publicDashboard')));
const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage'))); const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage')));
const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel'))); const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel')));
const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm'))); const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm')));
const PublicNoticeDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail')));


// ==============================|| MAIN ROUTING ||============================== // // ==============================|| MAIN ROUTING ||============================== //


@@ -39,7 +40,11 @@ const PublicDashboard = {
{ {
path: 'publicNotice/apply', path: 'publicNotice/apply',
element: <PublicNoticeApplyForm/> element: <PublicNoticeApplyForm/>
}
},
{
path: 'publicNotice/:id',
element: <PublicNoticeDetail/>
},
] ]
}, },
] ]


Write Preview
Loading…
Cancel
Save