Create SupplierPart directly from PurchaseOrderLineItem dialog (#3361)

* Move JS code from html to external .js file

* Add secondary dialog for creating a new SupplierPart from the PurchaseOrderLineItem dialog

* JS linting

InvenTree/order/templates/order/purchase_order_detail.html

@@ -168,23 +168,16 @@
 {% if order.status == PurchaseOrderStatus.PENDING %}
 $('#new-po-line').click(function() {
 
-    var fields = poLineItemFields({
-        order: {{ order.pk }},
+    createPurchaseOrderLineItem({{ order.pk }}, {
         {% if order.supplier %}
         supplier: {{ order.supplier.pk }},
         {% if order.supplier.currency %}
         currency: '{{ order.supplier.currency }}',
         {% endif %}
         {% endif %}
-    });
-
-    constructForm('{% url "api-po-line-list" %}', {
-        fields: fields,
-        method: 'POST',
-        title: '{% trans "Add Line Item" %}',
         onSuccess: function() {
             $('#po-line-table').bootstrapTable('refresh');
-        },
+        }
     });
 });
 

InvenTree/templates/js/translated/company.js

@@ -102,10 +102,14 @@ function editManufacturerPart(part, options={}) {
 }
 
 
-function supplierPartFields() {
+function supplierPartFields(options={}) {
 
-    return {
-        part: {},
+    var fields = {
+        part: {
+            filters: {
+                purchaseable: true,
+            }
+        },
         manufacturer_part: {
             filters: {
                 part_detail: true,
@@ -128,6 +132,12 @@ function supplierPartFields() {
             icon: 'fa-box',
         }
     };
+
+    if (options.part) {
+        fields.manufacturer_part.filters.part = options.part;
+    }
+
+    return fields;
 }
 
 /*
@@ -135,10 +145,11 @@ function supplierPartFields() {
  */
 function createSupplierPart(options={}) {
 
-    var fields = supplierPartFields();
+    var fields = supplierPartFields({
+        part: options.part,
+    });
 
     if (options.part) {
-        fields.manufacturer_part.filters.part = options.part;
         fields.part.hidden = true;
         fields.part.value = options.part;
     }

InvenTree/templates/js/translated/model_renderers.js

@@ -255,15 +255,20 @@ function renderOwner(name, data, parameters={}, options={}) {
 // eslint-disable-next-line no-unused-vars
 function renderPurchaseOrder(name, data, parameters={}, options={}) {
 
-    var html = `<span>${data.reference}</span>`;
-
-    var thumbnail = null;
+    var html = '';
 
     if (data.supplier_detail) {
         thumbnail = data.supplier_detail.thumbnail || data.supplier_detail.image;
 
-        html += ' - ' + select2Thumbnail(thumbnail);
-        html += `<span>${data.supplier_detail.name}</span>`;
+        html += select2Thumbnail(thumbnail);
+    }
+
+    html += `<span>${data.reference}</span>`;
+
+    var thumbnail = null;
+
+    if (data.supplier_detail) {
+        html += ` - <span>${data.supplier_detail.name}</span>`;
     }
 
     if (data.description) {

InvenTree/templates/js/translated/order.js

@@ -16,6 +16,7 @@
     renderLink,
     salesOrderStatusDisplay,
     setupFilterList,
+    supplierPartFields,
 */
 
 /* exported
@@ -25,6 +26,8 @@
     completePurchaseOrder,
     completeShipment,
     completePendingShipments,
+    createPurchaseOrder,
+    createPurchaseOrderLineItem,
     createSalesOrder,
     createSalesOrderShipment,
     editPurchaseOrderLineItem,
@@ -539,6 +542,26 @@ function createPurchaseOrder(options={}) {
 }
 
 
+// Create a new PurchaseOrderLineItem
+function createPurchaseOrderLineItem(order, options={}) {
+
+    var fields = poLineItemFields({
+        order: order,
+        supplier: options.supplier,
+        currency: options.currency,
+    });
+
+    constructForm('{% url "api-po-line-list" %}', {
+        fields: fields,
+        method: 'POST',
+        title: '{% trans "Add Line Item" %}',
+        onSuccess: function(response) {
+            handleFormSuccess(response, options);
+        }
+    });
+}
+
+
 /* Construct a set of fields for the SalesOrderLineItem form */
 function soLineItemFields(options={}) {
 
@@ -590,13 +613,40 @@ function poLineItemFields(options={}) {
 
     var fields = {
         order: {
-            hidden: true,
+            filters: {
+                supplier_detail: true,
+            }
         },
         part: {
             filters: {
                 part_detail: true,
                 supplier_detail: true,
                 supplier: options.supplier,
+            },
+            secondary: {
+                method: 'POST',
+                title: '{% trans "Add Supplier Part" %}',
+                fields: function(data) {
+                    var fields = supplierPartFields({
+                        part: data.part,
+                    });
+
+                    fields.supplier.value = options.supplier;
+
+                    // Adjust manufacturer part query based on selected part
+                    fields.manufacturer_part.adjustFilters = function(query, opts) {
+
+                        var part = getFormFieldValue('part', {}, opts);
+
+                        if (part) {
+                            query.part = part;
+                        }
+
+                        return query;
+                    };
+
+                    return fields;
+                }
             }
         },
         quantity: {},
@@ -610,6 +660,7 @@ function poLineItemFields(options={}) {
 
     if (options.order) {
         fields.order.value = options.order;
+        fields.order.hidden = true;
     }
 
     if (options.currency) {