From c47b1988b2555d2d92c24661778ab4eff6ecede3 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 2 May 2025 17:24:40 +0200
Subject: [PATCH] [TASK] add input group element with interaction

---
 frontend/main.ts                         | 20 ++++++
 frontend/scss/components/_btns.scss      |  4 ++
 frontend/scss/components/_important.scss |  9 +++
 frontend/scss/components/_input.scss     | 19 +++++
 templates/admin/user/view.html.tera      | 92 +++++++-----------------
 templates/includes/macros.html.tera      | 33 ++++++++-
 6 files changed, 109 insertions(+), 68 deletions(-)

diff --git a/frontend/main.ts b/frontend/main.ts
index e8d528c..82c38e9 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -24,6 +24,7 @@ document.addEventListener("DOMContentLoaded", function () {
   reloadPage();
   setCurrentdate(<HTMLInputElement>document.querySelector("#departure"));
   initDropdown();
+  editReadOnlyField();
 });
 
 function changeTheme() {
@@ -40,6 +41,25 @@ function changeTheme() {
   }
 }
 
+
+function editReadOnlyField() {
+    const editBtns = document.querySelectorAll(
+      '.edit-js'
+    );
+    if (editBtns) {
+      Array.prototype.forEach.call(editBtns, (btn: HTMLButtonElement) => {
+        btn.addEventListener("click", function () {
+          let wrapper = btn.parentElement;
+          let input = wrapper?.querySelector('input');
+
+          wrapper?.classList.toggle('editable')
+          input?.toggleAttribute('readonly');
+          if(!input?.hasAttribute('readonly')) input?.focus();
+        });
+      });
+    }
+}
+
 /***
  * init javascript
  * 1) detect native color scheme or use set theme in local storage
diff --git a/frontend/scss/components/_btns.scss b/frontend/scss/components/_btns.scss
index 5691039..873617f 100644
--- a/frontend/scss/components/_btns.scss
+++ b/frontend/scss/components/_btns.scss
@@ -28,4 +28,8 @@
   &[aria-pressed='true'] {
     @apply outline outline-2 outline-offset-2 outline-primary-600 bg-primary-100 text-primary-950;
   }
+
+  &-hidden {
+    @apply hidden;
+  }
 }
diff --git a/frontend/scss/components/_important.scss b/frontend/scss/components/_important.scss
index 7d2e869..54a7790 100644
--- a/frontend/scss/components/_important.scss
+++ b/frontend/scss/components/_important.scss
@@ -2,3 +2,12 @@
     border-top-left-radius: 0px !important;
     border-top-right-radius: 0px !important;
 }
+
+.rounded-l-none-important {
+  border-bottom-left-radius: 0px !important;
+  border-top-left-radius: 0px !important;
+}
+
+.rounded-none-important {
+  border-radius: 0px !important;
+}
diff --git a/frontend/scss/components/_input.scss b/frontend/scss/components/_input.scss
index 8665c7c..54e75c8 100644
--- a/frontend/scss/components/_input.scss
+++ b/frontend/scss/components/_input.scss
@@ -2,6 +2,25 @@
   @apply relative block w-full bg-white dark:bg-black border-0 py-1.5 px-2 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
 }
 
+.input-group {
+  @apply flex;
+
+  input[readonly] {
+    opacity: .7;
+  }
+
+  &.editable {
+      input[type="reset"],
+      input[type="submit"] {
+          @apply block;
+      }
+
+      button[type="button"] {
+          @apply hidden;
+      }
+  }
+}
+
 select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
diff --git a/templates/admin/user/view.html.tera b/templates/admin/user/view.html.tera
index 94bab40..f870461 100644
--- a/templates/admin/user/view.html.tera
+++ b/templates/admin/user/view.html.tera
@@ -16,44 +16,23 @@
                     {% endif %}
                 </div>
                 <div class="py-3">
-                    <ul>
+                    <ul class="grid gap-3">
                         <li>
-                            Mail: {{ user.mail }}
-                            {% if allowed_to_edit %}
-                                <details>
-                                    <summary>✏️</summary>
-                                    <form action="/admin/user/{{ user.id }}/change-mail" method="post">
-                                        {{ macros::input(label='Neue Mailadresse', name='mail', type="text", value=user.mail) }}
-                                        <input value="Ändern" type="submit" class="btn btn-primary ml-1" />
-                                    </form>
-                                </details>
-                            {% endif %}
+                            <form action="/admin/user/{{ user.id }}/change-mail" method="post">
+                                {{ macros::inputgroup(label='Mailadresse', name='mail', type="text", value=user.mail, readonly=not allowed_to_edit) }}
+                            </form>
+                        </li>
+                        <li>
+                            <form action="/admin/user/{{ user.id }}/change-phone" method="post">
+                                {{ macros::inputgroup(label='Telefonnummer', name='phone', type="text", value=user.phone, readonly=not allowed_to_edit) }}
+                            </form>
+                        </li>
+                        <li>
+                            <form action="/admin/user/{{ user.id }}/change-nickname" method="post">
+                                {{ macros::inputgroup(label='Spitzname', name='nickname', type="text", value=user.nickname, readonly=not allowed_to_edit) }}
+                            </form>
                         </li>
                         <li>Notizen: to be replaced with activity :-)</li>
-                        <li>
-                            Telefon: {{ user.phone }}
-                            {% if allowed_to_edit %}
-                                <details>
-                                    <summary>✏️</summary>
-                                    <form action="/admin/user/{{ user.id }}/change-phone" method="post">
-                                        {{ macros::input(label='Neue Telefonnummer', name='phone', type="text", value=user.phone) }}
-                                        <input value="Ändern" type="submit" class="btn btn-primary ml-1" />
-                                    </form>
-                                </details>
-                            {% endif %}
-                        </li>
-                        <li>
-                            Spitzname: {{ user.nickname }}
-                            {% if allowed_to_edit %}
-                                <details>
-                                    <summary>✏️</summary>
-                                    <form action="/admin/user/{{ user.id }}/change-nickname" method="post">
-                                        {{ macros::input(label='Neuer Spitzname', name='nickname', type="text", value=user.nickname) }}
-                                        <input value="Ändern" type="submit" class="btn btn-primary ml-1" />
-                                    </form>
-                                </details>
-                            {% endif %}
-                        </li>
                     </ul>
                 </div>
                 <div class="py-3">
@@ -147,44 +126,23 @@
                 <h2 class="h2">Vereinsmitglied</h2>
                 <div class="mx-2 divide-y divide-gray-200 dark:divide-primary-600">
                     <div class="py-3">
-                        <ul class="list-disc ms-4">
+                        <ul class="grid gap-3">
                             <li>
-                                Mitglied seit: {{ user.member_since_date }}
-                                {% if allowed_to_edit %}
-                                    <details>
-                                        <summary>✏️</summary>
-                                        <form action="/admin/user/{{ user.id }}/change-member-since" method="post">
-                                            {{ macros::input(label='Mitglied seit', name='member_since', type="date", value=user.member_since_date) }}
-                                            <input value="Ändern" type="submit" class="btn btn-primary ml-1" />
-                                        </form>
-                                    </details>
-                                {% endif %}
+                                <form action="/admin/user/{{ user.id }}/change-member-since" method="post">
+                                    {{ macros::inputgroup(label='Mitglied seit', name='member_since', type="date", value=user.member_since_date, readonly=not allowed_to_edit) }}
+                                </form>
                             </li>
                             <li>
-                                Geburtsdatum: {{ user.birthdate }}
-                                {% if allowed_to_edit %}
-                                    <details>
-                                        <summary>✏️</summary>
-                                        <form action="/admin/user/{{ user.id }}/change-birthdate" method="post">
-                                            {{ macros::input(label='Geburtstag', name='birthdate', type="date", value=user.birthdate) }}
-                                            <input value="Ändern" type="submit" class="btn btn-primary ml-1" />
-                                        </form>
-                                    </details>
-                                {% endif %}
+                                <form action="/admin/user/{{ user.id }}/change-birthdate" method="post">
+                                    {{ macros::inputgroup(label='Geburtsdatum', name='birthdate', type="date", value=user.birthdate, readonly=not allowed_to_edit) }}
+                                </form>
                             </li>
                             <li>
-                                Adresse: {{ user.address }}
-                                {% if allowed_to_edit %}
-                                    <details>
-                                        <summary>✏️</summary>
-                                        <form action="/admin/user/{{ user.id }}/change-address" method="post">
-                                            {{ macros::input(label='Neue Adresse', name='address', type="text", value=user.address) }}
-                                            <input value="Ändern" type="submit" class="btn btn-primary ml-1" />
-                                        </form>
-                                    </details>
-                                {% endif %}
+                                <form action="/admin/user/{{ user.id }}/change-address" method="post">
+                                    {{ macros::inputgroup(label='Adresse', name='address', type="text", value=user.address, readonly=not allowed_to_edit) }}
+                                </form>
                             </li>
-                            <li>
+                             <li>
                                 Familie:
                                 {% for family in families %}
                                     {% if user.family_id == family.id %}{{ family.names }}{% endif %}
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 109bb4f..1dcb298 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -174,9 +174,40 @@ function setChoiceByLabel(choicesInstance, label) {
                {% if autofocus %}autofocus{% endif %}
                {% if accept %}accept="{{ accept }}"{% endif %}
                {% if pattern %}pattern="{{ pattern }}"{% endif %}
-               {% if readonly %}readonly{% endif %}>
+               {% if readonly %}readonly{% endif %}/>
     </div>
 {% endmacro input %}
+
+{% macro inputgroup(label, name, type, required=false, class='', value='', min='', hide_label=false, id='', autofocus=false, wrapper_class='', pattern='', readonly=false, accept='') %}
+    <div class="{{ wrapper_class }}">
+        <label for="{{ name }}"
+               class="{% if hide_label %} sr-only {% else %} text-sm text-gray-600 dark:text-white {% endif %}">
+            {{ label }}
+        </label>
+        <div class="input-group">
+          <input {% if type=='datetime-local' %}onclick='if (!this.value) setCurrentdate(this)'{% endif %}
+                {% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %}
+                name="{{ name }}"
+                type="{{ type }}"
+                {% if required %}required{% endif %}
+                value="{{ value }}"
+                class="input {% if readonly %}rounded-md{% else %}rounded-l-md{% endif %} {{ class }}"
+                placeholder="{% if hide_label %}{{ label }}{% endif %}"
+                {% if min is defined %}min="{{ min }}"{% endif %}
+                {% if autofocus %}autofocus{% endif %}
+                {% if accept %}accept="{{ accept }}"{% endif %}
+                {% if pattern %}pattern="{{ pattern }}"{% endif %}
+                readonly/>
+          {% if allowed_to_edit %}
+              <button type="button" class="btn btn-primary rounded-l-none-important edit-js">Ändern</button>
+              <input value="x" type="reset" class="edit-js btn btn-alert btn-hidden rounded-none-important"/>
+              <input value="💾" type="submit" class="btn btn-primary btn-hidden rounded-l-none-important" />
+          {% endif %}
+        </div>
+    </div>
+{% endmacro inputgroup %}
+
+
 {% macro checkbox(label, name, id='', checked=false, class='', disabled=false, readonly=false) %}
     <label for="{{ name }}{{ id }}"
            class="flex items-center cursor-pointer text-black dark:text-white hover:text-gray-900 dark:hover:text-gray-100 {{ class }}">