Ruderverein-Donau-Linz/rowt
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Wiki Activity

[TASK] add amount of filter results to search

Browse Source
This commit is contained in:
Marie Birner 2023-04-06 10:45:33 +02:00
parent 8105693b27
commit 9c42f99f11
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/main.ts
View File

@ -9,6 +9,8 @@ document.addEventListener('DOMContentLoaded', function() {
const input = <HTMLInputElement>document.querySelector('#filter-js'); const input = <HTMLInputElement>document.querySelector('#filter-js');
if(input) { if(input) {
filterElements(input.value);
input.addEventListener('input', () => { input.addEventListener('input', () => {
filterElements(input.value); filterElements(input.value);
}); });
@ -17,17 +19,24 @@ document.addEventListener('DOMContentLoaded', function() {
function filterElements(input: string) { function filterElements(input: string) {
const elements = document.querySelectorAll('form[data-filterable="true"]'); const elements = document.querySelectorAll('form[data-filterable="true"]');
let resultWrapper = <HTMLElement>document.querySelector('#filter-result-js'),
amountShownElements = 0;
Array.prototype.forEach.call(elements, (element: HTMLElement) => { Array.prototype.forEach.call(elements, (element: HTMLElement) => {
// set both strings (input & dataset filter) to lowercase to not be case sensitive // set both strings (input & dataset filter) to lowercase to not be case sensitive
let filterString = element.dataset.filter?.toLocaleLowerCase(); let filterString = element.dataset.filter?.toLocaleLowerCase();
// bulk show all elements // bulk hide all elements
element.style.display = 'flex'; element.style.display = 'none';
// hide if case doesn't match // show if input matches
if(!filterString?.includes(input.toLocaleLowerCase())) { if(filterString?.includes(input.toLocaleLowerCase())) {
element.style.display = 'none'; element.style.display = 'flex';
amountShownElements ++;
} }
}); });
if(resultWrapper) {
resultWrapper.innerHTML = (amountShownElements === 0 ? 'Kein Ergebnis gefunden' : '<strong>' + amountShownElements + '</strong>' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden');
}
} }

1
templates/admin/user/index.html.tera
View File

@ -30,6 +30,7 @@
</div> </div>
<div class="bg-primary-100 p-3 rounded-b-md grid gap-4"> <div class="bg-primary-100 p-3 rounded-b-md grid gap-4">
<div id="filter-result-js" class="text-primary-950"></div>
{% for user in users %} {% for user in users %}
<form action="/admin/user" data-filterable="true" data-filter="{{ user.name }}" method="post" class="bg-white p-3 rounded-md flex items-end md:items-center justify-between"> <form action="/admin/user" data-filterable="true" data-filter="{{ user.name }}" method="post" class="bg-white p-3 rounded-md flex items-end md:items-center justify-between">
<div class="w-full"> <div class="w-full">