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

Configure the Grid search through data- attributes

Browse Source
This commit is contained in:
Gregoo 2025-01-31 10:19:59 +01:00
parent d91dd128ae
commit 2c90afb644
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,19 @@ class BrickGridFilter {
// Search setup
if (this.html_search) {
// Exact attributes
if (this.html_search.dataset.searchExact) {
this.search_exact = new Set(this.html_search.dataset.searchExact.split(",").map(el => el.trim()));
} else {
this.search_exact = new Set();
}
// List attributes
this.search_list = [];
if (this.html_search.dataset.searchList) {
this.search_list = this.html_search.dataset.searchList.split(",").map(el => el.trim());
}
this.html_search.addEventListener("keyup", ((gridfilter) => () => {
gridfilter.filter();
})(this));
@ -88,11 +101,25 @@ class BrickGridFilter {
// Check all searchable fields for a match
if (options.search) {
for (let attribute of ["data-name", "data-number", "data-parts", "data-theme", "data-year"]) {
if (current.getAttribute(attribute).includes(options.search)) {
// Browse the whole dataset
for (const set in current.dataset) {
// Exact attribute
if (this.search_exact.has(set)) {
if (current.dataset[set].includes(options.search)) {
current.parentElement.classList.remove("d-none");
return;
}
} else {
// List search
for (const list of this.search_list) {
if (set.startsWith(this.search_list)) {
if (current.dataset[set].includes(options.search)) {
current.parentElement.classList.remove("d-none");
return;
}
}
}
}
}
// If no match, we need to hide it

2
templates/sets.html
View File

@ -10,7 +10,7 @@
<label class="visually-hidden" for="grid-search">Search</label>
<div class="input-group">
<span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-xl-inline"> Search</span></span>
<input id="grid-search" class="form-control form-control-sm" type="text" placeholder="Set name, set number, set theme or number of parts..." value="">
<input id="grid-search" data-search-exact="name,number,parts,theme,year" class="form-control form-control-sm" type="text" placeholder="Set name, set number, set theme or number of parts..." value="">
</div>
</div>
<div class="col-12">