1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

implimenting assinging role to team memember

This commit is contained in:
Alex Windett 2017-01-24 17:27:01 +00:00
parent b4f053cf3f
commit 83398c4123
7 changed files with 81 additions and 9 deletions

View File

@ -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,

View File

@ -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,

View File

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

View File

@ -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(

View File

@ -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`),
};

View File

@ -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),
]
};
}
}, {});

View File

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