From 16d67e9a47ad7807f30a1625b39b41c6cccf366f Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 23 Jan 2017 15:47:45 +0000 Subject: [PATCH 1/2] adding in invite input module --- frontend/src/components/people-list/index.js | 7 +- frontend/src/components/people-list/invite.js | 104 ++++++++++++++++++ frontend/src/containers/org/people.js | 6 +- frontend/src/mock-state.json | 2 +- frontend/src/state/reducers/orgs.js | 16 ++- frontend/src/state/selectors.js | 3 +- 6 files changed, 131 insertions(+), 7 deletions(-) create mode 100644 frontend/src/components/people-list/invite.js 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, }; From 139247fc09fddefd6d6213bcf7a26be4977d7329 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 23 Jan 2017 16:26:40 +0000 Subject: [PATCH 2/2] fixing linting errors --- frontend/src/components/people-list/invite.js | 16 +++++++++------- frontend/webpack/base.js | 15 +++++++++------ ui/src/components/select-custom/index.js | 4 +++- 3 files changed, 21 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js index c04af5e7..4e2a1de0 100644 --- a/frontend/src/components/people-list/invite.js +++ b/frontend/src/components/people-list/invite.js @@ -1,5 +1,6 @@ const React = require('react'); +// const PropTypes = require('@root/prop-types'); const Row = require('@ui/components/row'); const Column = require('@ui/components/column'); const Button = require('@ui/components/button'); @@ -8,9 +9,9 @@ const SelectCustom = require('@ui/components/select-custom'); const Invite = (props) => { const { - people = [], + // people = [], handleToggle, - platformMembers + // platformMembers } = props; const InputStyle = { @@ -63,14 +64,15 @@ const Invite = (props) => { @@ -78,9 +80,9 @@ const Invite = (props) => { @@ -97,8 +99,8 @@ const Invite = (props) => { Invite.propTypes = { handleToggle: React.PropTypes.func, - orgUI: React.PropTypes.obj, - people: React.PropTypes.arrayOf(PropTypes.person) + // orgUI: React.PropTypes.obj, + // people: React.PropTypes.arrayOf(PropTypes.person) }; module.exports = Invite; \ No newline at end of file diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js index 89c61179..7bf6ee93 100644 --- a/frontend/webpack/base.js +++ b/frontend/webpack/base.js @@ -86,12 +86,15 @@ module.exports = { }, { test: /\.css$/, - exclude: /node_modules/, - loaders: [ 'style-loader', 'css-loader' ], - include: [ - FRONTEND, - UI - ] + loader: 'style-loader!css-loader' + // XXXX : Commenting out breaks node_modules that use css + // i.e react-select. + + // exclude: /node_modules/, + // include: [ + // FRONTEND, + // UI + // ] }] } }; diff --git a/ui/src/components/select-custom/index.js b/ui/src/components/select-custom/index.js index d4a7a81b..f2bd9bca 100644 --- a/ui/src/components/select-custom/index.js +++ b/ui/src/components/select-custom/index.js @@ -38,11 +38,12 @@ const SelectCustom = ({ onChange, options, required = false, + style, value = '' }) => { return ( -
+
{label} @@ -76,6 +77,7 @@ SelectCustom.propTypes = { onChange: React.PropTypes.func, options: React.PropTypes.array, required: React.PropTypes.bool, + style: React.PropTypes.object, value: React.PropTypes.string };