Implementing mutation to create new plotter and formula

client/src/Components/Event/Create/Tabs/Technical/NewFormula.js

@@ -0,0 +1,80 @@
+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 NewFormula extends React.Component {
+  constructor() {
+    super();
+    this.state = { name: '' };
+  }
+
+  render() {
+    const { name } = this.state;
+    return (
+      <Dialog
+      open={true}
+      onClose={() => this.props.closeDialogs()}
+      aria-labelledby='createFormula-dialog-title'
+    >
+        <DialogTitle id='createFormula-dialog-title'>
+          Create a new formula
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            At least for now, all the formulas are publically available, creating it here will let you select it in the select element.
+          </DialogContentText>
+
+          <Mutation mutation={getOptionsCalls.EVENTS_CREATEFORMULA}
+            update={(store, { data }) => {
+              const { events_Formulas: formulas } = store.readQuery({
+                query: getOptionsCalls.EVENTS_FORMULAS,
+              });
+              store.writeQuery({
+                query: getOptionsCalls.EVENTS_FORMULAS,
+                data: { events_Formulas: formulas.concat([data.events_CreateFormula]) },
+              });
+              this.props.closeDialogs();
+            }
+            }
+          >
+            {createFormula => (
+              <div className='container'>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    createFormula({
+                      variables: {
+                        formula: { name },
+                      },
+                    });
+                  }}
+                >
+                  <TextField
+                    label='Name'
+                    value={name}
+                    onChange={e => this.setState({ name: e.target.value })}
+                    fullWidth
+                  />
+                  <Button type='submit' variant='contained' color='secondary'>Create a new formula</Button>
+                </form>
+              </div>
+            )}
+          </Mutation>
+
+
+        </DialogContent>
+      </Dialog>
+    );
+  }
+}
+
+export default NewFormula;

client/src/Components/Event/Create/Tabs/Technical/NewPlotter.js

@@ -0,0 +1,110 @@
+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 NewPlotter extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      name: '',
+      host: '',
+      repo: '',
+      moduleName: '',
+    };
+  }
+
+  render() {
+    const {
+      name, host, repo, moduleName,
+    } = this.state;
+    return (
+      <Dialog
+      open={true}
+      onClose={() => this.props.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]) },
+              });
+              this.props.closeDialogs();
+            }
+            }
+          >
+            {createPlotter => (
+              <div className='container'>
+                <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>
+              </div>
+            )}
+          </Mutation>
+
+
+        </DialogContent>
+      </Dialog>
+    );
+  }
+}
+
+export default NewPlotter;

client/src/Components/Event/Create/Tabs/Technical/index.js

@@ -13,14 +13,29 @@ import {
   Button,
 } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
-import styles from '../styles';
+import styles from '../../styles';
 
-import { getOptionsCalls } from '../../../../GraphQL/Calls/index';
+import { getOptionsCalls } from '../../../../../GraphQL/Calls/index';
 
+import NewPlotter from './NewPlotter';
+import NewFormula from './NewFormula';
 
 class Technical extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isNewFormulaOpen: false,
+      isNewPlotterOpen: false,
+    };
+  }
+
+  closeDialogs = () => {
+    this.setState({ isNewFormulaOpen: false, isNewPlotterOpen: false });
+  }
+
   render() {
     const { classes, event, edit } = this.props;
+    const { isNewPlotterOpen, isNewFormulaOpen } = this.state;
     return (
       <React.Fragment>
         <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
@@ -50,19 +65,22 @@ class Technical extends React.Component {
                 <MenuItem key={index} value={formula.id}>{formula.name}</MenuItem>
               ));
               return (
-                <Select
-                  value={event.formulaId}
-                  input={<Input />}
-                  displayEmpty
-                  className={classes.selectEmpty}
-                  onChange={newVal => edit('formulaId', newVal.target.value)}
-                >
-                  {selects}
-                </Select>
+                <React.Fragment>
+                  <Select
+                    value={event.formulaId}
+                    input={<Input />}
+                    displayEmpty
+                    className={classes.selectEmpty}
+                    onChange={newVal => edit('formulaId', newVal.target.value)}
+                  >
+                    {selects}
+                  </Select>
+                  { isNewFormulaOpen ? <NewFormula closeDialogs={() => this.closeDialogs()} /> : ''}
+                </React.Fragment>
               );
             }}
           </Query>
-          <FormHelperText className={classes.clickable} onClick={() => console.log('Comming soon in a modaal')}>
+          <FormHelperText className={classes.clickable} onClick={() => { this.setState({ isNewFormulaOpen: true }); }}>
             To create a new formula, click here
           </FormHelperText>
         </FormControl>
@@ -90,19 +108,24 @@ class Technical extends React.Component {
                 <MenuItem key={index} value={plotter.id}>{plotter.name}</MenuItem>
               ));
               return (
-                <Select
-                  value={event.plotterId}
-                  input={<Input />}
-                  displayEmpty
-                  className={classes.selectEmpty}
-                  onChange={newVal => edit('plotterId', newVal.target.value)}
-                >
-                  {selects}
-                </Select>
+                <React.Fragment>
+                  <Select
+                    value={event.plotterId}
+                    input={<Input />}
+                    displayEmpty
+                    className={classes.selectEmpty}
+                    onChange={newVal => edit('plotterId', newVal.target.value)}
+                  >
+                    {selects}
+                  </Select>
+                  { isNewPlotterOpen ? <NewPlotter closeDialogs={() => this.closeDialogs()} /> : ''}
+                </React.Fragment>
               );
             }}
           </Query>
-          <FormHelperText> To create a new plotter, click here </FormHelperText>
+          <FormHelperText className={classes.clickable} onClick={() => { this.setState({ isNewPlotterOpen: true }); }} >
+            To create a new plotter, click here
+          </FormHelperText>
         </FormControl>
         <Grid container justify='center' >
           <Grid item>