#311 create confirmation dialog

Author: Muhaddatha

webapp/components/NetPyNE.js

@@ -8,6 +8,7 @@ import {
   LayoutManager,
   Drawer,
   Dialog,
+  ConfirmationDialog,
   LaunchDialog,
 } from 'netpyne/components';
 
@@ -140,6 +141,7 @@ class NetPyNE extends React.Component {
           </Box>
         </div>
         <Dialog />
+        <ConfirmationDialog />
         <ErrorDialog />
         <LaunchDialog />
       </div>

webapp/components/general/ConfirmationDialog.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import Dialog from '@material-ui/core/Dialog/Dialog';
+import Button from '@material-ui/core/Button';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { withStyles } from '@material-ui/core/styles';
+import { PYTHON_CALL } from '../../redux/actions/general';
+
+const styles = () => ({
+  cancel: { marginRight: 10 },
+});
+
+class ConfirmationDialog extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = { hide: !this.props.open };
+  }
+
+  handleConfirmation = () => {
+    if (this.props.confirmationDialogOnConfirm
+        && this.props.confirmationDialogOnConfirm.type === PYTHON_CALL) {
+      this.props.pythonCall({
+        cmd: this.props.confirmationDialogOnConfirm.cmd,
+        args: this.props.confirmationDialogOnConfirm.args,
+      });
+    } else {
+      console.log('confirmationAction not passed or it is not a python call');
+    }
+  }
+
+  render () {
+    const {
+      classes,
+      confirmationDialogOpen,
+      confirmationDialogTitle,
+      confirmationDialogMessage,
+      closeConfirmationDialog,
+    } = this.props;
+
+    return (
+      <Dialog
+        fullWidth
+        maxWidth="sm"
+        open={confirmationDialogOpen}
+        onClose={() => closeConfirmationDialog()}
+        className={classes.root}
+      >
+        <DialogTitle>{confirmationDialogTitle}</DialogTitle>
+        <DialogContent>
+          {confirmationDialogMessage}
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={closeConfirmationDialog}
+            style={styles.cancel}
+            key="CANCEL"
+          >
+            CANCEL
+          </Button>
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={() => { this.handleConfirmation(); closeConfirmationDialog(); }}
+            key="CONFIRM"
+          >
+            CONFIRM
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+}
+
+export default withStyles(styles)(ConfirmationDialog);

webapp/components/index.js

@@ -14,7 +14,7 @@ import { openBackendErrorDialog, closeBackendErrorDialog } from '../redux/action
 import {
   updateCards, editModel, simulateNetwork, createNetwork, closeDialog,
   createAndSimulateNetwork, showNetwork, pythonCall, modelLoaded, deleteNetParamsObj, resetModel,
-  setDefaultWidgets,
+  setDefaultWidgets, openConfirmationDialog, closeConfirmationDialog,
 } from '../redux/actions/general';
 
 import {
@@ -56,6 +56,7 @@ import _Topbar from './topbar/Topbar';
 import _SwitchPageButton from './topbar/SwitchPageButton';
 import _NetPyNEThumbnail from './general/NetPyNEThumbnail';
 import _Dialog from './general/Dialog';
+import _ConfirmationDialog from './general/ConfirmationDialog';
 import _SelectCellTemplate from './definition/cellRules/SelectCellTemplate';
 import _Experiments from './experiments/Experiments';
 import _ExperimentEdit from './experiments/ExperimentEdit';
@@ -348,6 +349,19 @@ export const Dialog = connect(
   (dispatch) => ({ handleClose: () => dispatch(closeDialog) }),
 )(_Dialog);
 
+export const ConfirmationDialog = connect(
+  (state) => ({
+    confirmationDialogOpen: state.general.confirmationDialogOpen,
+    confirmationDialogTitle: state.general.confirmationDialogTitle,
+    confirmationDialogMessage: state.general.confirmationDialogMessage,
+    confirmationDialogOnConfirm: state.general.confirmationDialogOnConfirm,
+  }),
+  (dispatch) => ({
+    closeConfirmationDialog: () => dispatch(closeConfirmationDialog),
+    pythonCall: (cmd, args) => dispatch(pythonCall(cmd, args)),
+  }),
+)(_ConfirmationDialog);
+
 export const SelectCellTemplate = connect(
   null,
   (dispatch) => ({

webapp/redux/actions/general.js

@@ -15,6 +15,8 @@ export const DELETE_NETPARAMS_OBJ = 'DELETE_NETPARAMS_OBJ';
 export const CLOSE_DIALOG = 'CLOSE_DIALOG';
 export const OPEN_DIALOG = 'OPEN_DIALOG';
 export const LOAD_TUTORIAL = 'LOAD_TUTORIAL';
+export const OPEN_CONFIRMATION_DIALOG = 'OPEN_CONFIRMATION_DIALOG';
+export const CLOSE_CONFIRMATION_DIALOG = 'CLOSE_CONFIRMATION_DIALOG';
 export const AUTOMATIC_INSTANTIATION = 'AUTOMATIC_INSTANTIATION';
 export const AUTOMATIC_SIMULATION = 'AUTOMATIC_SIMULATION';
 export const IMPORT_APPLICATION_STATE = 'IMPORT_APPLICATION_STATE';
@@ -55,6 +57,13 @@ export const openDialog = (payload) => ({
   payload,
 });
 
+export const openConfirmationDialog = (payload) => ({
+  type: OPEN_CONFIRMATION_DIALOG,
+  payload,
+});
+
+export const closeConfirmationDialog = { type: CLOSE_CONFIRMATION_DIALOG };
+
 export const setTheme = (themeName) => ({
   type: SET_THEME,
   payload: themeName,

webapp/redux/reducers/general.js

@@ -11,8 +11,12 @@ export const GENERAL_DEFAULT_STATE = {
   dialogOpen: false,
   dialogTitle: '',
   dialogMessage: '',
+  confirmationDialogTitle: '',
+  confirmationDialogMessage: '',
+  confirmationDialogOnConfirm: {},
   automaticSimulation: false,
   automaticInstantiation: false,
+  confirmationDialogOpen: false,
   theme: 'gui',
 };
 
@@ -41,6 +45,18 @@ export default function reduceGeneral (state = GENERAL_DEFAULT_STATE, action) {
       };
     case Actions.CLOSE_DIALOG:
       return { ...state, dialogOpen: false };
+    case Actions.OPEN_CONFIRMATION_DIALOG:
+      return {
+        ...state,
+        confirmationDialogOpen: true,
+        confirmationDialogTitle: action.payload.title,
+        confirmationDialogMessage: action.payload.message,
+        confirmationDialogOnConfirm: action.payload.onConfirm,
+      };
+    case Actions.CLOSE_CONFIRMATION_DIALOG:
+      return {
+        ...state, confirmationDialogOpen: false, dialogTitle: '', dialogMessage: '',
+      };
     case Actions.AUTOMATIC_INSTANTIATION: {
       return { ...state, automaticInstantiation: action.payload, automaticSimulation: state.automaticSimulation && action.payload };
     }