Add javascript to dynamically switch between views

InvenTree/InvenTree/static/css/inventree.css

@@ -912,6 +912,10 @@ input[type="submit"] {
     box-shadow: 1px 1px #DDD;
 }
 
+.panel-hidden {
+    display: none;
+}
+
 .float-right {
     float: right;
 }

InvenTree/InvenTree/urls.py

@@ -104,22 +104,23 @@ settings_urls = [
 dynamic_javascript_urls = [
     url(r'^api.js', DynamicJsView.as_view(template_name='js/api.js'), name='api.js'),
     url(r'^attachment.js', DynamicJsView.as_view(template_name='js/attachment.js'), name='attachment.js'),
-    url(r'^forms.js', DynamicJsView.as_view(template_name='js/forms.js'), name='forms.js'),
-    url(r'^model_renderers.js', DynamicJsView.as_view(template_name='js/model_renderers.js'), name='model_renderers.js'),
-    url(r'^modals.js', DynamicJsView.as_view(template_name='js/modals.js'), name='modals.js'),
     url(r'^barcode.js', DynamicJsView.as_view(template_name='js/barcode.js'), name='barcode.js'),
     url(r'^bom.js', DynamicJsView.as_view(template_name='js/bom.js'), name='bom.js'),
     url(r'^build.js', DynamicJsView.as_view(template_name='js/build.js'), name='build.js'),
     url(r'^calendar.js', DynamicJsView.as_view(template_name='js/calendar.js'), name='calendar.js'),
     url(r'^company.js', DynamicJsView.as_view(template_name='js/company.js'), name='company.js'),
+    url(r'^filters.js', DynamicJsView.as_view(template_name='js/filters.js'), name='filters.js'),
+    url(r'^forms.js', DynamicJsView.as_view(template_name='js/forms.js'), name='forms.js'),
+    url(r'^label.js', DynamicJsView.as_view(template_name='js/label.js'), name='label.js'),
+    url(r'^model_renderers.js', DynamicJsView.as_view(template_name='js/model_renderers.js'), name='model_renderers.js'),
+    url(r'^modals.js', DynamicJsView.as_view(template_name='js/modals.js'), name='modals.js'),
+    url(r'^nav.js', DynamicJsView.as_view(template_name='js/nav.js'), name='nav.js'),
     url(r'^order.js', DynamicJsView.as_view(template_name='js/order.js'), name='order.js'),
     url(r'^part.js', DynamicJsView.as_view(template_name='js/part.js'), name='part.js'),
-    url(r'^label.js', DynamicJsView.as_view(template_name='js/label.js'), name='label.js'),
     url(r'^report.js', DynamicJsView.as_view(template_name='js/report.js'), name='report.js'),
     url(r'^stock.js', DynamicJsView.as_view(template_name='js/stock.js'), name='stock.js'),
     url(r'^tables.js', DynamicJsView.as_view(template_name='js/tables.js'), name='tables.js'),
     url(r'^table_filters.js', DynamicJsView.as_view(template_name='js/table_filters.js'), name='table_filters.js'),
-    url(r'^filters.js', DynamicJsView.as_view(template_name='js/filters.js'), name='filters.js'),
 ]
 
 urlpatterns = [

InvenTree/order/templates/order/sales_order_detail.html

@@ -12,7 +12,7 @@
 
 {% block page_content %}
 
-<div class='panel panel-default panel-inventree' id='panel-order-items'>
+<div class='panel panel-default panel-inventree panel-hidden' id='panel-order-items'>
     <div class='panel-heading'>
         <h4>{% trans "Sales Order Items" %}</h4>
     </div>
@@ -29,7 +29,7 @@
     </div>
 </div>
 
-<div class='panel panel-default panel-inventree' id='panel-order-builds'>
+<div class='panel panel-default panel-inventree panel-hidden' id='panel-order-builds'>
     <div class='panel-heading'>
         <h4>{% trans "Build Orders" %}</h4>
     </div>
@@ -38,7 +38,7 @@
     </div>
 </div>
 
-<div class='panel panel-default panel-inventree' id='panel-order-attachments'>
+<div class='panel panel-default panel-inventree panel-hidden' id='panel-order-attachments'>
     <div class='panel-heading'>
         <h4>{% trans "Attachments" %}</h4>
     </div>
@@ -47,7 +47,7 @@
     </div>
 </div>
 
-<div class='panel panel-default panel-inventree' id='panel-order-notes'>
+<div class='panel panel-default panel-inventree panel-hidden' id='panel-order-notes'>
     <div class='panel-heading'>
         <div class='row'>
             <div class='col-sm-6'>
@@ -611,6 +611,11 @@ function setupCallbacks() {
             }
         );
     });
+
+    attachNavCallbacks({
+        name: 'sales-order',
+        default: 'order-items'
+    });
 }
 
 {% endblock %}

InvenTree/order/templates/order/so_navbar.html

@@ -9,29 +9,29 @@
         </a>
     </li>
 
-    <li class='list-group-item' title='{% trans "Sales Order Line Items" %}'>
+    <li class='list-group-item nav-item' title='{% trans "Sales Order Line Items" %}'>
-        <a href='#' id='select-order-items'>
+        <a href='#' id='select-order-items' class='nav-toggle'>
             <span class='fas fa-list-ol sidebar-icon'></span>
             {% trans "Order Items" %}
         </a>
     </li>
 
-    <li class='list-group-item' title='{% trans "Build Orders" %}'>
+    <li class='list-group-item nav-item' title='{% trans "Build Orders" %}'>
-        <a href='#' id='select-order-builds'>
+        <a href='#' id='select-order-builds' class='nav-toggle'>
             <span class='fas fa-tools sidebar-icon'></span>
             {% trans "Build Orders" %}
         </a>
     </li>
 
-    <li class='list-group-item' title='{% trans "Sales Order Attachments" %}'>
+    <li class='list-group-item nav-item' title='{% trans "Sales Order Attachments" %}'>
-        <a href='#' id='select-order-attachments'>
+        <a href='#' id='select-order-attachments' class='nav-toggle'>
             <span class='fas fa-paperclip sidebar-icon'></span>
             {% trans "Attachments" %}
         </a>
     </li>
 
-    <li class='list-group-item' title='{% trans "Notes" %}'>
+    <li class='list-group-item nav-item' title='{% trans "Notes" %}'>
-        <a href='#' id='select-order-notes'>
+        <a href='#' id='select-order-notes' class='nav-toggle'>
             <span class='fas fa-clipboard sidebar-icon'></span>
             {% trans "Notes" %}
         </a>

InvenTree/templates/base.html

@@ -149,22 +149,23 @@
 <!-- translated -->
 <script type='text/javascript' src="{% i18n_static 'api.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'attachment.js' %}"></script>
-<script type='text/javascript' src="{% i18n_static 'forms.js' %}"></script>
-<script type='text/javascript' src="{% i18n_static 'model_renderers.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'barcode.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'bom.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'build.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'calendar.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'company.js' %}"></script>
-<script type='text/javascript' src="{% i18n_static 'part.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'filters.js' %}"></script>
-<script type='text/javascript' src="{% i18n_static 'modals.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'forms.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'label.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'nav.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'modals.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'model_renderers.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'order.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'part.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'report.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'stock.js' %}"></script>
-<script type='text/javascript' src="{% i18n_static 'build.js' %}"></script>
-<script type='text/javascript' src="{% i18n_static 'order.js' %}"></script>
-<script type='text/javascript' src="{% i18n_static 'calendar.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'tables.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'table_filters.js' %}"></script>
-<script type='text/javascript' src="{% i18n_static 'filters.js' %}"></script>
 
 <script type='text/javascript' src="{% static 'fontawesome/js/solid.js' %}"></script>
 <script type='text/javascript' src="{% static 'fontawesome/js/brands.js' %}"></script>

InvenTree/templates/js/nav.js

@@ -0,0 +1,60 @@
+
+/*
+* Attach callbacks to navigation bar elements.
+*
+* Searches for elements with the class 'nav-toggle'.
+* A callback is added to each element,
+* to display the matching panel.
+*
+* The 'id' of the .nav-toggle element should be of the form "select-<x>",
+* and point to a matching "panel-<x>"
+*/
+function attachNavCallbacks(options={}) {
+
+    $('.nav-toggle').click(function() {
+        var el = $(this);
+
+        // Find the matching "panel" element
+        var panelName = el.attr('id').replace('select-', '');
+
+        activatePanel(panelName, options);
+    });
+
+
+    var panelClass = options.name || 'unknown';
+
+    // Look for a default panel to initialize
+    var defaultPanel = localStorage.getItem(`selected-panel-${panelClass}`) || options.default;
+
+    if (defaultPanel) {
+        activatePanel(defaultPanel);
+    }
+}
+
+
+function activatePanel(panelName, options={}) {
+
+    var panelClass = options.name || 'unknown';
+
+    // Save the selected panel
+    localStorage.setItem(`selected-panel-${panelClass}`, panelName);
+
+    // First, cause any other panels to "fade out"
+    $('.panel-visible').hide();
+    $('.panel-visible').removeClass('panel-visible');
+
+    // Find the target panel
+    var panel = `#panel-${panelName}`;
+
+    // Display the panel
+    $(panel).addClass('panel-visible');
+    $(panel).fadeIn(50);
+
+    // Un-select all selectors
+    $('.nav-item').removeClass('active');
+
+    // Find the associated selector
+    var select = `#select-${panelName}`;
+
+    $(select).parent('.nav-item').addClass('active');
+}