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

Fix subscription form

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

@@ -1,23 +1,28 @@
 import { userFetchUser } from "#openapi";
 
-document.addEventListener("alpine:init", () => {
+Alpine.data("existing_user_subscription_form", () => ({
-  Alpine.data("existing_user_subscription_form", () => ({
   loading: false,
-    profileFragment: "" as string,
+  selectedUser: "",
+  profileFragment: "",
+  dateOfBirth: "",
+  dateOfBirthHidden: true,
 
-    async init() {
+  init() {
-      const userSelect = document.getElementById("id_member") as HTMLSelectElement;
+    this.$watch("selectedUser", async () => {
-      userSelect.addEventListener("change", async () => {
+      await this.loadProfile(Number.parseInt(this.selectedUser, 10));
-        await this.loadProfile(Number.parseInt(userSelect.value, 10));
+    });
+
+    this.$nextTick(() => {
+      // Force to detect the initial value
+      this.selectedUser = this.$refs.userSelect.widget.getValue();
     });
-      await this.loadProfile(Number.parseInt(userSelect.value, 10));
   },
 
   async loadProfile(userId: number) {
-      const birthdayInput = document.getElementById("id_birthdate") as HTMLInputElement;
     if (!Number.isInteger(userId)) {
       this.profileFragment = "";
-        birthdayInput.hidden = true;
+      this.dateOfBirth = "";
+      this.dateOfBirthHidden = true;
       return;
     }
     this.loading = true;
@@ -30,9 +35,8 @@ document.addEventListener("alpine:init", () => {
     // 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;
+    this.dateOfBirth = userInfos.data.date_of_birth;
-      birthdayInput.hidden = userInfos.data.date_of_birth !== null;
+    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 }}
+      {{ form.non_field_errors() }}
-      {% for field in form %}
       <div class="form-group">
-          {{ field.label_tag() }}
+        {{ form.member.label_tag() }}
-          {{ field }}
+        {{ form.member|add_attr("x-ref=userSelect,x-model=selectedUser") }}
-          {% if field.help_text %}
+      </div>
-            <span class="helptext">{{ field.help_text }}</span>
+      <div class="form-group">
-          {% endif %}
+        {{ form.birthdate.label_tag() }}
-          {% if field.name == "payment_method" %}
+        {{ 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>
-          {% endif %}
       </div>
-      {% endfor %}
+      <div class="form-group">{{ form.location.as_field_group() }}</div>
     </fieldset>
     <div
       id="subscription-form-user-mini-profile"