Merge pull request #203 from nexB/127-alert-unsaved-component-changes

Add warning re unsaved Component edits #127

Author: jdaguil

assets/app/js/componentDialog.js

@@ -34,11 +34,19 @@ class ComponentDialog {
         this.saveButton = this.dialog.find("button#component-save");
         this.deleteButton = this.dialog.find("button#component-delete");
 
+        // Define the buttons that can be used to close the dialog.
+        this.exitButton = this.dialog.find("button#component-exit")
+        this.closeButton = this.dialog.find("button#component-close")
+
         // Make node view modal box draggable
         this.dialog.draggable({ handle: ".modal-header" });
         this.handlers = {};
         this.saveButton.click(() => this._saveComponent());
         this.deleteButton.click(() => this._deleteComponent());
+
+        // Link each close button's click event to a method that checks for unsaved edits.
+        this.exitButton.click(() => this._closeComponent());
+        this.closeButton.click(() => this._closeComponent());
     }
 
     database(aboutCodeDB) {
@@ -151,9 +159,28 @@ class ComponentDialog {
         $('select').trigger('change.select2');
 
         this.title.text(data.id);
+
+        // Disable the ability to close the dialog by clicking outside
+        // the dialog or pressing the escape key.
+        this.dialog.modal({ backdrop: "static", keyboard: false });
+
+        // Retrieve any previously-saved values -- use below in _closeComponent()
+        // to compare with any new edits before closing the dialog.
+        this.initialSerialization = this.dialog.find("form").serialize();
+
         this.dialog.modal('show');
     }
 
+    // Check whether the user has made any new edits.
+    _closeComponent() {
+        // Retrieve the current form values, i.e., including edits not yet saved.
+        this.currentSerialization = this.dialog.find("form").serialize();
+
+        if (this.initialSerialization !== this.currentSerialization) {
+            return confirm('Your new changes haven\'t been saved.  \n\nAre you sure you want to exit without saving?')
+        }
+    }
+
     _saveComponent() {
         let id = this.title.text();
         this._component(id)

index.html

@@ -261,14 +261,14 @@ <h5>Total Files Scanned: <span class="total-files"></span></h5>
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <button type="button" class="close" data-dismiss="modal" id="component-exit" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h3 class="modal-title">Modal title</h3>
                 </div>
                 <div class="modal-body">
                     <form>
                         <fieldset class="form-group">
                             <label for="component-status">Status</label>
-                            <select class="form-control status" id="component-status" type="text">
+                            <select class="form-control status" id="component-status" name="component-status" type="text">
                                 <option value="Analyzed">Analyzed</option>
                                 <option value="Attention">Needs Attention</option>
                                 <option value="Original">Original Code</option>
@@ -277,40 +277,40 @@ <h3 class="modal-title">Modal title</h3>
                         </fieldset>
                         <fieldset class="form-group">
                             <label for="component-name">Component</label>
-                            <input type="text" class="form-control" id="component-name" placeholder="Enter component">
+                            <input type="text" class="form-control" id="component-name" name="component-name" placeholder="Enter component">
                         </fieldset>
                         <fieldset class="form-group">
                             <label for="component-version">Version</label>
-                            <input type="text" class="form-control" id="component-version" placeholder="Enter version">
+                            <input type="text" class="form-control" id="component-version" name="component-version" placeholder="Enter version">
                         </fieldset>
                         <fieldset class="form-group">
                             <label for="component-license">License</label>
-                            <select data-hide-on-select="true" class="form-control " id="component-license" type="text"></select>
+                            <select data-hide-on-select="true" class="form-control " id="component-license" name="component-license" type="text"></select>
                         </fieldset>
                         <fieldset class="form-group">
                             <label for="component-owner">Owner</label>
-                            <select data-hide-on-select="true" class="form-control" id="component-owner" type="text"></select>
+                            <select data-hide-on-select="true" class="form-control" id="component-owner" name="component-owner" type="text"></select>
                         </fieldset>
                         <fieldset class="form-group">
                             <label for="component-copyright">Copyright</label>
-                            <select data-hide-on-select="true" class="form-control" id="component-copyright" type="text"></select>
+                            <select data-hide-on-select="true" class="form-control" id="component-copyright" name="component-copyright" type="text"></select>
                         </fieldset>
                          <fieldset class="form-group">
                             <label for="component-language">Programming Language</label>
-                            <select data-hide-on-select="true" class="form-control" id="component-language" type="text"></select>
+                            <select data-hide-on-select="true" class="form-control" id="component-language" name="component-language" type="text"></select>
                         </fieldset>
                          <fieldset class="form-group">
                             <label for="component-homepage-url">Homepage URL</label>
-                            <select data-hide-on-select="true" class="form-control" id="component-homepage-url" type="text"></select>
+                            <select data-hide-on-select="true" class="form-control" id="component-homepage-url" name="component-homepage-url" type="text"></select>
                         </fieldset>
                         <fieldset class="form-group">
                             <label for="component-notes">Notes</label>
-                            <textarea class="form-control" id="component-notes" rows="3"></textarea>
+                            <textarea class="form-control" id="component-notes" name="component-notes" rows="3"></textarea>
                         </fieldset>
                     </form>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal" id="component-close">Close</button>
                     <button type="button" class="btn btn-danger" data-dismiss="modal" id="component-delete">Delete Component</button>
                     <button type="button" class="btn btn-primary" id="component-save">Save changes</button>
                 </div>