ft(role): Add role select input field in the member invitatio form

- Added role select input field - Modified member redux action to include user role [Finishes #161423307]
andela · Oct 23, 2018 · 948aa45 · 948aa45
1 parent 439ca14
commit 948aa45
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 10 deletions.
diff --git a/client/src/modules/Teams/components/InviteMembers.jsx b/client/src/modules/Teams/components/InviteMembers.jsx
@@ -23,7 +23,8 @@ export class InviteMember extends Component {
       ismultiSelectDisabled: false,
       selectAllDisabled: true,
       user: null,
-      formClass: 'formDefault'
+      formClass: 'formDefault',
+      role: 'developer'
     };
 
     this.handleSearch = this.handleSearch.bind(this);
@@ -37,6 +38,7 @@ export class InviteMember extends Component {
     this.toggleSearch = this.toggleSearch.bind(this);
     this.multiSelectOptions = this.multiSelectOptions.bind(this);
     this.handleModalState = this.handleModalState.bind(this);
+    this.handleRoleChange = this.handleRoleChange.bind(this);
   }
 
   handleSubmit(event) {
@@ -97,7 +99,8 @@ export class InviteMember extends Component {
     }
     const data = {
       accounts,
-      userId
+      userId,
+      role: this.state.role
     };
     addMember(e, data);
   }
@@ -140,6 +143,10 @@ export class InviteMember extends Component {
     this.props.modalState(bool);
   }
 
+  handleRoleChange(e) {
+    this.setState({ role: e.target.value });
+  }
+
 
   render() {
     const { searchInput } = this.state;
@@ -222,7 +229,7 @@ export class InviteMember extends Component {
         <div className="row account-row">
           <div className="col s2" />
           <div className="col s7">
-            <h5 className="center-align">
+            <h5 className="col s10 center-align">
               Add
               <span className="member-username">
                 {` ${this.state.searchInput}`}
@@ -263,6 +270,16 @@ export class InviteMember extends Component {
                     </label>
                   </label>
                 </div>
+                <div className="role-inputs">
+                  <div>  <label className="role-text span">Select User Role </label></div>
+                  <div>
+                    <select className="role-select" onChange={this.handleRoleChange} name="role" placeholder="Select ">
+                      <option value="developer">Developer</option>
+                      <option value="lead">Team Lead</option>
+                      <option value="member">Member</option>
+                    </select>
+                  </div>
+                </div>
                 <button onClick={this.inviteMember} className="btn account-btn" type="submit" name="action">
                   Invite
                 </button>

diff --git a/client/src/redux/actions/teams/members.js b/client/src/redux/actions/teams/members.js
@@ -25,7 +25,7 @@ export const addMember = data => async dispatch => {
 
   try {
     let request;
-    await api(`teams/${data.teamId}/members/${data.userId}`, 'post', { role: 'developer' });
+    await api(`teams/${data.teamId}/members/${data.userId}`, 'post', { role: data.role });
 
     const member = { type: 'team', name: data.teamName, invited: true };
 

diff --git a/client/src/tests/__mocks__/__mockData__/memberMock.js b/client/src/tests/__mocks__/__mockData__/memberMock.js
@@ -2,6 +2,7 @@ export const addMemberRequest = {
   userId: 2,
   teamId: 3,
   teamName: 'team',
+  role: 'developer',
   accounts: [
     {
       type: 'github_repo',

diff --git a/client/styles/components/_create_team.scss b/client/styles/components/_create_team.scss
@@ -207,16 +207,15 @@
 }
 
 .notif-pass-icon {
-    width: 1.2rem;
-    margin-top: -1rem;
+  height: 1.2rem;
+  width: 1.2rem;
 }
 
 .notif-fail-icon {
-    width: 1rem;
-    margin-top: -1rem;
+  height: 1rem;
+  width: 1rem;
 }
 
-
 .notif-footer {
     display: flex;
     padding: 12px;

diff --git a/client/styles/components/_teams.scss b/client/styles/components/_teams.scss
@@ -239,7 +239,21 @@
         margin: 5rem 20% 1rem;
         float: right;
         background-color: #385cd7 !important;
-      }    
+      }
+      .role-select {
+        display: inline-block;
+        width: 81%;
+      }
+      .role-inputs {
+        margin-left: 8px;
+        margin-top: 1rem;
+      }
+      .role-text {
+        display: inline-block;
+        font-size: 17px;
+        margin-bottom: 4px !important;
+        margin-left: 2px;
+      }
     }
     .span {
       color: #504747 !important;