Move table functionality to external script

InvenTree/part/templates/part/bom.html

@@ -45,88 +45,11 @@
 
 {% block js_ready %}
 {{ block.super }}
-    function reloadBom() {
-        $("#bom-table").bootstrapTable('refresh');
-    }
 
-    // Load the BOM data
+    loadBomTable($("#bom-table"), {
-    $("#bom-table").bootstrapTable({
+        editable: {{ editing_enabled }},
-        sortable: true,
+        bom_url: "{% url 'api-bom-list' %}",
-        search: true,
+        parent_id: {{ part.id }} 
-        queryParams: function(p) {
-            return {
-                part: {{ part.id }}
-            }
-        },
-        columns: [
-            {
-                field: 'pk',
-                title: 'ID',
-                visible: false,
-            },
-            {
-                field: 'sub_part',
-                title: 'Part',
-                sortable: true,
-                formatter: function(value, row, index, field) {
-                    return renderLink(value.name, value.url);
-                }
-            },
-            {
-                field: 'sub_part.description',
-                title: 'Description',
-            },
-            {
-                field: 'quantity',
-                title: 'Required',
-                searchable: false,
-                sortable: true,
-                formatter: function(value, row, index, field) {
-                    return renderEditable(value,
-                                          {
-                                             _pk: row.pk,
-                                             _title: 'Quantity',
-                                             enabled: {{ editing_enabled }},
-                                          }
-                    );
-                }
-            },
-            {
-                field: 'note',
-                title: 'Note',
-                searchable: true,
-                sortable: false,
-                formatter: function(value, row, index, field) {
-                    return renderEditable(value,
-                        {
-                            _pk: row.pk,
-                            _title: 'Note',
-                            _empty: 'Enter note',
-                            enabled: {{ editing_enabled }},
-                        });
-                }
-            },
-            {
-                field: 'sub_part.available_stock',
-                title: 'Available',
-                searchable: false,
-                sortable: true,
-                formatter: function(value, row, index, field) {
-                    var text = "";
-                    if (row.quantity < row.sub_part.available_stock)
-                    {
-                        text = "<span class='label label-success'>" + value + "</span>";
-                    }
-                    else
-                    {
-                        text = "<span class='label label-warning'>" + value + "</span>";
-                    }
-
-                    return renderLink(text, row.sub_part.url + "stock/");
-                }      
-            },
-        ],
-        url: "{% url 'api-bom-list' %}"
     });
 
     {% if editing_enabled %}
@@ -140,45 +63,15 @@
         location.href = "{% url 'part-bom' part.id %}";
     });
 
-    $("#bom-table").on('load-success.bs.table', function() {
-        // Make the table elements editable
-        $("#bom-table").find('.editable-item').editable();
-    });
-
     {% else %}
 
     $("#edit-bom").click(function () {
         
         location.href = "{% url 'part-bom' part.id %}?edit=1";
         
-        /*
-        editBOM(
-            {
-                url: "{% url 'api-bom-list' %}",
-                part_name: "{{ part.name }}",
-                part_id: "{{ part.id }}",
-            }
-        );
-        */
-        /*
-        launchModalForm(
-                        "{% url 'bom-item-create' %}",
-                        {
-                            reload: true,
-                            data: {
-                                parent: {{ part.id }}
-                            }
-                        });
-        */
     });
 
     $("#export-bom").click(function () {
-        /*
-        launchModalForm(
-                        "{% url 'bom-export' part.id %}",
-                        {
-                        });
-        */
         //TODO - Select format of the data
         location.href = "{% url 'bom-export' part.id %}";
     });

InvenTree/static/script/inventree/bom.js

@@ -6,77 +6,167 @@
  */
 
 
-function refreshBOM(){
+function reloadBomTable(table, options) {
-    // TODO - Update the BOM data once the data are read from the server
+
+    table.bootstrapTable('refresh');
 }
 
 
-function editBOM(options){
+function loadBomTable(table, options) {
-
+    /* Load a BOM table with some configurable options.
-    /* Launch a modal window to edit the BOM options.
+     * 
-     * The caller should pass the following key:value data in 'options':
+     * Following options are available:
-     * part_name: The name of the part being edited
+     * editable      - Should the BOM table be editable?
-     * part_id: The pk of the part (for AJAX lookup)
+     * bom_url       - Address to request BOM data from
-     * url: The JSON API URL to get BOM data
+     * parent_id     - Parent ID of the owning part
+     * 
+     * BOM data are retrieved from the server via AJAX query
      */
 
-    // Default modal target if none is supplied
+    // Construct the table columns
-    var modal = options.modal || '#modal-form';
-    
-    var title = 'Edit BOM for ' + options.part_name;
 
-    var body = `
+    var cols = [
-        <table class='table table-striped table-condensed' id='modal-bom-table'></table>
-        <div style='float: right;'>
-            <button class='btn btn-basic' type='button' id='new-bom-item'>Add BOM Item</button>
-        </div>
-    `;
-
-    openModal(
         {
-            modal: modal,
+            field: 'pk',
-            content: body,
+            title: 'ID',
-            title: title,
+            visible: false,
-            submit_text: 'Save',
+        }
-            close_text: 'Cancel',
+    ];
+
+    if (options.editable) {
+        // TODO - Add checkbox column
+    }
+
+    // Part column
+    cols.push(
+        {
+            field: 'sub_part',
+            title: 'Part',
+            sortable: true,
+            formatter: function(value, row, index, field) {
+                if (options.editable) {
+                    return renderEditable(value.name,
+                        {
+                            _pk: row.pk,
+                            _type: 'select',
+                            _title: 'Part',
+                            _class: 'editable-part',
+                            _value: 1,
+                        });
+                }
+                else {
+                    return renderLink(value.name, value.url);
+                }
+            }
         }
     );
 
-    $('#new-bom-item').click(function() {
+    // Part description
-        alert("New BOM item!");
+    cols.push(
-    });
+        {
+            field: 'sub_part.description',
+            title: 'Description',
+        }
+    );
 
-    $('#modal-bom-table').bootstrapTable({
+    // Part quantity
+    cols.push(
+        {
+            field: 'quantity',
+            title: 'Required',
+            searchable: false,
+            sortable: true,
+            formatter: function(value, row, index, field) {
+                if (options.editable) {
+                    return renderEditable(value, 
+                        {
+                            _pk: row.pk,
+                            _title: 'Quantity',
+                        });
+                }
+                else {
+                    return value;
+                }
+            }
+        }
+    );
+
+    // Part notes
+    cols.push(
+        {
+            field: 'note',
+            title: 'Notes',
+            searchable: true,
+            sortable: false,
+            formatter: function(value, row, index, field) {
+                if (options.editable) {
+                    return renderEditable(value, 
+                        {
+                            _pk: row.pk,
+                            _title: 'Note',
+                            _empty: 'Enter note',
+                        });
+                }
+                else {
+                    return value; 
+                }
+            }
+        }
+    );
+
+    // If we are NOT editing, display the available stock
+    if (!options.editable) {
+        cols.push(
+            {
+                field: 'sub_part.available_stock',
+                title: 'Available',
+                searchable: false,
+                sortable: true,
+                formatter: function(value, row, index, field) {
+                    var text = "";
+
+                    if (row.quantity < row.sub_part.available_stock)
+                    {
+                        text = "<span class='label label-success'>" + value + "</span>";
+                    }
+                    else
+                    {
+                        text = "<span class='label label-warning'>" + value + "</span>";
+                    }
+
+                    return renderLink(text, row.sub_part.url + "stock/");
+                }
+            }
+        );
+    }
+
+    // Configure the table (bootstrap-table)
+
+    table.bootstrapTable({
         sortable: true,
         search: true,
         queryParams: function(p) {
             return {
-                part: options.part_id,
+                part: options.parent_id,
             }
         },
-        //data: {},
+        columns: cols,
-        columns: [
+        url: options.bom_url
-            {
-                field: 'pk',
-                title: 'ID',
-                visible: false
-            },
-            {
-                field: 'sub_part.name',
-                title: 'Part',
-                sortable: true,
-            },
-            {
-                field: 'sub_part.description',
-                title: 'Description',
-            },
-            {
-                field: 'quantity',
-                title: 'Required',
-                searchable: false,
-                sortable: true,
-            }
-        ],
-        url: options.url,
     });
+
+    if (options.editable) {
+        // Callback when the BOM data are successfully loaded
+        table.on('load-success.bs.table', function() {
+            table.find('.editable-item').editable();
+            $("#bom-table").find('.editable-part').editable({
+                source: [
+                    // Dummy data (for now)
+                    {value: 1, text: 'Apple'},
+                    {value: 2, text: 'Banana'},
+                    {value: 3, text: 'Carrot'},
+                ]   
+            });
+        });
+    }
+
 }

InvenTree/static/script/tables.js

@@ -25,16 +25,9 @@ function renderEditable(text, options) {
      * _empty    - placeholder text to show when field is empty
      * _class    - html class (default = 'editable-item')
      * _id       - id
-     * 
+     * _value    - Initial value of the editable (default = blank)
-     * And some further parameters:
-     * enabled   - if 1 or true, render the editable.
-     *             otherwise, just return the supplied text
      */
 
-    if (!options.enabled) {
-        return text;
-    }
-
     // Default values (if not supplied)
     var _type  = options._type || 'text';
     var _class = options._class || 'editable-item';
@@ -53,6 +46,10 @@ function renderEditable(text, options) {
         html = html + " data-title='" + options._title + "'";
     }
 
+    if (options._value) {
+        html = html + " data-value='" + options._value + "'";
+    }
+
     if (options._empty) {
         html = html + " data-placeholder='" + options._empty + "'";
         html = html + " data-emptytext='" + options._empty + "'";