ads: move js to separate file

mesads/templates/webpack/pages/ads.html

@@ -62,54 +62,6 @@ <h1>
 </div>
 {% endif %}
 
-<script type="text/javascript">
-  // array.findLastIndex is only available for firefox>104
-  function findLastIndex(arr, func) {
-    for (i = arr.length; i > 0; --i) {
-      if (func(arr[i - 1])) {
-        return i - 1;
-      }
-    }
-    return -1;
-  }
-
-  const get_x_data = () => ({
-      ads_creation_date: '{{ form.ads_creation_date.value|str_to_date|date:"Y-m-d"|default:"" }}',
-
-      get ads_before_2014() {
-        const creation_date = new Date(this.ads_creation_date);
-        return (creation_date - new Date('2014-10-01')) < 0;
-      },
-
-      // The field "attribution_date" should only be displayed for old ADS, or if the creation date is not set
-      get should_display_attribution_date() {
-        return !this.ads_creation_date || this.ads_before_2014;
-      },
-
-      used_by_owner: '{% if form.used_by_owner.value is True %}true{% elif form.used_by_owner.value is False %}false{% else %}unknown{% endif %}',
-
-      // The field "owner_license_number" should always be displayed for new ADS. For old ADS, it should only be displayed if the field "used_by_owner" is set to "true"
-      get should_display_owner_license_number() {
-        return !this.ads_before_2014|| this.used_by_owner === 'true' || this.used_by_owner === 'unknown';
-      },
-
-      attribution_type: '{{ form.attribution_type.value }}',
-      numberOfADSUsersFormsetToDisplay: (() => {
-        // All forms
-        const ads_user_forms = [...document.getElementsByClassName('ads-user-form')];
-        // List, returns true if the form is empty, false otherwise
-        const filled  = ads_user_forms.map((e) => !!e.querySelector('input:not([type="hidden"]):not([value=""])'));
-        // Index of the first non-empty form
-        const nonEmptyFormIdx = findLastIndex(filled, (e) => e === true);
-        // All the forms are empty, display only one blank form
-        if (nonEmptyFormIdx < 0) {
-          return 1;
-        }
-        return nonEmptyFormIdx + 1;
-      })(),
-  });
-</script>
-
 <div
   class="fr-grid-row"
   x-data="get_x_data()"
@@ -318,6 +270,13 @@ <h1>
   </form>
 </div>
 
+<script id="data" type="application/json">
+{
+  "ads_creation_date": "{{ form.ads_creation_date.value|str_to_date|date:"Y-m-d"|default:"" }}",
+  "used_by_owner": "{% if form.used_by_owner.value is True %}true{% elif form.used_by_owner.value is False %}false{% else %}unknown{% endif %}",
+  "attribution_type": "{{ form.attribution_type.value }}"
+}
+</script>
 <script src="./ads.ts"></script>
 {% endblock %}
 

mesads/templates/webpack/pages/ads.ts

@@ -1,3 +1,72 @@
 import Alpine from "alpinejs";
 
+// array.findLastIndex is only available for firefox>104
+function findLastIndex(arr: any[], func: (e: any) => boolean) {
+  for (let i = arr.length; i > 0; --i) {
+    if (func(arr[i - 1])) {
+      return i - 1;
+    }
+  }
+  return -1;
+}
+
+type DataType = {
+  ads_creation_date: string;
+  used_by_owner: string;
+  attribution_type: string;
+};
+
+const data = JSON.parse(
+  (document.getElementById("data") as HTMLScriptElement).text
+) as DataType;
+
+Alpine.data("get_x_data", () => ({
+  ads_creation_date: data.ads_creation_date,
+
+  get ads_before_2014() {
+    const creation_date = new Date(this.ads_creation_date);
+    if (creation_date >= new Date("2014-10-01")) {
+      return false;
+    }
+    return true;
+  },
+
+  // The field "attribution_date" should only be displayed for old ADS, or if the creation date is not set
+  get should_display_attribution_date() {
+    return !this.ads_creation_date || this.ads_before_2014;
+  },
+
+  used_by_owner: data.used_by_owner,
+
+  // The field "owner_license_number" should always be displayed for new ADS.
+  // For old ADS, it should only be displayed if the field "used_by_owner" is
+  // set to "true"
+  get should_display_owner_license_number() {
+    return (
+      !this.ads_before_2014 ||
+      this.used_by_owner === "true" ||
+      this.used_by_owner === "unknown"
+    );
+  },
+
+  attribution_type: data.attribution_type,
+  numberOfADSUsersFormsetToDisplay: (() => {
+    // All forms
+    const ads_user_forms = Array.from(
+      document.getElementsByClassName("ads-user-form")
+    );
+    // List, returns true if the form is empty, false otherwise
+    const filled = ads_user_forms.map(
+      (e) => !!e.querySelector('input:not([type="hidden"]):not([value=""])')
+    );
+    // Index of the first non-empty form
+    const nonEmptyFormIdx = findLastIndex(filled, (e) => e === true);
+    // All the forms are empty, display only one blank form
+    if (nonEmptyFormIdx < 0) {
+      return 1;
+    }
+    return nonEmptyFormIdx + 1;
+  })(),
+}));
+
 Alpine.start();