From ae67f162026746917d3b33be64d444fc492b41b0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 13 Sep 2018 10:20:10 +0200 Subject: [PATCH] Update Form styles improved --- client/src/components/UserTabs.js | 2 + client/src/components/UserUpdate.js | 567 ++++++++++++++-------------- 2 files changed, 287 insertions(+), 282 deletions(-) diff --git a/client/src/components/UserTabs.js b/client/src/components/UserTabs.js index 24e2253f9..32a5d258c 100644 --- a/client/src/components/UserTabs.js +++ b/client/src/components/UserTabs.js @@ -30,6 +30,8 @@ const styles = theme => ({ flexGrow: 1, width: '100%', backgroundColor: theme.palette.background.paper, + padding: 0, + margin: 0, }, }); diff --git a/client/src/components/UserUpdate.js b/client/src/components/UserUpdate.js index 058e4988b..ccd61c0a1 100644 --- a/client/src/components/UserUpdate.js +++ b/client/src/components/UserUpdate.js @@ -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( - Loading roles - ); - } else { - return data.roles.map(role => { - return( - { role.name } - ); - }); - } + 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 ( + Loading roles + ) + } else { + return data.roles.map(role => { + return ( + { role.name } + ) + }) } + } - 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 ( + - const { classes } = this.props; - return( -
+
- +

This is your basic information we have gotten from the social identity provider you used to sign up. This information can not be changed.

-

This is your basic information we got from the social identity provider you used to sign up. This information can not be changed.

+ - - + - - - - } - label="Email Verified" + label='Email Verified' /> -

TComplete your profile with the following optional information. Providing your real name might help other users trust you more.

+

TComplete your profile with the following optional information. Providing your real name might help other users trust you more.

- this.setState({firstName:e.target.value})} - > - + this.setState({firstName: e.target.value})} + /> - this.setState({middleName:e.target.value})} - > - + this.setState({middleName: e.target.value})} + /> - this.setState({lastName:e.target.value})} - > - + this.setState({lastName: e.target.value})} + /> -

Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.

+

Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.

- - + + + + } + label='Developer' /> - } - label="Developer" - /> - - } - label="Trader" - /> - + + } - label="Data Analyst" + label='Trader' /> - + + + + } + label='Data Analyst' + /> + + + -

Your current role determines how the system is going to optimize its user interface to best serves your current needs.

+

Your current role determines how the system is going to optimize its user interface to best serves your current needs.

- - + + Current Role - } + displayEmpty + name='select' + className={classes.selectEmpty} > - { this.displayRoles() } - - Select from the list your current role - + { this.displayRoles() } + + Select from the list your current role + - - + + + + + + + -
- - - ); - } + ) + } } 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.