1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 07:10:05 +02:00

adding in invite input module

This commit is contained in:
Alex Windett 2017-01-23 15:47:45 +00:00
parent c69ef9abb4
commit 16d67e9a47
6 changed files with 131 additions and 7 deletions

View File

@ -6,6 +6,7 @@ const Column = require('@ui/components/column');
const Button = require('@ui/components/button'); const Button = require('@ui/components/button');
const PeopleTable = require('./table'); const PeopleTable = require('./table');
const Invite = require('./invite');
const buttonStyle = { const buttonStyle = {
float: 'right' float: 'right'
@ -16,7 +17,7 @@ const People = (props) => {
const { const {
people = [], people = [],
orgUI = {}, orgUI = {},
handleToggle handleToggle,
} = props; } = props;
return ( return (
@ -33,6 +34,8 @@ const People = (props) => {
</Column> </Column>
</Row> </Row>
{orgUI.invite_toggled ? <Invite {...props} /> : null}
<Row> <Row>
<Column xs={12}> <Column xs={12}>
<PeopleTable <PeopleTable
@ -47,7 +50,7 @@ const People = (props) => {
People.propTypes = { People.propTypes = {
handleToggle: React.PropTypes.func, handleToggle: React.PropTypes.func,
orgUI: React.PropTypes.obj, orgUI: React.PropTypes.obj,
people: React.PropTypes.arrayOf(PropTypes.person), people: React.PropTypes.arrayOf(PropTypes.person)
}; };
module.exports = People; module.exports = People;

View File

@ -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 (
<Row>
<Column xs={6}>
<p>Search for a person by name or email or enter an email address
to invite someone new.</p>
<Row>
<Column xs={12}>
<SelectCustom
placeholder="Enter an email address or password"
multi
onChange={function noop() {}}
options={selectData}
/>
<Button
style={AddButtonStyle}
secondary
>
Add
</Button>
</Column>
</Row>
<Button
secondary
style={styleInline}
onClick={handleToggle}
>
Cancel
</Button>
<Button
style={styleInline}
>
Send Invitation(s)
</Button>
</Column>
</Row>
);
};
Invite.propTypes = {
handleToggle: React.PropTypes.func,
orgUI: React.PropTypes.obj,
people: React.PropTypes.arrayOf(PropTypes.person)
};
module.exports = Invite;

View File

@ -11,7 +11,8 @@ const {
const { const {
peopleByOrgIdSelector, peopleByOrgIdSelector,
orgUISelector orgUISelector,
membersSelector
} = selectors; } = selectors;
const { const {
@ -31,7 +32,8 @@ const mapStateToProps = (state, {
params = {} params = {}
}) => ({ }) => ({
people: peopleByOrgIdSelector(params.org)(state), people: peopleByOrgIdSelector(params.org)(state),
orgUI: orgUISelector(state) orgUI: orgUISelector(state),
platformMembers: membersSelector(state)
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({

View File

@ -198,7 +198,7 @@
}, },
"orgs": { "orgs": {
"ui": { "ui": {
"invite_toggled": false, "invite_toggled": true,
"sections": [ "sections": [
"projects", "projects",
"people", "people",

View File

@ -1,9 +1,23 @@
const ReduxActions = require('redux-actions'); const ReduxActions = require('redux-actions');
const actions = require('@state/actions');
const { const {
handleActions handleActions
} = ReduxActions; } = ReduxActions;
const {
handleInviteToggle
} = actions;
module.exports = handleActions({ 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
}
};
}
}, {}); }, {});

View File

@ -143,5 +143,6 @@ module.exports = {
metricsByServiceIdSelector: metricsByServiceId, metricsByServiceIdSelector: metricsByServiceId,
instancesByProjectIdSelector: instancesByProjectId, instancesByProjectIdSelector: instancesByProjectId,
metricTypeByUuidSelector: metricTypeByUuid, metricTypeByUuidSelector: metricTypeByUuid,
peopleByOrgIdSelector: peopleByOrgId peopleByOrgIdSelector: peopleByOrgId,
membersSelector: members,
}; };