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};
}
}