Add confirmation modal to activate/deactivate a part

- New question modal available

InvenTree/part/templates/part/detail.html

@@ -15,11 +15,11 @@
                 <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
                 <span class="caret"></span></button>
                 <ul class="dropdown-menu">
+                  {% if part.active %}
                   <li><a href='#' id='duplicate-part' title='Duplicate Part'>Duplicate</a></li>
                   <li><a href="#" id='edit-part' title='Edit part'>Edit</a></li>
                   <li><a href='#' id='stocktake-part' title='Stocktake'>Stocktake</a></li>
                   <hr>
-                  {% if part.active %}
                   <li><a href="#" id='deactivate-part' title='Deactivate part'>Deactivate</a></li>
                   {% else %}
                   <li><a href="#" id='activate-part' title='Activate part'>Activate</a></li>
@@ -150,6 +150,12 @@
     });
 
     $('#activate-part').click(function() {
+        showQuestionDialog(
+            'Activate Part?',
+            'Are you sure you wish to reactivate {{ part.name }}?',
+            {
+                accept_text: 'Activate',
+                accept: function() {
                     inventreeUpdate(
                         "{% url 'api-part-detail' part.id %}",
                         {
@@ -160,9 +166,19 @@
                             reloadOnSuccess: true,
                         }
                     );
+                }
+            },
+        );
     });
 
     $('#deactivate-part').click(function() {
+        showQuestionDialog(
+            'Deactivate Part?',
+            `Are you sure you wish to deactivate {{ part.name }}?<br>
+            `,
+            {
+                accept_text: 'Deactivate',
+                accept: function() {
                     inventreeUpdate(
                         "{% url 'api-part-detail' part.id %}",
                         {
@@ -173,6 +189,9 @@
                             reloadOnSuccess: true,
                         }
                     );
+                }
+            }
+        );
     });
 
 

InvenTree/static/script/inventree/modals.js

@@ -155,16 +155,16 @@ function renderErrorMessage(xhr) {
 }
 
 
-function showDialog(title, content, options={}) {
+function showAlertDialog(title, content, options={}) {
     /* Display a modal dialog message box.
      * 
      * title - Title text 
      * content - HTML content of the dialog window
      * options:
-     *  modal - modal form to use (default = '#modal-dialog')
+     *  modal - modal form to use (default = '#modal-alert-dialog')
      */
 
-     var modal = options.modal || '#modal-dialog';
+     var modal = options.modal || '#modal-alert-dialog';
 
      $(modal).on('shown.bs.modal', function() {
         $(modal + ' .modal-form-content').scrollTop(0);
@@ -181,6 +181,54 @@ function showDialog(title, content, options={}) {
      $(modal).modal('show');
 }
 
+
+function showQuestionDialog(title, content, options={}) {
+    /* Display a modal dialog for user input (Yes/No confirmation dialog)
+     * 
+     * title - Title text
+     * content - HTML content of the dialog window
+     * options:
+     *   modal - Modal target (default = 'modal-question-dialog')
+     *   accept_text - Text for the accept button (default = 'Accept')
+     *   cancel_text - Text for the cancel button (default = 'Cancel')
+     *   accept - Function to run if the user presses 'Accept'
+     *   cancel - Functino to run if the user presses 'Cancel'
+     */ 
+
+    var modal = options.modal || '#modal-question-dialog';
+
+    $(modal).on('shown.bs.modal', function() {
+        $(modal + ' .modal-form-content').scrollTop(0);
+    });
+
+    modalSetTitle(modal, title);
+    modalSetContent(modal, content);
+
+    var accept_text = options.accept_text || 'Accept';
+    var cancel_text = options.cancel_text || 'Cancel';
+
+    $(modal).find('#modal-form-cancel').html(cancel_text);
+    $(modal).find('#modal-form-accept').html(accept_text);
+
+    $(modal).on('click', '#modal-form-accept', function() {
+        $(modal).modal('hide');
+
+        if (options.accept) {
+            options.accept();
+        }
+    });
+
+    $(modal).on('click', 'modal-form-cancel', function() {
+        $(modal).modal('hide');
+
+        if (options.cancel) {
+            options.cancel();
+        }
+    });
+
+    $(modal).modal('show');
+}
+
 function openModal(options) {
     /* Open a modal form, and perform some action based on the provided options object:
      * 
@@ -275,12 +323,12 @@ function launchDeleteForm(url, options = {}) {
             else {
 
                 $(modal).modal('hide');
-                showDialog('Invalid form response', 'JSON response missing HTML data');
+                showAlertDialog('Invalid form response', 'JSON response missing HTML data');
             }
         },
         error: function (xhr, ajaxOptions, thrownError) {
             $(modal).modal('hide');
-            showDialog('Error requesting form data', renderErrorMessage(xhr));
+            showAlertDialog('Error requesting form data', renderErrorMessage(xhr));
         }
     });
 
@@ -299,7 +347,7 @@ function launchDeleteForm(url, options = {}) {
             },
             error: function (xhr, ajaxOptions, thrownError) {
                 $(modal).modal('hide');
-                showDialog('Error deleting item', renderErrorMessage(xhr));
+                showAlertDialog('Error deleting item', renderErrorMessage(xhr));
             }
         });
     });
@@ -365,7 +413,7 @@ function handleModalForm(url, options) {
                         }
                         else {
                             $(modal).modal('hide');
-                            showDialog('Invalid response from server', 'Form data missing from server response');
+                            showAlertDialog('Invalid response from server', 'Form data missing from server response');
                         }
                     }
                 }
@@ -378,7 +426,7 @@ function handleModalForm(url, options) {
                 // There was an error submitting form data via POST
                 
                 $(modal).modal('hide'); 
-                showDialog('Error posting form data', renderErrorMessage(xhr));                
+                showAlertDialog('Error posting form data', renderErrorMessage(xhr));                
             },
             complete: function(xhr) {
                 //TODO
@@ -431,12 +479,12 @@ function launchModalForm(url, options = {}) {
 
             } else {
                 $(modal).modal('hide');
-                showDialog('Invalid server response', 'JSON response missing form data');
+                showAlertDialog('Invalid server response', 'JSON response missing form data');
             }
         },
         error: function (xhr, ajaxOptions, thrownError) {
             $(modal).modal('hide');
-            showDialog('Error requesting form data', renderErrorMessage(xhr));
+            showAlertDialog('Error requesting form data', renderErrorMessage(xhr));
         }
     };
 

InvenTree/templates/modals.html

@@ -39,14 +39,33 @@
     </div>
 </div>
 
-<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-dialog'>
+<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-question-dialog'>
         <div class='modal-dialog'>
             <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>
-              <h3 id='modal-title'>Confirm Item Deletion</h3>
+                  <h3 id='modal-title'>Question Here</h3>
+                </div>
+                <div class='modal-form-content'>
+                </div>
+                <div class='modal-footer'>
+                    <button type='button' class='btn btn-default' id='modal-form-cancel'>Cancel</button>
+                    <button type='button' class='btn btn-primary' id='modal-form-accept'>Accept</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-alert-dialog'>
+    <div class='modal-dialog'>
+        <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>
+              <h3 id='modal-title'>Alert Information</h3>
             </div>
             <div class='modal-form-content'>
             </div>