From 5a8674a210a5ef3a088da41c667d64deffef48f1 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Tue, 19 Sep 2023 14:24:10 +0800 Subject: [PATCH] change page folder name --- .../ApplicationDetailCard.js | 124 +++--- .../ClientDetailCard.js | 0 .../GazetteDetailCard.js | 0 .../index.js | 0 .../tabTableDetail/BaseGrid.js | 0 .../tabTableDetail/PendingPaymentTab.js | 0 .../tabTableDetail/ProofTab.js | 0 .../tabTableDetail/StatusHistoryTab.js | 0 .../tabTableDetail/TabTable.js | 0 .../ApplicationDetailCard.js | 417 ++++++++++++++++++ .../ClientDetailCard.js | 357 +++++++++++++++ .../GazetteDetailCard.js | 189 ++++++++ src/pages/PublicNoticeDetail_GLD/index.js | 131 ++++++ .../tabTableDetail/BaseGrid.js | 93 ++++ .../tabTableDetail/PendingPaymentTab.js | 141 ++++++ .../tabTableDetail/ProofTab.js | 76 ++++ .../tabTableDetail/StatusHistoryTab.js | 64 +++ .../tabTableDetail/TabTable.js | 113 +++++ src/routes/GLDUserRoutes.js | 2 +- 19 files changed, 1650 insertions(+), 57 deletions(-) rename src/pages/{gldApplicationDetailPage => PublicNoticeDetail}/ApplicationDetailCard.js (85%) rename src/pages/{gldApplicationDetailPage => PublicNoticeDetail}/ClientDetailCard.js (100%) rename src/pages/{gldApplicationDetailPage => PublicNoticeDetail}/GazetteDetailCard.js (100%) rename src/pages/{gldApplicationDetailPage => PublicNoticeDetail}/index.js (100%) rename src/pages/{gldApplicationDetailPage => PublicNoticeDetail}/tabTableDetail/BaseGrid.js (100%) rename src/pages/{gldApplicationDetailPage => PublicNoticeDetail}/tabTableDetail/PendingPaymentTab.js (100%) rename src/pages/{gldApplicationDetailPage => PublicNoticeDetail}/tabTableDetail/ProofTab.js (100%) rename src/pages/{gldApplicationDetailPage => PublicNoticeDetail}/tabTableDetail/StatusHistoryTab.js (100%) rename src/pages/{gldApplicationDetailPage => PublicNoticeDetail}/tabTableDetail/TabTable.js (100%) create mode 100644 src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js create mode 100644 src/pages/PublicNoticeDetail_GLD/ClientDetailCard.js create mode 100644 src/pages/PublicNoticeDetail_GLD/GazetteDetailCard.js create mode 100644 src/pages/PublicNoticeDetail_GLD/index.js create mode 100644 src/pages/PublicNoticeDetail_GLD/tabTableDetail/BaseGrid.js create mode 100644 src/pages/PublicNoticeDetail_GLD/tabTableDetail/PendingPaymentTab.js create mode 100644 src/pages/PublicNoticeDetail_GLD/tabTableDetail/ProofTab.js create mode 100644 src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js create mode 100644 src/pages/PublicNoticeDetail_GLD/tabTableDetail/TabTable.js diff --git a/src/pages/gldApplicationDetailPage/ApplicationDetailCard.js b/src/pages/PublicNoticeDetail/ApplicationDetailCard.js similarity index 85% rename from src/pages/gldApplicationDetailPage/ApplicationDetailCard.js rename to src/pages/PublicNoticeDetail/ApplicationDetailCard.js index 576fd33..2c005b3 100644 --- a/src/pages/gldApplicationDetailPage/ApplicationDetailCard.js +++ b/src/pages/PublicNoticeDetail/ApplicationDetailCard.js @@ -71,15 +71,21 @@ const ApplicationDetailCard = ( filename:fileDetail.filename, }); }; - // useEffect(() => { - // //upload latest data to parent - // const values = getValues(); - // const objectData ={ - // ...values, - // locked: locked, + + // const onStatusClick = () => () => { + // if(params.id > 0 ){ + // axios.post(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`) + // .then((response) => { + // if (response.status === 200) { + // navigate(`/application/${params.id}`); + // } + // }) + // .catch(error => { + // console.log(error); + // return false; + // }); // } - // updateUserObject(objectData); - // }, [isCollectData]); + // }; return ( @@ -131,54 +137,60 @@ const ApplicationDetailCard = ( spacing={2} mb={2} > - - - - + {currentApplicationDetailData.status =="submitted"? + <> + + + : + <> + + + + } diff --git a/src/pages/gldApplicationDetailPage/ClientDetailCard.js b/src/pages/PublicNoticeDetail/ClientDetailCard.js similarity index 100% rename from src/pages/gldApplicationDetailPage/ClientDetailCard.js rename to src/pages/PublicNoticeDetail/ClientDetailCard.js diff --git a/src/pages/gldApplicationDetailPage/GazetteDetailCard.js b/src/pages/PublicNoticeDetail/GazetteDetailCard.js similarity index 100% rename from src/pages/gldApplicationDetailPage/GazetteDetailCard.js rename to src/pages/PublicNoticeDetail/GazetteDetailCard.js diff --git a/src/pages/gldApplicationDetailPage/index.js b/src/pages/PublicNoticeDetail/index.js similarity index 100% rename from src/pages/gldApplicationDetailPage/index.js rename to src/pages/PublicNoticeDetail/index.js diff --git a/src/pages/gldApplicationDetailPage/tabTableDetail/BaseGrid.js b/src/pages/PublicNoticeDetail/tabTableDetail/BaseGrid.js similarity index 100% rename from src/pages/gldApplicationDetailPage/tabTableDetail/BaseGrid.js rename to src/pages/PublicNoticeDetail/tabTableDetail/BaseGrid.js diff --git a/src/pages/gldApplicationDetailPage/tabTableDetail/PendingPaymentTab.js b/src/pages/PublicNoticeDetail/tabTableDetail/PendingPaymentTab.js similarity index 100% rename from src/pages/gldApplicationDetailPage/tabTableDetail/PendingPaymentTab.js rename to src/pages/PublicNoticeDetail/tabTableDetail/PendingPaymentTab.js diff --git a/src/pages/gldApplicationDetailPage/tabTableDetail/ProofTab.js b/src/pages/PublicNoticeDetail/tabTableDetail/ProofTab.js similarity index 100% rename from src/pages/gldApplicationDetailPage/tabTableDetail/ProofTab.js rename to src/pages/PublicNoticeDetail/tabTableDetail/ProofTab.js diff --git a/src/pages/gldApplicationDetailPage/tabTableDetail/StatusHistoryTab.js b/src/pages/PublicNoticeDetail/tabTableDetail/StatusHistoryTab.js similarity index 100% rename from src/pages/gldApplicationDetailPage/tabTableDetail/StatusHistoryTab.js rename to src/pages/PublicNoticeDetail/tabTableDetail/StatusHistoryTab.js diff --git a/src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js b/src/pages/PublicNoticeDetail/tabTableDetail/TabTable.js similarity index 100% rename from src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js rename to src/pages/PublicNoticeDetail/tabTableDetail/TabTable.js diff --git a/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js b/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js new file mode 100644 index 0000000..2c005b3 --- /dev/null +++ b/src/pages/PublicNoticeDetail_GLD/ApplicationDetailCard.js @@ -0,0 +1,417 @@ +// material-ui +import { + FormControl, + Button, + Grid, + // InputAdornment, + Typography, FormLabel, + OutlinedInput, + Stack +} from '@mui/material'; +// import MainCard from "../../components/MainCard"; +const MainCard = Loadable(lazy(() => import('components/MainCard'))); +import {useForm} from "react-hook-form"; +import { + useEffect, + useState + } from "react"; +// import Checkbox from "@mui/material/Checkbox"; +import Loadable from 'components/Loadable'; + +import { lazy } from 'react'; +const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); +// import {useParams} from "react-router-dom"; +import * as HttpUtils from "utils/HttpUtils" +import * as StatusUtils from "../PublicNotice/ListPanel/PublicNoteStatusUtils"; + +import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined'; +import DoneIcon from '@mui/icons-material/Done'; +import CloseIcon from '@mui/icons-material/Close'; +import EditNoteIcon from '@mui/icons-material/EditNote'; +import DownloadIcon from '@mui/icons-material/Download'; +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const ApplicationDetailCard = ( + { applicationDetailData, + // isCollectData, + // updateUserObject, + // isNewRecord + } + ) => { + // const params = useParams(); + const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); + const [companyName, setCompanyName] = useState({}); + const [fileDetail, setfileDetail] = useState({}); + const [onReady,setOnReady] = useState(false); + const {register, + // getValues + } = useForm() + + useEffect(() => { + //if user data from parent are not null + // console.log(applicationDetailData) + if (Object.keys(applicationDetailData).length > 0) { + setCurrentApplicationDetailData(applicationDetailData.data); + setCompanyName(applicationDetailData.companyName); + setfileDetail(applicationDetailData.fileDetail); + } + }, [applicationDetailData]); + + useEffect(() => { + //if state data are ready and assign to different field + // console.log(currentApplicationDetailData) + if (Object.keys(currentApplicationDetailData).length > 0) { + setOnReady(true); + } + }, [currentApplicationDetailData]); + + const onDownloadClick = () => () => { + HttpUtils.fileDownload({ + fileId:fileDetail.id, + skey:fileDetail.skey, + filename:fileDetail.filename, + }); + }; + + // const onStatusClick = () => () => { + // if(params.id > 0 ){ + // axios.post(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`) + // .then((response) => { + // if (response.status === 200) { + // navigate(`/application/${params.id}`); + // } + // }) + // .catch(error => { + // console.log(error); + // return false; + // }); + // } + // }; + + + return ( + !onReady ? + + : + + + + + + + + + + + {currentApplicationDetailData.status =="submitted"? + <> + + + : + <> + + + + } + + + + + Application Details + +
+ + + + + + + Application No: + + + + + + + + + + + + + Status: + + + + + {StatusUtils.getStatusByText(currentApplicationDetailData.status)} + + + + + + + + + + Applicant: + + + + + { currentApplicationDetailData.orgId===null? + : + + } + + + + + + + + Contact Phone: + + + + + + + + + + + + + + + + + + + + Contect Person: + + + + + + + + + + + + + Contact Fax: + + + + + + + + + + + + + + + + + + + + + + Manuscript File: + + + + + + + {fileDetail.filename} + + + + + + + + + + + + + + + +
+ + ); +}; + +export default ApplicationDetailCard; diff --git a/src/pages/PublicNoticeDetail_GLD/ClientDetailCard.js b/src/pages/PublicNoticeDetail_GLD/ClientDetailCard.js new file mode 100644 index 0000000..28cf4b5 --- /dev/null +++ b/src/pages/PublicNoticeDetail_GLD/ClientDetailCard.js @@ -0,0 +1,357 @@ +// material-ui +import { + FormControl, + Button, + Grid, + // InputAdornment, + Typography, FormLabel, + OutlinedInput, + Stack +} from '@mui/material'; +import MainCard from "../../components/MainCard"; +import * as React from "react"; +import {useForm} from "react-hook-form"; +import { + useEffect, + useState + } from "react"; +// import Checkbox from "@mui/material/Checkbox"; +import Loadable from 'components/Loadable'; +import { lazy } from 'react'; +const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); +//import {useParams} from "react-router-dom"; +import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch'; +import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline'; +import HighlightOff from '@mui/icons-material/HighlightOff'; +import {useNavigate} from "react-router-dom"; + +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const ClientDetailCard = ( + { applicationDetailData, + // isCollectData, + // updateUserObject, + // isNewRecord + } + ) => { + // const params = useParams(); + const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); + const [onReady,setOnReady] = useState(false); + const [companyName, setCompanyName] = useState({}); + const {register, + // getValues + } = useForm() + const navigate = useNavigate() + + useEffect(() => { + //if user data from parent are not null + if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) { + setCurrentApplicationDetailData(applicationDetailData.userData); + setCompanyName(applicationDetailData.companyName); + } + }, [applicationDetailData]); + + useEffect(() => { + //if state data are ready and assign to different field + // console.log(currentApplicationDetailData) + if (Object.keys(currentApplicationDetailData).length > 0) { + setOnReady(true); + } + }, [currentApplicationDetailData]); + + const handleViewClick = () => () => { + console.log(currentApplicationDetailData) + currentApplicationDetailData.type == "ORG"? + navigate('/orgUser/'+ currentApplicationDetailData.id): + navigate('/indUser/'+ currentApplicationDetailData.id); + }; + + // useEffect(() => { + // //upload latest data to parent + // const values = getValues(); + // const objectData ={ + // ...values, + // locked: locked, + // } + // updateUserObject(objectData); + // }, [isCollectData]); + + return ( + !onReady ? + + : + + + + + + + + + + Client Details + +
+ + + {currentApplicationDetailData.verifiedBy!==null? + + + Verified + + + : + + + Not Verified + + + + } + + + + + Client Type: + + + + + + + + {currentApplicationDetailData.type==="ORG"? + <> + + + Company Name (English): + + + + + + + + + + Company Name (Chinese): + + + + + + + + + + English Name: + + + + + + + + + + Contact Phone: + + + + + + + + + + + + + + + Email: + + + + + + + + : + <> + + + English Name: + + + + + + + + + + Chinese Name: + + + + + + + + + + Contact Phone: + + + + + + + + + + + + + + + Email: + + + + + + + + + } + +
+ + ); +}; + +export default ClientDetailCard; diff --git a/src/pages/PublicNoticeDetail_GLD/GazetteDetailCard.js b/src/pages/PublicNoticeDetail_GLD/GazetteDetailCard.js new file mode 100644 index 0000000..3676a09 --- /dev/null +++ b/src/pages/PublicNoticeDetail_GLD/GazetteDetailCard.js @@ -0,0 +1,189 @@ +// material-ui +import { + FormControl, + // Button, + Grid, + // InputAdornment, + Typography, FormLabel, + OutlinedInput, +} from '@mui/material'; +import MainCard from "../../components/MainCard"; +import * as React from "react"; +import {useForm} from "react-hook-form"; +import { + useEffect, + useState + } from "react"; +// import Checkbox from "@mui/material/Checkbox"; +import Loadable from 'components/Loadable'; +import { lazy } from 'react'; +const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); +//import {useParams} from "react-router-dom"; +import * as DateUtils from "utils/DateUtils"; + +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const GazetteDetailCard = ( + { applicationDetailData, + // isCollectData, + // updateUserObject, + // isNewRecord + } + ) => { + // const params = useParams(); + // const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); + const [onReady,setOnReady] = useState(false); + const [issueNum,setIssueNum] = useState(""); + const [issueDate,setIssueDate] = useState(""); + const [gazetteCode,setGazetteCode] = useState(""); + const [groupTitle,setGroupTitle] = useState(""); + const {register, + // getValues + } = useForm() + + useEffect(() => { + //if user data from parent are not null + // console.log(applicationDetailData) + if (Object.keys(applicationDetailData).length > 0) { + setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.year + +" No. "+applicationDetailData.gazetteIssueDetail.issueNo); + setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); + setGazetteCode(applicationDetailData.data.groupNo) + setGroupTitle(applicationDetailData.data.groupTitle) + } + }, [applicationDetailData]); + + useEffect(() => { + //if state data are ready and assign to different field + // console.log(currentApplicationDetailData) + if (issueNum.length > 0) { + setOnReady(true); + } + }, [issueNum]); + + // useEffect(() => { + // //upload latest data to parent + // const values = getValues(); + // const objectData ={ + // ...values, + // locked: locked, + // } + // updateUserObject(objectData); + // }, [isCollectData]); + + + return ( + !onReady ? + + : + + + Gazette Details + +
+ + + + + + + Issue Number: + + + + + + + + + + + + + Gazette Code: + + + + + + + + + + + + + + + Issue Date: + + + + + + + + + + + + + Group Title: + + + + + + + + + + + + +
+ + ); +}; + +export default GazetteDetailCard; diff --git a/src/pages/PublicNoticeDetail_GLD/index.js b/src/pages/PublicNoticeDetail_GLD/index.js new file mode 100644 index 0000000..1d408a6 --- /dev/null +++ b/src/pages/PublicNoticeDetail_GLD/index.js @@ -0,0 +1,131 @@ +import { + useEffect, + useState + } from "react"; + +// material-ui +import { + Grid, + Typography, + Stack, + Box +} from '@mui/material'; +import Loadable from 'components/Loadable'; +import { lazy } from 'react'; +import { + // useNavigate, + useParams +} from "react-router-dom"; +import axios from "axios"; + +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' +const ApplicationDetailCard = Loadable(lazy(() => import('./ApplicationDetailCard'))); +const GazetteDetailCard = Loadable(lazy(() => import('./GazetteDetailCard'))); +const ClientDetailCard = Loadable(lazy(() => import('./ClientDetailCard'))); +const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable'))); +import { + GET_PUBLIC_NOTICE_APPLY_DETAIL, +} from "utils/ApiPathConst"; + + +// ==============================|| Body - DEFAULT ||============================== // + +const DashboardDefault = () => { + const params = useParams(); + const [applicationDetailData, setApplicationDetailData] = useState({}); + // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); + + const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize:'cover' + } + const appNo = "G2023-343" + const gazetteIssue = "2023 Vol 027" + const issueNo = "No. 36" + const issueDate = "A001" + + useEffect(() => { + if(params.id > 0 ){ + axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`) + .then((response) => { + if (response.status === 200) { + setApplicationDetailData(response.data); + // setRefApplicationDetailData(response.data); + } + }) + .catch(error => { + console.log(error); + return false; + }); + } + }, []); + + return ( + + +
+ + Application + +
+ + + + Application / {appNo}, {gazetteIssue}, {issueNo} , {issueDate} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default DashboardDefault; diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/BaseGrid.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/BaseGrid.js new file mode 100644 index 0000000..1c33175 --- /dev/null +++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/BaseGrid.js @@ -0,0 +1,93 @@ +// material-ui +import * as React from 'react'; +import { + DataGrid, +} from "@mui/x-data-grid"; +import { + Button +} from '@mui/material'; +import * as DateUtils from "utils/DateUtils" +// import * as StatusUtils from "./PublicNoteStatusUtils"; +// ==============================|| EVENT TABLE ||============================== // + +export default function BaseGrid({rows}) { + const [rowModesModel] = React.useState({}); + + const columns = [ + { + id: 'appNo', + field: 'appNo', + headerName: 'Application No.', + flex: 1, + }, + { + id: 'created', + field: 'created', + headerName: 'Created', + flex: 1, + valueGetter:(params)=>{ + return DateUtils.datetimeStr(params?.value); + } + }, + { + id: 'contactPerson', + field: 'contactPerson', + headerName: 'Contact Person', + flex: 2, + renderCell: (params) => { + let phone = JSON.parse(params.row.contactTelNo); + let faxNo = JSON.parse(params.row.contactFaxNo); + + let contact = ""; + if (phone) { + contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber + } + + if (faxNo) { + if (contact != "") + contact = contact + ", " + contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber + } + + return (<> + {params?.value}
+ {contact} + ); + } + }, + { + id: 'remarks', + field: 'remarks', + headerName: 'remarks', + flex: 3, + }, + { + field: 'actions', + type: 'actions', + headerName: '', + width: 50, + cellClassName: 'actions', + renderCell: () => { + return ; + }, + } + ]; + + return ( +
+ +
+ ); +} diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/PendingPaymentTab.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/PendingPaymentTab.js new file mode 100644 index 0000000..aadbee7 --- /dev/null +++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/PendingPaymentTab.js @@ -0,0 +1,141 @@ +// material-ui +import * as React from 'react'; +import { + DataGrid, +} from "@mui/x-data-grid"; +import { + Stack, + Typography, + Button, + Dialog, DialogTitle, DialogContent, DialogActions +} from '@mui/material'; +import * as DateUtils from "utils/DateUtils" +// import * as StatusUtils from "./PublicNoteStatusUtils"; +// ==============================|| EVENT TABLE ||============================== // + +export default function SubmittedTab({ rows }) { + const [selectedRowItems, setSelectedRowItems] = React.useState([]); + const [isPopUp, setIsPopUp] = React.useState(false); + + + const columns = [ + { + id: 'appNo', + field: 'appNo', + headerName: '申請編號', + flex: 1, + }, + { + id: 'created', + field: 'created', + headerName: '提交日期', + flex: 1, + valueGetter: (params) => { + return DateUtils.datetimeStr(params.value); + } + }, + { + id: 'contactPerson', + field: 'contactPerson', + headerName: '聯絡人', + flex: 2, + renderCell: (params) => { + let phone = JSON.parse(params.row.contactTelNo); + let faxNo = JSON.parse(params.row.contactFaxNo); + + let contact = ""; + if (phone) { + contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber + } + + if (faxNo) { + if (contact != "") + contact = contact + ", " + contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber + } + + return (<> + {params?.value}
+ {contact} + ); + } + }, + { + id: 'remarks', + field: 'remarks', + headerName: '我的備註', + flex: 3, + + }, + { + field: 'actions', + type: 'actions', + headerName: '', + width: 50, + cellClassName: 'actions', + renderCell: () => { + return ; + }, + } + ]; + + const getWindowContent = () => { + var content = []; + const datas = rows?.filter((row) => + selectedRowItems.includes(row.id) + ); + for (var i = 0; i < datas?.length; i++) { + content.push(<> + 申請編號: {datas[i].appNo}({DateUtils.datetimeStr(datas[i].created)}) + 備註: {datas[i].remarks} +

+ ); + } + return content; + } + + return ( + <> +
+ { + setSelectedRowItems(newSelection); + }} + /> + +
+ +
+ setIsPopUp(false)} > + + 確認付款 + + + {getWindowContent()} + + + + + + + +
+ + ); + + + +} diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/ProofTab.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/ProofTab.js new file mode 100644 index 0000000..1da2df9 --- /dev/null +++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/ProofTab.js @@ -0,0 +1,76 @@ +// material-ui +import * as React from 'react'; +import { + DataGrid, +} from "@mui/x-data-grid"; +import { + Button +} from '@mui/material'; +// import * as DateUtils from "utils/DateUtils" +// import * as StatusUtils from "./PublicNoteStatusUtils"; +// ==============================|| EVENT TABLE ||============================== // + +export default function ProofTab({rows}) { + const [rowModesModel] = React.useState({}); + + const columns = [ + { + id: 'proofRef', + field: 'proofRef', + headerName: 'Proof Ref.', + flex: 1, + }, + { + id: 'proofSent', + field: 'proofSent', + headerName: 'Proof Return', + flex: 1, + }, + { + id: 'proofReturn', + field: 'proofReturn', + headerName: 'Proof Return', + flex: 1, + }, + { + id: 'status', + field: 'status', + headerName: 'Status', + flex: 1, + }, + { + id: 'fee', + field: 'fee', + headerName: 'Fee (HKD)', + flex: 2, + }, + { + field: 'detail', + type: 'actions', + headerName: '', + width: 50, + cellClassName: 'actions', + renderCell: () => { + return ; + }, + } + ]; + + return ( +
+ +
+ ); +} diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js new file mode 100644 index 0000000..0683082 --- /dev/null +++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js @@ -0,0 +1,64 @@ +// material-ui +import * as React from 'react'; +import { + DataGrid, +} from "@mui/x-data-grid"; +// import dayjs from "dayjs"; +// import { +// Button +// } from '@mui/material'; +// import * as DateUtils from "utils/DateUtils" +import * as StatusUtils from "../../PublicNotice/ListPanel/PublicNoteStatusUtils"; + +// ==============================|| EVENT TABLE ||============================== // + +export default function StatusHistoryTab({rows}) { + const [rowModesModel] = React.useState({}); + + const columns = [ + { + id: 'created', + field: 'created', + headerName: 'Date', + valueGetter: (params) => { + const value = params.value + return value[0]+"/"+value[1]+"/"+value[2]+" "+value[3]+":"+value[4]+":"+value[5] + }, + // valueFormatter: (params) => dayjs(params.value).format('DD/MM/YYYY'), + flex: 1, + }, + { + id: 'createdBy', + field: 'createdBy', + headerName: 'Changed By', + flex: 1, + }, + { + id: 'status', + field: 'status', + headerName: 'Status', + flex: 1, + renderCell: (params) => { + return [StatusUtils.getStatusEng(params)] + }, + }, + ]; + + return ( +
+ +
+ ); +} diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/TabTable.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/TabTable.js new file mode 100644 index 0000000..7cf0222 --- /dev/null +++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/TabTable.js @@ -0,0 +1,113 @@ +// material-ui +import { + Grid, + // Typography, + Tab, + Box, + // Button +} from '@mui/material'; + +import { TabPanel, TabContext, TabList } from '@mui/lab'; +import { + useEffect, + useState } from "react"; +// import { useNavigate } from "react-router-dom"; +import * as React from "react"; +// import * as HttpUtils from "../../../utils/HttpUtils"; +// import * as UrlUtils from "../../../utils/ApiPathConst"; + +import Loadable from 'components/Loadable'; +import { lazy } from 'react'; +const BaseGrid = Loadable(lazy(() => import('./BaseGrid'))); +const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab'))); +const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); +const ProofTab = Loadable(lazy(() => import('./ProofTab'))); + + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const PublicNotice = ({applicationDetailData}) => { + const [submittedList, ] = useState([]); + const [inProgressList, ] = useState([]); + const [onReady,setOnReady] = useState(false); + const [selectedTab, setSelectedTab] = useState("1"); + // const navigate = useNavigate(); + const [statusHistoryList, setStatusHistoryList] = useState([]); + + + // useEffect(() => { + // loadData(); + // }, []); + + const reloadPage = () => { + window.location.reload(false); + } + + useEffect(() => { + //if user data from parent are not null + // console.log(applicationDetailData) + if (Object.keys(applicationDetailData).length > 0) { + setStatusHistoryList(applicationDetailData.statusHistoryList); + } + }, [applicationDetailData]); + + useEffect(() => { + //if state data are ready and assign to different field + if (statusHistoryList.length > 0) { + setOnReady(true); + } + }, [statusHistoryList]); + + // useEffect(() => { + // setLoding(false); + // }, [submittedList]); + + const handleChange = (event, newValue) => { + setSelectedTab(newValue); + } + + // const onBtnClick = () => { + // navigate('/publicNotice/apply') + // } + + return ( + !onReady ? + + : + + {/*col 2*/} + + + + + + + + + + + + + + + + + + + + + + ); +}; + + +export default PublicNotice; diff --git a/src/routes/GLDUserRoutes.js b/src/routes/GLDUserRoutes.js index 91d3bb9..3a19c2d 100644 --- a/src/routes/GLDUserRoutes.js +++ b/src/routes/GLDUserRoutes.js @@ -7,7 +7,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout'))); // render - dashboard const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard'))); -const ApplicationDetail = Loadable(lazy(() => import('pages/gldApplicationDetailPage'))); +const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail_GLD'))); const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD'))); // ==============================|| MAIN ROUTING ||============================== //