Merge pull request #3006 from SchrodingersGat/bom-delete-fix

BOM delete fix

InvenTree/part/templates/part/detail.html

@@ -589,32 +589,15 @@
             // Get a list of the selected BOM items
             var rows = $("#bom-table").bootstrapTable('getSelections');
 
-            // TODO - In the future, display (in the dialog) which items are going to be deleted
+            if (rows.length == 0) {
+                rows = $('#bom-table').bootstrapTable('getData');
+            }
 
-            showQuestionDialog(
-                '{% trans "Delete selected BOM items?" %}',
-                '{% trans "All selected BOM items will be deleted" %}',
-                {
-                    accept: function() {
-
-                        // Keep track of each DELETE request
-                        var requests = [];
-
-                        rows.forEach(function(row) {
-                            requests.push(
-                                inventreeDelete(
-                                    `/api/bom/${row.pk}/`,
-                                )
-                            );
-                        });
-
-                        // Wait for *all* the requests to complete
-                        $.when.apply($, requests).done(function() {
-                            location.reload();
-                        });
-                    }
+            deleteBomItems(rows, {
+                success: function() {
+                    $('#bom-table').bootstrapTable('refresh');
                 }
-            );
+            });
         });
 
         $('#bom-upload').click(function() {

InvenTree/templates/js/translated/bom.js

@@ -16,6 +16,7 @@
 
 /* exported
     constructBomUploadTable,
+    deleteBomItems,
     downloadBomTemplate,
     exportBom,
     newPartFromBomWizard,
@@ -647,7 +648,88 @@ function bomSubstitutesDialog(bom_item_id, substitutes, options={}) {
             reloadParentTable();
         }
     });
+}
 
+
+function deleteBomItems(items, options={}) {
+    /* Delete the selected BOM items from the database
+     */
+
+    function renderItem(item, opts={}) {
+
+        var sub_part = item.sub_part_detail;
+        var thumb = thumbnailImage(sub_part.thumbnail || sub_part.image);
+        
+        var html = `
+        <tr>
+            <td>${thumb} ${sub_part.full_name}</td>
+            <td>${item.reference}</td>
+            <td>${item.quantity}
+        </tr>
+        `;
+
+        return html;
+    }
+
+    var rows = '';
+
+    items.forEach(function(item) {
+        rows += renderItem(item);
+    });
+
+    var html = `
+    <div class='alert alert-block alert-danger'>
+    {% trans "All selected BOM items will be deleted" %}
+    </div>
+
+    <table class='table table-striped table-condensed'>
+        <tr>
+            <th>{% trans "Part" %}</th>
+            <th>{% trans "Reference" %}</th>
+            <th>{% trans "Quantity" %}</th>
+        </tr>
+        ${rows}
+    </table>
+    `;
+
+    constructFormBody({}, {
+        title: '{% trans "Delete selected BOM items?" %}',
+        fields: {},
+        preFormContent: html,
+        submitText: '{% trans "Delete" %}',
+        submitClass: 'danger',
+        confirm: true,
+        onSubmit: function(fields, opts) {
+            // Individually send DELETE requests for each BOM item
+            // We do *not* send these all at once, to prevent overloading the server
+
+            // Show the progress spinner
+            $(opts.modal).find('#modal-progress-spinner').show();
+
+            function deleteNextBomItem() {
+
+                if (items.length > 0) {
+                    
+                    var item = items.shift();
+
+                    inventreeDelete(`/api/bom/${item.pk}/`,
+                        {
+                            complete: deleteNextBomItem,
+                        }
+                    );
+                } else {
+                    // Destroy this modal once all items are deleted
+                    $(opts.modal).modal('hide');
+
+                    if (options.success) {
+                        options.success();
+                    }
+                }
+            }
+
+            deleteNextBomItem();
+        },
+    });
 }
 
 
@@ -1146,19 +1228,13 @@ function loadBomTable(table, options={}) {
 
             var pk = $(this).attr('pk');
 
-            var html = `
-            <div class='alert alert-block alert-danger'>
-            {% trans "Are you sure you want to delete this BOM item?" %}
-            </div>`;
+            var item = table.bootstrapTable('getRowByUniqueId', pk);
 
-            constructForm(`/api/bom/${pk}/`, {
-                method: 'DELETE',
-                title: '{% trans "Delete BOM Item" %}',
-                preFormContent: html,
-                onSuccess: function() {
+            deleteBomItems([item], {
+                success: function() {
                     reloadBomTable(table);
                 }
-            }); 
+            });
         });
 
         // Callback for "edit" button

InvenTree/templates/js/translated/forms.js

@@ -288,6 +288,7 @@ function constructDeleteForm(fields, options) {
  * - method: The HTTP method e.g. 'PUT', 'POST', 'DELETE' (default='PATCH')
  * - title: The form title
  * - submitText: Text for the "submit" button
+ * - submitClass: CSS class for the "submit" button (default = ')
  * - closeText: Text for the "close" button
  * - fields: list of fields to display, with the following options
  *      - filters: API query filters

InvenTree/templates/js/translated/modals.js

@@ -42,6 +42,8 @@ function createNewModal(options={}) {
         }
     });
 
+    var submitClass = options.submitClass || 'primary';
+
     var html = `
     <div class='modal fade modal-fixed-footer modal-primary inventree-modal' role='dialog' id='modal-form-${id}' tabindex='-1'>
         <div class='modal-dialog'>
@@ -74,7 +76,7 @@ function createNewModal(options={}) {
                     <span class='flex-item' style='flex-grow: 1;'></span>
                     <h4><span id='modal-progress-spinner' class='fas fa-circle-notch fa-spin' style='display: none;'></span></h4>
                     <button type='button' class='btn btn-secondary' id='modal-form-close' data-bs-dismiss='modal'>{% trans "Cancel" %}</button>
-                    <button type='button' class='btn btn-primary' id='modal-form-submit'>{% trans "Submit" %}</button>
+                    <button type='button' class='btn btn-${submitClass}' id='modal-form-submit'>{% trans "Submit" %}</button>
                 </div>
             </div>
         </div>