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

fix user search

master
Alex Cheung 2 years ago
parent
bcd1d9e951
commit
5080a61ba7
10 changed files with 14 additions and 484 deletions
Unified 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. +8
    -15
      src/pages/authentication/auth-forms/CustomFormWizard.js
  4. +1
    -1
      src/pages/pnspsUserDetailPage/UserInformationCard.js
  5. +0
    -0
      src/pages/pnspsUserSearchPage/DummyComboRecord.js
  6. +1
    -1
      src/pages/pnspsUserSearchPage/UserSearchForm.js
  7. +0
    -232
      src/pages/pnspsUserSettingPage/UserSearchForm.js
  8. +0
    -137
      src/pages/pnspsUserSettingPage/UserTable.js
  9. +0
    -89
      src/pages/pnspsUserSettingPage/index.js
  10. +1
    -6
      src/routes/SettingRoutes.js

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

@@ -114,7 +114,7 @@ function Header(props) {
> >
<ul id="navbar" width="100%" > <ul id="navbar" width="100%" >
<li> <li>
<Link className="usersetting" to='/usersetting'>User</Link>
<Link className="userSearchview" to='/userSearchview'>User</Link>
</li> </li>
<li> <li>
<Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link> <Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link>


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

@@ -17,7 +17,7 @@ import Footer from 'components/cards/AuthFooter';


// types // types
import { openDrawer } from 'store/reducers/menu'; import { openDrawer } from 'store/reducers/menu';
import "assets/style/styles.css";
// import "assets/style/styles.css";




// ==============================|| MAIN LAYOUT ||============================== // // ==============================|| MAIN LAYOUT ||============================== //
@@ -50,7 +50,7 @@ const MainLayout = () => {
}, [drawerOpen]); }, [drawerOpen]);


return ( return (
<Box sx={{ display: 'flex', width: '100%', flexDirection: "column"}}>
<Box sx={{ display: 'flex', width: '100%', flexDirection: "column", paddingTop: { xs: "5px", sm: "43px" }}}>
<Header/> <Header/>
{/* <Drawer open={open} handleDrawerToggle={handleDrawerToggle} /> */} {/* <Drawer open={open} handleDrawerToggle={handleDrawerToggle} /> */}
<Box component="main" sx={{ width: '100%', flexGrow: 1, p: { xs: 2, sm: 3 } }}> <Box component="main" sx={{ width: '100%', flexGrow: 1, p: { xs: 2, sm: 3 } }}>


+ 8
- 15
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -398,14 +398,14 @@ const CustomFormWizard = (props) => {
onChange={handleChange} onChange={handleChange}
placeholder="( )" placeholder="( )"
inputProps={{ inputProps={{
maxLength: 1,
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
fullWidth fullWidth
// sx={{width:'90%'}}
error={Boolean(touched.checkDigit && errors.checkDigit)} error={Boolean(touched.checkDigit && errors.checkDigit)}
/> />
{touched.checkDigit && errors.checkDigit && ( {touched.checkDigit && errors.checkDigit && (
@@ -667,7 +667,6 @@ const CustomFormWizard = (props) => {
</InputLabel> </InputLabel>
<Stack direction="row"> <Stack direction="row">
<OutlinedInput <OutlinedInput
fullWidth
error={Boolean(touched.phone && errors.phone)} error={Boolean(touched.phone && errors.phone)}
id="phoneCountryCode-login" id="phoneCountryCode-login"
type="phoneCountryCode" type="phoneCountryCode"
@@ -678,33 +677,34 @@ const CustomFormWizard = (props) => {
onChange={handleChange} onChange={handleChange}
placeholder="eg:852" placeholder="eg:852"
inputProps={{ inputProps={{
maxLength: 3,
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
} }
}, },
}} }}
sx={{width:'20%'}}
sx={{width:'25%'}}
/> />
<OutlinedInput <OutlinedInput
fullWidth
error={Boolean(touched.phone && errors.phone)} error={Boolean(touched.phone && errors.phone)}
id="phone-login" id="phone-login"
type="phone" type="phone"
value={values.phone} value={values.phone}
name="phone" name="phone"
{...register("phone")} {...register("phone")}
sx={{width:'80%'}}
onBlur={handleBlur} onBlur={handleBlur}
onChange={handleChange} onChange={handleChange}
placeholder="聯絡電話" placeholder="聯絡電話"
inputProps={{ inputProps={{
maxLength: 3,
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
} }
}, },
}} }}
sx={{width:'75%'}}
/> />
{touched.phone && errors.phone && ( {touched.phone && errors.phone && (
<FormHelperText error id="helper-text-phone-signup"> <FormHelperText error id="helper-text-phone-signup">
@@ -714,12 +714,6 @@ const CustomFormWizard = (props) => {
</Stack> </Stack>
</Stack> </Stack>
</Grid> </Grid>
{/* <Grid container>
<Grid item xs={2} md={2}>
</Grid>
<Grid item xs={10} md={10}>
</Grid>
</Grid> */}
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
@@ -729,7 +723,6 @@ const CustomFormWizard = (props) => {
<InputLabel htmlFor="fax-signup">傳真號碼</InputLabel> <InputLabel htmlFor="fax-signup">傳真號碼</InputLabel>
<Stack direction="row"> <Stack direction="row">
<OutlinedInput <OutlinedInput
fullWidth
error={Boolean(touched.fax && errors.fax)} error={Boolean(touched.fax && errors.fax)}
id="faxCountryCode-login" id="faxCountryCode-login"
type="faxCountryCode" type="faxCountryCode"
@@ -746,10 +739,9 @@ const CustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{width:'20%'}}
sx={{width:'25%'}}
/> />
<OutlinedInput <OutlinedInput
fullWidth
id="fax-login" id="fax-login"
type="fax" type="fax"
value={values.fax} value={values.fax}
@@ -765,6 +757,7 @@ const CustomFormWizard = (props) => {
} }
}, },
}} }}
sx={{width:'75%'}}
/> />
</Stack> </Stack>
</Stack> </Stack>


+ 1
- 1
src/pages/pnspsUserDetailPage/UserInformationCard.js View File

@@ -13,7 +13,7 @@ import {
subDivision4, subDivision4,
subDivision5, subDivision5,
subDivision6 subDivision6
} from "../pnspsUserSettingPage/DummyComboRecord";
} from "../pnspsUserSearchPage/DummyComboRecord";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import LoadingComponent from "../extra-pages/LoadingComponent"; import LoadingComponent from "../extra-pages/LoadingComponent";


src/pages/pnspsUserSettingPage/DummyComboRecord.js → src/pages/pnspsUserSearchPage/DummyComboRecord.js View File


+ 1
- 1
src/pages/pnspsUserSearchPage/UserSearchForm.js View File

@@ -17,7 +17,7 @@ import {
subDivision4, subDivision4,
subDivision5, subDivision5,
subDivision6 subDivision6
} from "pages/pnspsUserSettingPage/DummyComboRecord";
} from "pages/pnspsUserSearchPage/DummyComboRecord";
import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import * as React from "react"; import * as React from "react";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


+ 0
- 232
src/pages/pnspsUserSettingPage/UserSearchForm.js View File

@@ -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;

+ 0
- 137
src/pages/pnspsUserSettingPage/UserTable.js View File

@@ -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>
);
}

+ 0
- 89
src/pages/pnspsUserSettingPage/index.js View File

@@ -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;

+ 1
- 6
src/routes/SettingRoutes.js View File

@@ -7,8 +7,7 @@ import MainLayout from "../layout/MainLayout";
// render - login // render - login
const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage'))); const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage')));
const PasswordPolicyPage = Loadable(lazy(()=> import('pages/pnspsPasswordPolicyPage'))) const PasswordPolicyPage = Loadable(lazy(()=> import('pages/pnspsPasswordPolicyPage')))
const UserSettingPage = Loadable(lazy(()=>import ('pages/pnspsUserSettingPage/')));
const UserSearchPage = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage')));
const UserSearchPage = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage/')));
const UserMaintainPage = Loadable(lazy(() => import('pages/pnspsUserDetailPage'))); const UserMaintainPage = Loadable(lazy(() => import('pages/pnspsUserDetailPage')));
const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage'))); const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage')));
const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage'))); const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage')));
@@ -35,10 +34,6 @@ const SettingRoutes = {
path: '/user/:id', path: '/user/:id',
element: <UserMaintainPage /> element: <UserMaintainPage />
}, },
{
path: 'usersetting',
element: <UserSettingPage />
},
{ {
path: 'setting', path: 'setting',
element: <SettingPage /> element: <SettingPage />


Write Preview
Loading…
Cancel
Save