# Conflicts: # src/routes/SettingRoutes.jsmaster
@@ -7,7 +7,7 @@ import useJwt from 'auth/jwt/coreUseJwt' | |||
*/ | |||
// eslint-disable-next-line arrow-body-style | |||
export const hostname = "localhost" | |||
const hostPort = "8090" | |||
const hostPort = "8080" | |||
export const hostPath = `http://${hostname}:${hostPort}` | |||
export const apiPath = `${hostPath}/api` | |||
@@ -114,7 +114,7 @@ function Header(props) { | |||
> | |||
<ul id="navbar" width="100%" > | |||
<li> | |||
<Link className="usersetting" to='/usersetting'>User</Link> | |||
<Link className="userSearchview" to='/userSearchview'>User</Link> | |||
</li> | |||
<li> | |||
<Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link> | |||
@@ -17,7 +17,7 @@ import Footer from 'components/cards/AuthFooter'; | |||
// types | |||
import { openDrawer } from 'store/reducers/menu'; | |||
import "assets/style/styles.css"; | |||
// import "assets/style/styles.css"; | |||
// ==============================|| MAIN LAYOUT ||============================== // | |||
@@ -50,7 +50,7 @@ const MainLayout = () => { | |||
}, [drawerOpen]); | |||
return ( | |||
<Box sx={{ display: 'flex', width: '100%', flexDirection: "column"}}> | |||
<Box sx={{ display: 'flex', width: '100%', flexDirection: "column", paddingTop: { xs: "5px", sm: "43px" }}}> | |||
<Header/> | |||
{/* <Drawer open={open} handleDrawerToggle={handleDrawerToggle} /> */} | |||
<Box component="main" sx={{ width: '100%', flexGrow: 1, p: { xs: 2, sm: 3 } }}> | |||
@@ -398,14 +398,14 @@ const CustomFormWizard = (props) => { | |||
onChange={handleChange} | |||
placeholder="( )" | |||
inputProps={{ | |||
maxLength: 1, | |||
onKeyDown: (e) => { | |||
if (e.key === 'Enter') { | |||
e.preventDefault(); | |||
} | |||
} | |||
}, | |||
}} | |||
fullWidth | |||
// sx={{width:'90%'}} | |||
error={Boolean(touched.checkDigit && errors.checkDigit)} | |||
/> | |||
{touched.checkDigit && errors.checkDigit && ( | |||
@@ -667,7 +667,6 @@ const CustomFormWizard = (props) => { | |||
</InputLabel> | |||
<Stack direction="row"> | |||
<OutlinedInput | |||
fullWidth | |||
error={Boolean(touched.phone && errors.phone)} | |||
id="phoneCountryCode-login" | |||
type="phoneCountryCode" | |||
@@ -678,33 +677,34 @@ const CustomFormWizard = (props) => { | |||
onChange={handleChange} | |||
placeholder="eg:852" | |||
inputProps={{ | |||
maxLength: 3, | |||
onKeyDown: (e) => { | |||
if (e.key === 'Enter') { | |||
e.preventDefault(); | |||
} | |||
}, | |||
}} | |||
sx={{width:'20%'}} | |||
sx={{width:'25%'}} | |||
/> | |||
<OutlinedInput | |||
fullWidth | |||
error={Boolean(touched.phone && errors.phone)} | |||
id="phone-login" | |||
type="phone" | |||
value={values.phone} | |||
name="phone" | |||
{...register("phone")} | |||
sx={{width:'80%'}} | |||
onBlur={handleBlur} | |||
onChange={handleChange} | |||
placeholder="聯絡電話" | |||
inputProps={{ | |||
maxLength: 3, | |||
onKeyDown: (e) => { | |||
if (e.key === 'Enter') { | |||
e.preventDefault(); | |||
} | |||
}, | |||
}} | |||
sx={{width:'75%'}} | |||
/> | |||
{touched.phone && errors.phone && ( | |||
<FormHelperText error id="helper-text-phone-signup"> | |||
@@ -714,12 +714,6 @@ const CustomFormWizard = (props) => { | |||
</Stack> | |||
</Stack> | |||
</Grid> | |||
{/* <Grid container> | |||
<Grid item xs={2} md={2}> | |||
</Grid> | |||
<Grid item xs={10} md={10}> | |||
</Grid> | |||
</Grid> */} | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={6}> | |||
@@ -729,7 +723,6 @@ const CustomFormWizard = (props) => { | |||
<InputLabel htmlFor="fax-signup">傳真號碼</InputLabel> | |||
<Stack direction="row"> | |||
<OutlinedInput | |||
fullWidth | |||
error={Boolean(touched.fax && errors.fax)} | |||
id="faxCountryCode-login" | |||
type="faxCountryCode" | |||
@@ -746,10 +739,9 @@ const CustomFormWizard = (props) => { | |||
} | |||
}, | |||
}} | |||
sx={{width:'20%'}} | |||
sx={{width:'25%'}} | |||
/> | |||
<OutlinedInput | |||
fullWidth | |||
id="fax-login" | |||
type="fax" | |||
value={values.fax} | |||
@@ -765,6 +757,7 @@ const CustomFormWizard = (props) => { | |||
} | |||
}, | |||
}} | |||
sx={{width:'75%'}} | |||
/> | |||
</Stack> | |||
</Stack> | |||
@@ -13,7 +13,7 @@ import { | |||
subDivision4, | |||
subDivision5, | |||
subDivision6 | |||
} from "../pnspsUserSettingPage/DummyComboRecord"; | |||
} from "../pnspsUserSearchPage/DummyComboRecord"; | |||
import {useEffect, useState} from "react"; | |||
import Checkbox from "@mui/material/Checkbox"; | |||
import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
@@ -17,7 +17,7 @@ import { | |||
subDivision4, | |||
subDivision5, | |||
subDivision6 | |||
} from "pages/pnspsUserSettingPage/DummyComboRecord"; | |||
} from "pages/pnspsUserSearchPage/DummyComboRecord"; | |||
import Checkbox from "@mui/material/Checkbox"; | |||
import * as React from "react"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
@@ -1,232 +0,0 @@ | |||
// material-ui | |||
import { | |||
Button, | |||
CardContent, FormControlLabel, | |||
Grid, TextField, | |||
Typography | |||
} from '@mui/material'; | |||
import MainCard from "../../components/MainCard"; | |||
import {useForm} from "react-hook-form"; | |||
import dayjs from "dayjs"; | |||
import {useEffect, useState} from "react"; | |||
import Autocomplete from '@mui/material/Autocomplete'; | |||
import { | |||
subDivision1, | |||
subDivision2, | |||
subDivision3, | |||
subDivision4, | |||
subDivision5, | |||
subDivision6 | |||
} from "pages/pnspsUserSettingPage/DummyComboRecord"; | |||
import Checkbox from "@mui/material/Checkbox"; | |||
import * as React from "react"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const subDivisionArray =[ | |||
...subDivision1, | |||
...subDivision2, | |||
...subDivision3, | |||
...subDivision4, | |||
...subDivision5, | |||
...subDivision6 | |||
]; | |||
const UserSearchForm = ({applySearch}) => { | |||
const [value, setValue] = useState(); | |||
const [type, setType] = useState([]); | |||
const [division, setDivision] = useState(null); | |||
const [subDivision, setSubDivision] = useState(null); | |||
const [isLotusNoteUser, setIsLotusNoteUser] = useState(false); | |||
const [locked, setLocked] = useState(false); | |||
const { reset, register, handleSubmit } = useForm() | |||
const onSubmit = (data) => { | |||
let typeArray = []; | |||
for(let i =0; i < type.length; i++){ | |||
typeArray.push(type[i].label); | |||
} | |||
const temp = { | |||
eventName: data.eventName, | |||
eventOrganization: data.eventOrganization, | |||
eventRegion: data.eventRegion, | |||
eventDescription: data.eventDescription, | |||
type: typeArray, | |||
division: division, | |||
subDivision: subDivision, | |||
selectedDate: dayjs(value).format("MM/DD/YYYY") | |||
}; | |||
applySearch(temp); | |||
}; | |||
useEffect(() => { | |||
if(division != null){ | |||
setSubDivision(subDivisionArray[division.type-1][0]); | |||
} | |||
}, [division]); | |||
function resetForm(){ | |||
setValue(new Date().toDateString()); | |||
setType([]); | |||
setDivision(null); | |||
setSubDivision(null); | |||
setIsLotusNoteUser(false); | |||
setLocked(false); | |||
reset(); | |||
} | |||
return ( | |||
<MainCard xs={12} md={12} lg={12} | |||
border={false} | |||
content={false}> | |||
<form onSubmit={handleSubmit(onSubmit)}> | |||
{/*row 1*/} | |||
<CardContent sx={{ px: 2.5, pt: 3 }}> | |||
<Grid item justifyContent="space-between" alignItems="center"> | |||
Search Form | |||
</Grid> | |||
</CardContent> | |||
{/*row 2*/} | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<TextField | |||
fullWidth | |||
{...register("userName")} | |||
id='userName' | |||
label="Username" | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<TextField | |||
fullWidth | |||
{...register("fullName")} | |||
id="fullName" | |||
label="Full Name" | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<TextField | |||
fullWidth | |||
{...register("post")} | |||
id="post" | |||
label="Post" | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<Autocomplete | |||
disablePortal | |||
id="sub-division-combo" | |||
value={subDivision === null? null : subDivision} | |||
options={subDivisionArray} | |||
onChange={(event, newValue) => { | |||
setSubDivision(newValue); | |||
}} | |||
renderInput={(params) => <TextField {...params} label="Sub-Division" />} | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<TextField | |||
fullWidth | |||
{...register("email")} | |||
id="email" | |||
label="Email" | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<TextField | |||
fullWidth | |||
{...register("phone")} | |||
id="phone" | |||
label="Phone" | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<FormControlLabel | |||
control={ | |||
<Checkbox | |||
checked={isLotusNoteUser} | |||
onChange={(event) => setIsLotusNoteUser(event.target.checked)} | |||
name="checked" | |||
color="primary" | |||
size="small" | |||
/> | |||
} | |||
label={<Typography variant="h6">Lotus Notes User</Typography>} | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<FormControlLabel | |||
control={ | |||
<Checkbox | |||
checked={locked} | |||
onChange={(event) => setLocked(event.target.checked)} | |||
name="checked" | |||
color="primary" | |||
size="small" | |||
/> | |||
} | |||
label={<Typography variant="h6">Locked</Typography>} | |||
/> | |||
</Grid> | |||
{/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/} | |||
{/* <TextField*/} | |||
{/* fullWidth*/} | |||
{/* {...register("subDivisionId")}*/} | |||
{/* id="subDivision"*/} | |||
{/* label="Sub-Division"*/} | |||
{/* />*/} | |||
{/*</Grid>*/} | |||
</Grid> | |||
{/*last row*/} | |||
<Grid container maxWidth justifyContent="flex-end"> | |||
<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}> | |||
<Button | |||
size="large" | |||
variant="contained" | |||
onClick={resetForm} | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end' | |||
}}> | |||
Clear | |||
</Button> | |||
</Grid> | |||
<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}> | |||
<Button | |||
size="large" | |||
variant="contained" | |||
type="submit" | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end' | |||
}}> | |||
Submit | |||
</Button> | |||
</Grid> | |||
</Grid> | |||
</form> | |||
</MainCard> | |||
); | |||
}; | |||
export default UserSearchForm; |
@@ -1,137 +0,0 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
DataGrid, | |||
GridActionsCellItem, | |||
} from "@mui/x-data-grid"; | |||
import EditIcon from '@mui/icons-material/Edit'; | |||
import {useEffect} from "react"; | |||
import {useNavigate} from "react-router-dom"; | |||
import { useTheme } from '@mui/material/styles'; | |||
import Checkbox from '@mui/material/Checkbox'; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function UserTable({recordList}) { | |||
const [rows, setRows] = React.useState(recordList); | |||
const [rowModesModel] = React.useState({}); | |||
const theme = useTheme(); | |||
const navigate = useNavigate() | |||
useEffect(() => { | |||
setRows(recordList); | |||
}, [recordList]); | |||
const handleEditClick = (id) => () => { | |||
navigate('/user/'+ id); | |||
}; | |||
const columns = [ | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: 'Actions', | |||
width: 100, | |||
cellClassName: 'actions', | |||
getActions: ({id}) => { | |||
return [ | |||
<GridActionsCellItem | |||
key="OutSave" | |||
icon={<EditIcon/>} | |||
label="Edit" | |||
className="textPrimary" | |||
onClick={handleEditClick(id)} | |||
color="primary" | |||
/>] | |||
}, | |||
}, | |||
{ | |||
id: 'username', | |||
field: 'username', | |||
headerName: 'User Name', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'name', | |||
field: 'name', | |||
headerName: 'Full Name', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'post', | |||
field: 'post', | |||
headerName: 'Post', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'email', | |||
field: 'email', | |||
headerName: 'Email', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'subDivisionId', | |||
field: 'subDivisionId', | |||
//type: 'date', | |||
//sortable: false, | |||
headerName: 'Sub-Division', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'lotusNotesUser', | |||
field: 'lotusNotesUser', | |||
type: 'bool', | |||
headerName: 'Lotus Notes User', | |||
flex: 1, | |||
renderCell: (params) => { | |||
return ( | |||
<Checkbox | |||
theme={theme} | |||
key="locked" | |||
checked={params.row.lotusNotesUser} | |||
color="primary" | |||
size="small" | |||
//onChange={handleChange} | |||
/> | |||
); | |||
}, | |||
}, | |||
{ | |||
id: 'locked', | |||
field: 'locked', | |||
type: 'bool', | |||
headerName: 'Locked', | |||
flex: 1, | |||
renderCell: (params) => { | |||
return ( | |||
<Checkbox | |||
theme={theme} | |||
key="locked" | |||
checked={params.row.locked} | |||
color="primary" | |||
size="small" | |||
//onChange={handleChange} | |||
/> | |||
); | |||
}, | |||
}, | |||
]; | |||
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 | |||
/> | |||
</div> | |||
); | |||
} |
@@ -1,89 +0,0 @@ | |||
// material-ui | |||
import { | |||
Grid | |||
} from '@mui/material'; | |||
import MainCard from "../../components/MainCard"; | |||
import SearchForm from "./UserSearchForm"; | |||
import EventTable from "./UserTable"; | |||
import {useEffect, useState} from "react"; | |||
import axios from "axios"; | |||
import {apiPath} from "../../auth/utils"; | |||
import {GET_USER_PATH} from "../../utils/ApiPathConst"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const UserSettingPage = () => { | |||
const [record,setRecord] = useState([]); | |||
const [searchCriteria, setSearchCriteria] = useState({}); | |||
const [sortedRecord, setSortedRecord] = useState([]); | |||
useEffect(() => { | |||
axios.get(`${apiPath}${GET_USER_PATH}`) | |||
.then((response) => { | |||
if (response.status === 200) { | |||
setRecord(response.data); | |||
setSortedRecord(response.data); | |||
} | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
}, []) | |||
const filterSearchName = (array) => { | |||
return array.filter((item) => item.name.toLowerCase().includes(searchCriteria.eventName)); | |||
}; | |||
const filterSearchType = (array) => { | |||
return array.filter((item) => item.category.includes(searchCriteria.type)); | |||
}; | |||
function sortData(record) { | |||
let sortedRecord = record; | |||
sortedRecord = filterSearchName(sortedRecord); | |||
sortedRecord = filterSearchType(sortedRecord); | |||
return sortedRecord; | |||
} | |||
function applySearch(input) { | |||
setSearchCriteria(input); | |||
} | |||
useEffect(() => { | |||
//console.log(searchCriteria); | |||
if (Object.keys(searchCriteria).length !== 0) { | |||
const tempSortedRecord = sortData(record); | |||
console.log(tempSortedRecord); | |||
setSortedRecord(tempSortedRecord); | |||
} else { | |||
setSortedRecord(record); | |||
} | |||
}, [searchCriteria]); | |||
return ( | |||
<Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
{/*row 1*/} | |||
<Grid item xs={12} md={12} lg={12}> | |||
<SearchForm applySearch={applySearch}/> | |||
</Grid> | |||
{/*row 2*/} | |||
<Grid item xs={12} md={12} lg={12}> | |||
<MainCard elevation={0} | |||
border={false} | |||
content={false} | |||
> | |||
<EventTable | |||
recordList={sortedRecord} | |||
/> | |||
</MainCard> | |||
</Grid> | |||
</Grid> | |||
); | |||
}; | |||
export default UserSettingPage; |
@@ -9,7 +9,6 @@ const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage'))); | |||
const PasswordPolicyPage = Loadable(lazy(()=> import('pages/pnspsPasswordPolicyPage'))) | |||
const UserSettingPage = Loadable(lazy(()=>import ('pages/pnspsUserSettingPage/'))); | |||
const UserSearchPage = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage'))); | |||
const UserSearchPage_Public = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage_Public'))); | |||
const UserMaintainPage = Loadable(lazy(() => import('pages/pnspsUserDetailPage'))); | |||
const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage'))); | |||
const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage'))); | |||
@@ -40,13 +39,9 @@ const SettingRoutes = { | |||
path: '/user/:id', | |||
element: <UserMaintainPage /> | |||
}, | |||
{ | |||
path: 'usersetting', | |||
element: <UserSettingPage /> | |||
}, | |||
{ | |||
path: 'setting', | |||
element: <SettingPage /> | |||
element: <UserSettingPage /> | |||
}, | |||
{ | |||
path: 'passwordpolicy', | |||