From 2d86ba67f4285fa9c802d1b25d8fa68110e14fcd Mon Sep 17 00:00:00 2001 From: Sli Date: Fri, 8 May 2026 14:30:05 +0200 Subject: [PATCH 1/2] Fix subscription form --- .../creation-form-existing-user-index.ts | 73 ++++++++++--------- .../creation_form_existing_user.jinja | 23 +++++- 2 files changed, 58 insertions(+), 38 deletions(-) diff --git a/subscription/static/bundled/subscription/creation-form-existing-user-index.ts b/subscription/static/bundled/subscription/creation-form-existing-user-index.ts index e0b47cca..f582a756 100644 --- a/subscription/static/bundled/subscription/creation-form-existing-user-index.ts +++ b/subscription/static/bundled/subscription/creation-form-existing-user-index.ts @@ -1,38 +1,43 @@ 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)); - }, + async 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; - }, - })); -}); + // Wait for web components to load + await 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; + }, +})); diff --git a/subscription/templates/subscription/fragments/creation_form_existing_user.jinja b/subscription/templates/subscription/fragments/creation_form_existing_user.jinja index ae82bdd3..c7dffc16 100644 --- a/subscription/templates/subscription/fragments/creation_form_existing_user.jinja +++ b/subscription/templates/subscription/fragments/creation_form_existing_user.jinja @@ -6,13 +6,28 @@ > {% csrf_token %} -
+ {% set alpine_input_attrs = { + 'id_member': 'x-ref=userSelect,x-model=selectedUser', + 'id_birthdate': ':value=dateOfBirth,:hidden=dateOfBirthHidden', + } %} + + {% set alpine_field_attrs = { + 'id_birthdate': (':hidden=dateOfBirthHidden', 'x-cloack') + } %} + +
- {{ form.errors }} + {% if form.errors %} + {{ form.errors.__all__ }} + {% endif %} {% for field in form %} -
+
{{ field.label_tag() }} - {{ field }} + {{ field|add_attr(alpine_input_attrs.get(field.auto_id, "")) }} {% if field.help_text %} {{ field.help_text }} {% endif %} From 5551fdc953cea9aa3b54574520d2ea82c3a0622b Mon Sep 17 00:00:00 2001 From: Sli Date: Sun, 10 May 2026 13:02:13 +0200 Subject: [PATCH 2/2] Apply review comments --- .../creation-form-existing-user-index.ts | 11 ++-- .../static/subscription/css/subscription.scss | 5 +- .../creation_form_existing_user.jinja | 56 ++++++++----------- 3 files changed, 30 insertions(+), 42 deletions(-) diff --git a/subscription/static/bundled/subscription/creation-form-existing-user-index.ts b/subscription/static/bundled/subscription/creation-form-existing-user-index.ts index f582a756..553c2fcc 100644 --- a/subscription/static/bundled/subscription/creation-form-existing-user-index.ts +++ b/subscription/static/bundled/subscription/creation-form-existing-user-index.ts @@ -7,16 +7,15 @@ Alpine.data("existing_user_subscription_form", () => ({ dateOfBirth: "", dateOfBirthHidden: true, - async init() { + init() { this.$watch("selectedUser", async () => { await this.loadProfile(Number.parseInt(this.selectedUser, 10)); }); - // Wait for web components to load - await this.$nextTick(); - - // Force to detect the initial value - this.selectedUser = this.$refs.userSelect.widget.getValue(); + this.$nextTick(() => { + // Force to detect the initial value + this.selectedUser = this.$refs.userSelect.widget.getValue(); + }); }, async loadProfile(userId: number) { diff --git a/subscription/static/subscription/css/subscription.scss b/subscription/static/subscription/css/subscription.scss index 850abc76..561598a2 100644 --- a/subscription/static/subscription/css/subscription.scss +++ b/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; } diff --git a/subscription/templates/subscription/fragments/creation_form_existing_user.jinja b/subscription/templates/subscription/fragments/creation_form_existing_user.jinja index c7dffc16..e6333e98 100644 --- a/subscription/templates/subscription/fragments/creation_form_existing_user.jinja +++ b/subscription/templates/subscription/fragments/creation_form_existing_user.jinja @@ -6,41 +6,29 @@ > {% csrf_token %} - {% set alpine_input_attrs = { - 'id_member': 'x-ref=userSelect,x-model=selectedUser', - 'id_birthdate': ':value=dateOfBirth,:hidden=dateOfBirthHidden', - } %} - - {% set alpine_field_attrs = { - 'id_birthdate': (':hidden=dateOfBirthHidden', 'x-cloack') - } %} - -
+
- {% if form.errors %} - {{ form.errors.__all__ }} - {% endif %} - {% for field in form %} -
- {{ field.label_tag() }} - {{ field|add_attr(alpine_input_attrs.get(field.auto_id, "")) }} - {% if field.help_text %} - {{ field.help_text }} - {% endif %} - {% if field.name == "payment_method" %} - - {% trans trimmed %} - If the subscription is done using the AE account, - you must also click it on the AE counter. - {% endtrans %} - - {% endif %} -
- {% endfor %} + {{ form.non_field_errors() }} +
+ {{ form.member.label_tag() }} + {{ form.member|add_attr("x-ref=userSelect,x-model=selectedUser") }} +
+
+ {{ form.birthdate.label_tag() }} + {{ form.birthdate|add_attr(":value=dateOfBirth,:hidden=dateOfBirthHidden,:type=dateOfBirthHidden ? 'hidden' : 'date'") }} + {{ form.birthdate.help_text }} +
+
{{ form.subscription_type.as_field_group() }}
+
+ {{ form.payment_method.as_field_group() }} + + {% trans trimmed %} + If the subscription is done using the AE account, + you must also click it on the AE counter. + {% endtrans %} + +
+
{{ form.location.as_field_group() }}