From 1c60d4e15252bdd431bf5bfb2b14c3fa24c8f6a3 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Sun, 10 Apr 2022 19:55:32 +1000
Subject: [PATCH] Refactor notes for "purchase order"

---
 .../company/templates/company/detail.html     | 90 +++++++++----------
 .../order/purchase_order_detail.html          | 42 ++++-----
 InvenTree/templates/js/translated/helpers.js  | 15 ++--
 3 files changed, 70 insertions(+), 77 deletions(-)

diff --git a/InvenTree/company/templates/company/detail.html b/InvenTree/company/templates/company/detail.html
index 0717d02d4d..401dfe219e 100644
--- a/InvenTree/company/templates/company/detail.html
+++ b/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='col-sm-6'>
-                <h4>{% trans "Company Notes" %}</h4>
-            </div>
-            <div class='col-sm-6'>
-                <div class='btn-group float-right'>
-                    <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 class='d-flex flex-wrap'>
+            <h4>{% trans "Company Notes" %}</h4>
+            {% include "spacer.html" %}
+            <div class='btn-group' role='group'>
+                {% include "notes_buttons.html" %}
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if company.notes %}
-        {{ company.notes | markdownify }}
-        {% endif %}
+        <textarea id='company-notes'></textarea>
     </div>
 </div>
 
@@ -207,16 +199,15 @@
 {% block js_ready %}
 {{ block.super }}
 
-    $('#edit-notes').click(function() {
-        constructForm('{% url "api-company-detail" company.pk %}', {
-            fields: {
-                notes: {
-                    multiline: true,
-                }
-            },
-            title: '{% trans "Edit Notes" %}',
-            reload: true,
-        });
+    onPanelLoad('company-notes', function() {
+
+        setupNotesField(
+            'company-notes',
+            '{% url "api-company-detail" company.pk %}',
+            {
+                editable: true,
+            }
+        )
     });
 
     loadStockTable($("#assigned-stock-table"), {
@@ -230,18 +221,37 @@
         filterTarget: '#filter-list-customerstock',
     });
 
-    {% if company.is_customer %}
-    loadSalesOrderTable("#sales-order-table", {
-        url: "{% url 'api-so-list' %}",
-        params: {
-            customer: {{ company.id }},
-        }
+    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",
+        });
     });
 
-    $("#new-sales-order").click(function() {
+    {% if company.is_customer %}
+    onPanelLoad('panel-sales-orders', function() {
+        loadSalesOrderTable("#sales-order-table", {
+            url: "{% url 'api-so-list' %}",
+            params: {
+                customer: {{ company.id }},
+            }
+        });
 
-        createSalesOrder({
-            customer: {{ company.pk }},
+        $("#new-sales-order").click(function() {
+
+            createSalesOrder({
+                customer: {{ company.pk }},
+            });
         });
     });
     {% endif %}
@@ -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() {
diff --git a/InvenTree/order/templates/order/purchase_order_detail.html b/InvenTree/order/templates/order/purchase_order_detail.html
index 53f973ee20..f470fc75f1 100644
--- a/InvenTree/order/templates/order/purchase_order_detail.html
+++ b/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='col-sm-6'>
-                <h4>{% trans "Order Notes" %}</h4>
-            </div>
-            <div class='col-sm-6'>
-                <div class='btn-group float-right'>
-                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-outline-secondary'>
-                        <span class='fas fa-edit'>      
-                        </span>
-                    </button>
-                </div>
+        <div class='d-flex flex-wrap'>
+            <h4>{% trans "Order Notes" %}</h4>
+            {% include "spacer.html" %}
+            <div class='btn-group' role='group'>
+                {% include "notes_buttons.html" %}
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if order.notes %}
-        {{ order.notes | markdownify }}
-        {% endif %}
+        <textarea id='order-notes'></textarea>
     </div>
 </div>
 
@@ -98,16 +90,18 @@
 
 {{ block.super }}
 
-    $('#edit-notes').click(function() {
-        constructForm('{% url "api-po-detail" order.pk %}', {
-            fields: {
-                notes: {
-                    multiline: true,
-                }
-            },
-            title: '{% trans "Edit Notes" %}',
-            reload: true,
-        });
+    onPanelLoad('order-notes', function() {
+        setupNotesField(
+            'order-notes',
+            '{% url "api-po-detail" order.pk %}',
+            {
+                {% if roles.purchase_order.change %}
+                editable: true,
+                {% else %}
+                editable: false,
+                {% endif %}
+            }
+        );
     });
 
     enableDragAndDrop(
diff --git a/InvenTree/templates/js/translated/helpers.js b/InvenTree/templates/js/translated/helpers.js
index 46c9755c34..c464ad3645 100644
--- a/InvenTree/templates/js/translated/helpers.js
+++ b/InvenTree/templates/js/translated/helpers.js
@@ -239,7 +239,7 @@ function setupNotesField(element, url, options={}) {
     });
 
     var toolbar_icons = [
-        'preview',
+        'preview', '|',
     ];
 
     if (editable) {
@@ -266,14 +266,14 @@ function setupNotesField(element, url, options={}) {
         shortcuts: [],
     });
 
-    
+
+    // 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();
         });