Materialize correctly set uup

client/public/index.html

@@ -34,17 +34,27 @@
     -->
         <!-- font awesome -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+
+    <!--The following 3 tags are needed for Materialize to work.-->
     <!--Import Google Icon Font-->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <!-- Compiled and minified CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
-    <title>React App</title>
+    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!--Import materialize.css-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
+    <!--Let browser know website is optimized for mobile-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+    <title>Advanced Algos - Users Module</title>
 
   </head>
   <body>
+    <!--Import jQuery before materialize.js-->
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
+
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
+
     <div id="root"></div>
     <!--
       This HTML file is a template.

client/src/components/AddUser.js

@@ -9,6 +9,9 @@ class AddUser extends Component {
       alias: '',
       firstName: '',
       lastName: '',
+      isDeveloper: '',
+      isTrader: '',
+      isDataAnalyst: '',
       idRole: ''
     };
   }
@@ -29,6 +32,9 @@ class AddUser extends Component {
           alias: this.state.alias,
           firstName: this.state.firstName,
           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.
@@ -36,28 +42,57 @@ class AddUser extends Component {
     }
     render(){
         return(
-            <form id="add-user" onSubmit={this.submitForm.bind(this)}>
-                <div className="field">
-                    <label>Alias:</label>
-                    <input type="text" onChange={ (e) => this.setState({ alias:e.target.value})}/>
+          <div className="row">
+              <form className="col s12" onSubmit={this.submitForm.bind(this)}>
+                <div className="row">
+                  <div className="input-field col s6">
+                    <input id="alias" type="text" className="validate" onChange={ (e) => this.setState({ alias:e.target.value})}/>
+                    <label htmlFor="alias">Alias</label>
+                  </div>
                 </div>
-                <div className="field">
-                    <label>First Name:</label>
-                    <input type="text" onChange={ (e) => this.setState({ firstName:e.target.value})}/>
+                <div className="row">
+                  <div className="input-field col s6">
+                    <input id="firstName" type="text" className="validate" onChange={ (e) => this.setState({ firstName:e.target.value})}/>
+                    <label htmlFor="firstName">First Name</label>
+                  </div>
                 </div>
-                <div className="field">
-                    <label>Last Name:</label>
-                    <input type="text" onChange={ (e) => this.setState({ lastName:e.target.value})}/>
+                <div className="row">
+                  <div className="input-field col s6">
+                    <input id="last_name" type="text" className="validate" onChange={ (e) => this.setState({ lastName:e.target.value})}/>
+                    <label htmlFor="last_name">Last Name</label>
+                  </div>
                 </div>
-                <div className="field">
-                    <label>Main Role:</label>
-                    <select onChange={ (e) => this.setState({ roleId:e.target.value})}>                        
+                <div className="row">
+                  <div className="input-field col s12">
+                    <input id="developer" type="checkbox" onChange={ (e) => this.setState({ isDeveloper:e.target.value})}/>
+                    <label htmlFor="developer">Developer</label>
+                  </div>
+                </div>
+                <div className="row">
+                  <div className="input-field col s12">
+                    <input id="trader" type="checkbox" onChange={ (e) => this.setState({ isTrader:e.target.value})}/>
+                    <label htmlFor="trader">Trader</label>
+                  </div>
+                </div>
+                <div className="row">
+                  <div className="input-field col s12">
+                    <input id="dataAnalyst" type="checkbox" onChange={ (e) => this.setState({ isDataAnalyst:e.target.value})}/>
+                    <label htmlFor="dataAnalyst">Data Analyst</label>
+                  </div>
+                </div>
+                <div className="row">
+                    <select id="role" onChange={ (e) => this.setState({ roleId:e.target.value})}>
                         { this.displayRoles() }
                     </select>
+                    <label htmlFor="role">Current Role:</label>
                 </div>
-                <button>+</button>
+                <div className="row">
+                    <button>+</button>
+                </div>
+              </form>
+            </div>
+
 
-            </form>
         );
     }
 }

client/src/components/Footer.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { NavLink, withRouter } from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
 
 const Footer = () => {
   return (

client/src/index.css

@@ -31,31 +31,6 @@
   color: #880E4F;
 }
 
-form{
-    background: #fff;
-    padding: 20px;
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 50%;
-}
-
-form .field{
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 10px;
-}
-
-form label{
-    text-align: right;
-    padding: 6px;
-}
-
-form input, form select{
-    margin: 4px 0;
-    padding: 6px;
-    box-sizing: border-box;
-}
 
 form button{
     color: #fff;

client/src/queries/queries.js

@@ -36,8 +36,8 @@ const getRolesQuery = gql`
 `
 
 const addUserMutation = gql`
-mutation($alias: String!, $firstName:String, $lastName:String, $roleId:String!) {
-    addUser (alias: $alias, firstName:$firstName, lastName: $lastName, roleId: $roleId){
+mutation($alias: String!, $firstName:String, $lastName:String, $isDeveloper:String, $isTrader:String, $isDataAnalyst:String, $roleId:String!) {
+    addUser (alias: $alias, firstName:$firstName, lastName: $lastName, isDeveloper: $isDeveloper, isTrader: $isTrader, isDataAnalyst: $isDataAnalyst, roleId: $roleId){
       id
       alias
     }

server/models/user.js

@@ -5,6 +5,9 @@ const userSchema = new Schema({
 alias: String,
 firstName:String,
 lastName: String,
+isDeveloper: Boolean,
+isTrader: Boolean,
+isDataAnalyst: Boolean,
 roleId: String
 })
 

server/schema/schema.js

@@ -27,6 +27,9 @@ const UserType = new GraphQLObjectType({
     alias: {type: GraphQLString},
     firstName: {type: GraphQLString},
     lastName: {type: GraphQLString},
+    isDeveloper: {type: GraphQLString},
+    isTrader: {type: GraphQLString},
+    isDataAnalyst: {type: GraphQLString},
     roleId: {type: GraphQLString},
     role: {
       type: RoleType,
@@ -98,6 +101,9 @@ const Mutation = new GraphQLObjectType({
         alias: {type: new GraphQLNonNull(GraphQLString)},
         firstName: {type: GraphQLString},
         lastName: {type: GraphQLString},
+        isDeveloper: {type: GraphQLInt},
+        isTrader: {type: GraphQLInt},
+        isDataAnalyst: {type: GraphQLInt},
         roleId: {type: new GraphQLNonNull(GraphQLString)}
       },
       resolve(parent, args) {
@@ -106,6 +112,9 @@ const Mutation = new GraphQLObjectType({
           alias: args.alias,
           firstName: args.firstName,
           lastName: args.lastName,
+          isDeveloper: args.isDeveloper,
+          isTrader: args.isTrader,
+          isDataAnalyst: args.isDataAnalyst,
           roleId: args.roleId
         });
         return user.save();