From 8afa39cd919557afc15409fa4cfd0037c3859ed3 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 29 Oct 2021 13:54:46 +1100
Subject: [PATCH] Refactor "search" page
---
InvenTree/InvenTree/static/css/inventree.css | 2 +
InvenTree/templates/InvenTree/index.html | 6 +-
InvenTree/templates/InvenTree/search.html | 127 +++++++------------
InvenTree/templates/js/dynamic/nav.js | 2 -
4 files changed, 52 insertions(+), 85 deletions(-)
diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index d823bc15c7..4b9cc5937b 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -917,6 +917,8 @@ input[type="date"].form-control, input[type="time"].form-control, input[type="da
.sidebar-wrapper {
overflow-y: auto;
background: var(--secondary-color);
+ margin-top: 1rem;
+ padding-top: 0.25rem;
}
.sidebar-item-icon {
diff --git a/InvenTree/templates/InvenTree/index.html b/InvenTree/templates/InvenTree/index.html
index 88ee6e53f2..eec261e056 100644
--- a/InvenTree/templates/InvenTree/index.html
+++ b/InvenTree/templates/InvenTree/index.html
@@ -14,9 +14,7 @@
{% block content %}
-<h3>{% inventree_title %} </h3>
-<hr>
-<div class='container-fluid' id='detail-panels'>
+<div id='detail-panels'>
</div>
{% endblock %}
@@ -303,4 +301,4 @@ enableSidebar(
}
);
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/InvenTree/templates/InvenTree/search.html b/InvenTree/templates/InvenTree/search.html
index 06b51e995f..34f4a541fe 100644
--- a/InvenTree/templates/InvenTree/search.html
+++ b/InvenTree/templates/InvenTree/search.html
@@ -10,35 +10,19 @@
{% block content %}
-<h3>
- {% trans "Search Results" %}
-</h3>
-
-<div class="container" style='width: 100%'>
- {% include "search_form.html" with query_text=query %}
-</div>
-
-{% if query %}
-{% else %}
-<div id='empty-search-query'>
- <h4><em>{% trans "Enter a search query" %}</em></h4>
-</div>
-{% endif %}
-
-<div class='col-sm-3' id='item-panel'>
- <div class='panel'>
- <ul class='list-group' id='search-item-list'>
- </ul>
+<div class='panel panel-inventree'>
+ <div class='panel-content'>
+ {% include "search_form.html" with query_text=query %}
+ {% if query %}
+ {% else %}
+ <div id='empty-search-query'>
+ <h4><em>{% trans "Enter a search query" %}</em></h4>
+ </div>
+ {% endif %}
</div>
</div>
-<div class='col-sm-9' id='details-panel'>
- <ul class='list-group' id='search-result-list'>
- <li class='list-group-item panel'>
- <div class='container'>
- <img class='index-bg' src='{% static "img/inventree.png" %}'>
- </div>
- </li>
- </ul>
+
+<div id='detail-panels'>
</div>
{% endblock %}
@@ -47,69 +31,50 @@
{{ block.super }}
function addItemTitle(title) {
- // Add header block to the results list
- $('#search-item-list').append(
- `<li class='list-group-item'><strong>${title}</strong></li>`
- );
+ addSidebarHeader({
+ text: title,
+ });
}
function addItem(label, title, icon, options) {
- // Add a search itme to the action list
- $('#search-item-list').append(
- `<li class='list-group-item' id='search-item-${label}'>
- <a href='#'>
- <span class='fas ${icon}'></span>
- ${title}
- </a>
- <span class='badge rounded-pill bg-dark' id='badge-${label}'>
- <span class='fas fa-spin fa-spinner'></span>
- </span>
- </li>`
- );
+
+ // Construct a "badge" to add to the sidebar item
+ var badge = `
+ <span id='sidebar-badge-${label}' class='sidebar-item-badge badge rounded-pill badge-right bg-dark'>
+ <span class='fas fa-spin fa-spinner'></span>
+ </span>
+ `;
+
+ addSidebarItem({
+ label: label,
+ text: title,
+ icon: icon,
+ content_after: badge
+ });
// Add a results table
- $('#search-result-list').append(
- `<li class='list-group-item panel' id='search-result-${label}'>
- <h4>${title}</h4>
- <table class='table table-condensed table-striped' id='table-${label}'></table>
- </li>`
+ $('#detail-panels').append(
+ `<div class='panel panel-inventree panel-hidden' id='panel-${label}'>
+ <div class='panel-heading'>
+ <h4>${title}</h4>
+ </div>
+ <div class='panel-content'>
+ <table class='table table-condensed table-striped' id='table-${label}'></table>
+ </div>
+ </div>`
);
- // Hide the results table
- $(`#search-result-${label}`).hide();
-
- // Add callback when the action is clicked
- $(`#search-item-${label}`).click(function() {
-
- // Hide all childs
- $('#search-result-list').children('li').each(function() {
- $(this).hide();
- });
-
- // Show the one we want
- $(`#search-result-${label}`).fadeIn();
-
- // Remove css class from all action items
- $("#search-item-list").children('li').each(function() {
- $(this).removeClass('index-action-selected');
- });
-
- // Add css class to the action we are interested in
- $(`#search-item-${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');
- } else {
- $(`#badge-${label}`).addClass('bg-warning');
+ badge.removeClass('bg-dark');
+ badge.addClass('bg-primary');
}
});
}
@@ -264,7 +229,11 @@
{% endif %}
+ enableSidebar(
+ 'search',
+ {
+ hide_toggle: 'true',
+ }
+ );
-
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/InvenTree/templates/js/dynamic/nav.js b/InvenTree/templates/js/dynamic/nav.js
index f4dad6a3d3..6eb84a9de8 100644
--- a/InvenTree/templates/js/dynamic/nav.js
+++ b/InvenTree/templates/js/dynamic/nav.js
@@ -96,8 +96,6 @@ 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);
});