diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js index 0d791a02..6d91b4b2 100644 --- a/frontend/src/components/people-list/index.js +++ b/frontend/src/components/people-list/index.js @@ -6,6 +6,7 @@ const Column = require('@ui/components/column'); const Button = require('@ui/components/button'); const PeopleTable = require('./table'); +const Invite = require('./invite'); const buttonStyle = { float: 'right' @@ -16,7 +17,7 @@ const People = (props) => { const { people = [], orgUI = {}, - handleToggle + handleToggle, } = props; return ( @@ -33,6 +34,8 @@ const People = (props) => { + {orgUI.invite_toggled ? : null} + { People.propTypes = { handleToggle: React.PropTypes.func, orgUI: React.PropTypes.obj, - people: React.PropTypes.arrayOf(PropTypes.person), + people: React.PropTypes.arrayOf(PropTypes.person) }; module.exports = People; \ No newline at end of file diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js new file mode 100644 index 00000000..c04af5e7 --- /dev/null +++ b/frontend/src/components/people-list/invite.js @@ -0,0 +1,104 @@ +const React = require('react'); + +const Row = require('@ui/components/row'); +const Column = require('@ui/components/column'); +const Button = require('@ui/components/button'); +const SelectCustom = require('@ui/components/select-custom'); + +const Invite = (props) => { + + const { + people = [], + handleToggle, + platformMembers + } = props; + + const InputStyle = { + float: 'left', + width: '75%' + }; + + const AddButtonStyle = { + float: 'right', + width: '20%' + }; + + const styleInline = { + display: 'inline-block' + }; + + const selectData = [ + { + value: 'one', + label: 'One' + }, + { + value: 'two', + label: 'Two' + }, + { + value: 'three', + label: 'Three' + }, + { + value: 'four', + label: 'Four' + }, + { + value: 'five', + label: 'Five' + }, + { + value: 'six', + label: 'Six' + } + ]; + + return ( + + +

Search for a person by name or email or enter an email address + to invite someone new.

+ + + + + + + + + + + +
+
+ ); +}; + +Invite.propTypes = { + handleToggle: React.PropTypes.func, + orgUI: React.PropTypes.obj, + people: React.PropTypes.arrayOf(PropTypes.person) +}; + +module.exports = Invite; \ No newline at end of file diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index a9ca21b7..99e487a0 100644 --- a/frontend/src/containers/org/people.js +++ b/frontend/src/containers/org/people.js @@ -11,7 +11,8 @@ const { const { peopleByOrgIdSelector, - orgUISelector + orgUISelector, + membersSelector } = selectors; const { @@ -31,7 +32,8 @@ const mapStateToProps = (state, { params = {} }) => ({ people: peopleByOrgIdSelector(params.org)(state), - orgUI: orgUISelector(state) + orgUI: orgUISelector(state), + platformMembers: membersSelector(state) }); const mapDispatchToProps = (dispatch) => ({ diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index b2609be4..c942b5f0 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -198,7 +198,7 @@ }, "orgs": { "ui": { - "invite_toggled": false, + "invite_toggled": true, "sections": [ "projects", "people", diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index 7fec06fb..e0243100 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/frontend/src/state/reducers/orgs.js @@ -1,9 +1,23 @@ const ReduxActions = require('redux-actions'); +const actions = require('@state/actions'); + const { handleActions } = ReduxActions; +const { + handleInviteToggle +} = actions; + module.exports = handleActions({ - 'x': (state) => state // somehow handleActions needs at least one reducer + [handleInviteToggle.toString()]: (state, action) => { + return { + ...state, + ui: { + ...state.ui, + invite_toggled: !state.ui.invite_toggled + } + }; + } }, {}); diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index 894ccc42..69fba90f 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -143,5 +143,6 @@ module.exports = { metricsByServiceIdSelector: metricsByServiceId, instancesByProjectIdSelector: instancesByProjectId, metricTypeByUuidSelector: metricTypeByUuid, - peopleByOrgIdSelector: peopleByOrgId + peopleByOrgIdSelector: peopleByOrgId, + membersSelector: members, };