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:
parent
b4f053cf3f
commit
83398c4123
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
};
|
@ -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(
|
||||
|
@ -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`),
|
||||
};
|
||||
|
@ -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),
|
||||
]
|
||||
};
|
||||
}
|
||||
}, {});
|
||||
|
@ -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};
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user