diff --git a/src/assets/images/dashboard/gazette-bar.png b/src/assets/images/dashboard/gazette-bar.png new file mode 100644 index 0000000..52bf6e5 Binary files /dev/null and b/src/assets/images/dashboard/gazette-bar.png differ diff --git a/src/assets/style/navbarStyles.css b/src/assets/style/navbarStyles.css index 28daa43..be5f102 100644 --- a/src/assets/style/navbarStyles.css +++ b/src/assets/style/navbarStyles.css @@ -58,14 +58,18 @@ border: 1px solid rgba(0,0,0,.15); border-radius: 0.25rem; } -#navbar div li:hover > ul, -#navbar div li:focus-within > ul, +#navbar div li:hover > ul{ + visibility: visible; + opacity: 1; + display: block + } +/* #navbar div li:focus-within > ul, #navbar div li ul:hover, #navbar div li ul:focus { visibility: visible; opacity: 1; display: block -} +} */ #systemTitle{ text-decoration: none; font-size: 1.3rem; diff --git a/src/pages/gldApplicationDetailPage/ApplicationDetailCard.js b/src/pages/gldApplicationDetailPage/ApplicationDetailCard.js new file mode 100644 index 0000000..83e499b --- /dev/null +++ b/src/pages/gldApplicationDetailPage/ApplicationDetailCard.js @@ -0,0 +1,365 @@ +// 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 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 = ( + // {isCollectData, updateUserObject,userData,isNewRecord} + ) => { + // const params = useParams(); + const [currentApplicationDetailData, ] = React.useState({}); + // const [locked, setLocked] = useState(false); + const [onReady,] = useState(true); + const {register, + // getValues + } = useForm() + + // useEffect(() => { + // //if user data from parent are not null + // if (Object.keys(userData).length > 0 && userData !== undefined) { + // setCurrentUserData(userData.data); + // } + // }, []); + + // useEffect(() => { + // //if state data are ready and assign to different field + // if (Object.keys(userData).length > 0 &¤tApplicationDetailData !== undefined&¤tApplicationDetailData.id!==undefined) { + // setLocked(currentApplicationDetailData.locked); + // setOnReady(true); + // }else if(isNewRecord){ + // setLocked(false); + // setOnReady(true); + // } + // }, [currentApplicationDetailData]); + + // useEffect(() => { + // //upload latest data to parent + // const values = getValues(); + // const objectData ={ + // ...values, + // locked: locked, + // } + // updateUserObject(objectData); + // }, [isCollectData]); + + + return ( + !onReady ? + + : + + + + + + + + + + + + + + + + + + + Application Details + +
+ + + + + + + Application No: + + + + + + + + + + + + + Status: + + + + + + + + + + + + + + + Applicant: + + + + + + + + + + + + + Contact Phone: + + + + + + + + + + + + + + + Contect Person: + + + + + + + + + + + + + Contact Fax: + + + + + + + + + + + + + + + + + Manuscript File: + + + + + + + Manuscript File Final.pdf + + + + + + + + + + + + + + + + +
+
+ ); +}; + +export default ApplicationDetailCard; diff --git a/src/pages/gldApplicationDetailPage/ClientDetailCard.js b/src/pages/gldApplicationDetailPage/ClientDetailCard.js new file mode 100644 index 0000000..903b866 --- /dev/null +++ b/src/pages/gldApplicationDetailPage/ClientDetailCard.js @@ -0,0 +1,226 @@ +// 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'; +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const ClientDetailCard = ( + // {isCollectData, updateUserObject,userData,isNewRecord} + ) => { + // const params = useParams(); + const [currentApplicationDetailData, ] = React.useState({}); + // const [locked, setLocked] = useState(false); + const [onReady,] = useState(true); + const {register, + // getValues + } = useForm() + + // useEffect(() => { + // //if user data from parent are not null + // if (Object.keys(userData).length > 0 && userData !== undefined) { + // setCurrentUserData(userData.data); + // } + // }, []); + + // useEffect(() => { + // //if state data are ready and assign to different field + // if (Object.keys(userData).length > 0 &¤tApplicationDetailData !== undefined&¤tApplicationDetailData.id!==undefined) { + // setLocked(currentApplicationDetailData.locked); + // setOnReady(true); + // }else if(isNewRecord){ + // setLocked(false); + // setOnReady(true); + // } + // }, [currentApplicationDetailData]); + + // useEffect(() => { + // //upload latest data to parent + // const values = getValues(); + // const objectData ={ + // ...values, + // locked: locked, + // } + // updateUserObject(objectData); + // }, [isCollectData]); + + + return ( + !onReady ? + + : + + + + + + + + + + Client Details + +
+ + + + {currentApplicationDetailData.status} + + + + + + Client Type: + + + + + + + + + + Company Name (English): + + + + + + + + + + Company Name (Chinese): + + + + + + + + + + English Name: + + + + + + + + + + Contact Phone: + + + + + + + + + + Email: + + + + + + + +
+
+ ); +}; + +export default ClientDetailCard; diff --git a/src/pages/gldApplicationDetailPage/GazetteDetailCard.js b/src/pages/gldApplicationDetailPage/GazetteDetailCard.js new file mode 100644 index 0000000..845deb0 --- /dev/null +++ b/src/pages/gldApplicationDetailPage/GazetteDetailCard.js @@ -0,0 +1,179 @@ +// 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"; + +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const GazetteDetailCard = ( + // {isCollectData, updateUserObject,userData,isNewRecord} + ) => { + // const params = useParams(); + const [currentApplicationDetailData, ] = React.useState({}); + // const [locked, setLocked] = useState(false); + const [onReady,] = useState(true); + const {register, + // getValues + } = useForm() + + // useEffect(() => { + // //if user data from parent are not null + // if (Object.keys(userData).length > 0 && userData !== undefined) { + // setCurrentUserData(userData.data); + // } + // }, []); + + // useEffect(() => { + // //if state data are ready and assign to different field + // if (Object.keys(userData).length > 0 &¤tApplicationDetailData !== undefined&¤tApplicationDetailData.id!==undefined) { + // setLocked(currentApplicationDetailData.locked); + // setOnReady(true); + // }else if(isNewRecord){ + // setLocked(false); + // setOnReady(true); + // } + // }, [currentApplicationDetailData]); + + // useEffect(() => { + // //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/gldApplicationDetailPage/index.js b/src/pages/gldApplicationDetailPage/index.js new file mode 100644 index 0000000..af5e5b5 --- /dev/null +++ b/src/pages/gldApplicationDetailPage/index.js @@ -0,0 +1,99 @@ +// import { useState } from 'react'; + +// material-ui +import { + Grid, + Typography, + Stack, + Box +} from '@mui/material'; +import Loadable from 'components/Loadable'; +import { lazy } from 'react'; + +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'))); + +// ==============================|| Body - DEFAULT ||============================== // + +const DashboardDefault = () => { + 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" + + return ( + + +
+ + Application + +
+
+ + + Application / {appNo}, {gazetteIssue}, {issueNo} , {issueDate} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +export default DashboardDefault; diff --git a/src/pages/gldApplicationDetailPage/tabTableDetail/BaseGrid.js b/src/pages/gldApplicationDetailPage/tabTableDetail/BaseGrid.js new file mode 100644 index 0000000..d27e41e --- /dev/null +++ b/src/pages/gldApplicationDetailPage/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: '申請編號', + 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 ; + }, + } + ]; + + return ( +
+ +
+ ); +} diff --git a/src/pages/gldApplicationDetailPage/tabTableDetail/PendingPaymentTab.js b/src/pages/gldApplicationDetailPage/tabTableDetail/PendingPaymentTab.js new file mode 100644 index 0000000..aadbee7 --- /dev/null +++ b/src/pages/gldApplicationDetailPage/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/gldApplicationDetailPage/tabTableDetail/TabTable.js b/src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js new file mode 100644 index 0000000..3b44b92 --- /dev/null +++ b/src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js @@ -0,0 +1,111 @@ +// 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 PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab'))); +const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); +// const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab'))); + + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const PublicNotice = () => { + const [submittedList, ] = useState([]); + const [inProgressList, ] = useState([]); + const [pendingPaymentList, ] = useState([]); + const [isLoading,] = useState(false); + const [selectedTab, setSelectedTab] = useState("1"); + // const navigate = useNavigate(); + + + // useEffect(() => { + // loadData(); + // }, []); + + const reloadPage = () => { + window.location.reload(false); + } + + // const loadData = () => { + // setLoding(true); + // HttpUtils.get({ + // url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST_ListByStatus}`, + // onSuccess: function (response) { + // setSubmittedList(response["submitted"]); + // setInProgressList(response["inProgress"]); + // setPendingPaymentList(response["pendingPayment"]); + // setPendingPublishList(response["pendingPublish"]); + // } + // }); + // }; + + // useEffect(() => { + // setLoding(false); + // }, [submittedList]); + + const handleChange = (event, newValue) => { + setSelectedTab(newValue); + } + + // const onBtnClick = () => { + // navigate('/publicNotice/apply') + // } + + return ( + isLoading ? + + : + + {/*col 2*/} + + + + + + + + + + + + + + + + + + + + + + ); +}; + + +export default PublicNotice; diff --git a/src/pages/gldDashboard/index.js b/src/pages/gldDashboard/index.js index 0e72665..1e9d81f 100644 --- a/src/pages/gldDashboard/index.js +++ b/src/pages/gldDashboard/index.js @@ -6,26 +6,26 @@ import { Typography, Stack } from '@mui/material'; - +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' // ==============================|| DASHBOARD - DEFAULT ||============================== // const DashboardDefault = () => { const userData = JSON.parse(localStorage.getItem("userData")); const BackgroundHead = { - backgroundColor: '#0d47a1', + backgroundImage: `url(${titleBackgroundImg})`, width: '100%', height: '100%', backgroundSize:'cover' } return ( - -
- - - Morning, {userData.fullenName} + + +
+ + Morning, {userData.fullenName} - -
+
+
); }; diff --git a/src/pages/pnspsUserDetailPage/index.js b/src/pages/pnspsUserDetailPage/index.js index fc14732..ab28ad6 100644 --- a/src/pages/pnspsUserDetailPage/index.js +++ b/src/pages/pnspsUserDetailPage/index.js @@ -190,7 +190,7 @@ const UserMaintainPage = () => { !onReady ? : - + Maintain User diff --git a/src/pages/pnspsUserSearchPage/index.js b/src/pages/pnspsUserSearchPage/index.js index 9b1d127..78d50f4 100644 --- a/src/pages/pnspsUserSearchPage/index.js +++ b/src/pages/pnspsUserSearchPage/index.js @@ -60,7 +60,7 @@ const UserSettingPage = () => { !onReady ? : - + diff --git a/src/pages/publicDashboard/index.js b/src/pages/publicDashboard/index.js index 502d7d8..e926d27 100644 --- a/src/pages/publicDashboard/index.js +++ b/src/pages/publicDashboard/index.js @@ -9,28 +9,28 @@ import { import { isORGLoggedIn, } from "utils/Utils"; - - +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' // ==============================|| DASHBOARD - DEFAULT ||============================== // const DashboardDefault = () => { const userData = JSON.parse(localStorage.getItem("userData")); const BackgroundHead = { - backgroundColor: '#0d47a1', + // backgroundColor: '#0d47a1', + backgroundImage: `url(${titleBackgroundImg})`, width: '100%', height: '100%', backgroundSize:'cover' } return ( - -
- - + + +
+ {/* 我的公共啟事 */} {isORGLoggedIn() ?userData.fullenName:userData.fullchName}, 午安! 請選擇所需服務。 - -
+
+
); }; diff --git a/src/routes/GLDUserRoutes.js b/src/routes/GLDUserRoutes.js index 3530987..cf9392b 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'))); // ==============================|| MAIN ROUTING ||============================== // const GLDUserRoutes = { @@ -24,6 +24,10 @@ const GLDUserRoutes = { { path: 'dashboard', element: + }, + { + path: '/application/:id', + element: } ] }, diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js index 22135a0..97ecb24 100644 --- a/src/routes/MainRoutes.js +++ b/src/routes/MainRoutes.js @@ -2,7 +2,9 @@ import { lazy } from 'react'; // project import import Loadable from 'components/Loadable'; -import MainLayout from 'layout/MainLayout'; +// import MainLayout from 'layout/MainLayout'; +const MainLayout = Loadable(lazy(() => import('layout/MainLayout'))); + // render - dashboard diff --git a/src/routes/SettingRoutes.js b/src/routes/SettingRoutes.js index 2e8fbb4..03e1a73 100644 --- a/src/routes/SettingRoutes.js +++ b/src/routes/SettingRoutes.js @@ -2,7 +2,9 @@ import { lazy } from 'react'; // project import import Loadable from 'components/Loadable'; -import MainLayout from "../layout/MainLayout"; +// import MainLayout from "../layout/MainLayout"; +const MainLayout = Loadable(lazy(() => import('layout/MainLayout'))); +// import {Navigate} from "react-router"; // render - login const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage')));