From 72fc3ed91ed708415fa79605bd8cd5aabd932393 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Wed, 7 May 2025 11:52:58 +0200
Subject: [PATCH] [TASK] add search bar and improve ux

---
 templates/admin/role.html.tera | 62 +++++++++++++++++++---------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/templates/admin/role.html.tera b/templates/admin/role.html.tera
index 2b29697..0a818bd 100644
--- a/templates/admin/role.html.tera
+++ b/templates/admin/role.html.tera
@@ -3,35 +3,43 @@
 {% extends "base" %}
 {% block content %}
     <div class="max-w-screen-lg w-full dark:text-white">
-        <h1 class="h1">Rolle</h1>
-        <div class="grid ">
-            <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
-                 role="alert">
-                <h2 class="h2">Rolle</h2>
-                {% for role in roles %}
-                    <div data-filterable="true"
-                         data-filter="{{ role.name }}"
-                         class="w-full border-t">
-                        <form action="/admin/role/{{ role.id }}"
-                              data-filterable="true"
-                              method="post"
-                              class="bg-white dark:bg-primary-900 p-4 w-full">
-                            <div class="w-full">
-                                <input type="hidden" name="id" value="{{ role.id }}" />
-                                <div class="font-bold mb-1 text-black dark:text-white">
-                                    {{ role.name }}
-                                    <br />
-                                </div>
-                                <div class="grid md:grid-cols-3 gap-3">
-                                    {{ macros::input(label='Formatierter Name', name='formatted_name', type='text', value=role.formatted_name) }}
-                                    {{ macros::input(label='Beschreibung', name='desc', type='text', value=role.desc) }}
-                                    <input value="Ändern" type="submit" class="w-28 btn btn-primary" />
+        <h1 class="h1">Rollen</h1>
+        <div class="search-wrapper">
+            <label for="name" class="sr-only">Suche</label>
+            <input type="search"
+                  name="name"
+                  id="filter-js"
+                  class="search-bar"
+                  placeholder="Suchen nach Namen...">
+        </div>
+        <div id="filter-result-js" class="search-result"></div>
+        <div class="border-r border-l border-gray-200 dark:border-primary-600">
+            {% for role in roles %}
+                <div data-filterable="true"
+                    data-filter="{{ role.name }} {{ role.formatted_name }}"
+                    class="w-full border-t">
+                    <form action="/admin/role/{{ role.id }}"
+                          data-filterable="true"
+                          method="post"
+                          class="bg-white dark:bg-primary-900 p-4 w-full">
+                        <div class="w-full">
+                            <input type="hidden" name="id" value="{{ role.id }}" />
+                            <div class="font-bold mb-1 text-black dark:text-white">
+                                {{ role.name }}
+                                <br />
+                            </div>
+                            <div class="grid md:grid-cols-3 gap-3">
+                                {{ macros::input(label='Name (formatiert)', name='formatted_name', type='text', value=role.formatted_name) }}
+                                {{ macros::input(label='Beschreibung', name='desc', type='text', value=role.desc) }}
+                                
+                                <div class="flex items-end">
+                                    <input value="Ändern" type="submit" class="w-full btn btn-primary" />
                                 </div>
                             </div>
-                        </form>
-                    </div>
-                {% endfor %}
-            </div>
+                        </div>
+                    </form>
+                </div>
+            {% endfor %}
         </div>
     </div>
 {% endblock content %}