Merge pull request #1378 from ae-utbm/fix-subscriptions

Fix subscription form

subscription/static/bundled/subscription/creation-form-existing-user-index.ts

@@ -1,38 +1,42 @@
 import { userFetchUser } from "#openapi";
 
-document.addEventListener("alpine:init", () => {
-  Alpine.data("existing_user_subscription_form", () => ({
-    loading: false,
-    profileFragment: "" as string,
+Alpine.data("existing_user_subscription_form", () => ({
+  loading: false,
+  selectedUser: "",
+  profileFragment: "",
+  dateOfBirth: "",
+  dateOfBirthHidden: true,
 
-    async init() {
-      const userSelect = document.getElementById("id_member") as HTMLSelectElement;
-      userSelect.addEventListener("change", async () => {
-        await this.loadProfile(Number.parseInt(userSelect.value, 10));
-      });
-      await this.loadProfile(Number.parseInt(userSelect.value, 10));
-    },
+  init() {
+    this.$watch("selectedUser", async () => {
+      await this.loadProfile(Number.parseInt(this.selectedUser, 10));
+    });
 
-    async loadProfile(userId: number) {
-      const birthdayInput = document.getElementById("id_birthdate") as HTMLInputElement;
-      if (!Number.isInteger(userId)) {
-        this.profileFragment = "";
-        birthdayInput.hidden = true;
-        return;
-      }
-      this.loading = true;
-      const [miniProfile, userInfos] = await Promise.all([
-        fetch(`/user/${userId}/mini/`),
-        // biome-ignore lint/style/useNamingConvention: api is snake_case
-        userFetchUser({ path: { user_id: userId } }),
-      ]);
-      this.profileFragment = await miniProfile.text();
-      // If the user has no birthdate yet, show the form input
-      // to fill this info.
-      // Else keep the input hidden and change its value to the user birthdate
-      birthdayInput.value = userInfos.data.date_of_birth;
-      birthdayInput.hidden = userInfos.data.date_of_birth !== null;
-      this.loading = false;
-    },
-  }));
-});
+    this.$nextTick(() => {
+      // Force to detect the initial value
+      this.selectedUser = this.$refs.userSelect.widget.getValue();
+    });
+  },
+
+  async loadProfile(userId: number) {
+    if (!Number.isInteger(userId)) {
+      this.profileFragment = "";
+      this.dateOfBirth = "";
+      this.dateOfBirthHidden = true;
+      return;
+    }
+    this.loading = true;
+    const [miniProfile, userInfos] = await Promise.all([
+      fetch(`/user/${userId}/mini/`),
+      // biome-ignore lint/style/useNamingConvention: api is snake_case
+      userFetchUser({ path: { user_id: userId } }),
+    ]);
+    this.profileFragment = await miniProfile.text();
+    // If the user has no birthdate yet, show the form input
+    // to fill this info.
+    // Else keep the input hidden and change its value to the user birthdate
+    this.dateOfBirth = userInfos.data.date_of_birth;
+    this.dateOfBirthHidden = userInfos.data.date_of_birth !== null;
+    this.loading = false;
+  },
+}));

subscription/static/subscription/css/subscription.scss

@@ -5,7 +5,8 @@
     margin-top: 0;
   }
 
-  fieldset p:first-of-type, & > p:first-of-type {
+  fieldset p:first-of-type,
+  &>p:first-of-type {
     margin-top: 0;
   }
 
@@ -24,7 +25,7 @@
     fieldset {
       flex: 0 1 auto;
 
-      p:has(input[hidden]) {
+      .form-group:has(input[hidden]) {
         // when the input is hidden, hide the whole label+input+help text group
         display: none;
       }

subscription/templates/subscription/fragments/creation_form_existing_user.jinja

@@ -8,24 +8,27 @@
 
   <div x-data="existing_user_subscription_form" class="form-content existing-user">
     <fieldset>
-      {{ form.errors }}
-      {% for field in form %}
-        <div class="form-group">
-          {{ field.label_tag() }}
-          {{ field }}
-          {% if field.help_text %}
-            <span class="helptext">{{ field.help_text }}</span>
-          {% endif %}
-          {% if field.name == "payment_method" %}
-            <i>
-              {% trans trimmed %}
-                If the subscription is done using the AE account,
-                you must also click it on the AE counter.
-              {% endtrans %}
-            </i>
-          {% endif %}
-        </div>
-      {% endfor %}
+      {{ form.non_field_errors() }}
+      <div class="form-group">
+        {{ form.member.label_tag() }}
+        {{ form.member|add_attr("x-ref=userSelect,x-model=selectedUser") }}
+      </div>
+      <div class="form-group">
+        {{ form.birthdate.label_tag() }}
+        {{ form.birthdate|add_attr(":value=dateOfBirth,:hidden=dateOfBirthHidden,:type=dateOfBirthHidden ? 'hidden' : 'date'") }}
+        <span class="helptext">{{ form.birthdate.help_text }}</span>
+      </div>
+      <div class="form-group">{{ form.subscription_type.as_field_group() }}</div>
+      <div class="form-group">
+        {{ form.payment_method.as_field_group() }}
+        <i>
+          {% trans trimmed %}
+            If the subscription is done using the AE account,
+            you must also click it on the AE counter.
+          {% endtrans %}
+        </i>
+      </div>
+      <div class="form-group">{{ form.location.as_field_group() }}</div>
     </fieldset>
     <div
       id="subscription-form-user-mini-profile"