alex
/
PNSPS-frontend-MaterialUI
1
0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

add public

master
Anna Ho 2 年之前
父節點
bcd1d9e951
當前提交
e197b098b5
共有 5 個文件被更改，包括 498 次插入 和 47 次删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +53
    -47
      package-lock.json
  2. +219
    -0
      src/pages/pnspsUserSearchPage_Public/UserSearchForm_Public.js
  3. +137
    -0
      src/pages/pnspsUserSearchPage_Public/UserTable_Public.js
  4. +84
    -0
      src/pages/pnspsUserSearchPage_Public/index.js
  5. +5
    -0
      src/routes/SettingRoutes.js

+ 53
- 47
package-lock.json 查看文件

@@ -4080,13 +4080,28 @@
}
}
},
"node_modules/@material-ui/core/node_modules/@emotion/hash": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
"peer": true
"node_modules/@material-ui/pickers": {
"version": "3.3.10",
"resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
"integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
"deprecated": "Material UI Pickers v3 doesn't receive active development since January 2020. See the guide https://mui.com/material-ui/guides/pickers-migration/ to upgrade.",
"dependencies": {
"@babel/runtime": "^7.6.0",
"@date-io/core": "1.x",
"@types/styled-jsx": "^2.2.8",
"clsx": "^1.0.2",
"react-transition-group": "^4.0.0",
"rifm": "^0.7.0"
},
"peerDependencies": {
"@date-io/core": "^1.3.6",
"@material-ui/core": "^4.0.0",
"prop-types": "^15.6.0",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
}
},
"node_modules/@material-ui/core/node_modules/@material-ui/styles": {
"node_modules/@material-ui/styles": {
"version": "4.11.5",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
"integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
@@ -4128,7 +4143,19 @@
}
}
},
"node_modules/@material-ui/core/node_modules/@material-ui/system": {
"node_modules/@material-ui/styles/node_modules/@emotion/hash": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
"peer": true
},
"node_modules/@material-ui/styles/node_modules/csstype": {
"version": "2.6.21",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
"integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
"peer": true
},
"node_modules/@material-ui/system": {
"version": "4.12.2",
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
"integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
@@ -4157,51 +4184,12 @@
}
}
},
"node_modules/@material-ui/core/node_modules/@material-ui/utils": {
"version": "4.11.3",
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
"integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
},
"engines": {
"node": ">=8.0.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
}
},
"node_modules/@material-ui/core/node_modules/csstype": {
"node_modules/@material-ui/system/node_modules/csstype": {
"version": "2.6.21",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
"integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
"peer": true
},
"node_modules/@material-ui/pickers": {
"version": "3.3.10",
"resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
"integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
"deprecated": "Material UI Pickers v3 doesn't receive active development since January 2020. See the guide https://mui.com/material-ui/guides/pickers-migration/ to upgrade.",
"dependencies": {
"@babel/runtime": "^7.6.0",
"@date-io/core": "1.x",
"@types/styled-jsx": "^2.2.8",
"clsx": "^1.0.2",
"react-transition-group": "^4.0.0",
"rifm": "^0.7.0"
},
"peerDependencies": {
"@date-io/core": "^1.3.6",
"@material-ui/core": "^4.0.0",
"prop-types": "^15.6.0",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
}
},
"node_modules/@material-ui/types": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
@@ -4216,6 +4204,24 @@
}
}
},
"node_modules/@material-ui/utils": {
"version": "4.11.3",
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
"integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
},
"engines": {
"node": ">=8.0.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
}
},
"node_modules/@motionone/animation": {
"version": "10.15.1",
"resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz",


+ 219
- 0
src/pages/pnspsUserSearchPage_Public/UserSearchForm_Public.js 查看文件

@@ -0,0 +1,219 @@
// material-ui
import {
Button,
CardContent, FormControlLabel,
Grid, TextField,
Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useForm} from "react-hook-form";

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_Public = ({applySearch}) => {

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 = {
username: data.userName,
fullName: data.fullName,
subDivision: subDivision,
email: data.email,
phone: data.phone,
isLotusNoteUser: isLotusNoteUser,
locked: locked,
};
applySearch(temp);
};

useEffect(() => {
if(division != null){
setSubDivision(subDivisionArray[division.type-1][0]);
}

}, [division]);

function resetForm(){
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}}>
<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_Public;

+ 137
- 0
src/pages/pnspsUserSearchPage_Public/UserTable_Public.js 查看文件

@@ -0,0 +1,137 @@
// 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_Public({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>
);
}

+ 84
- 0
src/pages/pnspsUserSearchPage_Public/index.js 查看文件

@@ -0,0 +1,84 @@
// material-ui
import {
Grid, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import SearchForm from "./UserSearchForm_Public";
import EventTable from "./UserTable_Public";
import {useEffect, useState} from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {GET_USER_PATH} from "../../utils/ApiPathConst";
import * as React from "react";
import LoadingComponent from "../extra-pages/LoadingComponent";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const UserSearchPage_Public = () => {

const [record,setRecord] = useState([]);
const [searchCriteria, setSearchCriteria] = useState({});
const [onReady, setOnReady] = useState(false);

useEffect(() => {
getUserList();
}, []);

useEffect(() => {
setOnReady(true);
}, [record]);

useEffect(() => {
getUserList();
}, [searchCriteria]);

function getUserList(){
axios.get(`${apiPath}${GET_USER_PATH}`,
{params: searchCriteria}
)
.then((response) => {
if (response.status === 200) {
setRecord(response.data);
}
})
.catch(error => {
console.log(error);
return false;
});
}

function applySearch(input) {
setSearchCriteria(input);
}

return (
!onReady ?
<LoadingComponent/>
:
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">View User</Typography>
</Grid>

{/*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={record}
/>
</MainCard>
</Grid>

</Grid>

);
};

export default UserSearchPage_Public;

+ 5
- 0
src/routes/SettingRoutes.js 查看文件

@@ -9,6 +9,7 @@ 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')));
@@ -31,6 +32,10 @@ const SettingRoutes = {
path: 'userSearchview',
element: <UserSearchPage />
},
{
path: 'publicUserSearchview',
element: <UserSearchPage_Public />
},
{
path: '/user/:id',
element: <UserMaintainPage />


Write Preview
Loading…
取消
儲存