Add context flag to enable editing mode

- pass ?edit=1 to the BOM
- Display page differently if in editing mode
-

InvenTree/part/models.py

@@ -288,6 +288,7 @@ class Part(models.Model):
         header.append('Part')
         header.append('Description')
         header.append('Quantity')
+        header.append('Note')
         
         lines.append(header)
 
@@ -297,6 +298,7 @@ class Part(models.Model):
             line.append(it.sub_part.name)
             line.append(it.sub_part.description)
             line.append(it.quantity)
+            line.append(it.note)
 
             lines.append([str(x) for x in line])
 

InvenTree/part/templates/part/bom.html

@@ -9,69 +9,47 @@
 
 {% include 'part/tabs.html' with tab='bom' %}
 
-<h3>Bill of Materials</h3>
+<h3>Bill of Materials{% if editing_enabled %} (Edit Mode){% endif %}</h3>
 
 <table class='table table-striped table-condensed' id='bom-table'>
 </table>
 
-<div class='container-fluid'>
-    <button type='button' class='btn btn-success' id='new-bom-item'>Add BOM Item</button>
-</div>
+<div><br></div>
 
-<div class='container-fluid'>
-    <button type='button' class='btn btn-basic' id='export-bom'>Export BOM</button>
+{% if editing_enabled %}
+<div style='float: right;'>
+    <button class='btn btn-warning' type='button' id='editing-cancel'>Cancel</button>
+    <button class='btn btn-success' type='button' id='editing-finish'>Save Changes</button>
 </div>
+{% else %}
+<div class='dropdown' style="float: right;">
+    <button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>
+        Options
+        <span class='caret'></span>
+    </button>
+    <ul class='dropdown-menu'>
+        <li><a href='#' id='edit-bom' title='Edit BOM'>Edit BOM</a></li>
+        <li><a href='#' id='export-bom' title='Export BOM'>Export BOM</a></li>
+    </ul>
+</div>
+{% endif %}
 
 {% endblock %}
+
+{% block js_load %}
+{{ block.super }}
+<script type='text/javascript' src="{% static 'script/inventree/api.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/inventree/part.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/inventree/bom.js' %}"></script>
+{% endblock %}
+
 {% block js_ready %}
 {{ block.super }}
     function reloadBom() {
         $("#bom-table").bootstrapTable('refresh');
     }
 
-    $('#bom-table').on('click', '.delete-button', function () {
-        var button = $(this);
-
-        launchDeleteForm(
-                         button.attr('url'),
-                         {
-                             success: reloadBom
-                         });
-    });
-
-    $("#bom-table").on('click', '.edit-button', function () {
-        var button = $(this);
-
-        launchModalForm(
-                        button.attr('url'),
-                        {
-                            success: reloadBom
-                        });
-
-    });
-
-    $("#new-bom-item").click(function () {
-        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 %}";
-    });
-
+    // Load the BOM data
     $("#bom-table").bootstrapTable({
         sortable: true,
         search: true,
@@ -102,7 +80,29 @@
                 field: 'quantity',
                 title: 'Required',
                 searchable: false,
-                sortable: true
+                sortable: true,
+                formatter: function(value, row, index, field) {
+                    return renderEditable(value,
+                                          {
+                                             _pk: row.pk,
+                                             _title: 'Quantity',
+                                          }
+                    );
+                }
+            },
+            {
+                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',
+                        });
+                }
             },
             {
                 field: 'sub_part.available_stock',
@@ -123,12 +123,90 @@
                     return renderLink(text, row.sub_part.url + "stock/");
                 }      
             },
-            {
-                formatter: function(value, row, index, field) {
-                    return editButton(row.url + 'edit') + ' ' + deleteButton(row.url + 'delete');
-                }
-            }
         ],
         url: "{% url 'api-bom-list' %}"
     });
+
+    /*
+    $('#bom-table').on('click', '.delete-button', function () {
+        var button = $(this);
+
+        launchDeleteForm(
+                         button.attr('url'),
+                         {
+                             success: reloadBom
+                         });
+    });
+
+    $("#bom-table").on('click', '.edit-button', function () {
+        var button = $(this);
+
+        launchModalForm(
+                        button.attr('url'),
+                        {
+                            success: reloadBom
+                        });
+
+    });
+    */
+
+    {% if editing_enabled %}
+    $("#editing-finish").click(function() {
+        alert("Finished!");
+        location.href = "{% url 'part-bom' part.id %}";
+    });
+
+    $("#editing-cancel").click(function() {
+        alert("Cancelled!");
+        location.href = "{% url 'part-bom' part.id %}";
+    });
+
+    // Inline mode
+    //$.fn.editable.defaults.mode = 'inline';
+
+    $("#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 %}";
+    });
+
+    {% endif %}
+
 {% endblock %}

InvenTree/part/views.py

@@ -90,6 +90,17 @@ class PartDetail(DetailView):
     queryset = Part.objects.all()
     template_name = 'part/detail.html'
 
+    # Add in some extra context information based on query params
+    def get_context_data(self, **kwargs):
+        context = super(PartDetail, self).get_context_data(**kwargs)
+
+        if str(self.request.GET.get('edit', None)) == '1':
+            context['editing_enabled'] = True
+        else:
+            context['editing_enabled'] = False
+
+        return context
+
 
 class PartImage(AjaxUpdateView):