[TASK] add amount of filter results to search

frontend/main.ts

@@ -9,6 +9,8 @@ document.addEventListener('DOMContentLoaded', function() {
   const input = <HTMLInputElement>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 = <HTMLElement>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' : '<strong>' + amountShownElements + '</strong>' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden');
+  }
 }

templates/admin/user/index.html.tera

@@ -30,6 +30,7 @@
 </div>
 
 <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 %}
 	<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">