Merge pull request #1941 from SchrodingersGat/lazy-loading

Adds one-shot function when a panel is displayed

InvenTree/part/templates/part/detail.html

@@ -333,18 +333,131 @@
 {% block js_ready %}
     {{ block.super }}
 
+    // Load the "suppliers" tab
+    onPanelLoad('suppliers', function() {
+        function reloadSupplierPartTable() {
+            $('#supplier-part-table').bootstrapTable('refresh');
+        }
+    
+        $('#supplier-create').click(function () {
+    
+            createSupplierPart({
+                part: {{ part.pk }},
+                onSuccess: reloadSupplierPartTable,
+            });
+        });
+    
+        $("#supplier-part-delete").click(function() {
+    
+            var selections = $("#supplier-part-table").bootstrapTable("getSelections");
+    
+            var requests = [];
+    
+            showQuestionDialog(
+                '{% trans "Delete Supplier Parts?" %}',
+                '{% trans "All selected supplier parts will be deleted" %}',
+                {
+                    accept: function() {
+                        selections.forEach(function(part) {
+                            var url = `/api/company/part/${part.pk}/`;
+                
+                            requests.push(inventreeDelete(url));
+                        });
+                
+                        $.when.apply($, requests).done(function() {
+                            reloadSupplierPartTable();
+                        });
+                    }
+                }
+            );
+        });
+    
+        loadSupplierPartTable(
+            "#supplier-part-table",
+            "{% url 'api-supplier-part-list' %}",
+            {
+                params: {
+                    part: {{ part.id }},
+                    part_detail: false,
+                    supplier_detail: true,
+                    manufacturer_detail: true,
+                },
+            }
+        );
+    
+        linkButtonsToSelection($("#supplier-part-table"), ['#supplier-part-options']);
+    
+        loadManufacturerPartTable(
+            '#manufacturer-part-table',
+            "{% url 'api-manufacturer-part-list' %}",
+            {
+                params: {
+                    part: {{ part.id }},
+                    part_detail: true,
+                    manufacturer_detail: true,
+                },
+            }
+        );
+    
+        linkButtonsToSelection($("#manufacturer-part-table"), ['#manufacturer-part-options']);
+    
+        $("#manufacturer-part-delete").click(function() {
+    
+            var selections = $("#manufacturer-part-table").bootstrapTable("getSelections");
+    
+            deleteManufacturerParts(selections, {
+                onSuccess: function() { 
+                    $("#manufacturer-part-table").bootstrapTable("refresh");
+                }
+            });
+        });
+    
+        $('#manufacturer-create').click(function () {
+            
+            createManufacturerPart({
+                part: {{ part.pk }},
+                onSuccess: function() {
+                    $("#manufacturer-part-table").bootstrapTable("refresh");
+                }
+            });
+        });
+    });
+
+    // Load the "builds" tab
+    onPanelLoad("build-orders", function() {
+
+        $("#start-build").click(function() {
+            newBuildOrder({
+                part: {{ part.pk }},
+            });
+        });
+    
+        loadBuildTable($("#build-table"), {
+            url: "{% url 'api-build-list' %}",
+            params: {
+                part: {{ part.id }},
+            }
+        });
+
         loadBuildOrderAllocationTable("#build-order-allocation-table", {
             params: {
                 part: {{ part.id }},
             }
         });
     
+    });
+
+    // Load the "sales orders" tab
+    onPanelLoad("sales-orders", function() {
         loadSalesOrderAllocationTable("#sales-order-allocation-table", {
             params: {
                 part: {{ part.id }},
             }
         });
+    });
 
+    // Load the "used in" tab
+    onPanelLoad("used-in", function() {
         loadPartTable('#used-table',
             '{% url "api-part-list" %}',
             {
@@ -354,7 +467,10 @@
                 filterTarget: '#filter-list-usedin',
             }
         );
+    });
 
+    // Load the "BOM" tab
+    onPanelLoad("bom", function() {
         // Load the BOM table data
         loadBomTable($("#bom-table"), {
             editable: {{ editing_enabled }},
@@ -364,16 +480,6 @@
             sub_part_detail: true,
         });
 
-    // Load the BOM table data in the pricing view
-    loadBomTable($("#bom-pricing-table"), {
-        editable: {{ editing_enabled }},
-        bom_url: "{% url 'api-bom-list' %}",
-        part_url: "{% url 'api-part-list' %}",
-        parent_id: {{ part.id }} ,
-        sub_part_detail: true,
-    });
-
-
         linkButtonsToSelection($("#bom-table"),
             [
                 "#bom-item-delete",
@@ -482,20 +588,10 @@
         $("#print-bom-report").click(function() {
             printBomReports([{{ part.pk }}]);
         });
-
-    $("#start-build").click(function() {
-        newBuildOrder({
-            part: {{ part.pk }},
-        });
-    });
-
-    loadBuildTable($("#build-table"), {
-        url: "{% url 'api-build-list' %}",
-        params: {
-            part: {{ part.id }},
-        }
     });
 
+    // Load the "related parts" tab
+    onPanelLoad("related-parts", function() {
         $('#table-related-part').inventreeTable({
         });
 
@@ -515,7 +611,10 @@
                 reload: true,
             });
         });
+    });
 
+    // Load the "variants" tab
+    onPanelLoad("variants", function() {
         loadPartVariantTable($('#variants-table'), {{ part.pk }});
 
         $('#new-variant').click(function() {
@@ -527,13 +626,36 @@
                 }
             );
         });
+    });
 
+
+    // Load the BOM table data in the pricing view
+    loadBomTable($("#bom-pricing-table"), {
+        editable: {{ editing_enabled }},
+        bom_url: "{% url 'api-bom-list' %}",
+        part_url: "{% url 'api-part-list' %}",
+        parent_id: {{ part.id }} ,
+        sub_part_detail: true,
+    });
+
+    onPanelLoad("purchase-orders", function() {
         loadPurchaseOrderTable($("#purchase-order-table"), {
             url: "{% url 'api-po-list' %}",
             params: {
                 part: {{ part.id }},
             },
         });
+    });
+
+    onPanelLoad("sales-orders", function() {
+        loadSalesOrderTable($("#sales-order-table"), {
+            url: "{% url 'api-so-list' %}",
+            params: {
+                part: {{ part.id }},
+            },
+        });    
+    });
+
 
     $("#part-order2").click(function() {
         launchModalForm("{% url 'order-parts' %}", {
@@ -544,13 +666,7 @@
         });
     });
 
-    loadSalesOrderTable($("#sales-order-table"), {
+    onPanelLoad("test-templates", function() {
-        url: "{% url 'api-so-list' %}",
-        params: {
-            part: {{ part.id }},
-        },
-    });
-
         loadPartTestTemplateTable(
             $("#test-template-table"),
             {
@@ -561,12 +677,12 @@
             }
         ); 
 
-    function reloadTable() {
+        $("#add-test-template").click(function() {
+    
+            function reloadTestTemplateTable() {
                 $("#test-template-table").bootstrapTable("refresh");
             }
 
-    $("#add-test-template").click(function() {
-    
             constructForm('{% url "api-part-test-template-list" %}', {
                 method: 'POST',
                 fields: {
@@ -581,8 +697,7 @@
                     }
                 },
                 title: '{% trans "Add Test Result Template" %}',
-            onSuccess: reloadTable
+                onSuccess: reloadTestTemplateTable
-        });
             });
 
             $("#test-template-table").on('click', '.button-test-edit', function() {
@@ -599,7 +714,7 @@
                         requires_attachment: {},
                     },
                     title: '{% trans "Edit Test Result Template" %}',
-            onSuccess: reloadTable,
+                    onSuccess: reloadTestTemplateTable,
                 });
             });
 
@@ -611,10 +726,14 @@
                 constructForm(url, {
                     method: 'DELETE',
                     title: '{% trans "Delete Test Result Template" %}',
-            onSuccess: reloadTable,
+                    onSuccess: reloadTestTemplateTable,
                 });
             });
 
+        });
+    });
+
+    onPanelLoad("part-stock", function() {
         $('#add-stock-item').click(function () {
             createNewStockItem({
                 reload: true,
@@ -653,6 +772,7 @@
                 }
             });
         });
+    });
 
     $('#edit-notes').click(function() {
         constructForm('{% url "api-part-detail" part.pk %}', {
@@ -684,6 +804,7 @@
         );
     });
 
+    onPanelLoad("part-parameters", function() {
         loadPartParameterTable(
             '#parameter-table', 
             '{% url "api-part-parameter-list" %}',
@@ -733,7 +854,9 @@
                 reload: true,
             });
         });
+    });
 
+    onPanelLoad("part-attachments", function() {
         loadAttachmentTable(
             '{% url "api-part-attachment-list" %}',
             {
@@ -797,93 +920,8 @@
                 }
             )
         });
-
-    function reloadSupplierPartTable() {
-        $('#supplier-part-table').bootstrapTable('refresh');
-    }
-
-    $('#supplier-create').click(function () {
-
-        createSupplierPart({
-            part: {{ part.pk }},
-            onSuccess: reloadSupplierPartTable,
-        });
     });
 
-    $("#supplier-part-delete").click(function() {
-
-        var selections = $("#supplier-part-table").bootstrapTable("getSelections");
-
-        var requests = [];
-
-        showQuestionDialog(
-            '{% trans "Delete Supplier Parts?" %}',
-            '{% trans "All selected supplier parts will be deleted" %}',
-            {
-                accept: function() {
-                    selections.forEach(function(part) {
-                        var url = `/api/company/part/${part.pk}/`;
-            
-                        requests.push(inventreeDelete(url));
-                    });
-            
-                    $.when.apply($, requests).done(function() {
-                        reloadSupplierPartTable();
-                    });
-                }
-            }
-        );
-    });
-
-    loadSupplierPartTable(
-        "#supplier-part-table",
-        "{% url 'api-supplier-part-list' %}",
-        {
-            params: {
-                part: {{ part.id }},
-                part_detail: false,
-                supplier_detail: true,
-                manufacturer_detail: true,
-            },
-        }
-    );
-
-    linkButtonsToSelection($("#supplier-part-table"), ['#supplier-part-options']);
-
-    loadManufacturerPartTable(
-        '#manufacturer-part-table',
-        "{% url 'api-manufacturer-part-list' %}",
-        {
-            params: {
-                part: {{ part.id }},
-                part_detail: true,
-                manufacturer_detail: true,
-            },
-        }
-    );
-
-    linkButtonsToSelection($("#manufacturer-part-table"), ['#manufacturer-part-options']);
-
-    $("#manufacturer-part-delete").click(function() {
-
-        var selections = $("#manufacturer-part-table").bootstrapTable("getSelections");
-
-        deleteManufacturerParts(selections, {
-            onSuccess: function() { 
-                $("#manufacturer-part-table").bootstrapTable("refresh");
-            }
-        });
-    });
-
-    $('#manufacturer-create').click(function () {
-        
-        createManufacturerPart({
-            part: {{ part.pk }},
-            onSuccess: function() {
-                $("#manufacturer-part-table").bootstrapTable("refresh");
-            }
-        });
-    });
 
     {% default_currency as currency %}
 

InvenTree/templates/js/dynamic/nav.js

@@ -72,7 +72,12 @@ function activatePanel(panelName, options={}) {
 
     // Display the panel
     $(panel).addClass('panel-visible');
-    $(panel).fadeIn(100);
+
+    // Load the data
+    $(panel).trigger('fadeInStarted');
+
+    $(panel).fadeIn(100, function() {
+    });
 
     // Un-select all selectors
     $('.list-group-item').removeClass('active');
@@ -82,3 +87,22 @@ function activatePanel(panelName, options={}) {
 
     $(select).parent('.list-group-item').addClass('active');
 }
+
+
+function onPanelLoad(panel, callback) {
+    // One-time callback when a panel is first displayed
+    // Used to implement lazy-loading, rather than firing 
+    // multiple AJAX queries when the page is first loaded.
+
+    var panelId = `#panel-${panel}`;
+
+    $(panelId).on('fadeInStarted', function(e) {
+
+        // Trigger the callback
+        callback();
+
+        // Turn off the event
+        $(panelId).off('fadeInStarted');
+
+    });
+}