diff --git a/frontend/main.ts b/frontend/main.ts index 3157cfb..24b9ba3 100644 --- a/frontend/main.ts +++ b/frontend/main.ts @@ -9,6 +9,8 @@ document.addEventListener('DOMContentLoaded', function() { const input = document.querySelector('#filter-js'); if(input) { + filterElements(input.value); + input.addEventListener('input', () => { filterElements(input.value); }); @@ -17,17 +19,24 @@ document.addEventListener('DOMContentLoaded', function() { function filterElements(input: string) { const elements = document.querySelectorAll('form[data-filterable="true"]'); + let resultWrapper = document.querySelector('#filter-result-js'), + amountShownElements = 0; Array.prototype.forEach.call(elements, (element: HTMLElement) => { // set both strings (input & dataset filter) to lowercase to not be case sensitive let filterString = element.dataset.filter?.toLocaleLowerCase(); + + // bulk hide all elements + element.style.display = 'none'; - // bulk show all elements - element.style.display = 'flex'; - - // hide if case doesn't match - if(!filterString?.includes(input.toLocaleLowerCase())) { - element.style.display = 'none'; + // show if input matches + if(filterString?.includes(input.toLocaleLowerCase())) { + element.style.display = 'flex'; + amountShownElements ++; } }); + + if(resultWrapper) { + resultWrapper.innerHTML = (amountShownElements === 0 ? 'Kein Ergebnis gefunden' : '' + amountShownElements + '' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden'); + } } diff --git a/templates/admin/user/index.html.tera b/templates/admin/user/index.html.tera index 414b83e..95f1d4b 100644 --- a/templates/admin/user/index.html.tera +++ b/templates/admin/user/index.html.tera @@ -30,6 +30,7 @@
+
{% for user in users %}