From 6b8b4ba1d273aa50767c12f27f4967c695790726 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Mon, 5 May 2025 20:20:52 +0200
Subject: [PATCH] [TASK] style new user action in list view

---
 frontend/scss/components/_headlines.scss |   4 +
 templates/admin/user/index.html.tera     | 159 ++++++++++++++++-------
 templates/includes/macros.html.tera      |   4 +-
 3 files changed, 121 insertions(+), 46 deletions(-)

diff --git a/frontend/scss/components/_headlines.scss b/frontend/scss/components/_headlines.scss
index cd4fa44..8bc5a0b 100644
--- a/frontend/scss/components/_headlines.scss
+++ b/frontend/scss/components/_headlines.scss
@@ -4,4 +4,8 @@
 
 .h2 {
   @apply font-bold uppercase tracking-wide text-center rounded-t-md text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-lg px-3 py-3;
+}
+
+.h3 {
+  @apply text-center text-xl uppercase tracking-wide font-bold text-primary-900 dark:text-white;
 }
\ No newline at end of file
diff --git a/templates/admin/user/index.html.tera b/templates/admin/user/index.html.tera
index 2006d9b..d889e2f 100644
--- a/templates/admin/user/index.html.tera
+++ b/templates/admin/user/index.html.tera
@@ -8,52 +8,121 @@
                 <summary class="px-3 cursor-pointer text-md font-bold text-primary-950 dark:text-white">
                     Neue Person hinzufügen
                 </summary>
-                <details class="mt-5 bg-gray-200 dark:bg-primary-600 p-3 rounded-md">
-                    <summary class="px-3 cursor-pointer text-md font-bold text-primary-950 dark:text-white">Vereinsmitglied</summary>
-                    <form action="/admin/user/new/clubmember"
-                          method="post"
-                          enctype="multipart/form-data"
-                          class="grid gap-3">
-                        <div>
-                            <label for="membertype" class="text-sm text-gray-600 dark:text-gray-100">Mitgliedstyp</label>
-                            <select name="membertype" id="membertype" class="input rounded-md ">
-                                <option selected="" value="regular">Reguläres Vereinsmitglied</option>
-                                <option value="unterstuetzend">Unterstützendes Vereinsmitglied</option>
-                                <option value="foerdernd">Förderndes Vereinsmitglied</option>
-                            </select>
+
+                <div class="grid sm:grid-cols-3 gap-3 mt-3">
+                      <button type="button"
+                              onclick="document.getElementById('add-clubuser').showModal()"
+                              class="btn btn-primary">Vereinsmitglied</button>
+                      <button type="button"
+                              onclick="document.getElementById('add-scheckbuch').showModal()"
+                              class="btn btn-dark">Scheckbuch</button>
+                      <button type="button"
+                              onclick="document.getElementById('add-schnupperkurs').showModal()"
+                              class="btn btn-dark">Schnupperkurs</button>
+
+
+                      </div>
+                      <dialog id="add-clubuser"
+                              class="max-w-screen-sm w-full dark:bg-primary-900 dark:text-white rounded-md"
+                              onclick="document.getElementById('add-clubuser').close()">
+                          <div onclick="event.stopPropagation();" class="p-3">
+                              <button type="button"
+                                      onclick="document.getElementById('add-clubuser').close()"
+                                      title="Schließen"
+                                      class="sidebar-close border-0 bg-primary-100 focus:bg-primary-50 text-black flex items-center justify-center transform rotate-45 absolute right-0 mr-3">
+                                  <svg class="inline h-5 w-5"
+                                        width="16"
+                                        height="16"
+                                        fill="currentColor"
+                                        viewBox="0 0 16 16">
+                                      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
+                                  </svg>
+                              </button>
+                              <div class="mt-8">
+                              <h2 class="h3 mb-3">Neues Vereinsmitglied</h2>
+                              <form action="/admin/user/new/clubmember"
+                                    method="post"
+                                    enctype="multipart/form-data"
+                                    class="grid gap-3">
+                                <div>
+                                    <label for="membertype" class="text-sm text-gray-600 dark:text-gray-100">Mitgliedstyp</label>
+                                    <select name="membertype" id="membertype" class="input rounded-md ">
+                                        <option selected="" value="regular">Reguläres Vereinsmitglied</option>
+                                        <option value="unterstuetzend">Unterstützendes Vereinsmitglied</option>
+                                        <option value="foerdernd">Förderndes Vereinsmitglied</option>
+                                    </select>
+                                </div>
+                                {{ macros::input(label='Name', name='name', type="text", required=true) }}
+                                {{ macros::input(label='Mailadresse', name='mail', type="email", required=true, placeholder='user@mail.at') }}
+                                {{ macros::select(label="Finanzielles", data=financial, name='financial_id', display=['name'], default="Keine Ermäßigung") }}
+                                {{ macros::input(label='Mitglied seit', name='member_since', type="date", value=now() | date(), required=true) }}
+                                {{ macros::input(label='Geburtsdatum', name='birthdate', type="date", required=true) }}
+                                {{ macros::input(label='Telefonnummer', name='phone', type="text", required=true) }}
+                                {{ macros::input(label='Adresse', name='address', type="text", required=true) }}
+                                {{ macros::input(label='Beitrittserklärung', name='membership_pdf', type="file", accept='application/pdf', required=true) }}
+                                <input value="Neues Vereinsmitglied anlegen"
+                                      type="submit"
+                                      class="btn btn-primary" />
+                            </form>
                         </div>
-                        {{ macros::input(label='Name', name='name', type="text", required=true) }}
-                        {{ macros::input(label='Mailadresse', name='mail', type="email", required=true) }}
-                        {{ macros::select(label="Finanzielles", data=financial, name='financial_id', display=['name'], default="Keine Ermäßigung") }}
-                        {{ macros::input(label='Mitglied seit', name='member_since', type="date", value=now() | date(), required=true) }}
-                        {{ macros::input(label='Geburtsdatum', name='birthdate', type="date", required=true) }}
-                        {{ macros::input(label='Telefonnummer', name='phone', type="text", required=true) }}
-                        {{ macros::input(label='Adresse', name='address', type="text", required=true) }}
-                        {{ macros::input(label='Beitrittserklärung', name='membership_pdf', type="file", accept='application/pdf', required=true) }}
-                        <input value="Neues Vereinsmitglied anlegen"
-                               type="submit"
-                               class="btn btn-primary" />
-                    </form>
-                </details>
-                <details class="mt-5 bg-gray-200 dark:bg-primary-600 p-3 rounded-md">
-                    <summary class="px-3 cursor-pointer text-md font-bold text-primary-950 dark:text-white">Scheckbuch</summary>
-                    <form action="/admin/user/new/scheckbuch"
-                          method="post"
-                          enctype="multipart/form-data"
-                          class="grid gap-3">
-                        {{ macros::input(label='Name', name='name', type="text", required=true) }}
-                        {{ macros::input(label='Mailadresse', name='mail', type="email", required=true) }}
-                        <input value="Neues Scheckbuch anlegen"
-                               type="submit"
-                               class="btn btn-primary" />
-                    </form>
-                </details>
-                <details class="mt-5 bg-gray-200 dark:bg-primary-600 p-3 rounded-md">
-                    <summary class="px-3 cursor-pointer text-md font-bold text-primary-950 dark:text-white">Schnupperkurs</summary>
-                    <form action="/admin/user/new/schnupper"
+                        </div>
+                      </dialog>   
+ 
+                      <dialog id="add-scheckbuch"
+                              class="max-w-screen-sm w-full dark:bg-primary-900 dark:text-white rounded-md"
+                              onclick="document.getElementById('add-scheckbuch').close()">
+                          <div onclick="event.stopPropagation();" class="p-3">
+                              <button type="button"
+                                      onclick="document.getElementById('add-scheckbuch').close()"
+                                      title="Schließen"
+                                      class="sidebar-close border-0 bg-primary-100 focus:bg-primary-50 text-black flex items-center justify-center transform rotate-45 absolute right-0 mr-3">
+                                  <svg class="inline h-5 w-5"
+                                        width="16"
+                                        height="16"
+                                        fill="currentColor"
+                                        viewBox="0 0 16 16">
+                                      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
+                                  </svg>
+                              </button>
+                              <div class="mt-8">
+                                <h2 class="h3 mb-3">Neues Scheckbuch</h2>
+                                <form action="/admin/user/new/scheckbuch"
+                                      method="post"
+                                      enctype="multipart/form-data"
+                                      class="grid gap-3">
+                                    {{ macros::input(label='Name', name='name', type="text", required=true) }}
+                                    {{ macros::input(label='Mailadresse', name='mail', type="email", required=true, placeholder='user@mail.at') }}
+                                    <input value="Neues Scheckbuch anlegen"
+                                          type="submit"
+                                          class="btn btn-primary" />
+                                </form>
+                              </div>
+                            </div>
+                      </dialog>
+
+                      <dialog id="add-schnupperkurs"
+                              class="max-w-screen-sm w-full dark:bg-primary-900 dark:text-white rounded-md"
+                              onclick="document.getElementById('add-schnupperkurs').close()">
+                        <div onclick="event.stopPropagation();" class="p-3">
+                            <button type="button"
+                                    onclick="document.getElementById('add-schnupperkurs').close()"
+                                    title="Schließen"
+                                    class="sidebar-close border-0 bg-primary-100 focus:bg-primary-50 text-black flex items-center justify-center transform rotate-45 absolute right-0 mr-3">
+                                <svg class="inline h-5 w-5"
+                                      width="16"
+                                      height="16"
+                                      fill="currentColor"
+                                      viewBox="0 0 16 16">
+                                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
+                                </svg>
+                            </button>
+                            <div class="mt-8">
+                              <form action="/admin/user/new/schnupper"
                           method="post"
                           enctype="multipart/form-data"
                           class="grid gap-3">
+                          <h2 class="h3 mb-3">Neuer Schnupperant</h2>
+
                         <div>
                             <label for="schnupper_type" class="text-sm text-gray-600 dark:text-gray-100">Typ</label>
                             <select name="schnupper_type" id="schnupper_type" class="input rounded-md ">
@@ -62,11 +131,13 @@
                             </select>
                         </div>
                         {{ macros::input(label='Name', name='name', type="text", required=true) }}
-                        {{ macros::input(label='Mailadresse', name='mail', type="email", required=true) }}
+                        {{ macros::input(label='Mailadresse', name='mail', type="email", required=true, placeholder='user@mail.at') }}
                         {{ macros::select(label="Finanzielles", data=financial, name='financial_id', display=['name'], default="Keine Ermäßigung") }}
                         <input value="Hinzufügen" type="submit" class="btn btn-primary" />
                     </form>
-                </details>
+                            </div>
+                          </div>
+                    </dialog>
             </details>
         {% endif %}
         <!-- START filterBar -->
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 1b92d40..31c3d93 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -156,7 +156,7 @@ function setChoiceByLabel(choicesInstance, label) {
     </header>
     <div class="h-8"></div>
 {% endmacro header %}
-{% macro input(label, name, type, required=false, class='rounded-md', value='', min='', hide_label=false, id='', autofocus=false, wrapper_class='', pattern='', readonly=false, accept='') %}
+{% macro input(label, name, type, required=false, class='rounded-md', value='', min='', hide_label=false, id='', autofocus=false, wrapper_class='', pattern='', readonly=false, accept='', placeholder='') %}
     <div class="{{ wrapper_class }}">
         <label for="{{ name }}"
                class="{% if hide_label %} sr-only {% else %} text-sm text-gray-600 dark:text-white {% endif %}">
@@ -169,7 +169,7 @@ function setChoiceByLabel(choicesInstance, label) {
                {% if required %}required{% endif %}
                value="{{ value }}"
                class="input {{ class }}"
-               placeholder="{% if hide_label %}{{ label }}{% endif %}"
+               placeholder="{% if hide_label %}{{ label }}{% endif %}{% if placeholder %}{{ placeholder }}{% endif %}"
                {% if min is defined %}min="{{ min }}"{% endif %}
                {% if autofocus %}autofocus{% endif %}
                {% if accept %}accept="{{ accept }}"{% endif %}