381 lines
12 KiB
JavaScript
381 lines
12 KiB
JavaScript
import React, { Component } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import {graphql, compose} from 'react-apollo';
|
|
import {getRolesQuery, updateUserMutation, getUsersQuery} from '../queries/queries';
|
|
|
|
//Material-ui
|
|
import PropTypes from 'prop-types';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import InputAdornment from '@material-ui/core/InputAdornment';
|
|
import TextField from '@material-ui/core/TextField';
|
|
import Visibility from '@material-ui/icons/Visibility';
|
|
import VisibilityOff from '@material-ui/icons/VisibilityOff';
|
|
import FormControl from '@material-ui/core/FormControl';
|
|
import InputLabel from '@material-ui/core/InputLabel';
|
|
import Input from '@material-ui/core/Input';
|
|
import classNames from 'classnames';
|
|
import Button from '@material-ui/core/Button';
|
|
import AddIcon from '@material-ui/icons/Add';
|
|
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 NoSsr from '@material-ui/core/NoSsr';
|
|
|
|
const styles = theme => ({
|
|
container: {
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
padding: 20
|
|
},
|
|
inputField: {
|
|
width: '60%',
|
|
marginLeft:'20%',
|
|
marginTop: 20
|
|
},
|
|
pField: {
|
|
width: '80%',
|
|
marginLeft:'10%',
|
|
marginTop: 20
|
|
},
|
|
checkbox: {
|
|
width: '25%',
|
|
marginLeft:'0%',
|
|
marginTop: 20
|
|
},
|
|
menu: {
|
|
width: 200,
|
|
},
|
|
divider: {
|
|
height: theme.spacing.unit * 2,
|
|
},
|
|
root: {
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
},
|
|
formControl: {
|
|
margin: theme.spacing.unit,
|
|
minWidth: 120,
|
|
},
|
|
selectEmpty: {
|
|
marginTop: theme.spacing.unit * 2,
|
|
},
|
|
});
|
|
|
|
class UserUpdate extends Component {
|
|
|
|
constructor(props){
|
|
|
|
super(props);
|
|
|
|
this.defaultValuesSet = false;
|
|
|
|
this.state = {
|
|
id: '',
|
|
firstName: '',
|
|
middleName: '',
|
|
lastName: '',
|
|
email: '',
|
|
emailVerified: 0,
|
|
isDeveloper: 0,
|
|
isTrader: 0,
|
|
isDataAnalyst: 0,
|
|
roleId: '1'
|
|
};
|
|
|
|
console.log("constructor ");
|
|
}
|
|
|
|
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){
|
|
console.log("submitting this>", this.state);
|
|
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"));
|
|
|
|
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));
|
|
|
|
console.log("update loggedInUser", user);
|
|
|
|
}
|
|
|
|
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 */
|
|
|
|
let select = ReactDOM.findDOMNode(this.refs.select);
|
|
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 "isDataAnalyst":
|
|
if (this.state.roleId === "4") {
|
|
this.setState({ roleId: "1"});
|
|
}
|
|
break;
|
|
default:
|
|
}
|
|
}
|
|
this.setState({ [e.target.id]: fieldValue})
|
|
}
|
|
|
|
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 })
|
|
}
|
|
|
|
rightCheckboxValue(stateValue) {
|
|
if (stateValue === 1) {return true} else {return false};
|
|
}
|
|
|
|
componentWillMount ()
|
|
{
|
|
console.log("componentWillUnmount");
|
|
console.log("state", this.state);
|
|
if (this.defaultValuesSet === false)
|
|
{
|
|
let userData = localStorage.getItem("loggedInUser");
|
|
|
|
if (userData === "undefined") { return;}
|
|
|
|
let user = JSON.parse(userData);
|
|
console.log("user", user);
|
|
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
|
|
});
|
|
console.log("setting defaults");
|
|
}
|
|
}
|
|
|
|
render(){
|
|
console.log("render");
|
|
console.log("props", this.props);
|
|
console.log("State", this.state);
|
|
|
|
const { classes } = this.props;
|
|
return(
|
|
<div className={classes.container}>
|
|
<NoSsr>
|
|
<form className={classes.container} onSubmit={this.submitForm.bind(this)}>
|
|
|
|
<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>
|
|
|
|
<TextField
|
|
id = "email"
|
|
type = "text"
|
|
value = {this.state.email}
|
|
label = "Email"
|
|
className={classes.inputField}
|
|
disabled>
|
|
</TextField>
|
|
|
|
<input id="emailVerified" type="checkbox" ref="emailVerified" className={classes.inputField} disabled/>
|
|
<label htmlFor="emailVerified" className={classes.inputField}>Email Verified</label>
|
|
|
|
<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 = "middleName"
|
|
type = "text"
|
|
value = {this.state.middleName}
|
|
label = "Middle Name"
|
|
className={classes.inputField}
|
|
onChange={(e)=>this.setState({middleName: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})}
|
|
>
|
|
</TextField>
|
|
|
|
<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"
|
|
/>
|
|
}
|
|
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"
|
|
/>
|
|
}
|
|
label="Data Analyst"
|
|
/>
|
|
</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>
|
|
|
|
<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}
|
|
>
|
|
{ this.displayRoles() }
|
|
</Select>
|
|
<FormHelperText>Select from the list your current role</FormHelperText>
|
|
</FormControl>
|
|
|
|
<p className={classes.pField}><button>Update</button></p>
|
|
|
|
|
|
</form>
|
|
</NoSsr>
|
|
</div>
|
|
|
|
|
|
);
|
|
}
|
|
}
|
|
|
|
export default compose(
|
|
graphql(getRolesQuery, {name: "getRolesQuery"}),
|
|
graphql(updateUserMutation, {name: "updateUserMutation"}),
|
|
withStyles(styles)
|
|
) (UserUpdate); // This technique binds more than one query to a single component.
|