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

fix bug

master
Anna Ho 1 year ago
parent
b8b6a3ac05
commit
d3f863f856
7 changed files with 264 additions and 244 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +207
    -213
      src/layout/MainLayout/Header/index.js
  2. +1
    -1
      src/pages/ManageOrgUserPage/index.js
  3. +11
    -3
      src/pages/PublicNotice/ListPanel/BaseGrid.js
  4. +11
    -2
      src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
  5. +1
    -1
      src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js
  6. +0
    -1
      src/pages/PublicNoticeSearch_GLD/DataGrid.js
  7. +33
    -23
      src/pages/PublicNoticeSearch_GLD/SearchForm.js

+ 207
- 213
src/layout/MainLayout/Header/index.js View File

@@ -1,13 +1,13 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React import React
, { useState }
from 'react';
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
,{useState}
from 'react';
import {useDispatch} from "react-redux";
import {useNavigate} from "react-router-dom";


// material-ui // material-ui
// import { useTheme } from '@mui/material/styles'; // import { useTheme } from '@mui/material/styles';
import {
import {
AppBar, AppBar,
// Container, // Container,
Typography, Typography,
@@ -29,7 +29,7 @@ import {
IconButton, IconButton,
Drawer, Drawer,
// useMediaQuery // useMediaQuery
} from '@mui/material';
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu'; import MenuIcon from '@mui/icons-material/Menu';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';


@@ -41,7 +41,7 @@ import AdminLogo from 'components/AdminLogo';
import MobileLogo from 'components/MobileLogo'; import MobileLogo from 'components/MobileLogo';
import Profile from './HeaderContent/Profile'; import Profile from './HeaderContent/Profile';
import "assets/style/navbarStyles.css"; import "assets/style/navbarStyles.css";
import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn } from "utils/Utils";
import {isUserLoggedIn,isGLDLoggedIn, isPrimaryLoggedIn} from "utils/Utils";
import { handleLogoutFunction } from 'auth/index'; import { handleLogoutFunction } from 'auth/index';


// assets // assets
@@ -69,83 +69,77 @@ function Header(props) {
//await handleLogoutFunction(); //await handleLogoutFunction();
navigate('/login'); navigate('/login');
}; };
const loginContent = ( const loginContent = (
isGLDLoggedIn() ? isGLDLoggedIn() ?
<div id="adminContent">
<li>
<Link className="dashboard" to='/dashboard'>Dashboard</Link>
</li>
<li>
<Link className="application" to='/dashboard'>Application</Link>
<ul className='dropdown'>
<li>
<Link className="applicationSearch" to='application/search'>Search Application</Link>
</li>

</ul>
</li>
<li>
<Link className="proof" to='/dashboard'>Proof</Link>
</li>
<li>
<Link className="payment" to='/dashboard'>Payment</Link>
</li>
<li>
<Link className="client" >Client<KeyboardArrowDownIcon /></Link>
<ul className='dropdown'>
<li>
<Link className="userSearchview" to='/userSearchview'>Users (GLD)</Link>
</li>
<li>
<Link className="indUser" to='/indUser'>Users (Individual)</Link>
</li>
<li>
<Link className="orgUser" to='/orgUser'>Users (Organization)</Link>
</li>
<li>
<Link className="org" to='/org'>Organization</Link>
</li>
<li>
<Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link>
</li>
</ul>
</li>
<li>
<Link className="logout" onClick={handleLogout}>Logout</Link>
</li>
</div>
:
<div id="individualUserContent">
<li>
<Link className="dashboard" to='/dashboard'>主頁</Link>
</li>
<li>
<Link className="myDocumet" to='/publicNotice'>我的公共啟事</Link>
</li>
<li>
<Link className="documentRecord" to='/dashboard'>校對記錄</Link>
</li>
<li>
<Link className="paymentRecord" to='/dashboard'>付款記錄</Link>
</li>
<li>
<Link className="userSetting" to='/dashboard'>設定<KeyboardArrowDownIcon /></Link>
<ul className='dropdown'>
{isPrimaryLoggedIn() ?
<li>
<Link className="manageOrgUser" to='setting/manageUser'>公司/機構用戶記錄</Link>
</li>
:
<></>
}

</ul>
</li>
<li>
<Link className="logout" onClick={handleLogout}>登出</Link>
</li>
</div>
<div id="adminContent">
<li>
<Link className="dashboard" to='/dashboard'>Dashboard</Link>
</li>
<li>
<Link className="application" to='/dashboard'>Application</Link>
</li>
<li>
<Link className="proof" to='/dashboard'>Proof</Link>
</li>
<li>
<Link className="payment" to='/dashboard'>Payment</Link>
</li>
<li>
<Link className="client" >Client<KeyboardArrowDownIcon/></Link>
<ul className='dropdown'>
<li>
<Link className="userSearchview" to='/userSearchview'>Users (GLD)</Link>
</li>
<li>
<Link className="indUser" to='/indUser'>Users (Individual)</Link>
</li>
<li>
<Link className="orgUser" to='/orgUser'>Users (Organization)</Link>
</li>
<li>
<Link className="org" to='/org'>Organization</Link>
</li>
<li>
<Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link>
</li>
</ul>
</li>
<li>
<Link className="logout" onClick={handleLogout}>Logout</Link>
</li>
</div>
:
<div id="individualUserContent">
<li>
<Link className="dashboard" to='/dashboard'>主頁</Link>
</li>
<li>
<Link className="myDocumet" to='/publicNotice'>我的公共啟事</Link>
</li>
<li>
<Link className="documentRecord" to='/dashboard'>校對記錄</Link>
</li>
<li>
<Link className="paymentRecord" to='/dashboard'>付款記錄</Link>
</li>
<li>
<Link className="userSetting" to='/dashboard'>設定<KeyboardArrowDownIcon/></Link>
<ul className='dropdown'>
{ isPrimaryLoggedIn()?
<li>
<Link className="manageOrgUser" to='setting/manageUser'>公司/機構用戶記錄</Link>
</li>
:
<></>
}
</ul>
</li>
<li>
<Link className="logout" onClick={handleLogout}>登出</Link>
</li>
</div>
); );


const logoutContent = ( const logoutContent = (
@@ -160,7 +154,7 @@ function Header(props) {
); );


const drawer = ( const drawer = (
isUserLoggedIn() ?
isUserLoggedIn()?
<Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}> <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
<Typography variant="h6" sx={{ my: 2 }}> <Typography variant="h6" sx={{ my: 2 }}>
PNSPS PNSPS
@@ -176,7 +170,7 @@ function Header(props) {
</li> </li>
</ul> </ul>
</Stack> </Stack>
:
:
<Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}> <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
<Typography variant="h6" sx={{ my: 2 }}> <Typography variant="h6" sx={{ my: 2 }}>
PNSPS PNSPS
@@ -191,165 +185,165 @@ function Header(props) {


const container = window !== undefined ? () => window().document.body : undefined; const container = window !== undefined ? () => window().document.body : undefined;
return ( return (
isUserLoggedIn() ?
// User Login success
<Box>
<AppBar component="nav">
<Toolbar id="nav" width="100%">
{isGLDLoggedIn()
? <Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={0}
>
<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
<AdminLogo />
</Box>
<IconButton
isUserLoggedIn() ?
// User Login success
<Box>
<AppBar component="nav">
<Toolbar id ="nav" width="100%">
{isGLDLoggedIn()
?<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={0}
>
<Box sx={{display: { xs: 'none', sm: 'block' } }}>
<AdminLogo/>
</Box>
<IconButton
color="inherit" color="inherit"
aria-label="open drawer" aria-label="open drawer"
edge="start" edge="start"
onClick={handleDrawerToggle} onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' } }} sx={{ mr: 2, display: { sm: 'none' } }}
> >
<MenuIcon style={{ color: '#0C489E' }} />
</IconButton>
<Box sx={{ mr: 2, display: { sm: 'none' } }}>
<MobileLogo />
<span id="mobileTitle" >PNSPS</span>
</Box>
</Stack> :
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={0}
>
<Box sx={{ width: '260px', flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
<Stack direction="row" justifyContent="flex-start" alignItems="center">
<Logo />
<Stack justifyContent="flex-start" alignItems="center">
<span id="systemTitle">公共啟事提交</span>
<span id="systemTitle">及繳費系統</span>
</Stack>
<MenuIcon style={{ color: '#0C489E' }} />
</IconButton>
<Box sx={{mr: 2, display: { sm: 'none' } }}>
<MobileLogo/>
<span id="mobileTitle" >PNSPS</span>
</Box>
</Stack>:
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={0}
>
<Box sx={{width:'260px', flexGrow: 1,display: { xs: 'none', sm: 'block' } }}>
<Stack direction="row" justifyContent="flex-start" alignItems="center">
<Logo/>
<Stack justifyContent="flex-start" alignItems="center">
<span id="systemTitle">公共啟事提交</span>
<span id="systemTitle">及繳費系統</span>
</Stack> </Stack>
</Box>
<IconButton
</Stack>
</Box>
<IconButton
color="inherit" color="inherit"
aria-label="open drawer" aria-label="open drawer"
edge="start" edge="start"
onClick={handleDrawerToggle} onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' } }} sx={{ mr: 2, display: { sm: 'none' } }}
> >
<MenuIcon style={{ color: '#0C489E' }} />
</IconButton>
<Box sx={{ mr: 2, display: { sm: 'none' } }}>
<Stack direction="row" justifyContent="flex-start" alignItems="center">
<MobileLogo />
<span id="mobileTitle" >公共啟事提交及繳費系統</span>
</Stack>
</Box>
</Stack>
}

<Box sx={{ display: { xs: 'none', sm: 'block' }, width: "100%" }}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={1}
>
<ul id="navbar" width="100%" >
{loginContent}
</ul>
<Profile />
</Stack>
</Box>
</Toolbar>
</AppBar>
<Box component="nav">
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: 'block', sm: 'none' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
}}
>
{drawer}
</Drawer>
</Box>
</Box> :
<Box>
<AppBar component="nav">
<Toolbar id="nav" width="100%">
<MenuIcon style={{ color: '#0C489E' }} />
</IconButton>
<Box sx={{mr: 2, display: { sm: 'none' } }}>
<Stack direction="row" justifyContent="flex-start" alignItems="center">
<MobileLogo/>
<span id="mobileTitle" >公共啟事提交及繳費系統</span>
</Stack>
</Box>
</Stack>
}
<Box sx={{display: { xs: 'none', sm: 'block' } ,width:"100%"}}>
<Stack <Stack
direction="row" direction="row"
justifyContent="flex-start"
justifyContent="space-between"
alignItems="center" alignItems="center"
spacing={0}
spacing={1}
> >
<Box sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
<ul id="navbar" width="100%" >
{loginContent}
</ul>
<Profile />
</Stack>
</Box>
</Toolbar>
</AppBar>
<Box component="nav">
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: 'block', sm: 'none' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
}}
>
{drawer}
</Drawer>
</Box>
</Box>:
<Box>
<AppBar component="nav">
<Toolbar id ="nav" width="100%">
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={0}
>
<Box sx={{flexGrow: 1,display: { xs: 'none', sm: 'block' } }}>
<Stack direction="row" justifyContent="flex-start" alignItems="center"> <Stack direction="row" justifyContent="flex-start" alignItems="center">
<Logo />
<Stack justifyContent="flex-start" alignItems="center">
<Logo/>
<Stack justifyContent="flex-start" alignItems="center">
<span id="systemTitle">公共啟事提交及繳費系統</span> <span id="systemTitle">公共啟事提交及繳費系統</span>
</Stack> </Stack>
</Stack> </Stack>
</Box> </Box>
<IconButton
<IconButton
color="inherit" color="inherit"
aria-label="open drawer" aria-label="open drawer"
edge="start" edge="start"
onClick={handleDrawerToggle} onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' } }} sx={{ mr: 2, display: { sm: 'none' } }}
> >
<MenuIcon style={{ color: '#0C489E' }} />
</IconButton>
<Box sx={{ mr: 2, display: { sm: 'none' } }}>
<MobileLogo />
<span id="mobileTitle" >公共啟事提交及繳費系統</span>
</Box>
<MenuIcon style={{ color: '#0C489E' }} />
</IconButton>
<Box sx={{mr: 2, display: { sm: 'none' } }}>
<MobileLogo/>
<span id="mobileTitle" >公共啟事提交及繳費系統</span>
</Box>
</Stack>
<Box sx={{display: { xs: 'none', sm: 'block' } ,width:"75%"}}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={1}
>
<ul id="navbar" width="100%" >
{logoutContent}
</ul>
{/* <Profile /> */}
</Stack> </Stack>
<Box sx={{ display: { xs: 'none', sm: 'block' }, width: "75%" }}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={1}
>
<ul id="navbar" width="100%" >
{logoutContent}
</ul>
{/* <Profile /> */}
</Stack>
</Box>
</Toolbar>
</AppBar>
<Box component="nav">
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: 'block', sm: 'none' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
}}
>
{drawer}
</Drawer>
</Box>
</Box>
</Toolbar>
</AppBar>
<Box component="nav">
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: 'block', sm: 'none' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
}}
>
{drawer}
</Drawer>
</Box> </Box>
</Box>
); );
} }
Header.propTypes = { Header.propTypes = {


+ 1
- 1
src/pages/ManageOrgUserPage/index.js View File

@@ -73,7 +73,7 @@ const ManageOrgUserPage = () => {


function getStatusTag({color="#000", textColor="#FFF",text=""}){ function getStatusTag({color="#000", textColor="#FFF",text=""}){
return ( return (
<div style={{"border-radius":"25px" ,"background": color, "color":textColor, "padding":"5px 10px 5px 10px"}}><b>{text}</b></div>
<div style={{borderRadius:"25px" ,"background": color, "color":textColor, "padding":"5px 10px 5px 10px"}}><b>{text}</b></div>
) )
} }




+ 11
- 3
src/pages/PublicNotice/ListPanel/BaseGrid.js View File

@@ -72,9 +72,8 @@ export default function BaseGrid({rows}) {
}, },
{ {
field: 'actions', field: 'actions',
type: 'actions',
headerName: '', headerName: '',
width: 50,
width: 80,
cellClassName: 'actions', cellClassName: 'actions',
renderCell: () => { renderCell: () => {
return <Button onClick={()=>{}}>查看詳細</Button>; return <Button onClick={()=>{}}>查看詳細</Button>;
@@ -83,7 +82,7 @@ export default function BaseGrid({rows}) {
]; ];


return ( return (
<div style={{height: 400, width: '100%'}}>
<div style={{height: 400, width: '100%', padding: 4}}>
<DataGrid <DataGrid
rows={rows} rows={rows}
columns={columns} columns={columns}
@@ -96,6 +95,15 @@ export default function BaseGrid({rows}) {
}} }}
pageSizeOptions={[5, 10]} pageSizeOptions={[5, 10]}
autoHeight = {true} autoHeight = {true}
sx={{
padding: "4 2 4 2",
boxShadow: 1,
border: 1,
borderColor: '#DDD',
'& .super-app-theme--header': {
backgroundColor: '#EEE',
},
}}
/> />
</div> </div>
); );


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

@@ -80,7 +80,7 @@ export default function SubmittedTab({ rows }) {
field: 'actions', field: 'actions',
type: 'actions', type: 'actions',
headerName: '', headerName: '',
width: 50,
width: 100,
cellClassName: 'actions', cellClassName: 'actions',
renderCell: () => { renderCell: () => {
return <Button onClick={() => { }}>查看詳細</Button>; return <Button onClick={() => { }}>查看詳細</Button>;
@@ -105,7 +105,7 @@ export default function SubmittedTab({ rows }) {


return ( return (
<> <>
<div style={{ height: 400, width: '100%' }}>
<div style={{ height: 400, width: '100%', padding: 4 }}>
<DataGrid <DataGrid
checkboxSelection checkboxSelection
disableRowSelectionOnClick disableRowSelectionOnClick
@@ -123,6 +123,15 @@ export default function SubmittedTab({ rows }) {
onRowSelectionModelChange={(newSelection) => { onRowSelectionModelChange={(newSelection) => {
setSelectedRowItems(newSelection); setSelectedRowItems(newSelection);
}} }}
sx={{
margin: "4 2 4 2",
boxShadow: 1,
border: 1,
borderColor: '#DDD',
'& .super-app-theme--header': {
backgroundColor: '#EEE',
},
}}
/> />
<Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button> <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button>
</div> </div>


+ 1
- 1
src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js View File

@@ -48,6 +48,6 @@ export function getStatusEng(params) {


export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) { export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {
return ( return (
<div style={{ "border-radius": "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px" }}><b>{text}</b></div>
<div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px" }}><b>{text}</b></div>
) )
} }

+ 0
- 1
src/pages/PublicNoticeSearch_GLD/DataGrid.js View File

@@ -77,7 +77,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
}, },
{ {
field: 'actions', field: 'actions',
type: 'actions',
headerName: '', headerName: '',
width: 100, width: 100,
cellClassName: 'actions', cellClassName: 'actions',


+ 33
- 23
src/pages/PublicNoticeSearch_GLD/SearchForm.js View File

@@ -16,6 +16,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {


const [type, setType] = React.useState([]); const [type, setType] = React.useState([]);
const [status, setStatus] = React.useState(); const [status, setStatus] = React.useState();
const [orgLabel, setOrgLabel] = React.useState();
const [orgId, setOrgId] = React.useState(); const [orgId, setOrgId] = React.useState();
const [orgCombo, setOrgCombo] = React.useState(); const [orgCombo, setOrgCombo] = React.useState();


@@ -35,21 +36,23 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
dateTo: data.dateTo, dateTo: data.dateTo,
contact: data.contact, contact: data.contact,
status: status?.type, status: status?.type,
orgId:orgId?.key,
orgId: orgId?.key,
}; };
applySearch(temp); applySearch(temp);
}; };


React.useEffect(()=>{
if(orgComboData && orgComboData.length>0){
React.useEffect(() => {
if (orgComboData && orgComboData.length > 0) {
setOrgCombo(orgComboData); setOrgCombo(orgComboData);
} }
},[orgComboData]);
}, [orgComboData]);


function resetForm() { function resetForm() {
setType([]); setType([]);
setStatus(); setStatus();
setOrgId(); setOrgId();
setOrgLabel("");
//orgComboRef.current.clearValue();
reset(); reset();
} }


@@ -132,26 +135,33 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
/> />
</Grid> </Grid>


<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("orgId")}
disablePortal
id="orgId"
options={orgCombo}
value={orgId}
getOptionLabel={(option) => option.label || ""}
onChange={(event, newValue) => {
if (newValue !== null) {
setOrgId(newValue);
}
}}
renderInput={(params) => (
<TextField {...params}
label="Organization"
{
orgCombo ?
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Autocomplete
{...register("orgId")}
disablePortal
id="orgId"
options={orgCombo}
inputValue={orgLabel}
onChange={(event, newValue) => {
if (newValue !== null) {
setOrgId(newValue);
setOrgLabel(newValue.label);
} else {
setOrgLabel("");
}
}}
renderInput={(params) => (
<TextField {...params}
label="Organization"
/>
)}
/> />
)}
/>
</Grid>
</Grid>
: <></>
}



</Grid> </Grid>




Write Preview
Loading…
Cancel
Save