implimenting assinging role to team memember

frontend/src/components/people-list/table/index.js

@@ -10,6 +10,7 @@ const PeopleTable = (props) => {
 
   const {
     handleRoleTooltip,
+    handleRoleUpdate,
     handleStatusTooltip,
     people = [],
     orgUI = {}
@@ -32,12 +33,13 @@ const PeopleTable = (props) => {
     width: '10%' // Empty title for delete
   }];
 
-  const data = people.map( (person) => {
+  const data = people.map( (person, index) => {
     const status = (person) => (
       <PersonStatus
         handleStatusTooltip={handleStatusTooltip}
         membersStatusOptions={orgUI.members_status}
         person={person}
+        personIndex={index}
         toggledID={orgUI.member_status_tooltip}
       />
     );
@@ -45,8 +47,10 @@ const PeopleTable = (props) => {
     const role = (person) => (
       <PersonRole
         handleRoleTooltip={handleRoleTooltip}
+        handleRoleUpdate={handleRoleUpdate}
         membersRolesOptions={orgUI.members_roles}
         person={person}
+        personIndex={index}
         toggledID={orgUI.member_role_tooltip}
       />
     );
@@ -70,6 +74,7 @@ const PeopleTable = (props) => {
 
 PeopleTable.propTypes = {
   handleRoleTooltip: React.PropTypes.func,
+  handleRoleUpdate: React.PropTypes.func,
   handleStatusTooltip: React.PropTypes.func,
   orgUI: React.PropTypes.object,
   people: React.PropTypes.array,

frontend/src/components/people-list/table/person-role.js

@@ -46,19 +46,24 @@ const PlainButton = styled.button`
   color: inherit;
 `;
 
-
-
 const PersonRole = (props) => {
 
   const {
     toggledID,
     membersRolesOptions,
     person,
-    handleRoleTooltip
+    personIndex,
+    handleRoleTooltip,
+    handleRoleUpdate
   } = props;
 
   const toggled = toggledID;
   const handleClick = () => handleRoleTooltip(person.uuid);
+  const handleOptionSelect = (updatedMember) => handleRoleUpdate(updatedMember);
+  const _person = {
+    ...person,
+    personIndex
+  };
 
   return (
     <StyledWrapper toggled={toggled}>
@@ -67,7 +72,11 @@ const PersonRole = (props) => {
       </PlainButton>
 
       { toggledID === person.uuid
-        ? <Tooltip options={membersRolesOptions} person={person} />
+        ? <Tooltip
+          handleSelect={handleOptionSelect}
+          options={membersRolesOptions}
+          person={_person}
+          />
         : null }
     </StyledWrapper>
   );
@@ -75,8 +84,10 @@ const PersonRole = (props) => {
 
 PersonRole.propTypes = {
   handleRoleTooltip: React.PropTypes.func,
+  handleRoleUpdate: React.PropTypes.func,
   membersRolesOptions: React.PropTypes.array,
   person: React.PropTypes.object,
+  personIndex: React.PropTypes.number,
   toggledID: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.bool,

frontend/src/components/people-list/table/tooltip.js

@@ -14,21 +14,43 @@ const arrowPosition = {
 };
 
 module.exports = ({
+  handleSelect,
   person = {},
-  options = []
+  options = [],
 }) => {
+
+  const _options = options.map( (option, i) => {
+
+    const _onClick = () => handleSelect({
+      ...person,
+      role: option
+    });
+
+    return (
+      <li
+        key={i}
+        onClick={_onClick}
+        role="listbox"
+        tabIndex="0"
+      >
+        {option}
+      </li>
+    );
+  });
+
   return (
     <Tooltip
       arrowPosition={arrowPosition}
       key={person.uuid}
       style={tooltipStyle}
     >
-      {options.map((o, i) => <li key={i}>{o}</li>)}
+      {_options}
     </Tooltip>
   );
 };
 
 module.exports.propTypes = {
+  handleSelect: React.PropTypes.func,
   options: React.PropTypes.array,
   person: React.PropTypes.object,
 };

frontend/src/containers/org/people.js

@@ -19,6 +19,7 @@ const {
   handleInviteToggle,
   handlePeopleRoleTooltip,
   handlePeopleStatusTooltip,
+  handleRoleUpdate
 } = actions;
 
 const People = (props) => {
@@ -42,6 +43,8 @@ const mapDispatchToProps = (dispatch) => ({
   handleToggle: () => dispatch(handleInviteToggle()),
   handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)),
   handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)),
+  handleRoleUpdate: (updatedMember) =>
+      dispatch(handleRoleUpdate(updatedMember)),
 });
 
 module.exports = connect(

frontend/src/state/actions.js

@@ -21,4 +21,5 @@ module.exports = {
       createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
   handlePeopleRoleTooltip:
     createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`),
+  handleRoleUpdate: createAction(`${APP}/HANDLE_PERSON_ROLE_UPDATE`),
 };

frontend/src/state/reducers/orgs.js

@@ -9,7 +9,8 @@ const {
 const {
   handleInviteToggle,
   handlePeopleRoleTooltip,
-  handlePeopleStatusTooltip
+  handlePeopleStatusTooltip,
+  handleRoleUpdate
 } = actions;
 
 module.exports = handleActions({
@@ -45,5 +46,29 @@ module.exports = handleActions({
           : action.payload
       }
     };
+  },
+  [handleRoleUpdate.toString()]: (state, action) => {
+    // TODO: Change "1" to org index
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        member_role_tooltip: false
+      },
+      data: [
+        ...state.data.slice(0, 1),
+        {
+          ...state.data[1],
+          members: [
+            ...state.data[1].members.slice(0, action.payload.personIndex),
+            {
+              ...action.payload
+            },
+            ...state.data[1].members.slice(action.payload.personIndex + 1)
+          ]
+        },
+        ...state.data.slice(1+1),
+      ]
+    };
   }
 }, {});

ui/src/components/tooltip/index.js

@@ -3,6 +3,7 @@
 const React = require('react');
 const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
+const constants = require('../../shared/constants');
 const Styled = require('styled-components');
 
 const {
@@ -18,6 +19,10 @@ const {
   default: styled
 } = Styled;
 
+const {
+  colors
+} = constants;
+
 const ItemPadder = 9;
 const WrapperPadder = 24;
 const ulPadder = `${WrapperPadder - ItemPadder} 0`;
@@ -43,7 +48,7 @@ const StyledList = styled.ul`
     padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};
 
     &:hover {
-      background: red;
+      background: ${colors.borderSecondaryDarkest};
     }
   }