Rick Watson
5 years ago
6 changed files with 195 additions and 0 deletions
-
2interface/src/AppRouting.js
-
7interface/src/components/MenuAppBar.js
-
1interface/src/constants/Endpoints.js
-
33interface/src/containers/ManageUsers.js
-
15interface/src/containers/UserConfiguration.js
-
137interface/src/forms/ManageUsersForm.js
@ -0,0 +1,33 @@ |
|||
import React, { Component } from 'react'; |
|||
|
|||
import { USERS_ENDPOINT } from '../constants/Endpoints'; |
|||
import {restComponent} from '../components/RestComponent'; |
|||
import SectionContent from '../components/SectionContent'; |
|||
import ManageUsersForm from '../forms/ManageUsersForm'; |
|||
|
|||
class ManageUsers extends Component { |
|||
|
|||
componentDidMount() { |
|||
this.props.loadData(); |
|||
} |
|||
|
|||
render() { |
|||
const { data, fetched, errorMessage } = this.props; |
|||
return ( |
|||
<SectionContent title="Manage Users"> |
|||
<ManageUsersForm |
|||
users={data} |
|||
usersFetched={fetched} |
|||
errorMessage={errorMessage} |
|||
onSubmit={this.props.saveData} |
|||
onReset={this.props.loadData} |
|||
handleValueChange={this.props.handleValueChange} |
|||
handleCheckboxChange={this.props.handleCheckboxChange} |
|||
/> |
|||
</SectionContent> |
|||
) |
|||
} |
|||
|
|||
} |
|||
|
|||
export default restComponent(USERS_ENDPOINT, ManageUsers); |
@ -0,0 +1,15 @@ |
|||
import React, { Component } from 'react'; |
|||
import MenuAppBar from '../components/MenuAppBar'; |
|||
import ManageUsers from './ManageUsers'; |
|||
|
|||
class UserConfiguration extends Component { |
|||
render() { |
|||
return ( |
|||
<MenuAppBar sectionTitle="User Configuration"> |
|||
<ManageUsers /> |
|||
</MenuAppBar> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default UserConfiguration |
@ -0,0 +1,137 @@ |
|||
import React from 'react'; |
|||
import PropTypes from 'prop-types'; |
|||
|
|||
import { ValidatorForm } from 'react-material-ui-form-validator'; |
|||
|
|||
import { withStyles } from '@material-ui/core/styles'; |
|||
import Button from '@material-ui/core/Button'; |
|||
import LinearProgress from '@material-ui/core/LinearProgress'; |
|||
import Typography from '@material-ui/core/Typography'; |
|||
|
|||
import Table from '@material-ui/core/Table'; |
|||
import TableBody from '@material-ui/core/TableBody'; |
|||
import TableCell from '@material-ui/core/TableCell'; |
|||
import TableHead from '@material-ui/core/TableHead'; |
|||
import TableRow from '@material-ui/core/TableRow'; |
|||
import IconButton from '@material-ui/core/IconButton'; |
|||
|
|||
import EditIcon from '@material-ui/icons/Edit'; |
|||
import DeleteIcon from '@material-ui/icons/Delete'; |
|||
import Chip from '@material-ui/core/Chip'; |
|||
|
|||
const styles = theme => ({ |
|||
loadingSettings: { |
|||
margin: theme.spacing.unit, |
|||
}, |
|||
loadingSettingsDetails: { |
|||
margin: theme.spacing.unit * 4, |
|||
textAlign: "center" |
|||
}, |
|||
switchControl: { |
|||
width: "100%", |
|||
marginTop: theme.spacing.unit * 2, |
|||
marginBottom: theme.spacing.unit |
|||
}, |
|||
textField: { |
|||
width: "100%" |
|||
}, |
|||
button: { |
|||
marginRight: theme.spacing.unit * 2, |
|||
marginTop: theme.spacing.unit * 2, |
|||
}, |
|||
chip: { |
|||
margin: theme.spacing.unit, |
|||
}, |
|||
table: { |
|||
'& td, & th': {padding: theme.spacing.unit} |
|||
} |
|||
}); |
|||
|
|||
class ManageUsersForm extends React.Component { |
|||
|
|||
render() { |
|||
const { classes, users, usersFetched, errorMessage, onSubmit, onReset } = this.props; |
|||
return ( |
|||
<div> |
|||
{ |
|||
!usersFetched ? |
|||
|
|||
<div className={classes.loadingSettings}> |
|||
<LinearProgress className={classes.loadingSettingsDetails} /> |
|||
<Typography variant="h4" className={classes.loadingSettingsDetails}> |
|||
Loading... |
|||
</Typography> |
|||
</div> |
|||
|
|||
: users ? |
|||
|
|||
<ValidatorForm onSubmit={onSubmit}> |
|||
<Table className={classes.table}> |
|||
<TableHead> |
|||
<TableRow> |
|||
<TableCell>Username</TableCell> |
|||
<TableCell>Password</TableCell> |
|||
<TableCell align="center">Role(s)</TableCell> |
|||
<TableCell align="center">Action</TableCell> |
|||
</TableRow> |
|||
</TableHead> |
|||
<TableBody> |
|||
{users.users.map(user => ( |
|||
<TableRow key={user.username}> |
|||
<TableCell component="th" scope="row"> |
|||
{user.username} |
|||
</TableCell> |
|||
<TableCell>{user.password}</TableCell> |
|||
<TableCell align="center"> |
|||
<Chip label={user.role} className={classes.chip} /> |
|||
</TableCell> |
|||
<TableCell align="center"> |
|||
<IconButton aria-label="Delete"> |
|||
<DeleteIcon /> |
|||
</IconButton> |
|||
<IconButton aria-label="Edit"> |
|||
<EditIcon /> |
|||
</IconButton> |
|||
</TableCell> |
|||
</TableRow> |
|||
))} |
|||
</TableBody> |
|||
</Table> |
|||
|
|||
<Button variant="contained" color="primary" className={classes.button} type="submit"> |
|||
Save |
|||
</Button> |
|||
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}> |
|||
Reset |
|||
</Button> |
|||
|
|||
</ValidatorForm> |
|||
|
|||
: |
|||
|
|||
<div className={classes.loadingSettings}> |
|||
<Typography variant="h4" className={classes.loadingSettingsDetails}> |
|||
{errorMessage} |
|||
</Typography> |
|||
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}> |
|||
Reset |
|||
</Button> |
|||
</div> |
|||
} |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
ManageUsersForm.propTypes = { |
|||
classes: PropTypes.object.isRequired, |
|||
users: PropTypes.object, |
|||
usersFetched: PropTypes.bool.isRequired, |
|||
errorMessage: PropTypes.string, |
|||
onSubmit: PropTypes.func.isRequired, |
|||
onReset: PropTypes.func.isRequired, |
|||
handleValueChange: PropTypes.func.isRequired, |
|||
handleCheckboxChange: PropTypes.func.isRequired, |
|||
}; |
|||
|
|||
export default withStyles(styles)(ManageUsersForm); |
Write
Preview
Loading…
Cancel
Save
Reference in new issue