Adds front-end javascript code to implement new serializer features

InvenTree/templates/js/translated/forms.js

@@ -1976,7 +1976,7 @@ function constructField(name, parameters, options) {
     html += `<div class='controls'>`;
 
     // Does this input deserve "extra" decorators?
-    var extra = parameters.prefix != null;
+    var extra = (parameters.icon != null) || (parameters.prefix != null) || (parameters.prefixRaw != null);
     
     // Some fields can have 'clear' inputs associated with them
     if (!parameters.required && !parameters.read_only) {
@@ -2001,6 +2001,10 @@ function constructField(name, parameters, options) {
  
         if (parameters.prefix) {
             html += `<span class='input-group-text'>${parameters.prefix}</span>`;
+        } else if (parameters.prefixRaw) {
+            html += parameters.prefixRaw;
+        } else if (parameters.icon) {
+            html += `<span class='input-group-text'><span class='fas ${parameters.icon}'></span></span>`;
         }
     }
 
@@ -2147,6 +2151,10 @@ function constructInputOptions(name, classes, type, parameters, options={}) {
 
     opts.push(`type='${type}'`);
 
+    if (parameters.title || parameters.help_text) {
+        opts.push(`title='${parameters.title || parameters.help_text}'`);
+    }
+
     // Read only?
     if (parameters.read_only) {
         opts.push(`readonly=''`);
@@ -2192,11 +2200,6 @@ function constructInputOptions(name, classes, type, parameters, options={}) {
         opts.push(`required=''`);
     }
 
-    // Custom mouseover title?
-    if (parameters.title != null) {
-        opts.push(`title='${parameters.title}'`);
-    }
-
     // Placeholder?
     if (parameters.placeholder != null) {
         opts.push(`placeholder='${parameters.placeholder}'`);

InvenTree/templates/js/translated/order.js

@@ -476,6 +476,25 @@ function receivePurchaseOrderItems(order_id, line_items, options={}) {
             quantity = 0;
         }
 
+        // Prepend toggles to the quantity input
+        var toggle_batch = `
+            <span class='input-group-text' title='{% trans "Add batch code" %}' data-bs-toggle='collapse' href='#div-batch-${pk}'>
+                <span class='fas fa-layer-group'></span>
+            </span>
+        `; 
+
+        var toggle_serials = `
+            <span class='input-group-text' title='{% trans "Add serial numbers" %}' data-bs-toggle='collapse' href='#div-serials-${pk}'>
+                <span class='fas fa-hashtag'></span>
+            </span>
+        `;
+        
+        var prefix_buttons = toggle_batch;
+
+        if (line_item.part_detail.trackable) {
+            prefix_buttons += toggle_serials;
+        }
+
         // Quantity to Receive
         var quantity_input = constructField(
             `items_quantity_${pk}`,
@@ -485,12 +504,49 @@ function receivePurchaseOrderItems(order_id, line_items, options={}) {
                 value: quantity,
                 title: '{% trans "Quantity to receive" %}',
                 required: true,
+                prefixRaw: prefix_buttons,
             },
             {
                 hideLabels: true,
             }
         );
 
+        // Add in options for "batch code" and "serial numbers"
+        var batch_input = constructField(
+            `items_batch_code_${pk}`,
+            {
+                type: 'string',
+                required: true,
+                label: '{% trans "Batch Code" %}',
+                help_text: '{% trans "Enter batch code for incoming stock items" %}',
+                prefixRaw: toggle_batch,
+            },
+            {
+                hideLabels: true,
+            }
+        );
+
+        var sn_input = constructField(
+            `items_serial_numbers_${pk}`,
+            {
+                type: 'string',
+                required: true,
+                label: '{% trans "Serial Numbers" %}',
+                help_text: '{% trans "Enter serial numbers for incoming stock items" %}',
+                prefixRaw: toggle_serials,
+            },
+            {
+                hideLabels: true
+            }
+        );
+
+        // Hidden inputs below the "quantity" field
+        var quantity_input_group = `${quantity_input}<div class='collapse' id='div-batch-${pk}'>${batch_input}</div>`;
+
+        if (line_item.part_detail.trackable) {
+            quantity_input_group += `<div class='collapse' id='div-serials-${pk}'>${sn_input}</div>`;
+        }
+
         // Construct list of StockItem status codes
         var choices = [];
 
@@ -554,7 +610,7 @@ function receivePurchaseOrderItems(order_id, line_items, options={}) {
                 ${line_item.received}
             </td>
             <td id='quantity_${pk}'>
-                ${quantity_input}
+                ${quantity_input_group}
             </td>
             <td id='status_${pk}'>
                 ${status_input}
@@ -678,13 +734,23 @@ function receivePurchaseOrderItems(order_id, line_items, options={}) {
                 var location = getFormFieldValue(`items_location_${pk}`, {}, opts);
 
                 if (quantity != null) {
-                    data.items.push({
+
+                    var line = {
                         line_item: pk,
                         quantity: quantity,
                         status: status,
                         location: location,
-                    });
+                    };
 
+                    if (getFormFieldElement(`items_batch_code_${pk}`).exists()) {
+                        line.batch_code = getFormFieldValue(`items_batch_code_${pk}`);
+                    }
+
+                    if (getFormFieldElement(`items_serial_numbers_${pk}`).exists()) {
+                        line.serial_numbers = getFormFieldValue(`items_serial_numbers_${pk}`);
+                    }
+
+                    data.items.push(line);
                     item_pk_values.push(pk);
                 }