From c7fd91d11c56df6c53b3edbac7c52af91a538aa3 Mon Sep 17 00:00:00 2001
From: eclipse <eclipse@unterdemradar.de>
Date: Thu, 8 May 2025 08:24:12 +0200
Subject: [PATCH] switched from modal to dedicated page for creating/editing
 Text entries

---
 the_works/templates/views/text.html        | 135 +++------------------
 the_works/templates/views/text_detail.html |  83 +++++++++++++
 the_works/views/text.py                    |  23 ++--
 3 files changed, 112 insertions(+), 129 deletions(-)
 create mode 100644 the_works/templates/views/text_detail.html

diff --git a/the_works/templates/views/text.html b/the_works/templates/views/text.html
index 9c0fb15..7da855d 100644
--- a/the_works/templates/views/text.html
+++ b/the_works/templates/views/text.html
@@ -5,47 +5,6 @@
 
 {% block script %}
 <script>
-  const SCRIPT_ROOT = {{ request.script_root | tojson }};
-  const textValues = ["Titel", "Untertitel"];
-  const selectValues = ["Reihe", "Textform", "Sprache"];
-  const multiSelectValues = ["Genres"];
-  
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Text hinzufügen";
-    // empty inputs 
-    for (const v of textValues) { document.getElementById(`form_${v}`).value = ""; }
-    for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = ""; }
-    for (const v of multiSelectValues) { 
-      document.getElementById(`form_${v}`).querySelectorAll("input[type=checkbox]").forEach( cb => { cb.checked = false; }) 
-    }
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('text.create') }}";
-    // show modal
-    document.getElementById("textmodal").showModal();
-  }
-  
-  function showUpdateModal() {
-    let tr = document.getElementById(`text-${this.dataset.id}`);
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Text ansehen / bearbeiten";
-    // populate inputs
-    for (const v of textValues) { document.getElementById(`form_${v}`).value = tr.querySelector(`[data-${v}]`).dataset[v.toLowerCase()]; }
-    for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = tr.querySelector(`[data-${v}]`).dataset[v.toLowerCase()]; }
-    for (const v of multiSelectValues) {
-      let data = tr.querySelector(`[data-${v}]`).dataset[v.toLowerCase()];
-      if ( data ) {
-        for (const i of data.split("{{ SPLIT_CHARACTER }}")) {
-          document.getElementById(`form_${v}_${i}`).checked = true; 
-        }
-      }
-    }
-    // set form action
-    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/text/update/${this.dataset.id}`;
-    // show modal
-    document.getElementById("textmodal").showModal();
-  }
-  
   window.onload = function () {
     // initialise DataTable
     let table = new DataTable('#text-table', {
@@ -55,18 +14,13 @@
     deRole("#text-table");
 
     // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "Text hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("text-table_wrapper").firstElementChild.firstElementChild.appendChild(button);
-
-    // add event listeners
-    document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", showUpdateModal, false); 
-    }
+    let a = document.createElement("a");
+    a.id = "create-button";
+    a.setAttribute("title", "Text hinzufügen");
+    a.setAttribute("role", "button");
+    a.setAttribute("href", "{{ url_for('text.read', id=0) }}");  // there's no DB entry with id = 0, therefore the backend knows to serve an empty form
+    a.innerHTML = "Neu …";
+    document.getElementById("text-table_wrapper").firstElementChild.firstElementChild.appendChild(a);
   }
 </script>{% endblock script %}
 
@@ -91,77 +45,16 @@
   <tbody>
     {% for text in texte %}
     <tr id="text-{{ text['id'] }}">
-      <td data-Titel="{{ text['Titel'] }}" title="Titel">{{ text["Titel"] }}</td>
-      <td data-Untertitel="{{ text['Untertitel'] }}" title="Untertitel">{{ text["Untertitel"] }}</td>
-      <td data-Reihe="{{ text['r_id'] }}" title="Reihe">{{ text["Reihe"] }}</td>
-      <td data-Textform="{{ text['tf_id'] }}" title="Textform">{{ text["Textform"] }}</td>
-      <td data-Sprache="{{ text['s_id'] }}" title="Sprache">{{ text["Sprache"] }}</td>
-      <td data-Genres="{{ text['g_id_list'] | join(SPLIT_CHARACTER) }}" title="Genres">{{ text["Genre_list"] | join(SPLIT_CHARACTER) }}</td>
-      <td class="action action-update" data-id="{{ text['id'] }}"><a href="#" title="Text ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
+      <td title="Titel">{{ text["Titel"] }}</td>
+      <td title="Untertitel">{{ text["Untertitel"] }}</td>
+      <td title="Reihe">{{ text["Reihe"] }}</td>
+      <td title="Textform">{{ text["Textform"] }}</td>
+      <td title="Sprache">{{ text["Sprache"] }}</td>
+      <td title="Genres">{{ text["Genre_list"] | join(SPLIT_CHARACTER) }}</td>
+      <td class="action action-update" data-id="{{ text['id'] }}"><a href="{{ url_for('text.read', id=text['id']) }}" title="Text ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
       <td id="delete-{{ text['id'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('text.delete', id=text['id']) }}" title="Text löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
     </tr>  
     {% endfor %}
   </tbody>
 </table>
-
-<dialog aria-labelledby="dialog-heading" id="textmodal">
-  <article>
-    <form id="text_detail_form" method="post" >
-      <header>
-        <button aria-label="close" rel="prev" onclick="textmodal.close()"></button>
-        <h1 id="dialog-heading">#</h1>
-      </header>
-
-      <fieldset>
-        <article>
-          <label>
-            <span class="required">Titel</span>
-            <input class="required" id="form_Titel" name="form_Titel" aria-Label="Titel" placeholder="Titel" required autofocus />
-          </label>
-          <label>
-            Untertitel
-            <input id="form_Untertitel" name="form_Untertitel" aria-Label="Untertitel" placeholder="Untertitel" />
-          </label>
-          <label>
-            Reihe
-            <select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
-              <option selected value="">keine Reihe</option>
-              {% for r in reihen %}<option value="{{ r.ID }}">{{ r.Titel }}</option>{% endfor %}
-            </select>
-          </label>
-          <label>
-            <span class="required">Textform</span>
-            <select id="form_Textform" name="form_Textform" aria-label="Textform" required>
-              <option selected disabled value="">Textform auswählen …</option>
-              {% for tf in textformen %}<option value="{{ tf.ID }}">{{ tf.Textform }}</option>{% endfor %}
-            </select>
-          </label>
-          <label>
-            <span class="required">Sprache</span>
-            <select id="form_Sprache" name="form_Sprache" aria-label="Sprache des Textes" required>
-              <option selected disabled value="">Sprache auswählen …</option>
-              {% for s in sprachen %}<option value="{{ s.ID }}">{{ s.Sprache }}</option>{% endfor %}
-            </select>
-          </label>
-          <label>
-            Genre(s)
-            <details id="form_Genres" class="dropdown">
-              <summary>Genre(s) auswählen …</summary>
-              <ul>
-                {% for g in genres %}
-                <li><label><input id="form_Genres_{{ g.ID }}" name="form_Genres" type="checkbox" value="{{ g.ID }}" />{{ g.Genre }}</label></li>
-                {% endfor %}
-              </ul>
-            </details>
-          </label>
-        </article>
-      </fieldset>
-
-      <footer class="grid">
-        <button id="form_submit" type="submit" formmethod="post" formaction="{{ url_for('text.create') }}">OK</button>
-        <button class="secondary" aria-label="close" formmethod="dialog" formnovalidate>Abbrechen</button>
-      </footer>
-    </form>
-  </article>
-</dialog>
 {% endblock content %}
\ No newline at end of file
diff --git a/the_works/templates/views/text_detail.html b/the_works/templates/views/text_detail.html
new file mode 100644
index 0000000..f4480a1
--- /dev/null
+++ b/the_works/templates/views/text_detail.html
@@ -0,0 +1,83 @@
+{% extends 'base.html' %}
+{% set create_mode = (text['ID'] == 0) %}
+
+{% block title %}
+{% if create_mode %}
+Neuen Text erstellen
+{% else %}
+Text bearbeiten
+{% endif %}
+{% endblock title %}
+
+{% block script %}
+<script>
+</script>
+{% endblock script %}
+
+{% block heading %}
+{% if create_mode %}
+Neuen Text erstellen
+{% else %}
+Text bearbeiten
+{% endif %}
+{% endblock heading %}
+
+{% block content %}
+<form id="text_detail_form" method="post" action="#">
+  <div class="grid">
+    <div>
+      <label>
+        <span class="required">Titel</span>
+        <input class="required" id="form_Titel" name="form_Titel" aria-Label="Titel" placeholder="Titel" required value="{{ text['Titel'] }}" />
+      </label>
+      <label>
+        Untertitel
+        <input id="form_Untertitel" name="form_Untertitel" aria-Label="Untertitel" placeholder="Untertitel" value="{{ text['Untertitel'] }}" />
+      </label>
+      <label>
+        Reihe
+        <select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
+          <option selected value=""{% if text['Reihe'] == '' %} selected{% endif %}>keine Reihe</option>
+          {% for r in reihen %}<option value="{{ r.ID }}"{% if r.ID == text['Reihe'] %} selected{% endif %}>{{ r.Titel }}</option>{% endfor %}
+        </select>
+      </label>
+      <label>
+        <span class="required">Textform</span>
+        <select id="form_Textform" name="form_Textform" aria-label="Textform" required>
+          <option selected disabled value="">Textform auswählen …</option>
+          {% for tf in textformen %}<option value="{{ tf.ID }}"{% if tf.ID == text['Textform'] %} selected{% endif %}>{{ tf.Textform }}</option>{% endfor %}
+        </select>
+      </label>
+      <label>
+        <span class="required">Sprache</span>
+        <select id="form_Sprache" name="form_Sprache" aria-label="Sprache des Textes" required>
+          <option selected disabled value="">Sprache auswählen …</option>
+          {% for s in sprachen %}<option value="{{ s.ID }}"{% if s.ID == text['Sprache'] %} selected{% endif %}>{{ s.Sprache }}</option>{% endfor %}
+        </select>
+      </label>
+    </div>
+    <div>
+      <fieldset>
+        <legend>Genre(s)</legend>
+        <div class="grid">
+          {% for g in genres %}
+          <div><label>
+            <input name="form_Genres" type="checkbox" value="{{ g.ID }}" {% if g.ID in text["Genres"] %} checked {% endif %}/>
+            {{ g.Genre }}
+          </label></div>
+        {{ loop.cycle('', '</div><div class="grid">' | safe) }}  
+          {% endfor %}
+        </div>
+      </fieldset>
+    </div>
+  </div>
+
+  <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 %}">
+      {% if create_mode %}Eintrag speichern{% else %}Änderungen speichern{% endif %}
+    </button>
+    <button type="reset" title="Alle Felder auf den vorherigen Zustand zurücksetzen">Alles zurücksetzen</button>
+    <a role="button" class="contrast" href="{{ url_for('text.all') }}">Abbrechen (nicht speichern)</a>
+  </footer>
+</form>
+{% endblock content %}
\ No newline at end of file
diff --git a/the_works/views/text.py b/the_works/views/text.py
index da7731a..1c92724 100644
--- a/the_works/views/text.py
+++ b/the_works/views/text.py
@@ -27,18 +27,25 @@ def all():
       "Genre_list": map(lambda tg: tg.genre.Genre, row.Text.text_genre) if row.Text.text_genre else [],
       "g_id_list": map(lambda tg: tg.Genre, row.Text.text_genre) if row.Text.text_genre else []
     })
-  return render_template("views/text.html", texte=texte, reihen=db.session.scalars(select(Reihe)), textformen=db.session.scalars(select(Textform)), sprachen=db.session.scalars(select(Sprache)), genres=db.session.scalars(select(Genre)))
+  return render_template("views/text.html", texte=texte)
 
 @bp.route("/text/read/<int:id>")
 def read(id):
-  text = db.session.get(Text, id)
-  return {
-    "Titel": text.Titel,
-    "Untertitel": text.Untertitel or "",
-    "Reihe": text.Reihe or "",
-    "Textform": text.Textform,
-    "Sprache": text.Sprache
+  # id of zero -> create new entry
+  if id == 0:
+    return render_template("views/text_detail.html", text={"ID": 0}, reihen=db.session.scalars(select(Reihe)), textformen=db.session.scalars(select(Textform)), sprachen=db.session.scalars(select(Sprache)), genres=db.session.scalars(select(Genre)))
+  # all other ids -> update existing entry 
+  t = db.session.get(Text, id)
+  text = {
+    "ID": t.ID,
+    "Titel": t.Titel,
+    "Untertitel": t.Untertitel or "",
+    "Reihe": t.Reihe or "",
+    "Textform": t.Textform,
+    "Sprache": t.Sprache,
+    "Genres": t.genres or []
   }
+  return render_template("views/text_detail.html", text=text, reihen=db.session.scalars(select(Reihe)), textformen=db.session.scalars(select(Textform)), sprachen=db.session.scalars(select(Sprache)), genres=db.session.scalars(select(Genre)))
 
 @bp.route("/text/create", methods=["POST"])
 def create():