adding a confirm modal for deletion

2 files changed, 25 insertions, 5 deletions

diff --git a/src/web/js/components/Navbar.react.js b/src/web/js/components/Navbar.react.js
index 4e246977..57c38900 100644
--- a/src/web/js/components/Navbar.react.js
+++ b/src/web/js/components/Navbar.react.js
@@ -34,7 +34,7 @@ JarrNavBar = React.createClass({
                     </NavDropdown>);
         }
     },
-    getModel: function() {
+    getModal: function() {
         var heading = null;
         var action = null;
         var body = null;
@@ -74,7 +74,7 @@ JarrNavBar = React.createClass({
     },
     render: function() {
         return (<Navbar fixedTop inverse id="jarrnav">
-                    {this.getModel()}
+                    {this.getModal()}
                     <Navbar.Header>
                         <Navbar.Brand>
                             <a href="/">JARR</a>
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 1e66ce39..9e341e5c 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -3,6 +3,7 @@ var Col = require('react-bootstrap/lib/Col');
 var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 var Button = require('react-bootstrap/lib/Button');
 var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+var Modal = require('react-bootstrap/lib/Modal');
 
 var RightPanelActions = require('../actions/RightPanelActions');
 var RightPanelStore = require('../stores/RightPanelStore');
@@ -12,7 +13,7 @@ var JarrTime = require('./time.react');
 var PanelMixin = {
     propTypes: {obj: React.PropTypes.object.isRequired},
     getInitialState: function() {
-        return {edit_mode: false, obj: this.props.obj};
+        return {edit_mode: false, obj: this.props.obj, showModal: false};
     },
     getHeader: function() {
         var icon = null;
@@ -39,9 +40,20 @@ var PanelMixin = {
                        </ButtonGroup>);
         }
         return (<div id="right-panel-heading" className="panel-heading">
+                    <Modal show={this.state.showModal} onHide={this.closeModal}>
+                        <Modal.Header closeButton>
+                            <Modal.Title>Are you sure ?</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Footer>
+                            <Button onClick={this.confirmDelete}>
+                                Confirm
+                            </Button>
+                        </Modal.Footer>
+                    </Modal>
+
                     <h4>{icon}{this.getTitle()}</h4>
                     {btn_grp}
-               </div>);
+                </div>);
     },
     getKey: function(prefix, suffix) {
         return ((this.state.edit_mode?'edit':'fix') + prefix
@@ -112,7 +124,15 @@ var PanelMixin = {
         this.setState({edit_mode: !this.state.edit_mode});
     },
     onClickRemove: function() {
-        RightPanelActions.delObj(this.props.obj.id, this.obj_type);
+        this.setState({showModal: true});
+    },
+    closeModal: function() {
+        this.setState({showModal: false});
+    },
+    confirmDelete: function() {
+        this.setState({showModal: false}, function() {
+            RightPanelActions.delObj(this.props.obj.id, this.obj_type);
+        }.bind(this));
     },
     saveField: function(evnt) {
         var obj = this.state.obj;