Adjust display of extra "add bom item" button at bottom of BOM table (#3773)

InvenTree/part/templates/part/detail.html

@@ -277,7 +277,7 @@
                 </div>
 
                 {% if roles.part.change %}
-                <button class='btn btn-success' type='button' title='{% trans "New BOM Item" %}' id='bom-item-new'>
+                <button class='btn btn-success' type='button' title='{% trans "Add BOM Item" %}' id='bom-item-new'>
                     <span class='fas fa-plus-circle'></span> {% trans "Add BOM Item" %}
                 </button>
                 {% endif %}
@@ -286,12 +286,6 @@
     </div>
     <div class='panel-content'>
         {% include "part/bom.html" with part=part %}
-         {% if roles.part.change %}
-                <button class='btn btn-success' type='button' title='{% trans "New BOM Item" %}' id='bom-item-new-footer'>
-                    <span class='fas fa-plus-circle'></span> {% trans "Add BOM Item" %}
-                </button>
-             <br/>
-         {% endif %}
     </div>
 </div>
 
@@ -618,19 +612,7 @@
         });
 
         $("[id^=bom-item-new]").click(function () {
-
+            addBomItem({{ part.pk }}, {
-            var fields = bomItemFields();
-
-            fields.part.value = {{ part.pk }};
-            fields.sub_part.filters = {
-                active: true,
-            };
-
-            constructForm('{% url "api-bom-list" %}', {
-                fields: fields,
-                method: 'POST',
-                title: '{% trans "Create BOM Item" %}',
-                focus: 'sub_part',
                 onSuccess: function() {
                     $('#bom-table').bootstrapTable('refresh');
                 }

InvenTree/templates/js/translated/bom.js

@@ -15,6 +15,7 @@
 */
 
 /* exported
+    addBomItem,
     constructBomUploadTable,
     deleteBomItems,
     downloadBomTemplate,
@@ -28,6 +29,30 @@
 */
 
 
+/*
+ * Launch a dialog to add a new BOM line item to a Bill of Materials
+ */
+function addBomItem(part_id, options={}) {
+
+    var fields = bomItemFields();
+
+    fields.part.value = part_id;
+    fields.sub_part.filters = {
+        active: true,
+    };
+
+    constructForm('{% url "api-bom-list" %}', {
+        fields: fields,
+        method: 'POST',
+        title: '{% trans "Create BOM Item" %}',
+        focus: 'sub_part',
+        onSuccess: function(response) {
+            handleFormSuccess(response, options);
+        }
+    });
+}
+
+
 /* Construct a table of data extracted from a BOM file.
  * This data is used to import a BOM interactively.
  */
@@ -1171,6 +1196,13 @@ function loadBomTable(table, options={}) {
                         `/part/${row.part}/bom/`
                     );
                 }
+            },
+            footerFormatter: function(data) {
+                return `
+                <button class='btn btn-success float-right' type='button' title='{% trans "Add BOM Item" %}' id='bom-item-new-footer'>
+                    <span class='fas fa-plus-circle'></span> {% trans "Add BOM Item" %}
+                </button>
+                `;
             }
         });
     }
@@ -1297,6 +1329,15 @@ function loadBomTable(table, options={}) {
     // In editing mode, attached editables to the appropriate table elements
     if (options.editable) {
 
+        // Callback for "new bom item" button in footer
+        table.on('click', '#bom-item-new-footer', function() {
+            addBomItem(options.parent_id, {
+                onSuccess: function() {
+                    table.bootstrapTable('refresh');
+                }
+            });
+        });
+
         // Callback for "delete" button
         table.on('click', '.bom-delete-button', function() {