Update Form styles improved
This commit is contained in:
Luis Fernando Molina committed
1 parent
e055ded6dc
commit
ae67f16202
2 files changed
+287
-282
No files matched your search
@@ -30,6 +30,8 @@ const styles = theme => ({
|
||||
flexGrow: 1,
|
||||
width: '100%',
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
+285
-282
@@ -1,359 +1,362 @@
|
||||
import React, { Component } from 'react';
|
||||
import {graphql, compose} from 'react-apollo';
|
||||
import {getRolesQuery, updateUserMutation, getUsersQuery} from '../queries/queries';
|
||||
import React, { Component } from 'react'
|
||||
import {graphql, compose} from 'react-apollo'
|
||||
import {getRolesQuery, updateUserMutation, getUsersQuery} from '../queries/queries'
|
||||
|
||||
//Material-ui
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
import InputLabel from '@material-ui/core/InputLabel';
|
||||
import Input from '@material-ui/core/Input';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
import Checkbox from '@material-ui/core/Checkbox';
|
||||
import FormGroup from '@material-ui/core/FormGroup';
|
||||
import Select from '@material-ui/core/Select';
|
||||
import FormHelperText from '@material-ui/core/FormHelperText';
|
||||
// Material-ui
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import MenuItem from '@material-ui/core/MenuItem'
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
import FormControl from '@material-ui/core/FormControl'
|
||||
import InputLabel from '@material-ui/core/InputLabel'
|
||||
import Input from '@material-ui/core/Input'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel'
|
||||
import Checkbox from '@material-ui/core/Checkbox'
|
||||
import FormGroup from '@material-ui/core/FormGroup'
|
||||
import Select from '@material-ui/core/Select'
|
||||
import FormHelperText from '@material-ui/core/FormHelperText'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
width: '50%',
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginLeft: '25%',
|
||||
marginTop: '2%'
|
||||
},
|
||||
inputField: {
|
||||
width: '60%',
|
||||
marginLeft:'20%',
|
||||
marginTop: 20
|
||||
},
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 25
|
||||
},
|
||||
pField: {
|
||||
width: '80%',
|
||||
marginLeft:'10%',
|
||||
marginTop: 40
|
||||
},
|
||||
width: '80%',
|
||||
marginLeft: '10%',
|
||||
marginTop: 40
|
||||
},
|
||||
checkbox: {
|
||||
width: '25%',
|
||||
marginLeft:'0%',
|
||||
marginTop: 20
|
||||
},
|
||||
width: 150,
|
||||
marginLeft: '0%',
|
||||
marginTop: 20
|
||||
},
|
||||
selectEmpty: {
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
marginTop: theme.spacing.unit * 2
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing.unit,
|
||||
marginLeft:'80%',
|
||||
},
|
||||
});
|
||||
margin: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 3
|
||||
}
|
||||
})
|
||||
|
||||
class UserUpdate extends Component {
|
||||
|
||||
constructor(props){
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
super(props);
|
||||
this.defaultValuesSet = false
|
||||
|
||||
this.defaultValuesSet = false;
|
||||
|
||||
this.state = {
|
||||
id: '',
|
||||
firstName: '',
|
||||
middleName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
emailVerified: 0,
|
||||
isDeveloper: 0,
|
||||
isTrader: 0,
|
||||
isDataAnalyst: 0,
|
||||
roleId: '1'
|
||||
};
|
||||
this.state = {
|
||||
id: '',
|
||||
firstName: '',
|
||||
middleName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
emailVerified: 0,
|
||||
isDeveloper: 0,
|
||||
isTrader: 0,
|
||||
isDataAnalyst: 0,
|
||||
roleId: '1'
|
||||
}
|
||||
}
|
||||
|
||||
displayRoles(){
|
||||
var data = this.props.getRolesQuery; // When there is more than one query binded to a single componente 'data' is replaced by thename of the query given below at the binding operation.
|
||||
if(data.loading){
|
||||
return(
|
||||
<MenuItem><em>Loading roles</em></MenuItem>
|
||||
);
|
||||
} else {
|
||||
return data.roles.map(role => {
|
||||
return(
|
||||
<MenuItem key={ role.id } value={role.id}>{ role.name }</MenuItem>
|
||||
);
|
||||
});
|
||||
}
|
||||
displayRoles () {
|
||||
var data = this.props.getRolesQuery // When there is more than one query binded to a single componente 'data' is replaced by thename of the query given below at the binding operation.
|
||||
if (data.loading) {
|
||||
return (
|
||||
<MenuItem><em>Loading roles</em></MenuItem>
|
||||
)
|
||||
} else {
|
||||
return data.roles.map(role => {
|
||||
return (
|
||||
<MenuItem key={role.id} value={role.id}>{ role.name }</MenuItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
submitForm(e){
|
||||
|
||||
e.preventDefault();
|
||||
this.props.updateUserMutation({
|
||||
variables: {
|
||||
id: this.state.id,
|
||||
firstName: this.state.firstName,
|
||||
middleName: this.state.middleName,
|
||||
lastName: this.state.lastName,
|
||||
isDeveloper: this.state.isDeveloper,
|
||||
isTrader: this.state.isTrader,
|
||||
isDataAnalyst: this.state.isDataAnalyst,
|
||||
roleId: this.state.roleId
|
||||
},
|
||||
refetchQueries: [{ query: getUsersQuery}] // This allow us to re run whatever queries are necesary after the mutation.
|
||||
});
|
||||
submitForm (e) {
|
||||
e.preventDefault()
|
||||
this.props.updateUserMutation({
|
||||
variables: {
|
||||
id: this.state.id,
|
||||
firstName: this.state.firstName,
|
||||
middleName: this.state.middleName,
|
||||
lastName: this.state.lastName,
|
||||
isDeveloper: this.state.isDeveloper,
|
||||
isTrader: this.state.isTrader,
|
||||
isDataAnalyst: this.state.isDataAnalyst,
|
||||
roleId: this.state.roleId
|
||||
},
|
||||
refetchQueries: [{ query: getUsersQuery}] // This allow us to re run whatever queries are necesary after the mutation.
|
||||
})
|
||||
|
||||
/* Before we are done, we need to update the state of the local storage. */
|
||||
|
||||
let user = JSON.parse(localStorage.getItem("loggedInUser"));
|
||||
let user = JSON.parse(localStorage.getItem('loggedInUser'))
|
||||
|
||||
user.firstName = this.state.firstName;
|
||||
user.middleName = this.state.middleName;
|
||||
user.lastName = this.state.lastName;
|
||||
user.firstName = this.state.firstName;
|
||||
user.isDeveloper = this.state.isDeveloper;
|
||||
user.isTrader = this.state.isTrader;
|
||||
user.isDataAnalyst = this.state.isDataAnalyst;
|
||||
user.role.id = this.state.roleId;
|
||||
user.firstName = this.state.firstName
|
||||
user.middleName = this.state.middleName
|
||||
user.lastName = this.state.lastName
|
||||
user.firstName = this.state.firstName
|
||||
user.isDeveloper = this.state.isDeveloper
|
||||
user.isTrader = this.state.isTrader
|
||||
user.isDataAnalyst = this.state.isDataAnalyst
|
||||
user.role.id = this.state.roleId
|
||||
|
||||
localStorage.setItem("loggedInUser", JSON.stringify(user));
|
||||
localStorage.setItem('loggedInUser', JSON.stringify(user))
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
handleCheckBoxes(e){
|
||||
let fieldValue;
|
||||
if (e.target.checked === true) {
|
||||
fieldValue = 1;
|
||||
} else {
|
||||
fieldValue = 0;
|
||||
handleCheckBoxes (e) {
|
||||
let fieldValue
|
||||
if (e.target.checked === true) {
|
||||
fieldValue = 1
|
||||
} else {
|
||||
fieldValue = 0
|
||||
|
||||
/* When the user unchecks one of the checkboxes, we need to make sure that that Role is not the one selected at the SELECT,
|
||||
and if it is, then we need to automatically select another one */
|
||||
|
||||
switch (e.target.id) {
|
||||
case "isDeveloper":
|
||||
if (this.state.roleId === "2") {
|
||||
this.setState({ roleId: "1"});
|
||||
}
|
||||
break;
|
||||
switch (e.target.id) {
|
||||
case 'isDeveloper':
|
||||
if (this.state.roleId === '2') {
|
||||
this.setState({ roleId: '1'})
|
||||
}
|
||||
break
|
||||
|
||||
case "isTrader":
|
||||
if (this.state.roleId === "3") {
|
||||
this.setState({ roleId: "1"});
|
||||
}
|
||||
break;
|
||||
case 'isTrader':
|
||||
if (this.state.roleId === '3') {
|
||||
this.setState({ roleId: '1'})
|
||||
}
|
||||
break
|
||||
|
||||
case "isDataAnalyst":
|
||||
if (this.state.roleId === "4") {
|
||||
this.setState({ roleId: "1"});
|
||||
}
|
||||
break;
|
||||
default:
|
||||
}
|
||||
case 'isDataAnalyst':
|
||||
if (this.state.roleId === '4') {
|
||||
this.setState({ roleId: '1'})
|
||||
}
|
||||
break
|
||||
default:
|
||||
}
|
||||
this.setState({ [e.target.id]: fieldValue})
|
||||
}
|
||||
this.setState({ [e.target.id]: fieldValue})
|
||||
}
|
||||
|
||||
handleSelect(e){
|
||||
|
||||
handleSelect (e) {
|
||||
/*
|
||||
Whenever the select component changes its value, we need to activate the type of role selected.
|
||||
To do so, we change the state of the corresponding type of role here.
|
||||
*/
|
||||
|
||||
switch (e.target.value) {
|
||||
case "2":
|
||||
this.setState({ isDeveloper: 1})
|
||||
break;
|
||||
case "3":
|
||||
this.setState({ isTrader: 1})
|
||||
break;
|
||||
case "4":
|
||||
this.setState({ isDataAnalyst: 1})
|
||||
break;
|
||||
default:
|
||||
}
|
||||
|
||||
this.setState({ roleId:e.target.value })
|
||||
switch (e.target.value) {
|
||||
case '2':
|
||||
this.setState({ isDeveloper: 1})
|
||||
break
|
||||
case '3':
|
||||
this.setState({ isTrader: 1})
|
||||
break
|
||||
case '4':
|
||||
this.setState({ isDataAnalyst: 1})
|
||||
break
|
||||
default:
|
||||
}
|
||||
|
||||
rightCheckboxValue(stateValue) {
|
||||
if (stateValue === 1)
|
||||
return true
|
||||
else
|
||||
return false;
|
||||
}
|
||||
this.setState({ roleId: e.target.value })
|
||||
}
|
||||
|
||||
componentWillMount ()
|
||||
{
|
||||
if (this.defaultValuesSet === false)
|
||||
{
|
||||
let userData = localStorage.getItem("loggedInUser");
|
||||
rightCheckboxValue (stateValue) {
|
||||
if (stateValue === 1) {
|
||||
return true
|
||||
} else { return false }
|
||||
}
|
||||
|
||||
if (userData === "undefined") { return;}
|
||||
componentWillMount () {
|
||||
if (this.defaultValuesSet === false) {
|
||||
let userData = localStorage.getItem('loggedInUser')
|
||||
|
||||
let user = JSON.parse(userData);
|
||||
this.defaultValuesSet= true;
|
||||
if (userData === 'undefined') { return }
|
||||
|
||||
this.setState({
|
||||
id: user.id,
|
||||
alias: user.alias,
|
||||
email: user.email,
|
||||
emailVerified: user.emailVerified,
|
||||
firstName: user.firstName,
|
||||
middleName: user.middleName,
|
||||
lastName: user.lastName,
|
||||
isDeveloper: user.isDeveloper,
|
||||
isTrader: user.isTrader,
|
||||
isDataAnalyst: user.isDataAnalyst,
|
||||
roleId: user.role.id
|
||||
});
|
||||
let user = JSON.parse(userData)
|
||||
this.defaultValuesSet = true
|
||||
|
||||
this.setState({
|
||||
id: user.id,
|
||||
alias: user.alias,
|
||||
email: user.email,
|
||||
emailVerified: user.emailVerified,
|
||||
firstName: user.firstName,
|
||||
middleName: user.middleName,
|
||||
lastName: user.lastName,
|
||||
isDeveloper: user.isDeveloper,
|
||||
isTrader: user.isTrader,
|
||||
isDataAnalyst: user.isDataAnalyst,
|
||||
roleId: user.role.id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
|
||||
const { classes } = this.props;
|
||||
return(
|
||||
<div>
|
||||
<form onSubmit={this.submitForm.bind(this)}>
|
||||
|
||||
<form className={classes.container} onSubmit={this.submitForm.bind(this)}>
|
||||
<p className={classes.pField}>This is your basic information we have gotten from the social identity provider you used to sign up. This information can not be changed.</p>
|
||||
|
||||
<p className={classes.pField}>This is your basic information we got from the social identity provider you used to sign up. This information can not be changed.</p>
|
||||
<TextField
|
||||
id='alias'
|
||||
type='text'
|
||||
value={this.state.alias}
|
||||
label='Alias'
|
||||
className={classes.inputField}
|
||||
disabled />
|
||||
|
||||
<TextField
|
||||
id = "alias"
|
||||
type = "text"
|
||||
value = {this.state.alias}
|
||||
label="Alias"
|
||||
className={classes.inputField}
|
||||
disabled>
|
||||
</TextField>
|
||||
<TextField
|
||||
id='email'
|
||||
type='text'
|
||||
value={this.state.email}
|
||||
label='Email'
|
||||
className={classes.inputField}
|
||||
disabled />
|
||||
|
||||
<TextField
|
||||
id = "email"
|
||||
type = "text"
|
||||
value = {this.state.email}
|
||||
label = "Email"
|
||||
className={classes.inputField}
|
||||
disabled>
|
||||
</TextField>
|
||||
|
||||
<FormControlLabel
|
||||
disabled
|
||||
className={classes.inputField}
|
||||
control={
|
||||
<Checkbox
|
||||
id="emailVerified"
|
||||
checked={this.rightCheckboxValue(this.state.emailVerified)}
|
||||
color="primary"
|
||||
<FormControlLabel
|
||||
disabled
|
||||
className={classes.inputField}
|
||||
control={
|
||||
<Checkbox
|
||||
id='emailVerified'
|
||||
checked={this.rightCheckboxValue(this.state.emailVerified)}
|
||||
color='primary'
|
||||
/>
|
||||
}
|
||||
label="Email Verified"
|
||||
label='Email Verified'
|
||||
/>
|
||||
|
||||
<p className={classes.pField}>TComplete your profile with the following optional information. Providing your real name might help other users trust you more.</p>
|
||||
<p className={classes.pField}>TComplete your profile with the following optional information. Providing your real name might help other users trust you more.</p>
|
||||
|
||||
<TextField
|
||||
id = "firstName"
|
||||
type = "text"
|
||||
value = {this.state.firstName}
|
||||
label = "First Name"
|
||||
className={classes.inputField}
|
||||
onChange={(e)=>this.setState({firstName:e.target.value})}
|
||||
>
|
||||
</TextField>
|
||||
<TextField
|
||||
id='firstName'
|
||||
type='text'
|
||||
value={this.state.firstName}
|
||||
label='First Name'
|
||||
className={classes.inputField}
|
||||
onChange={(e) => this.setState({firstName: e.target.value})}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id = "middleName"
|
||||
type = "text"
|
||||
value = {this.state.middleName}
|
||||
label = "Middle Name"
|
||||
className={classes.inputField}
|
||||
onChange={(e)=>this.setState({middleName:e.target.value})}
|
||||
>
|
||||
</TextField>
|
||||
<TextField
|
||||
id='middleName'
|
||||
type='text'
|
||||
value={this.state.middleName}
|
||||
label='Middle Name'
|
||||
className={classes.inputField}
|
||||
onChange={(e) => this.setState({middleName: e.target.value})}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id = "lastName"
|
||||
type = "text"
|
||||
value = {this.state.lastName}
|
||||
label = "First Name"
|
||||
className={classes.inputField}
|
||||
onChange={(e)=>this.setState({lastName:e.target.value})}
|
||||
>
|
||||
</TextField>
|
||||
<TextField
|
||||
id='lastName'
|
||||
type='text'
|
||||
value={this.state.lastName}
|
||||
label='First Name'
|
||||
className={classes.inputField}
|
||||
onChange={(e) => this.setState({lastName: e.target.value})}
|
||||
/>
|
||||
|
||||
<p className={classes.pField}>Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.</p>
|
||||
<p className={classes.pField}>Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.</p>
|
||||
|
||||
<FormGroup row className={classes.inputField}>
|
||||
<FormControlLabel
|
||||
className={classes.checkbox}
|
||||
control={
|
||||
<Checkbox
|
||||
id="isDeveloper"
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isDeveloper)}
|
||||
color="primary"
|
||||
<FormGroup row className={classes.inputField}>
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
<FormControlLabel
|
||||
className={classes.checkbox}
|
||||
control={
|
||||
<Checkbox
|
||||
id='isDeveloper'
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isDeveloper)}
|
||||
color='primary'
|
||||
/>
|
||||
}
|
||||
label='Developer'
|
||||
/>
|
||||
}
|
||||
label="Developer"
|
||||
/>
|
||||
<FormControlLabel
|
||||
className={classes.checkbox}
|
||||
control={
|
||||
<Checkbox
|
||||
id="isTrader"
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isTrader)}
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
label="Trader"
|
||||
/>
|
||||
<FormControlLabel
|
||||
className={classes.checkbox}
|
||||
control={
|
||||
<Checkbox
|
||||
id="isDataAnalyst"
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isDataAnalyst)}
|
||||
color="primary"
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormControlLabel
|
||||
className={classes.checkbox}
|
||||
control={
|
||||
<Checkbox
|
||||
id='isTrader'
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isTrader)}
|
||||
color='primary'
|
||||
/>
|
||||
}
|
||||
label="Data Analyst"
|
||||
label='Trader'
|
||||
/>
|
||||
</FormGroup>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormControlLabel
|
||||
className={classes.checkbox}
|
||||
control={
|
||||
<Checkbox
|
||||
id='isDataAnalyst'
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isDataAnalyst)}
|
||||
color='primary'
|
||||
/>
|
||||
}
|
||||
label='Data Analyst'
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</FormGroup>
|
||||
|
||||
<p className={classes.pField}>Your current role determines how the system is going to optimize its user interface to best serves your current needs.</p>
|
||||
<p className={classes.pField}>Your current role determines how the system is going to optimize its user interface to best serves your current needs.</p>
|
||||
|
||||
<FormControl className={classes.inputField}>
|
||||
<InputLabel shrink htmlFor="age-label-placeholder">
|
||||
<FormControl className={classes.inputField}>
|
||||
<InputLabel shrink htmlFor='age-label-placeholder'>
|
||||
Current Role
|
||||
</InputLabel>
|
||||
<Select
|
||||
id="select"
|
||||
ref="select"
|
||||
value={this.state.roleId}
|
||||
onChange={this.handleSelect.bind(this)}
|
||||
input={<Input name="Role" id="role-label-placeholder" />}
|
||||
displayEmpty
|
||||
name="select"
|
||||
className={classes.selectEmpty}
|
||||
<Select
|
||||
id='select'
|
||||
ref='select'
|
||||
value={this.state.roleId}
|
||||
onChange={this.handleSelect.bind(this)}
|
||||
input={<Input name='Role' id='role-label-placeholder' />}
|
||||
displayEmpty
|
||||
name='select'
|
||||
className={classes.selectEmpty}
|
||||
>
|
||||
{ this.displayRoles() }
|
||||
</Select>
|
||||
<FormHelperText>Select from the list your current role</FormHelperText>
|
||||
</FormControl>
|
||||
{ this.displayRoles() }
|
||||
</Select>
|
||||
<FormHelperText>Select from the list your current role</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<Button variant="contained" color="primary" className={classes.button} onClick={this.submitForm.bind(this)}>
|
||||
Update
|
||||
</Button>
|
||||
</form>
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
<Button variant='contained' color='primary' className={classes.button} onClick={this.submitForm.bind(this)}>Update</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</Paper>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
graphql(getRolesQuery, {name: "getRolesQuery"}),
|
||||
graphql(updateUserMutation, {name: "updateUserMutation"}),
|
||||
graphql(getRolesQuery, {name: 'getRolesQuery'}),
|
||||
graphql(updateUserMutation, {name: 'updateUserMutation'}),
|
||||
withStyles(styles)
|
||||
) (UserUpdate); // This technique binds more than one query to a single component.
|
||||
)(UserUpdate) // This technique binds more than one query to a single component.
|
||||
Reference in new issue
Block a user