Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

More styling improvements

Browse Source
This commit is contained in:
Oliver Walters 2020-04-11 14:36:48 +10:00
parent dddaa102b3
commit 393597612e
2 changed files with 50 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
InvenTree/InvenTree/static/css/inventree.css
View File

@ -171,14 +171,13 @@
.filter-list { .filter-list {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
border: 1px solid #555;
border-radius: 3px;
padding: 3px;
margin-bottom: 1px; margin-bottom: 1px;
margin-top: 1px; margin-top: 1px;
vertical-align: middle; vertical-align: middle;
margin: 1px; margin: 1px;
padding: 1px; padding: 2px;
border: 1px solid #aaa;
border-radius: 3px;
} }
.filter-list .close { .filter-list .close {
@ -199,14 +198,15 @@
padding-right: 3px; padding-right: 3px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
border: 1px solid; border: 1px solid #aaa;
border-color: #aaa;
border-radius: 3px; border-radius: 3px;
background: #eee; background: #eee;
margin: 1px; margin: 1px;
margin-left: 5px;
margin-right: 5px;
} }
.filter-list > li:hover { .filter-tag:hover {
background: #ddd; background: #ddd;
} }

70
InvenTree/InvenTree/static/script/inventree/filters.js
View File

@ -169,7 +169,7 @@ function generateAvailableFilterList(tableKey) {
var id = 'filter-tag-' + tableKey.toLowerCase(); var id = 'filter-tag-' + tableKey.toLowerCase();
var html = `<select id='${id}' name='tag'>`; var html = `<select class='form-control' id='${id}' name='tag'>`;
html += `<option value=''>Select filter</option>`; html += `<option value=''>Select filter</option>`;
@ -202,10 +202,10 @@ function generateFilterInput(tableKey, filterKey) {
// A 'null' options list means that a simple text-input dialog should be used // A 'null' options list means that a simple text-input dialog should be used
if (options == null) { if (options == null) {
html = `<input id='${id}' name='value'></input>`; html = `<input class='form-control' id='${id}' name='value'></input>`;
} else { } else {
// Return a 'select' input with the available values // Return a 'select' input with the available values
html = `<select id='${id}' name='value'>`; html = `<select class='form-control' id='${id}' name='value'>`;
for (var opt in options) { for (var opt in options) {
html += `<option value='${options[opt]}'>${opt}</option>`; html += `<option value='${options[opt]}'>${opt}</option>`;
@ -227,6 +227,8 @@ function generateFilterInput(tableKey, filterKey) {
*/ */
function setupFilterList(tableKey, table, target) { function setupFilterList(tableKey, table, target) {
var addClicked = false;
if (!target || target.length == 0) { if (!target || target.length == 0) {
target = '#filter-list-" + tableKey'; target = '#filter-list-" + tableKey';
} }
@ -236,15 +238,23 @@ function setupFilterList(tableKey, table, target) {
var clear = `filter-clear-${tableKey}`; var clear = `filter-clear-${tableKey}`;
var make = `filter-make-${tableKey}`; var make = `filter-make-${tableKey}`;
console.log(`Refilling filter list: ${tableKey}`); console.log(`Generating filter list: ${tableKey}`);
var filters = loadTableFilters(tableKey); var filters = loadTableFilters(tableKey);
console.log("Filters: " + filters.count);
var element = $(target); var element = $(target);
// One blank slate, please // One blank slate, please
element.empty(); element.empty();
element.append(`<button id='${add}' title='Add new filter' class='btn btn-default filter-tag'><span class='fas fa-filter'></span></button>`);
if (Object.keys(filters).length > 0) {
element.append(`<button id='${clear}' title='Clear all filters' class='btn btn-default filter-tag'><span class='fas fa-trash-alt'></span></button>`);
}
for (var key in filters) { for (var key in filters) {
var value = getFilterOptionValue(tableKey, key, filters[key]); var value = getFilterOptionValue(tableKey, key, filters[key]);
var title = getFilterTitle(tableKey, key); var title = getFilterTitle(tableKey, key);
@ -252,42 +262,48 @@ function setupFilterList(tableKey, table, target) {
element.append(`<div class='filter-tag'>${title} = ${value}<span ${tag}='${key}' class='close'>x</span></div>`); element.append(`<div class='filter-tag'>${title} = ${value}<span ${tag}='${key}' class='close'>x</span></div>`);
} }
element.append(`<button class='btn btn-default' id='${add}'>Add filter</button>`);
element.append(`<button class='btn btn-default' id='${clear}'>Clear filters</button>`);
// Add a callback for adding a new filter // Add a callback for adding a new filter
element.find(`#${add}`).click(function() { element.find(`#${add}`).click(function clicked() {
var html = '<div>'; if (!addClicked) {
html += generateAvailableFilterList(tableKey); addClicked = true;
html += generateFilterInput(tableKey);
html += `<button class='btn btn-default' id='${make}'>Add</button>`; var html = '<div>';
html += '</div>'; html += generateAvailableFilterList(tableKey);
html += generateFilterInput(tableKey);
element.append(html); html += `<button class='btn btn-default' id='${make}'>Add</button>`;
// Add a callback for when the filter tag selection is changed html += '</div>';
element.find(`#filter-tag-${tableKey}`).on('change', function() {
var list = element.find(`#filter-value-${tableKey}`);
list.replaceWith(generateFilterInput(tableKey, this.value)); element.append(html);
});
// Add a callback for when the new filter is created // Add a callback for when the filter tag selection is changed
element.find(`#filter-make-${tableKey}`).click(function() { element.find(`#filter-tag-${tableKey}`).on('change', function() {
var tag = element.find(`#filter-tag-${tableKey}`).val(); var list = element.find(`#filter-value-${tableKey}`);
var val = element.find(`#filter-value-${tableKey}`).val();
var filters = addTableFilter(tableKey, tag, val); list.replaceWith(generateFilterInput(tableKey, this.value));
});
reloadStockTable(table, filters); // Add a callback for when the new filter is created
element.find(`#filter-make-${tableKey}`).click(function() {
var tag = element.find(`#filter-tag-${tableKey}`).val();
var val = element.find(`#filter-value-${tableKey}`).val();
var filters = addTableFilter(tableKey, tag, val);
reloadStockTable(table, filters);
// Run this function again
setupFilterList(tableKey, table, target);
});
} else {
addClicked = false;
// Run this function again
setupFilterList(tableKey, table, target); setupFilterList(tableKey, table, target);
}); }
}); });