Update page link before submitting page form

integreat_cms/cms/templates/events/event_form.html

@@ -41,18 +41,24 @@ <h1 class="heading overflow-hidden text-ellipsis">
                     <div class="flex flex-wrap gap-4 ml-auto mr-0 items-center">
                         {% include "generic_auto_save_note.html" with form_instance=event_form.instance %}
                         {% if perms.cms.publish_event %}
-                            <button name="status" value="{{ DRAFT }}" class="btn btn-outline">
+                            <button name="status"
+                                    value="{{ DRAFT }}"
+                                    class="btn btn-outline no-premature-submission">
                                 {% translate "Save as draft" %}
                             </button>
-                            <button name="status" value="{{ PUBLIC }}" class="btn">
+                            <button name="status"
+                                    value="{{ PUBLIC }}"
+                                    class="btn no-premature-submission">
                                 {% if event_translation_form.instance.status == PUBLIC %}
                                     {% translate "Update" %}
                                 {% else %}
                                     {% translate "Publish" %}
                                 {% endif %}
                             </button>
                         {% else %}
-                            <button name="status" value="{{ REVIEW }}" class="btn">
+                            <button name="status"
+                                    value="{{ REVIEW }}"
+                                    class="btn no-premature-submission">
                                 {% translate "Submit for approval" %}
                             </button>
                         {% endif %}

integreat_cms/cms/templates/pages/page_form.html

@@ -52,18 +52,22 @@ <h1 class="heading">
                     </button>
                     {% has_perm 'cms.publish_page_object' request.user page as can_publish_page %}
                     {% if can_publish_page %}
-                        <button name="status" value="{{ DRAFT }}" class="btn btn-outline">
+                        <button name="status"
+                                value="{{ DRAFT }}"
+                                class="btn btn-outline no-premature-submission">
                             {% translate "Save as draft" %}
                         </button>
-                        <button name="status" value="{{ PUBLIC }}" class="btn whitespace-nowrap">
+                        <button name="status"
+                                value="{{ PUBLIC }}"
+                                class="btn whitespace-nowrap no-premature-submission">
                             {% if page_translation_form.instance.status == PUBLIC %}
                                 {% translate "Update" %}
                             {% else %}
                                 {% translate "Publish" %}
                             {% endif %}
                         </button>
                     {% elif can_edit_page %}
-                        <button name="status" value="{{ REVIEW }}" class="btn">
+                        <button name="status" value="{{ REVIEW }}" class="btn no-premature-submission">
                             {% translate "Submit for approval" %}
                         </button>
                     {% endif %}

integreat_cms/cms/templates/pages/page_sbs.html

@@ -36,7 +36,7 @@ <h1 class="heading">
                                 {% endif %}
                             </button>
                         {% elif can_edit_page %}
-                            <button name="status" value="{{ REVIEW }}" class="btn">
+                            <button name="status" value="{{ REVIEW }}" class="btn no-premature-submission">
                                 {% translate "Submit for approval" %}
                             </button>
                         {% endif %}

integreat_cms/cms/templates/pois/poi_form.html

@@ -35,12 +35,14 @@ <h1 class="heading overflow-hidden text-ellipsis">
             {% if not poi_form.instance.archived and perms.cms.change_poi %}
                 <div class="flex flex-wrap gap-4 ml-auto mr-0 items-center">
                     {% include "generic_auto_save_note.html" with form_instance=poi_translation_form.instance %}
-                    <button name="status" value="{{ DRAFT }}" class="btn btn-outline">
+                    <button name="status"
+                            value="{{ DRAFT }}"
+                            class="btn btn-outline no-premature-submission">
                         {% translate "Save as draft" %}
                     </button>
                     <button name="status"
                             value="{{ PUBLIC }}"
-                            class="btn"
+                            class="btn no-premature-submission"
                             {% if language != request.region.default_language and not poi_form.instance.default_public_translation %} title="{% translate "The default translation is not yet published" %}" disabled {% endif %}>
                         {% if poi_translation_form.instance.status == PUBLIC %}
                             {% translate "Update" %}

integreat_cms/static/src/js/forms/prevent-premature-submission.ts

@@ -0,0 +1,34 @@
+/**
+ * We sometimes want to perform a background task when an input element looses focus.
+ * If the focus loss is due to the user clicking on a submission button however, the
+ * corresponding form will be submitted before the background task is initiated.
+ * This class is a convenient wrapper for preventing this.
+ *
+ * See here for more: https://github.com/digitalfabrik/integreat-cms/pull/2636
+ */
+export default class SubmissionPrevention {
+    watchedElements: HTMLElement[] = [];
+    mostRecentlyClicked: HTMLElement = null;
+
+    preventSubmission = (e: Event) => {
+        e.preventDefault();
+        this.mostRecentlyClicked = e.target as HTMLElement;
+    };
+
+    constructor(identifier: string) {
+        const elements = document.querySelectorAll<HTMLElement>(identifier);
+        elements.forEach((element) => {
+            element.addEventListener("click", this.preventSubmission);
+        });
+        this.watchedElements = Array.from(elements);
+    }
+
+    release() {
+        this.watchedElements.forEach((element) => {
+            element.removeEventListener("click", this.preventSubmission);
+        });
+        if (this.mostRecentlyClicked !== null) {
+            this.mostRecentlyClicked.click();
+        }
+    }
+}

integreat_cms/static/src/js/forms/update-permalink.ts

@@ -4,6 +4,7 @@ or when the user clicks the permalinks edit button */
 
 import { getCsrfToken } from "../utils/csrf-token";
 import { copyToClipboard } from "../copy-clipboard";
+import SubmissionPrevention from "./prevent-premature-submission";
 
 const slugify = async (url: string, data: any) => {
     const response = await fetch(url, {
@@ -44,13 +45,16 @@ window.addEventListener("load", () => {
         (document.querySelector('[for="id_title"]') as HTMLElement)?.dataset?.slugifyUrl
     ) {
         document.getElementById("id_title").addEventListener("focusout", ({ target }) => {
+            const submissionLock = new SubmissionPrevention(".no-premature-submission");
             const currentTitle = (target as HTMLInputElement).value;
             const url = (document.querySelector('[for="id_title"]') as HTMLElement).dataset.slugifyUrl;
-            slugify(url, { title: currentTitle }).then((response) => {
-                /* on success write response to both slug field and permalink */
-                slugField.value = response.unique_slug;
-                updatePermalink(response.unique_slug);
-            });
+            slugify(url, { title: currentTitle })
+                .then((response) => {
+                    /* on success write response to both slug field and permalink */
+                    slugField.value = response.unique_slug;
+                    updatePermalink(response.unique_slug);
+                })
+                .finally(() => submissionLock.release());
         });
     }