static: migrate slug to ts

passbook/core/forms/applications.py

@@ -29,18 +29,17 @@ class ApplicationForm(forms.ModelForm):
         ]
         widgets = {
             "name": forms.TextInput(),
-            "meta_launch_url": forms.TextInput(
-                attrs={
-                    "placeholder": _(
+            "meta_launch_url": forms.TextInput(),
+            "meta_icon_url": forms.TextInput(),
+            "meta_publisher": forms.TextInput(),
+        }
+        help_texts = {
+            "meta_launch_url": _(
                 (
                     "If left empty, passbook will try to extract the launch URL "
                     "based on the selected provider."
                 )
-                    )
-                }
             ),
-            "meta_icon_url": forms.TextInput(),
-            "meta_publisher": forms.TextInput(),
         }
         field_classes = {"provider": GroupedModelChoiceField}
         labels = {

passbook/static/static/src/ModalButton.ts

@@ -6,6 +6,7 @@ import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css"
 // @ts-ignore
 import BackdropStyle from "@patternfly/patternfly/components/Backdrop/backdrop.css";
 import { updateMessages } from "./Messages";
+import { convertToSlug } from "./utils";
 
 @customElement("pb-modal-button")
 export class ModalButton extends LitElement {
@@ -39,6 +40,20 @@ export class ModalButton extends LitElement {
                 this.open = false;
             });
         });
+        // Make name field update slug field
+        this.querySelectorAll<HTMLInputElement>("input[name=name]").forEach((input) => {
+            input.addEventListener("input", (e) => {
+                const form = input.closest("form");
+                if (form === null) {
+                    return;
+                }
+                const slugField = form.querySelector<HTMLInputElement>("input[name=slug]");
+                if (!slugField) {
+                    return;
+                }
+                slugField.value = convertToSlug(input.value);
+            });
+        });
         // Ensure forms sends in AJAX
         this.querySelectorAll<HTMLFormElement>("[slot=modal] form").forEach(form => {
             form.addEventListener('submit', (e) => {

passbook/static/static/src/legacy.js

@@ -40,25 +40,6 @@ document.querySelectorAll(".pf-c-check__label").forEach((checkLabel) => {
     });
 });
 
-// Automatic slug fields
-const convertToSlug = (text) => {
-    return text
-        .toLowerCase()
-        .replace(/ /g, '-')
-        .replace(/[^\w-]+/g, '');
-};
-
-document.querySelectorAll("input[name=name]").forEach((input) => {
-    input.addEventListener("input", (e) => {
-        const form = e.target.closest("form");
-        if (form === null) {
-            return;
-        }
-        const slugField = form.querySelector("input[name=slug]");
-        slugField.value = convertToSlug(e.target.value);
-    });
-});
-
 // Hamburger Menu
 document.querySelectorAll(".pf-c-page__header-brand-toggle>button").forEach((toggle) => {
     toggle.addEventListener("click", (e) => {

passbook/static/static/src/utils.ts

@@ -13,3 +13,10 @@ export function getCookie(name: string) {
     }
     return cookieValue;
 }
+
+export function convertToSlug(text: string): string {
+    return text
+        .toLowerCase()
+        .replace(/ /g, '-')
+        .replace(/[^\w-]+/g, '');
+}