From 53c579c992dd43fb163f65055dea4faf2ccdc52b Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Wed, 27 Oct 2021 23:03:08 +1100
Subject: [PATCH] Refactor PO and SO pages

---
 .../order/templates/order/order_base.html     |  90 ++++++++--------
 .../templates/order/sales_order_base.html     | 101 +++++++++---------
 InvenTree/templates/two_column.html           |  90 ----------------
 3 files changed, 91 insertions(+), 190 deletions(-)
 delete mode 100644 InvenTree/templates/two_column.html

diff --git a/InvenTree/order/templates/order/order_base.html b/InvenTree/order/templates/order/order_base.html
index 06ec079507..3300ce3b3d 100644
--- a/InvenTree/order/templates/order/order_base.html
+++ b/InvenTree/order/templates/order/order_base.html
@@ -1,4 +1,4 @@
-{% extends "two_column.html" %}
+{% extends "page_base.html" %}
 
 {% load i18n %}
 {% load static %}
@@ -24,65 +24,61 @@ src="{% static 'img/blank_image.png' %}"
 />
 {% endblock %}
 
-{% block page_data %}
-<h3>
-    {% trans "Purchase Order" %} {{ order.reference }}
+{% block details %}
+<h4>
+    {% trans "Purchase Order" %}: {{ order.reference }}
     {% if user.is_staff and roles.purchase_order.change %}
     <a href="{% url 'admin:order_purchaseorder_change' order.pk %}"><span title='{% trans "Admin view" %}' class='fas fa-user-shield'></span></a>
     {% endif %}
-</h3>
-<h3>
+</h4>
+<h4>
     {% purchase_order_status_label order.status large=True %}
     {% if order.is_overdue %}
     <span class='label label-large label-large-red'>{% trans "Overdue" %}</span>
     {% endif %}
-</h3>
-<hr>
+</h4>
 <p>{{ order.description }}{% include "clip.html"%}</p>
-<div class='btn-row'>
-    <div class='btn-group action-buttons' role='group'>
-        <!-- Printing options -->
-        <div class='btn-group'>
-            <button id='print-options' title='{% trans "Print actions" %}' class='btn btn-default dropdown-toggle' type='button' data-bs-toggle='dropdown'>
-                <span class='fas fa-print'></span> <span class='caret'></span>
-            </button>
-            <ul class='dropdown-menu' role='menu'>
-                <li><a href='#' id='print-order-report'><span class='fas fa-file-pdf'></span> {% trans "Print purchase order report" %}</a></li>
-                <li><a href='#' id='export-order'><span class='fas fa-file-download'></span> {% trans "Export order to file" %}</a></li>
-            </ul>
-        </div>
-        {% if roles.purchase_order.change %}
-        <!-- order actions -->
-        <div class='btn-group'>
-            <button id='order-options' title='{% trans "Order actions" %}' class='btn btn-default dropdown-toggle' type='button' data-bs-toggle='dropdown'>
-                <span class='fas fa-tools'></span> <span class='caret'></span>
-            </button>
-            <ul class='dropdown-menu' role='menu'>
-                <li><a href='#' id='edit-order'><span class='fas fa-edit icon-green'></span> {% trans "Edit order" %}</a></li>
-                {% if order.can_cancel %}
-                <li><a href='#' id='cancel-order'><span class='fas fa-times-circle icon-red'></span> {% trans "Cancel order" %}</a></li>
-                {% endif %}
-            </ul>
-        </div>
-        {% if order.status == PurchaseOrderStatus.PENDING and order.lines.count > 0 %}
-        <button type='button' class='btn btn-default' id='place-order' title='{% trans "Place order" %}'>
-            <span class='fas fa-shopping-cart icon-blue'></span>
+<div class='btn-group' role='group'>
+    <!-- Printing options -->
+    <div class='btn-group' role='group'>
+        <button id='print-options' title='{% trans "Print actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
+            <span class='fas fa-print'></span> <span class='caret'></span>
         </button>
-        {% elif order.status == PurchaseOrderStatus.PLACED %}
-        <button type='button' class='btn btn-default' id='receive-order' title='{% trans "Receive items" %}'>
-            <span class='fas fa-sign-in-alt icon-blue'></span>
-        </button>
-        <button type='button' class='btn btn-default' id='complete-order' title='{% trans "Mark order as complete" %}'>
-            <span class='fas fa-check-circle icon-green'></span>
-        </button>
-        {% endif %}
-        {% endif %}
+        <ul class='dropdown-menu' role='menu'>
+            <li><a class='dropdown-item' href='#' id='print-order-report'><span class='fas fa-file-pdf'></span> {% trans "Print purchase order report" %}</a></li>
+            <li><a class='dropdown-item' href='#' id='export-order'><span class='fas fa-file-download'></span> {% trans "Export order to file" %}</a></li>
+        </ul>
     </div>
+    {% if roles.purchase_order.change %}
+    <!-- order actions -->
+    <div class='btn-group'>
+        <button id='order-options' title='{% trans "Order actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
+            <span class='fas fa-tools'></span> <span class='caret'></span>
+        </button>
+        <ul class='dropdown-menu' role='menu'>
+            <li><a class='dropdown-item' href='#' id='edit-order'><span class='fas fa-edit icon-green'></span> {% trans "Edit order" %}</a></li>
+            {% if order.can_cancel %}
+            <li><a class='dropdown-item' href='#' id='cancel-order'><span class='fas fa-times-circle icon-red'></span> {% trans "Cancel order" %}</a></li>
+            {% endif %}
+        </ul>
+    </div>
+    {% if order.status == PurchaseOrderStatus.PENDING and order.lines.count > 0 %}
+    <button type='button' class='btn btn-outline-secondary' id='place-order' title='{% trans "Place order" %}'>
+        <span class='fas fa-shopping-cart icon-blue'></span>
+    </button>
+    {% elif order.status == PurchaseOrderStatus.PLACED %}
+    <button type='button' class='btn btn-outline-secondary' id='receive-order' title='{% trans "Receive items" %}'>
+        <span class='fas fa-sign-in-alt icon-blue'></span>
+    </button>
+    <button type='button' class='btn btn-outline-secondary' id='complete-order' title='{% trans "Mark order as complete" %}'>
+        <span class='fas fa-check-circle icon-green'></span>
+    </button>
+    {% endif %}
+    {% endif %}
 </div>
 {% endblock %}
 
-{% block page_details %}
-<h4>{% trans "Purchase Order Details" %}</h4>
+{% block details_right %}
 <table class='table'>
     <col width='25'>
     <tr>
diff --git a/InvenTree/order/templates/order/sales_order_base.html b/InvenTree/order/templates/order/sales_order_base.html
index 5a4fe347e8..d7113e6591 100644
--- a/InvenTree/order/templates/order/sales_order_base.html
+++ b/InvenTree/order/templates/order/sales_order_base.html
@@ -1,4 +1,4 @@
-{% extends "two_column.html" %}
+{% extends "page_base.html" %}
 
 {% load i18n %}
 {% load static %}
@@ -14,16 +14,6 @@
 <li class="breadcrumb-item active" aria-current="page"><a href='{% url "so-detail" order.id %}'>{{ order }}</a></li>
 {% endblock %}
 
-{% block below_thumbnail %}
-<div class='info-messages'>
-    {% if order.status == SalesOrderStatus.PENDING and not order.is_fully_allocated %}
-    <div class='alert alert-block alert-danger'>
-        {% trans "This Sales Order has not been fully allocated" %}
-    </div>
-    {% endif %}
-</div>
-    {% endblock %}
-
 {% block thumbnail %}
 <img class='part-thumb'
 {% if order.customer.image %}
@@ -34,63 +24,68 @@ src="{% static 'img/blank_image.png' %}"
 />
 {% endblock %}
 
-{% block page_data %}
+{% block details %}
 
-<h3>
+<h4>
     {% trans "Sales Order" %} {{ order.reference }}
     {% if user.is_staff and roles.sales_order.change %}
     <a href="{% url 'admin:order_salesorder_change' order.pk %}"><span title='{% trans "Admin view" %}' class='fas fa-user-shield'></span></a>
     {% endif %}
-</h3>
-<h3>
+</h4>
+<h4>
     {% sales_order_status_label order.status large=True %}
     {% if order.is_overdue %}
     <span class='label label-large label-large-red'>{% trans "Overdue" %}</span>
     {% endif %}
-</h3>
-<hr>
+</h4>
 <p>{{ order.description }}{% include "clip.html"%}</p>
-<div class='btn-row'>
-    <div class='btn-group action-buttons'>
-        <!-- Printing actions -->
-        <div class='btn-group'>
-            <button id='print-options' title='{% trans "Print actions" %}' class='btn btn-default dropdown-toggle' type='button' data-bs-toggle='dropdown'>
-                <span class='fas fa-print'></span> <span class='caret'></span>
-            </button>
-            <ul class='dropdown-menu' role='menu'>
-                <li><a href='#' id='print-order-report'><span class='fas fa-file-pdf'></span> {% trans "Print sales order report" %}</a></li>
-                <li><a href='#' id='export-order'><span class='fas fa-file-download'></span> {% trans "Export order to file" %}</a></li>
-                <!--
-                <li><a href='#' id='print-packing-list'><span class='fas fa-clipboard-list'></span>{% trans "Print packing list" %}</a></li>
-                -->
-            </ul>
-        </div>
-        {% if roles.sales_order.change %}
-        <!-- Order actions -->
-        <div class='btn-group'>
-            <button id='order-options' title='{% trans "Order actions" %}' class='btn btn-default dropdown-toggle' type='button' data-bs-toggle='dropdown'>
-                <span class='fas fa-tools'></span> <span class='caret'></span>
-            </button>
-            <ul class='dropdown-menu' role='menu'>
-                <li><a href='#' id='edit-order'><span class='fas fa-edit icon-green'></span> {% trans "Edit order" %}</a></li>
-                {% if order.status == SalesOrderStatus.PENDING %}
-                <li><a href='#' id='cancel-order'><span class='fas fa-times-circle icon-red'></span> {% trans "Cancel order" %}</a></li>
-                {% endif %}
-            </ul>
-
-        </div>
-        {% if order.status == SalesOrderStatus.PENDING %}
-        <button type='button' class='btn btn-default' id='ship-order' title='{% trans "Ship order" %}'>
-            <span class='fas fa-truck icon-blue'></span>
+<div class='btn-group' role='group'>
+    <!-- Printing actions -->
+    <div class='btn-group' role='group'>
+        <button id='print-options' title='{% trans "Print actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
+            <span class='fas fa-print'></span> <span class='caret'></span>
         </button>
-        {% endif %}
-        {% endif %}
+        <ul class='dropdown-menu' role='menu'>
+            <li><a class='dropdown-item' href='#' id='print-order-report'><span class='fas fa-file-pdf'></span> {% trans "Print sales order report" %}</a></li>
+            <li><a class='dropdown-item' href='#' id='export-order'><span class='fas fa-file-download'></span> {% trans "Export order to file" %}</a></li>
+            <!--
+            <li><a href='#' id='print-packing-list'><span class='fas fa-clipboard-list'></span>{% trans "Print packing list" %}</a></li>
+            -->
+        </ul>
     </div>
+    {% if roles.sales_order.change %}
+    <!-- Order actions -->
+    <div class='btn-group' role='group'>
+        <button id='order-options' title='{% trans "Order actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
+            <span class='fas fa-tools'></span> <span class='caret'></span>
+        </button>
+        <ul class='dropdown-menu' role='menu'>
+            <li><a class='dropdown-item' href='#' id='edit-order'><span class='fas fa-edit icon-green'></span> {% trans "Edit order" %}</a></li>
+            {% if order.status == SalesOrderStatus.PENDING %}
+            <li><a class='dropdown-item' href='#' id='cancel-order'><span class='fas fa-times-circle icon-red'></span> {% trans "Cancel order" %}</a></li>
+            {% endif %}
+        </ul>
+
+    </div>
+    {% if order.status == SalesOrderStatus.PENDING %}
+    <button type='button' class='btn btn-outline-secondary' id='ship-order' title='{% trans "Ship order" %}'>
+        <span class='fas fa-truck icon-blue'></span>
+    </button>
+    {% endif %}
+    {% endif %}
 </div>
+{% block below_thumbnail %}
+<div class='info-messages'>
+    {% if order.status == SalesOrderStatus.PENDING and not order.is_fully_allocated %}
+    <div class='alert alert-block alert-danger'>
+        {% trans "This Sales Order has not been fully allocated" %}
+    </div>
+    {% endif %}
+</div>
+    {% endblock %}
 {% endblock %}
 
-{% block page_details %}
-<h4>{% trans "Sales Order Details" %}</h4>
+{% block details_right %}
 <table class='table table-striped table-condensed'>
     <col width='25'>
     <tr>
diff --git a/InvenTree/templates/two_column.html b/InvenTree/templates/two_column.html
deleted file mode 100644
index 2eab4bb62e..0000000000
--- a/InvenTree/templates/two_column.html
+++ /dev/null
@@ -1,90 +0,0 @@
-{% extends "base.html" %}
-
-{% load static %}
-{% load i18n %}
-
-{% block menubar %}
-<!-- Custom menubar code goes here -->
-{% endblock %}
-
-{% block content %}
-
-{% block header_panel %}
-<div class='panel panel-default panel-inventree'>
-
-    <div class='panel-heading'>
-        {% block detail_heading %}
-        !!! heading goes here !!!
-        {% endblock %}
-    </div>
-
-    <div class='panel-content'>
-
-        {% block header_pre_content %}
-        {% endblock %}
-
-        <div class='row'>
-            <div class='col-sm-6'>
-                <div class='media-left'>
-                    {% block thumbnail %}
-                    <!-- Image goes here -->
-                    {% endblock %}
-                </div>
-                <div class='media-body'>
-                    {% block page_data %}
-                    <!-- Data next to image goes here -->
-                    {% endblock %}
-                </div>
-                {% block below_thumbnail %}
-                {% endblock %}
-            </div>
-            <div class='col-sm-6'>
-                {% block page_details %}
-                <!-- Right column data goes here -->
-                {% endblock %}
-            </div>
-        </div>
-    </div>
-
-    {% block header_post_content %}
-    {% endblock %}
-
-</div>
-{% endblock %}
-
-{% block page_content %}
-
-{% block pre_content_panels %}
-{% endblock %}
-
-{% block content_panels %}
-<div class='panel panel-default panel-inventree'>
-    <div class='panel-heading'>
-        <h4>
-            {% block heading %}
-            <!-- Heading goes here -->
-            {% endblock %}
-        </h4>
-    </div>
-
-    {% block details_panel %}
-    <div class='panel-content'>
-        {% block details %}
-        <!-- Particular page detail views go here -->
-        {% endblock %}
-    </div>
-    {% endblock %}
-</div>
-{% endblock %}
-
-{% block post_content_panels %}
-{% endblock %}
-
-{% endblock %}
-
-{% endblock %}
-
-{% block js_ready %}
-{{ block.super }}
-
-{% endblock %}
\ No newline at end of file