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:
parent
c69ef9abb4
commit
16d67e9a47
@ -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;
|
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 {
|
||||
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) => ({
|
||||
|
@ -198,7 +198,7 @@
|
||||
},
|
||||
"orgs": {
|
||||
"ui": {
|
||||
"invite_toggled": false,
|
||||
"invite_toggled": true,
|
||||
"sections": [
|
||||
"projects",
|
||||
"people",
|
||||
|
@ -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
|
||||
}
|
||||
};
|
||||
}
|
||||
}, {});
|
||||
|
@ -143,5 +143,6 @@ module.exports = {
|
||||
metricsByServiceIdSelector: metricsByServiceId,
|
||||
instancesByProjectIdSelector: instancesByProjectId,
|
||||
metricTypeByUuidSelector: metricTypeByUuid,
|
||||
peopleByOrgIdSelector: peopleByOrgId
|
||||
peopleByOrgIdSelector: peopleByOrgId,
|
||||
membersSelector: members,
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user