Refactored index page

- Looks MUCH nicer now!

InvenTree/build/templates/build/build_base.html

@@ -88,11 +88,13 @@ src="{% static 'img/blank_image.png' %}"
     {% if build.target_date %}
     <tr>
         <td><span class='fas fa-calendar-alt'></span></td>
-        <td>{% trans "Target Date" %}</td>
+        <td>
+            {% trans "Target Date" %}
+        </td>
         <td>
             {{ build.target_date }}
             {% if build.is_overdue %}
-            <span title='{% blocktrans with target=build.target_date %}This build was due on {{target}}{% endblocktrans %}' class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
+            <span title='{% blocktrans with target=build.target_date %}This build was due on {{target}}{% endblocktrans %}' class='badge badge-right rounded-pill bg-danger'>{% trans "Overdue" %}</span>
             {% endif %}
         </td>
     </tr>

InvenTree/templates/InvenTree/index.html

@@ -9,56 +9,14 @@
 
 
 {% block sidebar %}
-<!-- Part Entries -->
+<!-- Sidebar data is filled dynamically for the index page-->
-{% include "sidebar_header.html" with text="Parts" icon="fa-shapes" %}
-{% include "sidebar_item.html" with label='starred-parts' text="Starred Parts" icon="fa-star" badge=True %}
-{% include "sidebar_item.html" with label='latest-parts' text="Latest Parts" icon="fa-newspaper" badge=True %}
-{% include "sidebar_item.html" with label='bom-validation' text="BOM Requires Attention" icon="fa-times-circle" badge=True %}
-
-<!-- Stock Entries -->
-{% include "sidebar_header.html" with text="Stock" icon="fa-boxes" %}
-{% include "sidebar_item.html" with label='recently-updated-stock' text="Recently Updates" icon="fa-clock" badge=True %}
-{% include "sidebar_item.html" with label='low-stock' text="Low Stock" icon="fa-shopping-cart" badge=True %}
-{% include "sidebar_item.html" with label='depleted-stock' text="Depleted Stock" icon="fa-times badge=True" %}
-{% include "sidebar_item.html" with label='stock-to-build' text="Need to Build" icon="fa-bullhorn" badge=True %}
-{% include "sidebar_item.html" with label='expired-stock' text="Expired Stock" icon="fa-calendar-times" badge=True %}
-{% include "sidebar_item.html" with label='stale-stock' text="Stale Stock" icon="fa-stopwatch" badge=True %}
-
-<!-- Build Orders -->
-{% include "sidebar_header.html" with text="Build Orders" icon="fa-tools" %}
-{% include "sidebar_item.html" with label='build-pending' text="In Progress" icon="fa-cogs" badge=True %}
-{% include "sidebar_item.html" with label='build-overdue' text="Overdue" icon="fa-calendar-times" badge=True %}
-
-<!-- Purchase Orders -->
-{% include "sidebar_header.html" with text="Purchase Orders" icon="fa-shopping-cart" %}
-{% include "sidebar_item.html" with label='po-outstanding' text="Outstanding" icon="fa-sign-in-alt" badge=True %}
-{% include "sidebar_item.html" with label='po-overdue' text="Overdue" icon="fa-calendar-times" badge=True %}
-
-<!-- Sales Orders -->
-{% include "sidebar_header.html" with text="Sales Orders" icon="fa-truck" %}
-{% include "sidebar_item.html" with label='so-outstanding' text="Outstanding" icon="fa-sign-out-alt" badge=True %}
-{% include "sidebar_item.html" with label='so-overdue' text="Overdue" icon="fa-calendar-times" badge=True %}
-
 {% endblock %}
 
 {% block content %}
+
 <h3>{% inventree_title %} </h3>
 <hr>
-
+<div class='container-fluid' id='detail-panels'>
-<div class='col-sm-3' id='item-panel'>
-    <div class='panel'>
-        <ul class='list-group' id='action-item-list'>
-        </ul>
-    </div>
-</div>
-<div class='col-sm-9' id='details-panel'>
-    <ul class='list-group' id='detail-item-list'>
-        <li class='list-group-item panel'>
-            <div class='container'>
-                <img class='index-bg' src='{% static "img/inventree.png" %}'>
-            </div>
-        </li>
-    </ul>
 </div>
 
 {% endblock %}
@@ -68,67 +26,51 @@
 {{ block.super }}
 
 function addHeaderTitle(title) {
-    // Add a header block to the action list
+
-    $("#action-item-list").append(
+    addSidebarHeader({
-        `<li class='list-group-item'><strong>${title}</strong></li>`
+        text: title,
-    );
+    });
 }
 
 function addHeaderAction(label, title, icon, options) {
-    // Add an action block to the action list
+
-    $("#action-item-list").append(
+    // Construct a "badge" to add to the sidebar item
-        `<li class='list-group-item' id='action-${label}'>
+    var badge = `
-            <a href='#'>
+    <span id='sidebar-badge-${label}' class='sidebar-item-badge badge rounded-pill badge-right bg-dark'>
-                <span class='fas ${icon}'></span>
+        <span class='fas fa-spin fa-spinner'></span>
-                ${title}
+    </span>
-            </a>
+    `;
-            <span class='badge rounded-pill bg-dark' id='badge-${label}'>
+
-                <span class='fas fa-spin fa-spinner'></span>
+    addSidebarItem({
-            </span>
+        label: label,
-        </li>`
+        text: title,
-    );
+        icon: icon,
+        content_after: badge
+    });
 
     // Add a detail item to the detail item-panel
-    $("#detail-item-list").append(
+    $("#detail-panels").append(
-        `<li class='list-group-item panel' id='detail-${label}'>
+        `<div class='panel panel-inventree panel-hidden' id='panel-${label}'>
-            <h4>${title}</h4>
+            <div class='panel-heading'>
-            <table class='table table-condensed table-striped' id='table-${label}'></table>
+                <h4>${title}</h4>
-        </li>`
+            </div>
+            <div class='panel-content'>
+                <table class='table table-condensed table-striped' id='table-${label}'></table>
+            </div>
+        </div>`
     );
 
-    $(`#detail-${label}`).hide();
-
-    $(`#action-${label}`).click(function() {
-
-        // Hide all child elements
-        $('#detail-item-list').children('li').each(function() {
-            $(this).hide();
-        });
-
-        // Show the one we want
-        $(`#detail-${label}`).fadeIn();
-
-        // Remove css class from all action items
-        $("#action-item-list").children('li').each(function() {
-            $(this).removeClass('index-action-selected');
-        });
-
-        // Add css class to the action we are interested in
-        $(`#action-${label}`).addClass('index-action-selected');
-    });
-
     // Connect a callback to the table
     $(`#table-${label}`).on('load-success.bs.table', function() {
         var count = $(`#table-${label}`).bootstrapTable('getData').length;
 
-        $(`#badge-${label}`).html(count);
+        var badge = $(`#sidebar-badge-${label}`);
 
-        $(`#badge-${label}`).removeClass('bg-dark');
+        badge.html(count);
 
         if (count > 0) {
-            $(`#badge-${label}`).addClass('bg-primary');
+            badge.removeClass('bg-dark');
-        } else {
+            badge.addClass('bg-primary');
-            $(`#badge-${label}`).addClass('bg-warning');
         }
     });
 }

InvenTree/templates/base.html

@@ -73,7 +73,7 @@
         <div class='col-auto px-1 sidebar-wrapper'>
             <div id='sidebar' class='collapse collapse-horizontal show border-end' style='display: none;'>
                 <div id='sidebar-nav' class='list-group text-sm-start'>
-                    <ul class='list-group sidebar-list-group'>
+                    <ul id='sidebar-list-group' class='list-group sidebar-list-group'>
                         {% block sidebar %}
                         <!-- Sidebar goes here -->
                         {% endblock %}

InvenTree/templates/js/dynamic/nav.js

@@ -2,6 +2,10 @@
 */
 
 /* exported
+    activatePanel,
+    addSidebarHeader,
+    addSidebarItem,
+    addSidebarLink,
     enableSidebar,
     onPanelLoad,
 */
@@ -92,6 +96,8 @@ function enableSidebar(label, options={}) {
         // Find the matching panel element to display
         var panel_name = el.attr('id').replace('select-', '');
 
+        console.log("activating panel:", panel_name);
+
         activatePanel(label, panel_name, options);
     });
 
@@ -166,3 +172,41 @@ function setSidebarState(label, state) {
     // Save the state of this sidebar
     localStorage.setItem(`inventree-menu-state-${label}`, state);
 }
+
+
+/*
+ * Dynamically construct and insert a sidebar item into the sidebar at runtime.
+ * This mirrors the templated code in "sidebar_item.html"
+ */
+function addSidebarItem(options={}) {
+
+    var html = `
+    <a href='#' id='select-${options.label}' title='${options.text}' class='list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-selector' data-bs-parent='#sidebar'>
+        <i class='bi bi-bootstrap'></i>
+        ${options.content_before || ''}
+        <span class='sidebar-item-icon fas ${options.icon}'></span>
+        <span class='sidebar-item-text' style='display: none;'>${options.text}</span>
+        ${options.content_after || ''}
+    </a>
+    `;
+
+    $('#sidebar-list-group').append(html);
+}
+
+/*
+ * Dynamicall construct and insert a sidebar header into the sidebar at runtime
+ * This mirrors the templated code in "sidebar_header.html"
+ */
+function addSidebarHeader(options={}) {
+
+    var html = `
+    <span title='${options.text}' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar">
+        <h6>
+            <i class="bi bi-bootstrap"></i>
+            <span class='sidebar-item-text' style='display: none;'>${options.text}</span>
+        </h6>
+    </span>
+    `;
+
+    $('#sidebar-list-group').append(html);
+}