From c5fd83b4075aefca66dc62c6b792aacd32e66be7 Mon Sep 17 00:00:00 2001
From: eclipse <eclipse@unterdemradar.de>
Date: Sun, 11 May 2025 16:19:00 +0200
Subject: [PATCH] added custom dropdown components for Genre and Herausgeber
 form fields

---
 the_works/templates/views/text.html        |   4 +-
 the_works/templates/views/text_detail.html |  44 +++++---
 the_works/templates/views/werk.html        |  10 +-
 the_works/templates/views/werk_detail.html | 120 +++++++++------------
 the_works/views/text.py                    |   2 +-
 the_works/views/werk.py                    |   4 +-
 6 files changed, 89 insertions(+), 95 deletions(-)

diff --git a/the_works/templates/views/text.html b/the_works/templates/views/text.html
index 863f4a4..525de9f 100644
--- a/the_works/templates/views/text.html
+++ b/the_works/templates/views/text.html
@@ -46,8 +46,8 @@
 <script src="{{ url_for('static', filename='the_works.js') }}"></script>
 <script>
   window.onload = function () {
-    initDataTable("#text-table");
-    initCreateButton("Text hinzufügen", "{{ url_for('text.read', id=0) }}", "#text-table");
+    initDataTable("text-table");
+    initCreateButton("text-table", "Text hinzufügen", "{{ url_for('text.read', id=0) }}");
   }
 </script>
 {% endblock script %}
diff --git a/the_works/templates/views/text_detail.html b/the_works/templates/views/text_detail.html
index bef9df1..82034dc 100644
--- a/the_works/templates/views/text_detail.html
+++ b/the_works/templates/views/text_detail.html
@@ -9,10 +9,8 @@ Text bearbeiten
 {% endif %}
 {% endblock title %}
 
-{% block script %}
-<script>
-</script>
-{% endblock script %}
+{% block head %}
+{% endblock head %}
 
 {% block heading %}
 {% if create_mode %}
@@ -44,6 +42,25 @@ Text bearbeiten
           {% for r in reihen %}<option value="{{ r.ID }}"{% if r.ID == text['Reihe'] %} selected{% endif %}>{{ r.Titel }}</option>{% endfor %}
         </select>
       </label>
+      <label>
+        Genre(s)
+        <details id="form_Genre_dropdown" class="dropdown">
+          <summary id="form_Genre_summary" data-default="kein Genre ausgewählt"></summary>
+          <ul>
+            <li>
+              <input type="search" id="form_Genre_search" aria-label="search" placeholder="Genres filtern …" value="" />
+            </li>
+            {% for g in genres %}
+            <li>
+              <label>
+                <input id="form_Genre_{{ g.ID }}" name="form_Genre" data-content="{{ g.Genre }}" type="checkbox" value="{{ g.ID }}" {% if g.ID in text["Genres"] %} checked {% endif %}/>
+                {{ g.Genre }}
+              </label>
+            </li> 
+            {% endfor %}
+            </ul>
+        </details>
+      </label>
     </div>
     <div>
       <label>
@@ -62,16 +79,6 @@ Text bearbeiten
       </label>
     </div>
   </section>
-  <hr />
-  <section>
-    <fieldset>
-      <legend>Genre(s)</legend>
-      {% for g in genres %}
-      <input id="form_Genres_{{ g.ID }}" name="form_Genres" type="checkbox" value="{{ g.ID }}" {% if g.ID in text["Genres"] %} checked {% endif %}/>
-      <label for="form_Genres_{{ g.ID }}">{{ g.Genre }}</label>
-      {% endfor %}
-    </fieldset>
-  </section>
 
   <footer class="grid">
     <button id="form_submit" type="submit" formmethod="post" formaction="{% if create_mode %}{{ url_for('text.create') }}{% else %}{{ url_for('text.update', id=text['ID']) }}{% endif %}">
@@ -81,4 +88,11 @@ Text bearbeiten
     <a role="button" class="contrast" href="{{ url_for('text.all') }}">Abbrechen (nicht speichern)</a>
   </footer>
 </form>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
+
+{% block script %}
+<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script>
+  window.onload = () => initDropdownSelect(document.getElementById("form_Genre_dropdown"));
+</script>
+{% endblock script %}
diff --git a/the_works/templates/views/werk.html b/the_works/templates/views/werk.html
index e36ed71..298f10d 100644
--- a/the_works/templates/views/werk.html
+++ b/the_works/templates/views/werk.html
@@ -45,13 +45,9 @@
 <script src="{{ url_for('static', filename='datatables.js') }}"></script>
 <script src="{{ url_for('static', filename='the_works.js') }}"></script>
 <script>
-  window.onload = function () {
-    initDataTable("#werk-table");
-    initCreateButton({
-      title: "Werk hinzufügen",
-      href: "{{ url_for('werk.read', id=0) }}",
-      table_id: "#werk-table"
-    });
+  window.onload = () => {
+    initDataTable("werk-table");
+    initCreateButton("werk-table", "Werk hinzufügen", "{{ url_for('werk.read', id=0) }}");
   }
 </script>
 {% endblock script %}
diff --git a/the_works/templates/views/werk_detail.html b/the_works/templates/views/werk_detail.html
index 8436757..dcfa195 100644
--- a/the_works/templates/views/werk_detail.html
+++ b/the_works/templates/views/werk_detail.html
@@ -53,16 +53,6 @@ Werk bearbeiten
         Reihennummer
         <input id="form_Reihennummer" name="form_Reihennummer" aria-label="Reihennummer" placeholder="keine Reihennummer" value="{{ werk['Reihennummer'] }}" />
       </label>
-      <label>
-        Erscheinungsdatum (TT-MM-JJJJ, MM-JJJJ, JJJJ oder leer)
-        <div class="grid">
-          <input type="number" min="1" max="31" id="form_Erscheinungstag" name="form_Erscheinungstag" aria-label="Erscheinungstag" placeholder="Tag" value="{{ werk['Erscheinungsdatum'][8:] }}" />
-          <input type="number" min="1" max="12" id="form_Erscheinungsmonat" name="form_Erscheinungsmonat" aria-label="Erscheinungsmonat" placeholder="Monat" value="{{ werk['Erscheinungsdatum'][5:7] }}" />
-          <input type="number" min="1980" max="2100" id="form_Erscheinungsjahr" name="form_Erscheinungsjahr" aria-label="Erscheinungsjahr" placeholder="Jahr" value="{{ werk['Erscheinungsdatum'][:4] }}" />
-        </div>
-      </label>
-    </div>
-    <div>
       <label>
         Verlag
         <select id="form_Verlag" name="form_Verlag" aria-label="Verlag">
@@ -74,6 +64,16 @@ Werk bearbeiten
         Preis
         <input id="form_Preis" name="form_Preis" aria-label="Preis" placeholder="kein Preis" value="{{ werk['Preis'] }}" />
       </label>
+    </div>
+    <div>
+      <label>
+        Erscheinungsdatum (TT-MM-JJJJ, MM-JJJJ, JJJJ oder leer)
+        <div class="grid">
+          <input type="number" min="1" max="31" id="form_Erscheinungstag" name="form_Erscheinungstag" aria-label="Erscheinungstag" placeholder="Tag" value="{{ werk['Erscheinungsdatum'][8:] }}" />
+          <input type="number" min="1" max="12" id="form_Erscheinungsmonat" name="form_Erscheinungsmonat" aria-label="Erscheinungsmonat" placeholder="Monat" value="{{ werk['Erscheinungsdatum'][5:7] }}" />
+          <input type="number" min="1980" max="2100" id="form_Erscheinungsjahr" name="form_Erscheinungsjahr" aria-label="Erscheinungsjahr" placeholder="Jahr" value="{{ werk['Erscheinungsdatum'][:4] }}" />
+        </div>
+      </label>
       <label>
         ISBN-13
         <input id="form_ISBN_13" name="form_ISBN_13" aria-label="ISBN-13" placeholder="keine ISBN-13" value="{{ werk['ISBN_13'] }}" />
@@ -86,45 +86,47 @@ Werk bearbeiten
         ISSN
         <input id="form_ISSN" name="form_ISSN" aria-label="ISSN" placeholder="keine ISSN" value="{{ werk['ISSN'] }}" />
       </label>
+      <label>
+        Genre(s)
+        <details id="form_Genre_dropdown" class="dropdown">
+          <summary id="form_Genre_summary" data-default="kein Genre ausgewählt"></summary>
+          <ul>
+            <li>
+              <input type="search" id="form_Genre_search" aria-label="search" placeholder="Genres filtern …" value="" />
+            </li>
+            {% for g in genres %}
+            <li>
+              <label>
+                <input id="form_Genre_{{ g.ID }}" name="form_Genre" data-content="{{ g.Genre }}" type="checkbox" value="{{ g.ID }}" {% if g.ID in werk["Genres"] %} checked {% endif %}/>
+                {{ g.Genre }}
+              </label>
+            </li> 
+            {% endfor %}
+            </ul>
+        </details>
+      </label>
+      <label>
+        Herausgeber:in(nen)
+        <details id="form_Herausgeber_dropdown" class="dropdown">
+          <summary id="form_Herausgeber_summary" data-default="kein(e) Herausgeber:in(nen) ausgewählt"></summary>
+          <ul>
+            <li>
+              <input type="search" id="form_Herausgeber_search" aria-label="search" placeholder="Herausgeber:innen filtern …" value="" />
+            </li>
+            {% for h in hrsg %}
+            <li>
+              <label>
+                <input id="form_Herausgeber_{{ h.ID }}" name="form_Herausgeber" data-content="{{ h.Name }}" type="checkbox" value="{{ h.ID }}" {% if h.ID in werk["Herausgeber"] %} checked {% endif %}/>
+                {{ h.Name }}
+              </label>
+            </li> 
+            {% endfor %}
+            </ul>
+        </details>
+      </label>
     </div>
   </section>
   <hr />
-  <section>
-    <fieldset>
-      <legend>Herausgeber:in(nen)</legend>
-      <div class="grid">
-        {% for column in hrsg | slice(4) %}
-        <div>
-          {% for h in column %}
-          <label>
-            <input id="form_Herausgeber_{{ h.ID }}" name="form_Herausgeber" type="checkbox" value="{{ h.ID }}" {% if h.ID in werk["Herausgeber"] %} checked {% endif %}/>
-            {{ h.Name }}
-          </label>
-          {% endfor %}
-        </div>
-        {% endfor %}
-      </div>
-    </fieldset>
-  </section>
-  <hr />
-  <section>
-    <fieldset>
-      <legend>Genre(s)</legend>
-      <div class="grid">
-        {% for column in genres | slice(4) %}
-        <div>
-          {% for g in column %}
-          <label>
-            <input id="form_Genres_{{ g.ID }}" name="form_Genres" type="checkbox" value="{{ g.ID }}" {% if g.ID in werk["Genres"] %} checked {% endif %}/>
-            {{ g.Genre }}
-          </label>
-          {% endfor %}
-        </div>
-        {% endfor %}
-      </div>
-    </fieldset>
-  </section>
-  <hr />
   <section class="grid">
     <label>
       Klappentext
@@ -155,29 +157,11 @@ Werk bearbeiten
 {% endblock content %}
 
 {% block script %}
+<script src="{{ url_for('static', filename='the_works.js') }}"></script>
 <script>
-  function validate_date() {
-    let t = document.getElementById("form_Erscheinungstag");
-    let m = document.getElementById("form_Erscheinungsmonat");
-    let j = document.getElementById("form_Erscheinungsjahr");
-    t.setCustomValidity("");
-    t.setAttribute("aria-invalid", "false");
-    m.setCustomValidity("");
-    m.setAttribute("aria-invalid", "false");
-    console.log("This is function validate_date(): tag/monat/jahr is " + t.value + "/" + m.value + "/" + j.value); //DEBUG
-    if ( t.value != "" ) {
-      if ( j.value == "" || m.value == "" ) {
-        t.setCustomValidity("wenn der Tag angegeben ist, müssen Monat und Jahr ebenfalls angegeben sein");
-        t.setAttribute("aria-invalid", "true");
-        t.reportValidity();
-      }
-    } else if ( m.value != "" ) {
-      if ( j.value == "") {
-        m.setCustomValidity("wenn der Monat angegeben ist, muss das Jahr ebenfalls angegeben sein");
-        m.setAttribute("aria-invalid", "true");
-        m.reportValidity();
-      }
-    }
+  window.onload = () => {
+    initDropdownSelect(document.getElementById("form_Genre_dropdown"));
+    initDropdownSelect(document.getElementById("form_Herausgeber_dropdown"));
   }
 </script>
 {% endblock script %}
diff --git a/the_works/views/text.py b/the_works/views/text.py
index 75bef32..eee7f2d 100644
--- a/the_works/views/text.py
+++ b/the_works/views/text.py
@@ -75,7 +75,7 @@ def update(id):
   text.Sprache = request.form["form_Sprache"]
 
   # update genre list by removing genres not in form selection and adding selected ones not currently in list 
-  form_set = set(map(lambda g: int(g), request.form.getlist("form_Genres")))
+  form_set = set(map(lambda g: int(g), request.form.getlist("form_Genre")))
   for g in set(text.genres) - form_set:
     text.genres.remove(g)
   for g in form_set - set(text.genres):
diff --git a/the_works/views/werk.py b/the_works/views/werk.py
index 1d08345..981c08b 100644
--- a/the_works/views/werk.py
+++ b/the_works/views/werk.py
@@ -74,7 +74,7 @@ def create():
     Klappentext = request.form["form_Klappentext"] or None,
     Anmerkungen = request.form["form_Anmerkungen"] or None
   )
-  for g in request.form.getlist("form_Genres"):
+  for g in request.form.getlist("form_Genre"):
     werk.genres.append(g)
   for h in request.form.getlist("form_Herausgeber"):
     werk.herausgeber.append(h)
@@ -105,7 +105,7 @@ def update(id):
   werk.Anmerkungen = request.form["form_Anmerkungen"] or None
 
   # update genre list by removing genres not in form selection and adding selected ones not currently in list 
-  form_set = set(map(lambda g: int(g), request.form.getlist("form_Genres")))
+  form_set = set(map(lambda g: int(g), request.form.getlist("form_Genre")))
   for g in set(werk.genres) - form_set:
     werk.genres.remove(g)
   for g in form_set - set(werk.genres):