From 83398c412368d4dce37cff33860ef5dccfaeb834 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 17:27:01 +0000 Subject: [PATCH] implimenting assinging role to team memember --- .../src/components/people-list/table/index.js | 7 ++++- .../people-list/table/person-role.js | 19 ++++++++++--- .../components/people-list/table/tooltip.js | 26 ++++++++++++++++-- frontend/src/containers/org/people.js | 3 +++ frontend/src/state/actions.js | 1 + frontend/src/state/reducers/orgs.js | 27 ++++++++++++++++++- ui/src/components/tooltip/index.js | 7 ++++- 7 files changed, 81 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/people-list/table/index.js b/frontend/src/components/people-list/table/index.js index 5219d2b1..ddc7fb5c 100644 --- a/frontend/src/components/people-list/table/index.js +++ b/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) => ( ); @@ -45,8 +47,10 @@ const PeopleTable = (props) => { const role = (person) => ( ); @@ -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, diff --git a/frontend/src/components/people-list/table/person-role.js b/frontend/src/components/people-list/table/person-role.js index 0b700e94..9fb2c543 100644 --- a/frontend/src/components/people-list/table/person-role.js +++ b/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 ( @@ -67,7 +72,11 @@ const PersonRole = (props) => { { toggledID === person.uuid - ? + ? : null } ); @@ -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, diff --git a/frontend/src/components/people-list/table/tooltip.js b/frontend/src/components/people-list/table/tooltip.js index af2a0ec1..69a5681b 100644 --- a/frontend/src/components/people-list/table/tooltip.js +++ b/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 ( +
  • + {option} +
    • + ); + }); + return ( - {options.map((o, i) =>
  • {o}
    • )} + {_options}     ); }; module.exports.propTypes = { + handleSelect: React.PropTypes.func, options: React.PropTypes.array, person: React.PropTypes.object, }; \ No newline at end of file diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index 662cb563..3e56bac1 100644 --- a/frontend/src/containers/org/people.js +++ b/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( diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index 44f602fd..c21a77cd 100644 --- a/frontend/src/state/actions.js +++ b/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`), }; diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index 1e633bb6..054714f6 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/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), + ] + }; } }, {}); diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js index 7aa71e00..56fa0d90 100644 --- a/ui/src/components/tooltip/index.js +++ b/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}; } }