Display a list of filters for Stock table

- Delete a filter by pressing "X" button

InvenTree/InvenTree/static/css/inventree.css

@@ -157,6 +157,62 @@
     font-style: italic;
 }
 
+.dropdown {
+    padding-left: 1px;
+    margin-left: 1px;
+}
+
+/* Styles for table buttons and filtering */
+.button-toolbar .btn {
+    margin-left: 1px;
+    margin-right: 1px;
+}
+
+.filters {
+    display: inline-block;
+    *display: inline;
+    border: 1px solid #555;
+    border-radius: 3px;
+    padding: 3px;
+    margin-bottom: 1px;
+    margin-top: 1px;
+    vertical-align: middle;
+}
+
+.filter-list {
+    margin: 1px;
+    padding: 1px;
+}
+
+.filter-list .close {
+    cursor: pointer;
+    right: 0%;
+    padding-right: 2px;
+    padding-left: 2px;
+    transform: translate(0%, -25%);
+}
+  
+.filter-list .close:hover {background: #bbb;}
+
+.filter-list > li {
+    display: inline-block;
+    *display: inline;
+    zoom: 1;
+    padding-left: 3px;
+    padding-right: 3px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    border: 1px solid;
+    border-color: #aaa;
+    border-radius: 3px;
+    background: #eee;
+    margin: 1px;
+}
+
+.filter-list > li:hover {
+    background: #ddd;
+}
+
 /* Part image icons with full-display on mouse hover */
 
 .hover-img-thumb {

InvenTree/InvenTree/static/script/inventree/stock.js

@@ -14,10 +14,33 @@ function getStockLocations(filters={}, options={}) {
     return inventreeGet('/api/stock/location/', filters, options)
 }
 
+// A map of available filters for the stock table
+function getStockFilterOptions() {
+    return {
+        'cascade': {
+            'type': 'bool',
+        },
+        'status': {
+            'options': {
+                'OK': 10,
+                'ATTENTION': 50,
+                'DAMAGED': 55,
+                'DESTROYED': 60,
+                'LOST': 70
+            },
+        }
+    };
+}
+
+
 function loadStockFilters() {
     // Load the stock table filters from session-storage
     var filterstring = inventreeLoad("stockfilters", "cascade=true&loc=1");
 
+    if (filterstring.length == 0) {
+        filterstring = 'cascade=true&test=1&location=10&status=50';
+    }
+
     var split = filterstring.split("&");
 
     var filters = {};
@@ -25,12 +48,15 @@ function loadStockFilters() {
     console.log("Loaded stock filters: " + filterstring);
 
     split.forEach(function(item, index) {
-        var f = item.split('=');
 
-        if (f.length == 2) {
-            filters[f[0]] = f[1];
-        } else {
-            console.log("Improperly formatted filter: " + item);
+        if (item.length > 0) {
+            var f = item.split('=');
+
+            if (f.length == 2) {
+                filters[f[0]] = f[1];
+            } else {
+                console.log("Improperly formatted filter: " + item);
+            }
         }
     });
 
@@ -54,6 +80,41 @@ function saveStockFilters(filters) {
     inventreeSave("stockfilters", filterstring);
 }
 
+function removeStockFilter(key) {
+    
+    var filters = loadStockFilters();
+
+    delete filters[key];
+
+    saveStockFilters(filters);
+
+    return filters;
+}
+
+
+function updateStockFilterList(filterListElement, filters, table, params) {
+
+    for (var key in filters) {
+        $(filterListElement).append(`<li>${key} = ${filters[key]}<span filter-tag='${key}' class='close'>x</span></li>` );
+    }
+
+    $(filterListElement).find(".close").click(function() {
+        var element = $(this);
+
+        var tag = element.attr('filter-tag');
+
+        // Clear out any existing elements
+        $(filterListElement).empty();
+
+        var filters = removeStockFilter(tag);
+
+        updateStockFilterList(filterListElement, filters);
+
+        // TODO - Reload data in table?
+    });
+
+    console.log("done");
+}
 
 
 /* Functions for interacting with stock management forms
@@ -80,13 +141,18 @@ function loadStockTable(table, options) {
      *  params - query params for augmenting stock data request
      *  groupByField - Column for grouping stock items
      *  buttons - Which buttons to link to stock selection callbacks
+     *  filterList - <ul> element where filters are displayed
      */
     
     // List of user-params which override the default filters
     var params = options.params || {};
 
+    var filterListElement = options.filterList || "#stock-filter-list";
+
     var filters = loadStockFilters();
 
+    updateStockFilterList(filterListElement, filters, table, params);
+
     // Override the default values, or add new ones
     for (var key in params) {
         filters[key] = params[key];
@@ -293,6 +359,9 @@ function loadStockTable(table, options) {
         linkButtonsToSelection(table, options.buttons);
     }
 
+    // Display the filters
+    updateStockFilterList(filterListElement);
+
     function stockAdjustment(action) {
         var items = $("#stock-table").bootstrapTable("getSelections");
 

InvenTree/templates/stock_table.html

@@ -2,22 +2,27 @@
 
 <div id='button-toolbar'>
     <div class='button-toolbar container-fluid' style='float: right;'>
-        <button class='btn btn-default' id='stock-export' title='Export Stock Information'>{% trans "Export" %}</button>
-        {% if read_only %}
-        {% else %}
-        <button class="btn btn-success" id='item-create'>{% trans "New Stock Item" %}</button>
-        <div class="dropdown" style='float: right;'>
-            <button id='stock-options' class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{% trans "Options" %}<span class="caret"></span></button>
-            <ul class="dropdown-menu">
-                <li><a href="#" id='multi-item-add' title='Add to selected stock items'>{% trans "Add stock" %}</a></li>
-                <li><a href="#" id='multi-item-remove' title='Remove from selected stock items'>{% trans "Remove stock" %}</a></li>
-                <li><a href="#" id='multi-item-stocktake' title='Stocktake selected stock items'>{% trans "Count stock" %}</a></li>
+            {% if read_only %}
+            {% else %}
+            <button class="btn btn-success" id='item-create'>{% trans "New Stock Item" %}</button>
+            <div class="btn dropdown">
+                <button id='stock-options' class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{% trans "Options" %}<span class="caret"></span></button>
+                <ul class="dropdown-menu">
+                    <li><a href="#" id='multi-item-add' title='Add to selected stock items'>{% trans "Add stock" %}</a></li>
+                    <li><a href="#" id='multi-item-remove' title='Remove from selected stock items'>{% trans "Remove stock" %}</a></li>
+                    <li><a href="#" id='multi-item-stocktake' title='Stocktake selected stock items'>{% trans "Count stock" %}</a></li>
                 <li><a href='#' id='multi-item-move' title='Move selected stock items'>{% trans "Move stock" %}</a></li>
                 <li><a href='#' id='multi-item-order' title='Order selected items'>{% trans "Order stock" %}</a></li>
                 <li><a href='#' id='multi-item-delete' title='Delete selected items'>{% trans "Delete Stock" %}</a></li>
             </ul>
         </div>
         {% endif %}
+        <button class='btn btn-default' id='stock-export' title='Export Stock Information'>{% trans "Export" %}</button>
+        <div class='filters'>
+            <ul class='filter-list' id='stock-filter-list'>
+                <!-- This is an empty list which will be populated with the stock table filters -->
+            </ul>
+        </div>
     </div>
 </div>