From 4c3472031b9f5a3daee31e9851c615573dd4a5aa Mon Sep 17 00:00:00 2001
From: lunars97 <alekbarova.aizhana@gmail.com>
Date: Tue, 9 Jul 2024 20:07:13 +0200
Subject: [PATCH] Fix automatic slug update on sbs form

---
 .../cms/templates/pages/page_sbs.html         |  5 ++--
 .../release_notes/current/unreleased/2797.yml |  2 ++
 .../static/src/js/forms/update-permalink.ts   | 30 ++++++++++---------
 3 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 integreat_cms/release_notes/current/unreleased/2797.yml

diff --git a/integreat_cms/cms/templates/pages/page_sbs.html b/integreat_cms/cms/templates/pages/page_sbs.html
index 80111d04d7..8ceba41922 100644
--- a/integreat_cms/cms/templates/pages/page_sbs.html
+++ b/integreat_cms/cms/templates/pages/page_sbs.html
@@ -170,7 +170,8 @@ <h1 class="heading">
                             </label>
                             {% translate "Not saved yet" %}
                         {% endif %}
-                        <label for="{{ page_translation_form.slug.id_for_label }}">
+                        <label for="{{ page_translation_form.slug.id_for_label }}"
+                               data-slugify-url="{% url 'slugify_ajax' region_slug=request.region.slug language_slug=target_language.slug model_type='page' %}{% if page_translation_form.instance.id %}?data-model-id={{ page_translation_form.instance.id }}{% endif %}">
                             {{ page_translation_form.slug.label }}
                         </label>
                         <div class="slug-field">
@@ -183,7 +184,7 @@ <h1 class="heading">
                         <label for="{{ page_translation_form.title.id_for_label }}">
                             {{ page_translation_form.title.label }}
                         </label>
-                        {% render_field page_translation_form.title|add_error_class:"border-red-500" id="target_translation_title" %}
+                        {% render_field page_translation_form.title|add_error_class:"border-red-500" %}
                         <label for="{{ page_translation_form.content.id_for_label }}">
                             {{ page_translation_form.content.label }}
                         </label>
diff --git a/integreat_cms/release_notes/current/unreleased/2797.yml b/integreat_cms/release_notes/current/unreleased/2797.yml
new file mode 100644
index 0000000000..df3148eb96
--- /dev/null
+++ b/integreat_cms/release_notes/current/unreleased/2797.yml
@@ -0,0 +1,2 @@
+en: Fix automatic url update after changing a title of the page on side by side view
+de: Behebe einen Fehler bei der automatischen Aktualisierung der Seiten-URL nach Änderung des Seitentitels in der Seitenansicht
diff --git a/integreat_cms/static/src/js/forms/update-permalink.ts b/integreat_cms/static/src/js/forms/update-permalink.ts
index 08a1fe6f07..f5ccc33946 100644
--- a/integreat_cms/static/src/js/forms/update-permalink.ts
+++ b/integreat_cms/static/src/js/forms/update-permalink.ts
@@ -40,23 +40,25 @@ window.addEventListener("load", () => {
             .setAttribute("data-copy-to-clipboard", encodeURI(updatedLink.concat(currentSlug)));
     };
 
-    if (
-        document.getElementById("id_title") &&
-        (document.querySelector('[for="id_title"]') as HTMLElement)?.dataset?.slugifyUrl
-    ) {
-        document.getElementById("id_title").addEventListener("focusout", ({ target }) => {
+    document.querySelectorAll("#id_title").forEach((item) => {
+        item.addEventListener("focusout", ({ target }) => {
             const submissionLock = new SubmissionPrevention(".no-premature-submission");
             const currentTitle = (target as HTMLInputElement).value;
-            const dataset = (document.querySelector('[for="id_title"]') as HTMLElement).dataset;
-            slugify(dataset.slugifyUrl, { title: currentTitle, model_id: dataset.modelId })
-                .then((response) => {
-                    /* on success write response to both slug field and permalink */
-                    slugField.value = response.unique_slug;
-                    updatePermalink(response.unique_slug);
-                })
-                .finally(() => submissionLock.release());
+            const nodeList: NodeListOf<HTMLInputElement> = document.querySelectorAll(
+                '[for="id_title"],[for="id_slug"]'
+            );
+            for (const node of nodeList) {
+                const datasetItem = node.dataset;
+                slugify(datasetItem.slugifyUrl, { title: currentTitle, model_id: datasetItem.modelId })
+                    .then((response) => {
+                        /* on success write response to both slug field and permalink */
+                        slugField.value = response.unique_slug;
+                        updatePermalink(response.unique_slug);
+                    })
+                    .finally(() => submissionLock.release());
+            }
         });
-    }
+    });
 
     const toggleSlugMode = () => {
         // Toggle all permalink buttons (and the rendered link)