From 4702c6b37f73161095476fb7a0a12f93f8835905 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 15 Oct 2021 00:25:36 +1100
Subject: [PATCH] Refactorin'

---
 InvenTree/build/templates/build/detail.html | 75 +++++++++-------
 InvenTree/templates/js/translated/build.js  | 94 +++++++++++++++++++++
 2 files changed, 137 insertions(+), 32 deletions(-)

diff --git a/InvenTree/build/templates/build/detail.html b/InvenTree/build/templates/build/detail.html
index d715149718..b7cdf12921 100644
--- a/InvenTree/build/templates/build/detail.html
+++ b/InvenTree/build/templates/build/detail.html
@@ -308,40 +308,55 @@ loadStockTable($("#build-stock-table"), {
     url: "{% url 'api-stock-list' %}",    
 });
 
-var buildInfo = {
-    pk: {{ build.pk }},
-    quantity: {{ build.quantity }},
-    completed: {{ build.completed }},
-    part: {{ build.part.pk }},
-    {% if build.take_from %}
-    source_location: {{ build.take_from.pk }},
-    {% endif %}
-    {% if build.has_tracked_bom_items %}
-    tracked_parts: true,
-    {% else %}
-    tracked_parts: false,
-    {% endif %}
-};
 
-{% if build.active %}
-loadBuildOutputTable(
-    buildInfo,
+// Get the list of BOM items required for this build
+inventreeGet(
+    '{% url "api-bom-list" %}',
     {
-
-    }
-);
-{% endif %}
-
-{% for item in build.incomplete_outputs %}
-// Get the build output as a javascript object
-inventreeGet('{% url 'api-stock-detail' item.pk %}', {},
+        part: {{ build.part.pk }},
+        sub_part_detail: true,
+    },
     {
         success: function(response) {
-            loadBuildOutputAllocationTable(buildInfo, response);
+
+            var build_info = {
+                pk: {{ build.pk }},
+                part: {{ build.part.pk }},
+                quantity: {{ build.quantity }},
+                bom_items: response,
+                {% if build.take_from %}
+                source_location: {{ build.take_from.pk }},
+                {% endif %}
+                {% if build.has_tracked_bom_items %}
+                tracked_parts: true,
+                {% else %}
+                tracked_parts: false,
+                {% endif %}
+            };
+
+            {% if build.active %}
+            loadBuildOutputTable(build_info);
+            {% endif %}
+
+            {% for item in build.incomplete_outputs %}
+            // Get the build output as a javascript object
+            inventreeGet('{% url 'api-stock-detail' item.pk %}', {},
+                {
+                    success: function(response) {
+                        loadBuildOutputAllocationTable(build_info, response);
+                    }
+                }
+            );
+            {% endfor %}
+        
+            {% if build.has_untracked_bom_items %}
+            // Load allocation table for un-tracked parts
+            loadBuildOutputAllocationTable(build_info, null);
+            {% endif %}
+
         }
     }
 );
-{% endfor %}
 
 loadBuildTable($('#sub-build-table'), {
     url: '{% url "api-build-list" %}',
@@ -351,6 +366,7 @@ loadBuildTable($('#sub-build-table'), {
     }
 });
 
+
 enableDragAndDrop(
     '#attachment-dropzone',
     '{% url "api-build-attachment-list" %}',
@@ -425,11 +441,6 @@ $('#edit-notes').click(function() {
     });
 });
 
-{% if build.has_untracked_bom_items %}
-// Load allocation table for un-tracked parts
-loadBuildOutputAllocationTable(buildInfo, null);
-{% endif %}
-
 function reloadTable() {
     $('#allocation-table-untracked').bootstrapTable('refresh');
 }
diff --git a/InvenTree/templates/js/translated/build.js b/InvenTree/templates/js/translated/build.js
index 4d8637d7ca..7c0185ec8b 100644
--- a/InvenTree/templates/js/translated/build.js
+++ b/InvenTree/templates/js/translated/build.js
@@ -428,6 +428,15 @@ function loadBuildOutputTable(build_info, options={}) {
     params.is_building = true;
     params.build = build_info.pk;
 
+    // Construct a list of "tracked" BOM items
+    var tracked_bom_items = [];
+
+    build_info.bom_items.forEach(function(bom_item) {
+        if (bom_item.sub_part_detail.trackable) {
+            tracked_bom_items.push(bom_item);
+        };
+    });
+
     var filters = {};
 
     for (var key in params) {
@@ -488,6 +497,83 @@ function loadBuildOutputTable(build_info, options={}) {
         });
     }
 
+    /*
+     * Construct a "sub table" showing the required BOM items
+     */
+    function constructBuildOutputSubTable(index, row, element) {
+        var sub_table_id = `output-sub-table-${row.pk}`;
+
+        var html = `
+        <div class='sub-table'>
+            <table class='table table-striped table-condensed' id='${sub_table_id}'></table>
+        </div>
+        `;
+
+        element.html(html);
+
+        var todo = "refactor the following fields, they are shared with the 'untracked' allocation table!";
+
+        $(`#${sub_table_id}`).bootstrapTable({
+            data: tracked_bom_items,
+            showHeader: true,
+            columns: [
+                {
+                    field: 'part',
+                    title: '{% trans "Required Part" %}',
+                    formatter: function(value, row) {
+                        var part = row.sub_part_detail;
+
+                        var url = `/part/${part.pk}/`;
+                        var thumb = part.thumbnail || row.image;
+                        var name = part.full_name;
+
+                        var html = imageHoverIcon(thumb) + renderLink(name, url) + makePartIcons(part);
+
+                        if (row.substitutes && row.substitutes.length > 0) {
+                            html += makeIconBadge('fa-exchange-alt', '{% trans "Substitute parts available" %}');
+                        }
+    
+                        if (row.allow_variants) {
+                            html += makeIconBadge('fa-sitemap', '{% trans "Variant stock allowed" %}');
+                        }
+
+                        return html;
+                    }
+                },
+                {
+                    field: 'reference',
+                    title: '{% trans "Reference" %}',
+                    sortable: true,
+                },
+                {
+                    field: 'quantity',
+                    title: '{% trans "Quantity Per Item" %}',
+                    sortable: true,
+                },
+                {
+                    field: 'allocated',
+                    title: '{% trans "Allocated" %}',
+                    formatter: function(value, row) {
+                        return "todo";
+                    }
+                },
+                {
+                    field: 'actions',
+                    title: '',
+                    formatter: function(value, row) {
+                        var html = `<div class='btn-group float-right' role='group'>`;
+
+                        html += "todo";
+
+                        html += `</div>`;
+                        
+                        return html;
+                    }
+                }
+            ]
+        });
+    }
+
     $(table).inventreeTable({
         url: '{% url "api-stock-list" %}',
         queryParams: filters,
@@ -497,6 +583,14 @@ function loadBuildOutputTable(build_info, options={}) {
         sortable: true,
         search: true,
         sidePagination: 'server',
+        detailView: build_info.tracked_parts || false,
+        detailViewByClick: true,
+        detailFilter: function(index, row) {
+            return true;
+        },
+        detailFormatter: function(index, row, element) {
+            constructBuildOutputSubTable(index, row, element);
+        },
         formatNoMatches: function() {
             return '{% trans "No active build outputs found" %}';
         },