From cd23bd937de208a84e729ee6f39d9a89f3660dbd Mon Sep 17 00:00:00 2001
From: lunars97 <alekbarova.aizhana@gmail.com>
Date: Tue, 11 Jun 2024 14:54:43 +0200
Subject: [PATCH] Fix automatic slug update on sbs form

---
 .../cms/templates/pages/page_sbs.html          |  2 +-
 .../static/src/js/forms/update-permalink.ts    | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/integreat_cms/cms/templates/pages/page_sbs.html b/integreat_cms/cms/templates/pages/page_sbs.html
index 80111d04d7..7ef460be63 100644
--- a/integreat_cms/cms/templates/pages/page_sbs.html
+++ b/integreat_cms/cms/templates/pages/page_sbs.html
@@ -178,7 +178,7 @@ <h1 class="heading">
                                 {{ page_translation_form.instance.base_link }}
                             </label>
                             {% translate " Leave blank to generate unique permalink from title" as slug_placeholder %}
-                            {% render_field page_translation_form.slug placeholder=slug_placeholder %}
+                            {% render_field page_translation_form.slug placeholder=slug_placeholder id="target_slug-link" %}
                         </div>
                         <label for="{{ page_translation_form.title.id_for_label }}">
                             {{ page_translation_form.title.label }}
diff --git a/integreat_cms/static/src/js/forms/update-permalink.ts b/integreat_cms/static/src/js/forms/update-permalink.ts
index cd5772e50a..8e84b4291b 100644
--- a/integreat_cms/static/src/js/forms/update-permalink.ts
+++ b/integreat_cms/static/src/js/forms/update-permalink.ts
@@ -82,4 +82,22 @@ window.addEventListener("load", () => {
         slugField.value = currentSlug;
         toggleSlugMode();
     });
+
+    // This is used to slugify the title of the slug in target language
+    const slugifyStr = (str: string) => {
+        let trimmedStr = str.replace(/^\s+|\s+$/g, ""); // trim leading/trailing white space
+        let loweredCaseStr = trimmedStr.toLowerCase(); // convert string to lowercase
+        let slugStr = loweredCaseStr
+            .replace(/[^a-z0-9 -]/g, "") // remove any non-alphanumeric characters
+            .replace(/\s+/g, "-") // replace spaces with hyphens
+            .replace(/-+/g, "-"); // remove consecutive hyphens
+        return slugStr;
+    };
+    document.getElementById("target_translation_title")?.addEventListener("focusout", () => {
+        const targetLinkElement = document.getElementById("target_slug-link") as HTMLInputElement;
+        const targetTitleElement = (document.getElementById("target_translation_title") as HTMLInputElement).value
+            .trim()
+            .replace(/\s+/g, " ");
+        targetLinkElement.value = slugifyStr(targetTitleElement);
+    });
 });