109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogContentText,
|
|
Button,
|
|
TextField,
|
|
} from '@material-ui/core';
|
|
|
|
import { Mutation } from 'react-apollo';
|
|
import { getOptionsCalls } from '../../../../../../GraphQL/Calls/index';
|
|
|
|
class New extends React.Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
name: '',
|
|
host: '',
|
|
repo: '',
|
|
moduleName: '',
|
|
};
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
name, host, repo, moduleName,
|
|
} = this.state;
|
|
const { closeDialogs } = this.props;
|
|
return (
|
|
<Dialog
|
|
open={true}
|
|
onClose={() => closeDialogs()}
|
|
aria-labelledby='createPlotter-dialog-title'
|
|
>
|
|
<DialogTitle id='createPlotter-dialog-title'>
|
|
Create a new plotter
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>
|
|
At least for now, all the plotters are publically available, creating it here will let you select it in the select element.
|
|
</DialogContentText>
|
|
|
|
<Mutation mutation={getOptionsCalls.EVENTS_CREATEPLOTTER}
|
|
update={(store, { data }) => {
|
|
const { events_Plotters: plotters } = store.readQuery({
|
|
query: getOptionsCalls.EVENTS_PLOTTERS,
|
|
});
|
|
store.writeQuery({
|
|
query: getOptionsCalls.EVENTS_PLOTTERS,
|
|
data: { events_Plotters: plotters.concat([data.events_CreatePlotter]) },
|
|
});
|
|
closeDialogs();
|
|
}
|
|
}
|
|
>
|
|
{createPlotter => (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
createPlotter({
|
|
variables: {
|
|
plotter: {
|
|
name,
|
|
host,
|
|
repo,
|
|
moduleName,
|
|
},
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
<TextField
|
|
label='Name'
|
|
value={name}
|
|
onChange={e => this.setState({ name: e.target.value })}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label='Host'
|
|
value={host}
|
|
onChange={e => this.setState({ host: e.target.value })}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label='Repository'
|
|
value={repo}
|
|
onChange={e => this.setState({ repo: e.target.value })}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label='Module Name'
|
|
value={moduleName}
|
|
onChange={e => this.setState({ moduleName: e.target.value })}
|
|
fullWidth
|
|
/>
|
|
<Button type='submit' variant='contained' color='secondary'>Create a new plotter</Button>
|
|
</form>
|
|
)}
|
|
</Mutation>
|
|
<Button onClick={() => closeDialogs()} variant='contained' color='primary'>Close</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default New;
|