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

update content

master
Anna Ho 1 year ago
parent
b720bc6246
commit
c20df9f8c0
8 changed files with 348 additions and 16 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/layout/MainLayout/Header/index.js
  2. +2
    -2
      src/layout/MainLayout/index.js
  3. +86
    -0
      src/pages/PublicNotice/SubmittedTab.js
  4. +166
    -0
      src/pages/PublicNotice/index.js
  5. +22
    -13
      src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
  6. +5
    -0
      src/routes/PublicUserRoutes.js
  7. +3
    -0
      src/utils/ApiPathConst.js
  8. +63
    -0
      src/utils/SelectBase.js

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

@@ -115,7 +115,7 @@ function Header(props) {
<Link className="dashboard" to='/dashboard'>主頁</Link>
</li>
<li>
<Link className="myDocumet" to='/dashboard'>我的公共啟事</Link>
<Link className="myDocumet" to='/publicNotice'>我的公共啟事</Link>
</li>
<li>
<Link className="documentRecord" to='/dashboard'>校對記錄</Link>


+ 2
- 2
src/layout/MainLayout/index.js View File

@@ -58,11 +58,11 @@ const MainLayout = () => {
<Box sx={{ display: 'flex', width: '100%', flexDirection: "column", paddingTop: { xs: "5px", sm: "43px" }}}>
<Header/>
{/* <Drawer open={open} handleDrawerToggle={handleDrawerToggle} /> */}
<div style={{ width: '100%', flexGrow: 1, p: { xs: 2, sm: 3 } }}>
<Box style={{ width: '100%', flexGrow: 1 } } sx={{ paddingTop: "43px" }}>
{/* <Toolbar /> */}
{/* <Breadcrumbs navigation={navigation} title /> */}
<Outlet />
</div>
</Box>
<Box sx={{borderTop: "3px solid #0C489E"}}>
<Footer/>
</Box>


+ 86
- 0
src/pages/PublicNotice/SubmittedTab.js View File

@@ -0,0 +1,86 @@
// material-ui
import * as React from 'react';
import {
DataGrid,
GridActionsCellItem,
} from "@mui/x-data-grid";
import * as Icon from '../../utils/IconUtils';
import * as DateUtils from "../../utils/DateUtils"
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({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: 'remarks',
field: 'remarks',
headerName: '我的備註',
flex: 1,
valueGetter:(params)=>{
return DateUtils.datetimeStr(params.value);
}
},
{
id: 'status',
field: 'status',
headerName: '狀態',
flex: 1,
valueGetter:(params)=>{
return DateUtils.datetimeStr(params.value);
}
},
{
field: 'actions',
type: 'actions',
headerName: '',
width: 50,
cellClassName: 'actions',
getActions: (params) => {
return [
<GridActionsCellItem
key="OutSave"
icon={<Icon.Download/>}
label="查看詳細"
className="textPrimary"
onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)}
color="primary"
/>]
},
}
];

return (
<div style={{height: 400, width: '100%'}}>
<DataGrid
sx={sx}
rows={rows}
columns={columns}
editMode="row"
rowModesModel={rowModesModel}
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 5},
},
}}
pageSizeOptions={[5, 10]}
autoHeight = {true}
/>
</div>
);
}

+ 166
- 0
src/pages/PublicNotice/index.js View File

@@ -0,0 +1,166 @@
// material-ui
import {
// Grid,
Typography,
Tabs,
Tab,
Box
} from '@mui/material';
// import {TabPanel, TabContext, TabList } from '@mui/lab';
// import {useEffect, useState} from "react";
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 SubmittedTab = Loadable(lazy(() => import('./SubmittedTab')));
// const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));


// ==============================|| DASHBOARD - DEFAULT ||============================== //
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
function CustomTabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}

export default function BasicTabs() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<>
<Box sx={{ p: 3 }}>
<Typography>123</Typography>
</Box>
<Box sx={{ width: '100%' }}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</Box>
<CustomTabPanel value={value} index={0}>
Item One
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
Item Two
</CustomTabPanel>
<CustomTabPanel value={value} index={2}>
Item Three
</CustomTabPanel>
</Box>
</>
);
}

// const PublicNotice = () => {
// const [submittedList, setSubmittedList] = useState([]);
// // const [inProgressList, setInProgressList] = useState([]);
// // const [pendingPaymentList, setPendingPaymentList] = useState([]);
// // const [pendingPublishList, setPendingPublishList] = useState([]);
// const [isLoading, setLoding] = useState(true);
// const [selectedTab, setSelectedTab] = useState("1");


// useEffect(()=>{
// loadData();
// },[]);

// const reloadPage=()=>{
// window.location.reload(false);
// }

// const loadData = ()=>{
// setLoding(true);
// HttpUtils.get({
// url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST}`,
// onSuccess: function(response){
// setSubmittedList(response.data["submitted"]);
// // setInProgressList(response.data["inProgress"]);
// // setPendingPaymentList(response.data["pendingPayment"]);
// // setPendingPublishList(response.data["pendingPublish"]);
// }
// });
// };


// useEffect(() => {
// setLoding(false);
// }, [submittedList]);

// const handleChange = (event, newValue)=>{
// setSelectedTab(newValue);
// }

// return (
// isLoading ?
// <LoadingComponent/>
// :
// <Grid container rowSpacing={4.5} columnSpacing={2.75}>
// <Grid item xs={12} sx={{mb: -2.25}}>
// <Typography variant="h5">我的公共啟事</Typography>
// </Grid>
// {/*col 2*/}
// <Grid item xs={12}>
// <TabContext value={selectedTab}>
// <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
// <TabList onChange={handleChange} aria-label="lab API tabs example">
// <Tab label="已提交" value="1" />
// <Tab label="處理中" value="2" />
// <Tab label="待付款" value="3" />
// <Tab label="待發佈" value="4" />
// <Tab label="搜尋申請記錄" value="5" />
// </TabList>
// </Box>
// <TabPanel value="1">
// <SubmittedTab
// rows={submittedList}
// reloadFunction={reloadPage}
// />
// </TabPanel>
// <TabPanel value="2">
// TODO
// </TabPanel>
// <TabPanel value="3">
// TODO
// </TabPanel>
// <TabPanel value="4">
// TODO
// </TabPanel>
// <TabPanel value="5">TODO</TabPanel>
// </TabContext>
// </Grid>
// </Grid>
// );
// };


// export default PublicNotice;

+ 22
- 13
src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js View File

@@ -134,19 +134,28 @@ export default function UserTable_Individual({recordList}) {

return (
<div style={{height: 400, width: '100%'}}>
<DataGrid
rows={rows}
columns={columns}
editMode="row"
rowModesModel={rowModesModel}
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 5},
},
}}
pageSizeOptions={[5, 10]}
autoHeight
/>

<DataGrid
rows={rows}
columns={columns}
editMode="row"
rowModesModel={rowModesModel}
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 5},
},
}}
pageSizeOptions={[5, 10]}
autoHeight
sx={{
boxShadow: 1,
border: 1,
borderColor: '#DDD',
'& .super-app-theme--header': {
backgroundColor: '#EEE',
},
}}
/>
</div>
);
}

+ 5
- 0
src/routes/PublicUserRoutes.js View File

@@ -8,6 +8,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
// render - dashboard
const DashboardDefault = Loadable(lazy(() => import('pages/publicDashboard')));
const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage')));
const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice')));

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

@@ -29,6 +30,10 @@ const PublicDashboard = {
{
path: 'setting/manageUser',
element: <ManageOrgUser/>
},
{
path: 'publicNotice',
element: <PublicNotice/>
}
]
},


+ 3
- 0
src/utils/ApiPathConst.js View File

@@ -47,6 +47,9 @@ export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg';
export const GET_SET_PRIMARY_USER = apiPath+'/user/primary';
export const GET_SET_UN_PRIMARY_USER = apiPath+'/user/un-primary';

export const GET_PUBLIC_NOTICE_LIST = apiPath+'/application/list';
export const GET_PUBLIC_NOTICE_LIST_ListByStatus = apiPath+'/application/status-list';

//GLD User
export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry';
export const DELETE_USER = apiPath+'/user';


+ 63
- 0
src/utils/SelectBase.js View File

@@ -0,0 +1,63 @@
import {
Autocomplete, TextField
} from '@mui/material';
import * as React from 'react';
import Select, { SelectChangeEvent } from '@mui/material/Select';

export default function Combo ({valueName, disabled, form, dataList, filterOptions, getOptionLabel, isOptionEqualToValue, onInputChange, onChange, ...props}){
const [value, setValue] = React.useState(form.values[valueName]);
const [inputValue, setInputValue] = React.useState("");

return (
<Autocomplete
{...props}
disablePortal
fullWidth
id={valueName}
name={valueName}
disabled={disabled}
value={value}
inputValue={inputValue}
filterOptions={filterOptions}
options={dataList}
getOptionLabel={getOptionLabel}
isOptionEqualToValue={(option, newValue)=>{
if(isOptionEqualToValue)
isOptionEqualToValue(option,newValue, setValue,setInputValue )
}}
onInputChange={(event, newValue) => {
setInputValue(newValue);
if(onInputChange){
onInputChange(event,newValue, setInputValue)
}
}}
onChange={(event, newValue) => {
setValue(newValue);
if (!onChange){
form.setFieldValue(valueName, newValue);
}else{
onChange(event, newValue);
}
}}
sx={{
"& .MuiInputBase-root": {
height: "41px",
padding: "0px 0px 0px 8px"
},
"& .MuiAutocomplete-endAdornment": {
top: "auto"
},
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
renderInput={(params) => <TextField {...params} sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}/>}
/>
);
}

Write Preview
Loading…
Cancel
Save