Refactor notes for "purchase order"

InvenTree/company/templates/company/detail.html

@@ -181,24 +181,16 @@
 
 <div class='panel panel-hidden' id='panel-company-notes'>
     <div class='panel-heading'>
-        <div class='row'>
+        <div class='d-flex flex-wrap'>
-            <div class='col-sm-6'>
             <h4>{% trans "Company Notes" %}</h4>
-            </div>
+            {% include "spacer.html" %}
-            <div class='col-sm-6'>
+            <div class='btn-group' role='group'>
-                <div class='btn-group float-right'>
+                {% include "notes_buttons.html" %}
-                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-small btn-outline-secondary'>
-                        <span class='fas fa-edit'>      
-                        </span>
-                    </button>
-                </div>
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if company.notes %}
+        <textarea id='company-notes'></textarea>
-        {{ company.notes | markdownify }}
-        {% endif %}
     </div>
 </div>
 
@@ -207,16 +199,15 @@
 {% block js_ready %}
 {{ block.super }}
 
-    $('#edit-notes').click(function() {
+    onPanelLoad('company-notes', function() {
-        constructForm('{% url "api-company-detail" company.pk %}', {
+
-            fields: {
+        setupNotesField(
-                notes: {
+            'company-notes',
-                    multiline: true,
+            '{% url "api-company-detail" company.pk %}',
+            {
+                editable: true,
             }
-            },
+        )
-            title: '{% trans "Edit Notes" %}',
-            reload: true,
-        });
     });
 
     loadStockTable($("#assigned-stock-table"), {
@@ -230,7 +221,25 @@
         filterTarget: '#filter-list-customerstock',
     });
 
+    onPanelLoad('company-stock', function() {
+
+        loadStockTable($('#stock-table'), {
+            url: "{% url 'api-stock-list' %}",
+            params: {
+                company: {{ company.id }},
+                part_detail: true,
+                supplier_part_detail: true,
+                location_detail: true,
+            },
+            buttons: [
+                '#stock-options',
+            ],
+            filterKey: "companystock",
+        });
+    });
+
     {% if company.is_customer %}
+    onPanelLoad('panel-sales-orders', function() {
         loadSalesOrderTable("#sales-order-table", {
             url: "{% url 'api-so-list' %}",
             params: {
@@ -244,6 +253,7 @@
                 customer: {{ company.pk }},
             });
         });
+    });
     {% endif %}
 
     {% if company.is_supplier %}
@@ -270,20 +280,6 @@
 
     {% endif %}
 
-    loadStockTable($('#stock-table'), {
-        url: "{% url 'api-stock-list' %}",
-        params: {
-            company: {{ company.id }},
-            part_detail: true,
-            supplier_part_detail: true,
-            location_detail: true,
-        },
-        buttons: [
-            '#stock-options',
-        ],
-        filterKey: "companystock",
-    });
-
     {% if company.is_manufacturer %}
 
     function reloadManufacturerPartTable() {

InvenTree/order/templates/order/purchase_order_detail.html

@@ -71,24 +71,16 @@
 
 <div class='panel panel-hidden' id='panel-order-notes'>
     <div class='panel-heading'>
-        <div class='row'>
+        <div class='d-flex flex-wrap'>
-            <div class='col-sm-6'>
             <h4>{% trans "Order Notes" %}</h4>
-            </div>
+            {% include "spacer.html" %}
-            <div class='col-sm-6'>
+            <div class='btn-group' role='group'>
-                <div class='btn-group float-right'>
+                {% include "notes_buttons.html" %}
-                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-outline-secondary'>
-                        <span class='fas fa-edit'>      
-                        </span>
-                    </button>
-                </div>
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if order.notes %}
+        <textarea id='order-notes'></textarea>
-        {{ order.notes | markdownify }}
-        {% endif %}
     </div>
 </div>
 
@@ -98,16 +90,18 @@
 
 {{ block.super }}
 
-    $('#edit-notes').click(function() {
+    onPanelLoad('order-notes', function() {
-        constructForm('{% url "api-po-detail" order.pk %}', {
+        setupNotesField(
-            fields: {
+            'order-notes',
-                notes: {
+            '{% url "api-po-detail" order.pk %}',
-                    multiline: true,
+            {
+                {% if roles.purchase_order.change %}
+                editable: true,
+                {% else %}
+                editable: false,
+                {% endif %}
             }
-            },
+        );
-            title: '{% trans "Edit Notes" %}',
-            reload: true,
-        });
     });
 
     enableDragAndDrop(

InvenTree/templates/js/translated/helpers.js

@@ -239,7 +239,7 @@ function setupNotesField(element, url, options={}) {
     });
 
     var toolbar_icons = [
-        'preview',
+        'preview', '|',
     ];
 
     if (editable) {
@@ -267,13 +267,13 @@ function setupNotesField(element, url, options={}) {
     });
 
 
+    // Hide the toolbar
+    $(`#${element}`).next('.EasyMDEContainer').find('.editor-toolbar').hide();
+
     if (!editable) {
         // Set readonly
         mde.codemirror.setOption('readOnly', true);
             
-        // Hide the toolbar
-        $(`#${element}`).next('.EasyMDEContainer').find('.editor-toolbar').hide();     
-        
         // Hide the "edit" and "save" buttons
         $('#edit-notes').hide();
         $('#save-notes').hide();
@@ -286,6 +286,9 @@ function setupNotesField(element, url, options={}) {
             $('#edit-notes').hide();
             $('#save-notes').show();
 
+            // Show the toolbar
+            $(`#${element}`).next('.EasyMDEContainer').find('.editor-toolbar').show();     
+
             mde.togglePreview();
         });