From 6eb09643227ebfbcc488c9391acbdccff0b4b66f Mon Sep 17 00:00:00 2001
From: Gregoo <versatile.mailbox@gmail.com>
Date: Tue, 4 Feb 2025 21:38:20 +0100
Subject: [PATCH] Add clear button to the grid search bar
---
static/scripts/grid/filter.js | 8 ++++++++
templates/sets.html | 1 +
2 files changed, 9 insertions(+)
diff --git a/static/scripts/grid/filter.js b/static/scripts/grid/filter.js
index 2825c53..6de37a8 100644
--- a/static/scripts/grid/filter.js
+++ b/static/scripts/grid/filter.js
@@ -5,6 +5,7 @@ class BrickGridFilter {
// Grid sort elements (built based on the initial id)
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`);
// Search setup
@@ -25,6 +26,13 @@ class BrickGridFilter {
this.html_search.addEventListener("keyup", ((gridfilter) => () => {
gridfilter.filter();
})(this));
+
+ if (this.html_search_clear) {
+ this.html_search_clear.addEventListener("click", ((gridfilter) => () => {
+ this.html_search.value = '';
+ gridfilter.filter();
+ })(this));
+ }
}
// Filters setup
diff --git a/templates/sets.html b/templates/sets.html
index 4832160..aa59867 100644
--- a/templates/sets.html
+++ b/templates/sets.html
@@ -11,6 +11,7 @@
<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>
<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 class="col-12">