adding in invite input module
This commit is contained in:
parent
c69ef9abb4
commit
16d67e9a47
@ -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;
|
104
frontend/src/components/people-list/invite.js
Normal file
104
frontend/src/components/people-list/invite.js
Normal 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;
|
@ -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) => ({
|
||||||
|
@ -198,7 +198,7 @@
|
|||||||
},
|
},
|
||||||
"orgs": {
|
"orgs": {
|
||||||
"ui": {
|
"ui": {
|
||||||
"invite_toggled": false,
|
"invite_toggled": true,
|
||||||
"sections": [
|
"sections": [
|
||||||
"projects",
|
"projects",
|
||||||
"people",
|
"people",
|
||||||
|
@ -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
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
}, {});
|
}, {});
|
||||||
|
@ -143,5 +143,6 @@ module.exports = {
|
|||||||
metricsByServiceIdSelector: metricsByServiceId,
|
metricsByServiceIdSelector: metricsByServiceId,
|
||||||
instancesByProjectIdSelector: instancesByProjectId,
|
instancesByProjectIdSelector: instancesByProjectId,
|
||||||
metricTypeByUuidSelector: metricTypeByUuid,
|
metricTypeByUuidSelector: metricTypeByUuid,
|
||||||
peopleByOrgIdSelector: peopleByOrgId
|
peopleByOrgIdSelector: peopleByOrgId,
|
||||||
|
membersSelector: members,
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user