BOM Table Improvements (#3310)

* Bug fix for "multi delete" form

- Was requesting entire LIST endpoint before launching form
- Could cause extremely long delays before window opened

* Improve rendering of "no stock available" in BOM table

* Adds footer row to BOM table

- Display total number of parts
- Display minimum "can build" amount

* Added extra information to footer row

* Annotate 'ordering' quantity to BOM list

- Display this quantity in the BOM table

* Bump API version

* JS linting

* Allow BOM list to be filtered by "on_order" parameter

* Add information showing amount that can be built once orders are received

InvenTree/templates/InvenTree/notifications/notifications.html

@@ -72,6 +72,7 @@ $('#history-delete').click(function() {
         '{% url "api-notifications-list" %}',
         {
             method: 'DELETE',
+            multi_delete: true,
             preFormContent: html,
             title: '{% trans "Delete Notifications" %}',
             onSuccess: function() {

InvenTree/templates/js/translated/attachment.js

@@ -109,6 +109,7 @@ function deleteAttachments(attachments, url, options={}) {
 
     constructForm(url, {
         method: 'DELETE',
+        multi_delete: true,
         title: '{% trans "Delete Attachments" %}',
         preFormContent: html,
         form_data: {

InvenTree/templates/js/translated/bom.js

@@ -651,9 +651,10 @@ function bomSubstitutesDialog(bom_item_id, substitutes, options={}) {
 }
 
 
+/*
+ * Delete the selected BOM items from the database
+ */
 function deleteBomItems(items, options={}) {
-    /* Delete the selected BOM items from the database
-     */
 
     function renderItem(item, opts={}) {
 
@@ -696,6 +697,7 @@ function deleteBomItems(items, options={}) {
 
     constructForm('{% url "api-bom-list"  %}', {
         method: 'DELETE',
+        multi_delete: true,
         title: '{% trans "Delete selected BOM items?" %}',
         form_data: {
             items: ids,
@@ -877,6 +879,32 @@ function loadBomTable(table, options={}) {
 
             return text;
         },
+        footerFormatter: function(data) {
+
+            // Top-level BOM count
+            var top_total = 0;
+
+            // Total BOM count
+            var all_total = 0;
+
+            data.forEach(function(row) {
+                var q = +row['quantity'] || 0;
+
+                all_total += q;
+
+                if (row.part == options.parent_id) {
+                    top_total += q;
+                }
+            });
+
+            var total = `${top_total}`;
+
+            if (top_total != all_total) {
+                total += ` / ${all_total}`;
+            }
+
+            return total;
+        }
     });
 
     cols.push({
@@ -897,9 +925,10 @@ function loadBomTable(table, options={}) {
             var text = `${available_stock}`;
 
             if (available_stock <= 0) {
-                text = `<span class='badge rounded-pill bg-danger'>{% trans "No Stock Available" %}</span>`;
+                text += `<span class='fas fa-times-circle icon-red float-right' title='{% trans "No Stock Available" %}'></span>`;
             } else {
                 var extra = '';
+
                 if ((substitute_stock > 0) && (variant_stock > 0)) {
                     extra = '{% trans "Includes variant and substitute stock" %}';
                 } else if (variant_stock > 0) {
@@ -913,6 +942,10 @@ function loadBomTable(table, options={}) {
                 }
             }
 
+            if (row.on_order && row.on_order > 0) {
+                text += `<span class='fas fa-shopping-cart float-right' title='{% trans "On Order" %}: ${row.on_order}'></span>`;
+            }
+
             return renderLink(text, url);
         }
     });
@@ -1010,7 +1043,36 @@ function loadBomTable(table, options={}) {
                     can_build = available / row.quantity;
                 }
 
-                return formatDecimal(can_build, 2);
+                var text = formatDecimal(can_build, 2);
+
+                // Take "on order" quantity into account
+                if (row.on_order && row.on_order > 0 && row.quantity > 0) {
+                    available += row.on_order;
+                    can_build = available / row.quantity;
+
+                    text += `<span class='fas fa-info-circle icon-blue float-right' title='{% trans "Including On Order" %}: ${can_build}'></span>`;
+                }
+
+                return text;
+            },
+            footerFormatter: function(data) {
+                var can_build = null;
+
+                data.forEach(function(row) {
+                    if (row.part == options.parent_id && row.quantity > 0) {
+                        var cb = availableQuantity(row) / row.quantity;
+
+                        if (can_build == null || cb < can_build) {
+                            can_build = cb;
+                        }
+                    }
+                });
+
+                if (can_build == null) {
+                    can_build = '-';
+                }
+
+                return can_build;
             },
             sorter: function(valA, valB, rowA, rowB) {
                 // Function to sort the "can build" quantity
@@ -1131,6 +1193,7 @@ function loadBomTable(table, options={}) {
         parentIdField: 'parentId',
         treeShowField: 'sub_part',
         showColumns: true,
+        showFooter: true,
         name: 'bom',
         sortable: true,
         search: true,

InvenTree/templates/js/translated/company.js

@@ -263,6 +263,7 @@ function deleteSupplierParts(parts, options={}) {
 
     constructForm('{% url "api-supplier-part-list" %}', {
         method: 'DELETE',
+        multi_delete: true,
         title: '{% trans "Delete Supplier Parts" %}',
         preFormContent: html,
         form_data: {
@@ -491,6 +492,7 @@ function deleteManufacturerParts(selections, options={}) {
 
     constructForm('{% url "api-manufacturer-part-list" %}', {
         method: 'DELETE',
+        multi_delete: true,
         title: '{% trans "Delete Manufacturer Parts" %}',
         preFormContent: html,
         form_data: {
@@ -538,6 +540,7 @@ function deleteManufacturerPartParameters(selections, options={}) {
 
     constructForm('{% url "api-manufacturer-part-parameter-list" %}', {
         method: 'DELETE',
+        multi_delete: true,
         title: '{% trans "Delete Parameters" %}',
         preFormContent: html,
         form_data: {

InvenTree/templates/js/translated/forms.js

@@ -250,30 +250,40 @@ function constructChangeForm(fields, options) {
  */
 function constructDeleteForm(fields, options) {
 
-    // Request existing data from the API endpoint
-    // This data can be used to render some information on the form
-    $.ajax({
-        url: options.url,
-        type: 'GET',
-        contentType: 'application/json',
-        dataType: 'json',
-        accepts: {
-            json: 'application/json',
-        },
-        success: function(data) {
+    // If we are deleting a specific "instance" (i.e. a single object)
+    // then we request the instance information first
 
-            // Store the instance data
-            options.instance = data;
+    // However we may be performing a "multi-delete" (against a list endpoint),
+    // in which case we do not want to perform such a request!
 
-            constructFormBody(fields, options);
-        },
-        error: function(xhr) {
-            // TODO: Handle error here
-            console.error(`Error in constructDeleteForm at '${options.url}`);
+    if (options.multi_delete) {
+        constructFormBody(fields, options);
+    } else {
+        // Request existing data from the API endpoint
+        // This data can be used to render some information on the form
+        $.ajax({
+            url: options.url,
+            type: 'GET',
+            contentType: 'application/json',
+            dataType: 'json',
+            accepts: {
+                json: 'application/json',
+            },
+            success: function(data) {
 
-            showApiError(xhr, options.url);
-        }
-    });
+                // Store the instance data
+                options.instance = data;
+
+                constructFormBody(fields, options);
+            },
+            error: function(xhr) {
+                // TODO: Handle error here
+                console.error(`Error in constructDeleteForm at '${options.url}`);
+
+                showApiError(xhr, options.url);
+            }
+        });
+    }
 }
 
 

InvenTree/templates/js/translated/table_filters.js

@@ -63,6 +63,10 @@ function getAvailableTableFilters(tableKey) {
                 type: 'bool',
                 title: '{% trans "Has Available Stock" %}',
             },
+            on_order: {
+                type: 'bool',
+                title: '{% trans "On Order" %}',
+            },
             validated: {
                 type: 'bool',
                 title: '{% trans "Validated" %}',