diff --git a/frontend/src/components/people-list/table/index.js b/frontend/src/components/people-list/table/index.js index 88b4d970..9dbde524 100644 --- a/frontend/src/components/people-list/table/index.js +++ b/frontend/src/components/people-list/table/index.js @@ -5,6 +5,7 @@ const Checkbox = require('@ui/components/checkbox'); const PersonStatus = require('./person-status'); const PersonRole = require('./person-role'); +const PersonDelete = require('./person-delete'); const PeopleTable = (props) => { @@ -14,7 +15,8 @@ const PeopleTable = (props) => { handleMemberUpdate, people = [], orgUI = {}, - orgIndex + orgIndex, + removeMember } = props; const columns = [{ @@ -59,12 +61,20 @@ const PeopleTable = (props) => { /> ); + const remove = (person) => ( + + ); + return { checkbox: , name: person.name, status: status(person), role: role(person), - bin: '' + bin: people.length > 1 ? remove(person) : null }; }); @@ -83,6 +93,7 @@ PeopleTable.propTypes = { orgIndex: React.PropTypes.number, orgUI: React.PropTypes.object, people: React.PropTypes.array, + removeMember: React.PropTypes.func, }; module.exports = PeopleTable; \ No newline at end of file diff --git a/frontend/src/components/people-list/table/person-delete.js b/frontend/src/components/people-list/table/person-delete.js new file mode 100644 index 00000000..87f592fc --- /dev/null +++ b/frontend/src/components/people-list/table/person-delete.js @@ -0,0 +1,43 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const { + default: styled +} = Styled; + +const PlainButton = styled.button` + background: transparent; + font-size: inherit; + border: none; + zIndex: 0; + font-family: inherit; + color: inherit; +`; + +const PersonDelete = (props) => { + + const { + personIndex, + orgIndex, + removeMember + } = props; + + const _onClick = () => removeMember({ + personIndex, + orgIndex + }); + + return ( + + Delete + + ); +}; + +PersonDelete.propTypes = { + orgIndex: React.PropTypes.number, + personIndex: React.PropTypes.number, + removeMember: React.PropTypes.func, +}; + +module.exports = PersonDelete; \ No newline at end of file diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index 38444c66..55726513 100644 --- a/frontend/src/containers/org/people.js +++ b/frontend/src/containers/org/people.js @@ -20,7 +20,8 @@ const { handleInviteToggle, handlePeopleRoleTooltip, handlePeopleStatusTooltip, - handleMemberUpdate + handleMemberUpdate, + removeMember, } = actions; const People = (props) => { @@ -47,6 +48,8 @@ const mapDispatchToProps = (dispatch) => ({ handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)), handleMemberUpdate: (updatedMember) => dispatch(handleMemberUpdate(updatedMember)), + removeMember: (removeData) => + dispatch(removeMember(removeData)), }); diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index 8edb6883..7f32be8f 100644 --- a/frontend/src/state/actions.js +++ b/frontend/src/state/actions.js @@ -23,4 +23,5 @@ module.exports = { handlePeopleRoleTooltip: createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`), handleMemberUpdate: createAction(`${APP}/HANDLE_MEMBER_UPDATE`), + removeMember: createAction(`${APP}/REMOVE_MEMBER_FROM_ROLE`), }; diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index e8cea8aa..25f6a7aa 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/frontend/src/state/reducers/orgs.js @@ -11,6 +11,7 @@ const { handlePeopleRoleTooltip, handlePeopleStatusTooltip, handleMemberUpdate, + removeMember, } = actions; module.exports = handleActions({ @@ -76,5 +77,26 @@ module.exports = handleActions({ ...state.data.slice(orgIndex + 1), ] }; - } + }, + [removeMember.toString()]: (state, action) => { + const { + orgIndex, + personIndex, + } = action.payload; + + return { + ...state, + data: [ + ...state.data.slice(0, orgIndex), + { + ...state.data[orgIndex], + members: [ + ...state.data[orgIndex].members.slice(0, personIndex), + ...state.data[orgIndex].members.slice(personIndex + 1) + ] + }, + ...state.data.slice(orgIndex + 1), + ] + }; + }, }, {});