FrederikBaerentsen/BrickTracker
4
6
Fork 6
Code Issues 13 Pull Requests 2 Actions Packages Projects 1 Releases 4 Wiki Activity

Add clear button to the grid search bar

Browse Source
This commit is contained in:
Gregoo 2025-02-04 21:38:20 +01:00
parent 64a9e063ec
commit 6eb0964322
2 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/scripts/grid/filter.js
View File

@ -5,6 +5,7 @@ class BrickGridFilter {
// Grid sort elements (built based on the initial id) // Grid sort elements (built based on the initial id)
this.html_search = document.getElementById(`${this.grid.id}-search`); this.html_search = document.getElementById(`${this.grid.id}-search`);
this.html_search_clear = document.getElementById(`${this.grid.id}-search-clear`);
this.html_filter = document.getElementById(`${this.grid.id}-filter`); this.html_filter = document.getElementById(`${this.grid.id}-filter`);
// Search setup // Search setup
@ -25,6 +26,13 @@ class BrickGridFilter {
this.html_search.addEventListener("keyup", ((gridfilter) => () => { this.html_search.addEventListener("keyup", ((gridfilter) => () => {
gridfilter.filter(); gridfilter.filter();
})(this)); })(this));
if (this.html_search_clear) {
this.html_search_clear.addEventListener("click", ((gridfilter) => () => {
this.html_search.value = '';
gridfilter.filter();
})(this));
}
} }
// Filters setup // Filters setup

1
templates/sets.html
View File

@ -11,6 +11,7 @@
<div class="input-group"> <div class="input-group">
<span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-md-inline"> Search</span></span> <span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-md-inline"> Search</span></span>
<input id="grid-search" data-search-exact="name,number,parts,searchPurchaseLocation,searchStorage,theme,year" data-search-list="searchOwner,searchTag" class="form-control form-control-sm" type="text" placeholder="Set, name, number of parts, theme, year, owner, purchase location, storage, tag" value=""> <input id="grid-search" data-search-exact="name,number,parts,searchPurchaseLocation,searchStorage,theme,year" data-search-list="searchOwner,searchTag" class="form-control form-control-sm" type="text" placeholder="Set, name, number of parts, theme, year, owner, purchase location, storage, tag" value="">
<button id="grid-search-clear" type="button" class="btn btn-light btn-outline-danger border"><i class="ri-eraser-line"></i></button>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">