Add action text preview functionality and update display logic

Author: Xpirix

qgisfeedproject/static/js/feed_item_form.js

@@ -10,9 +10,11 @@ let spatialFilterField = document.getElementById("id_spatial_filter");
 let publishFromField = document.getElementById("id_publish_from");
 let publishToField = document.getElementById("id_publish_to");
 let reviewersField = document.getElementById("id_reviewers");
+let actionTextField = document.getElementById("id_action_text");
 
 let contentPreview = document.getElementsByName("contentPreview");
 let titlePreview = document.getElementsByName("titlePreview");
+let actionTextPreview = document.getElementsByName("actionTextPreview");
 let imagePreview = document.getElementsByName("imagePreview");
 let urlPreview = document.getElementsByName("urlPreview");
 let stickyPreview = document.getElementsByName("stickyPreview");
@@ -34,6 +36,7 @@ let fields = [
   contentField,
   imageField,
   urlField,
+  actionTextField,
   sortingField,
   languageField,
   spatialFilterField,
@@ -155,6 +158,18 @@ urlField.addEventListener("input", function () {
   checkFormValid();
 });
 
+// Update action_text in preview when input change
+if (actionTextField) {
+  actionTextField.addEventListener("input", function () {
+    actionTextPreview.forEach((item) => {
+      item.querySelector("strong").innerText = actionTextField.value;
+      item.style.display = actionTextField.value ? "" : "none";
+    });
+    window.markFeedFormDirty();
+    checkFormValid();
+  });
+}
+
 // Update sticky in preview when change
 if (stickyField) {
   stickyField.addEventListener("change", function () {

qgisfeedproject/templates/feeds/feed_item_preview.html

@@ -24,9 +24,7 @@ <h5 name="titlePreview" class="title is-5">
             <div name="contentPreview">
                 {{form.content.value | default:"" | safe }}
             </div>
-            {% if form.action_text.value %}
-            <p name="actionTextPreview" class="mt-2"><strong>{{ form.action_text.value }}</strong></p>
-            {% endif %}
+            <p name="actionTextPreview" class="mt-2"{% if not form.action_text.value %} style="display:none;"{% endif %}><strong>{{ form.action_text.value|default:"" }}</strong></p>
         </div>
     </div>
 </div>
@@ -39,10 +37,10 @@ <h5 name="titlePreview" class="title is-5">
             {% endif %}
         </div>
         <div class="column is-8">
-            <h5 class="title is-5">
+            <h5 name="titlePreview" class="title is-5">
                 {{form.title.value | default:""}}
             </h5>
-            <div>
+            <div name="contentPreview">
                 {{form.content.value | default:"" | safe }}
             </div>
         </div>