From 7715117b8025f063a28fe996fd5c41da13045193 Mon Sep 17 00:00:00 2001
From: hdaws <hayley.dawson@proton.me>
Date: Sun, 24 Nov 2024 16:33:46 -0500
Subject: [PATCH] start turning macro and handscript into alpine on attendee.
 incomplete/buggy

---
 .../forms/attendee/admin_badge_flags.html     |  3 +-
 .../forms/attendee/personal_info.html         | 82 ++++++++-----------
 .../templates/registration/attendee_data.html |  2 +-
 uber/templates/registration/form.html         |  2 +-
 4 files changed, 38 insertions(+), 51 deletions(-)

diff --git a/uber/templates/forms/attendee/admin_badge_flags.html b/uber/templates/forms/attendee/admin_badge_flags.html
index b6bf7ea36..666d24ced 100644
--- a/uber/templates/forms/attendee/admin_badge_flags.html
+++ b/uber/templates/forms/attendee/admin_badge_flags.html
@@ -68,9 +68,10 @@
 </div>
 {% endif %}
 <div class="row g-sm-3">
+    <div class="col-12 col-sm-6">
     <div class="col-12 col-sm-6">
         <div class="form-text">Placeholder</div>
-        <div>{{ form_macros.form_input(badge_flags.placeholder, admin_text="You will only need to fill out their name and email address.") }}</div>
+        <div>{{ form_macros.alpine_form_input(badge_flags.placeholder, admin_text="You will only need to fill out their name and email address.",alpine_props={'x-model.boolean':'badge_placeholder'}) }}</div>
     </div>
     {% if c.TRANSFERABLE_BADGE_TYPES|length > 0 %}
         {% set transfer_admin_text %}
diff --git a/uber/templates/forms/attendee/personal_info.html b/uber/templates/forms/attendee/personal_info.html
index 24352a593..5a102489d 100644
--- a/uber/templates/forms/attendee/personal_info.html
+++ b/uber/templates/forms/attendee/personal_info.html
@@ -14,9 +14,18 @@
 
   Use these to add or rearrange fields. Remember to use {{ super() }} to print the original fields as-is.
 #}
-
-{% block name %}
-{% set attendee_last_name = attendee.last_name[0] ~ '.' if limited_read else attendee.last_name %}
+<div x-data="{
+                international: {{ personal_info.international.data | string | lower }},
+                copyAddress: false,
+                get isZipRequired(){ return !this.international && !this.copyAddress}, //hmd todo broken and not sure why.
+                canRequireCellphone: {{ (is_prereg_dealer or attendee.is_dealer or attendee.staffing) | string | lower }}, //HMD TODO, need to account for staffing_info.staffing toggle.
+                copyCellphone: false,
+                noCellphone: {{ personal_info.no_cellphone.data | string | lower }},
+                get isCellphoneDisabled() { return this.noCellphone || this.copyCellphone},
+                get isCellphoneRequired() { return this.canRequireCellphone && !this.noCellphone && !this.copyCellphone && !this.badge_placeholder } //badge_placeholder may be undefined - which is still false for us.
+                }">
+    {% block name %}
+    {% set attendee_last_name = attendee.last_name[0] ~ '.' if limited_read else attendee.last_name %}
 
 <div class="row g-sm-3">
 <div class="col-12 col-sm-6">{{ form_macros.form_input(personal_info.first_name) }}</div>
@@ -68,43 +77,17 @@
 <div class="row g-sm-3">
   {% endif %}
   <div class="col-12 col-sm-6">
-    {{ form_macros.form_input(personal_info.cellphone, extra_field=cellphone_extra_field, required=is_prereg_dealer or attendee.is_dealer or attendee.staffing) }}
-  </div>
-</div>
-<script type="text/javascript">
-  var checkCellphoneRequired = function() {
-      true_evals = [];
-      false_evals = [];
-      {% if is_prereg_dealer %}
-        true_evals.push(true);
-        false_evals.push($("#{{ personal_info.copy_phone.id }}").prop('checked') == false);
-      {% else %}
-        false_evals.push($("#{{ personal_info.no_cellphone.id }}").prop('checked') == false);
-      {% endif %}
-      {% if staffing_info %}
-        true_evals.push($("#{{ staffing_info.staffing.id }}").prop('checked'));
-      {% endif %}
-      {% if badge_flags %}
-        false_evals.push($("#{{ badge_flags.placeholder.id }}").prop('checked') == false);
-      {% endif %}
-      toggleOn = true_evals.some(item => item) && false_evals.every(item => item)
-      $("#{{ personal_info.cellphone.id }}").prop('required', toggleOn);
-      $('#{{ personal_info.cellphone.id }}').siblings('label').children('.required-indicator').toggle(toggleOn);
-  }
-  $().ready(function () {
-    checkCellphoneRequired();
-    $("#{{ personal_info.no_cellphone.id }}").change(checkCellphoneRequired);
-      {% if staffing_info %}
-      $("#{{ staffing_info.staffing.id }}").change(checkCellphoneRequired);
-      {% endif %}
-      {% if badge_flags %}
-      $("#{{ badge_flags.placeholder.id }}").change(checkCellphoneRequired);
-      {% endif %}
-  })
-</script>
+          {{ form_macros.alpine_form_input(personal_info.cellphone, no_margin=True, alpine_props={':required':'isCellphoneRequired', ':disabled':'isCellphoneDisabled'})}}
+         {% if is_prereg_dealer %}
+             {{ form_macros.alpine_form_input(personal_info.copy_phone, alpine_props={'x-model.boolean':'copyCellphone'}) }}
+         {% elif attendee.staffing or (other_info and other_info is not none) %}
+             {{ form_macros.alpine_form_input(personal_info.no_cellphone, alpine_props={'x-model.boolean':'noCellphone'}) }}
+         {% endif %}
+      </div>
+      </div>
+    </div>
 {% endblock %}
 
-
 {% block age %}
 <div class="row g-sm-3">
   <div class="col-12 col-sm-6">
@@ -119,7 +102,7 @@
     {% if c.CONSENT_FORM_URL and not admin_area %}
     <div class="alert alert-warning" role="alert">
       <em>
-        Attendees under 18 <b>MUST</b> bring a signed (and notarized if not accompanied by parent or guardian during badge pickup) 
+        Attendees under 18 <b>MUST</b> bring a signed (and notarized if not accompanied by parent or guardian during badge pickup)
         <a class="link-dark" target="_blank" href="{{ c.CONSENT_FORM_URL }}">parental consent form</a>.
       </em>
     </div>
@@ -134,9 +117,9 @@
 {% if is_prereg_dealer %}
 <div class="row g-sm-3">
   <div class="col-12">
-    {{ form_macros.toggle_checkbox(personal_info.copy_address, 
-      [personal_info.address1, personal_info.address2, personal_info.city, personal_info.region_us, 
-      personal_info.region_canada, personal_info.region, personal_info.zip_code, personal_info.country], 
+    {{ form_macros.toggle_checkbox(personal_info.copy_address,
+      [personal_info.address1, personal_info.address2, personal_info.city, personal_info.region_us,
+      personal_info.region_canada, personal_info.region, personal_info.zip_code, personal_info.country],
       hide_on_checked=True, toggle_required=True, prop="disabled", checked=group and loaded_from_group and attendee.address1 == group.address1) }}
   </div>
 </div>
@@ -149,7 +132,7 @@
       $('#country-selectToAutocomplete').siblings('label').children('.required-indicator').toggle(!$("#country").prop("disabled"));
     }, 10);
   })
-  $().ready(function() { 
+  $().ready(function() {
     setTimeout(function() {
       if ($("#country").prop("disabled")) {
         $("#region").prop('disabled', true);
@@ -159,15 +142,17 @@
       $("country-selectToAutocomplete").prop('disabled', $("#country").prop("disabled"));
       $('#country-selectToAutocomplete').siblings('label').children('.required-indicator').toggle(!$("#country").prop("disabled"));
     }, 10);
-   }) 
+   })
 </script>
 {% endif %}
   {{ form_macros.address_fields(attendee, personal_info) }}
 {% else %}
 {# We need a better solution, but avoiding a row here allows event plugins to put a field next to the zip code #}
-  <div class="col-12 col-sm-6">
-    {{ form_macros.form_input(personal_info.zip_code, extra_field=form_macros.toggle_checkbox(personal_info.international, [personal_info.zip_code], hide_on_checked=True, toggle_required=True, prop='')) }}
-  </div>
+ {# We need a better solution, but avoiding a row here allows event plugins to put a field next to the zip code #}
+      <div class="col-12 col-sm-6">
+            {{ form_macros.alpine_form_input(personal_info.zip_code, no_margin=True, alpine_props={':required':'isZipRequired',':disabled':'copyAddress'}) }}
+            {{ form_macros.alpine_form_input(personal_info.international, alpine_props={'x-model.boolean':'international'}) }}
+      </div>
 {% endif %}
 {% endblock %}
 
@@ -198,4 +183,5 @@
   </div>
 </div>
 {% endif %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+</div>
\ No newline at end of file
diff --git a/uber/templates/registration/attendee_data.html b/uber/templates/registration/attendee_data.html
index c8eaabded..cfc46e441 100644
--- a/uber/templates/registration/attendee_data.html
+++ b/uber/templates/registration/attendee_data.html
@@ -130,7 +130,7 @@
 {% endif %}
 
 {{ form_macros.form_validation('attendee_form', '../registration/validate_attendee', callback="updateAttendee(submit_button_name)") }}
-<form novalidate method="post" action="../registration/update_attendee" id="attendee_form">
+<form novalidate method="post" action="../registration/update_attendee" id="attendee_form" x-data="{badge_placeholder:false}">
   {{ csrf_token() }}
   <input type="hidden" name="id" value="{{ attendee.db_id }}" />
   {% include "forms/attendee/admin_badge_flags.html" %}
diff --git a/uber/templates/registration/form.html b/uber/templates/registration/form.html
index d3e20f0b1..5833bd352 100644
--- a/uber/templates/registration/form.html
+++ b/uber/templates/registration/form.html
@@ -143,7 +143,7 @@ <h4>{{ attendee.full_name }} currently owes <strong>{{ (receipt.current_amount_o
 
 {{ form_macros.form_validation('attendee-form') }}
 
-<form novalidate method="post" id="attendee-form" action="form">
+<form novalidate method="post" id="attendee-form" action="form" x-data="{badge_placeholder:false}">
 {{ csrf_token() }}
 <input type="hidden" name="id" value="{{ attendee.db_id }}" />
 <input type="hidden" name="return_to" value="{{ return_to }}" />