From acab4ed01aaf758c2367ed65c93c6c251b9dc458 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 10:10:13 +0000 Subject: [PATCH] implimenting toggle on person status and refactoring rendering of table components --- frontend/src/components/people-list/index.js | 6 +- .../src/components/people-list/person-role.js | 18 +++++ .../components/people-list/person-status.js | 65 +++++++++++++++++++ frontend/src/components/people-list/table.js | 41 ++++++++---- frontend/src/containers/org/people.js | 6 +- frontend/src/mock-state.json | 1 + frontend/src/state/actions.js | 4 +- frontend/src/state/reducers/orgs.js | 12 +++- 8 files changed, 133 insertions(+), 20 deletions(-) create mode 100644 frontend/src/components/people-list/person-role.js create mode 100644 frontend/src/components/people-list/person-status.js diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js index 115a0210..765f6794 100644 --- a/frontend/src/components/people-list/index.js +++ b/frontend/src/components/people-list/index.js @@ -14,7 +14,6 @@ const buttonStyle = { const People = (props) => { const { - people = [], orgUI = {}, handleToggle, } = props; @@ -37,9 +36,7 @@ const People = (props) => { - + @@ -49,7 +46,6 @@ const People = (props) => { People.propTypes = { handleToggle: React.PropTypes.func, orgUI: React.PropTypes.object, - people: React.PropTypes.array }; module.exports = People; \ No newline at end of file diff --git a/frontend/src/components/people-list/person-role.js b/frontend/src/components/people-list/person-role.js new file mode 100644 index 00000000..5844b042 --- /dev/null +++ b/frontend/src/components/people-list/person-role.js @@ -0,0 +1,18 @@ +const React = require('react'); + +const PersonRole = (props) => { + + const { + role + } = props; + + return ( + {role} + ); +}; + +PersonRole.propTypes = { + role: React.PropTypes.string +}; + +module.exports = PersonRole; \ No newline at end of file diff --git a/frontend/src/components/people-list/person-status.js b/frontend/src/components/people-list/person-status.js new file mode 100644 index 00000000..3a93b9a6 --- /dev/null +++ b/frontend/src/components/people-list/person-status.js @@ -0,0 +1,65 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const fns = require('@ui/shared/functions'); +const composers = require('@ui/shared/composers'); + +const { + pseudoEl +} = composers; + +const { + default: styled +} = Styled; + +const { + remcalc +} = fns; + +const borderSide = props => props.toggled + ? 'bottom' + : 'top'; + +const StyledWrapper = styled.div` + position: relative; + + &:after { + border-left: ${remcalc(5)} solid transparent; + border-right: ${remcalc(5)} solid transparent; + border-${borderSide}: ${remcalc(5)} solid black; + + ${pseudoEl({ + top: '50%', + right: remcalc(10) + })} + } +`; + +const PersonStatus = (props) => { + + const { + toggled, + person, + handleStatusTooltip + } = props; + + return ( + + + {person.status} + + + ); +}; + +PersonStatus.propTypes = { + handleStatusTooltip: React.PropTypes.bool, + person: React.PropTypes.object, + toggled: React.PropTypes.bool, +}; + +module.exports = PersonStatus; \ No newline at end of file diff --git a/frontend/src/components/people-list/table.js b/frontend/src/components/people-list/table.js index 8198659e..0af1d367 100644 --- a/frontend/src/components/people-list/table.js +++ b/frontend/src/components/people-list/table.js @@ -3,9 +3,16 @@ const React = require('react'); const Table = require('@ui/components/table-data-table'); const Checkbox = require('@ui/components/checkbox'); -const PeopleTable = ({ - people = [] -}) => { +const PersonStatus = require('./person-status'); +const PersonRole = require('./person-role'); + +const PeopleTable = (props) => { + + const { + handleStatusTooltip, + people = [], + orgUI = {} + } = props; const columns = [{ title: , @@ -24,13 +31,23 @@ const PeopleTable = ({ width: '10%' // Empty title for delete }]; - const data = people.map( (person) => ({ - checkbox: , - name: person.name, - status: person.status, - role: person.role, - bin: '' - })); + const data = people.map( (person) => { + const status = (person) => ( + + ); + + return { + checkbox: , + name: person.name, + status: status(person), + role: , + bin: '' + }; + }); return ( { @@ -37,7 +38,8 @@ const mapStateToProps = (state, { }); const mapDispatchToProps = (dispatch) => ({ - handleToggle: () => dispatch(handleInviteToggle()) + handleToggle: () => dispatch(handleInviteToggle()), + handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip()) }); module.exports = connect( diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index c942b5f0..be4d72b1 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -199,6 +199,7 @@ "orgs": { "ui": { "invite_toggled": true, + "member_role_tooltip": false, "sections": [ "projects", "people", diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index e24eb3c6..ccbec33d 100644 --- a/frontend/src/state/actions.js +++ b/frontend/src/state/actions.js @@ -16,5 +16,7 @@ module.exports = { toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`), toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`), switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`), - handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`) + handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`), + handlePeopleStatusTooltip: + createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`), }; diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index e0243100..7332b38d 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/frontend/src/state/reducers/orgs.js @@ -7,7 +7,8 @@ const { } = ReduxActions; const { - handleInviteToggle + handleInviteToggle, + handlePeopleStatusTooltip } = actions; module.exports = handleActions({ @@ -19,5 +20,14 @@ module.exports = handleActions({ invite_toggled: !state.ui.invite_toggled } }; + }, + [handlePeopleStatusTooltip.toString()]: (state, action) => { + return { + ...state, + ui: { + ...state.ui, + member_role_tooltip: !state.ui.member_role_tooltip + } + }; } }, {});