Update page link before submitting page form

digitalfabrik · Feb 5, 2024 · 33516ef · 33516ef
1 parent 9916ac8
commit 33516ef
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/integreat_cms/cms/templates/pages/page_form.html b/integreat_cms/cms/templates/pages/page_form.html
@@ -55,7 +55,10 @@ <h1 class="heading">
                         <button name="status" value="{{ DRAFT }}" class="btn btn-outline">
                             {% translate "Save as draft" %}
                         </button>
-                        <button name="status" value="{{ PUBLIC }}" class="btn whitespace-nowrap">
+                        <button name="status"
+                                id="update-or-publish-button"
+                                value="{{ PUBLIC }}"
+                                class="btn whitespace-nowrap">
                             {% if page_translation_form.instance.status == PUBLIC %}
                                 {% translate "Update" %}
                             {% else %}

diff --git a/integreat_cms/static/src/js/forms/update-permalink.ts b/integreat_cms/static/src/js/forms/update-permalink.ts
@@ -44,12 +44,23 @@ window.addEventListener("load", () => {
         (document.querySelector('[for="id_title"]') as HTMLElement)?.dataset?.slugifyUrl
     ) {
         document.getElementById("id_title").addEventListener("focusout", ({ target }) => {
+            const submitButton = document.querySelector("#update-or-publish-button") as HTMLButtonElement;
+            let submitButtonClicked = false;
+            const submissionPrevention = (e: Event) => {
+                submitButtonClicked = true;
+                e.preventDefault();
+            };
+            submitButton.addEventListener("click", submissionPrevention);
             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);
+                submitButton.removeEventListener("click", submissionPrevention);
+                if (submitButtonClicked) {
+                    submitButton.click();
+                }
             });
         });
     }