1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +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 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) => {
</Column>
</Row>
{orgUI.invite_toggled ? <Invite {...props} /> : null}
<Row>
<Column xs={12}>
<PeopleTable
@ -47,7 +50,7 @@ const People = (props) => {
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;

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 {
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) => ({

View File

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

View File

@ -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
}
};
}
}, {});

View File

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