Use x-effect to listen, need to see why x-show does not trigger

magfest · Jan 11, 2025 · 8d84712 · 8d84712
1 parent 6632cd4
commit 8d84712
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git a/uber/templates/forms/attendee/admin_badge_flags.html b/uber/templates/forms/attendee/admin_badge_flags.html
@@ -133,7 +133,7 @@
     <div class="col-12 col-sm-4">{{ form_macros.form_input(badge_flags.badge_status,
             admin_text=attendee.cannot_edit_badge_status_reason,
             disabled=(attendee.cannot_edit_badge_status_reason != '')) }}</div>
-    <div class="col-12 col-sm-4">{{ form_macros.form_input(badge_flags.badge_type) }}</div>
+    <div class="col-12 col-sm-4">{{ form_macros.alpine_form_input(badge_flags.badge_type, alpine_props={'x-model':'badge_type'}) }}</div>
     <div class="col-12 col-sm-4">{{ form_macros.form_input(badge_flags.badge_num,
             extra_field=form_macros.toggle_checkbox(badge_flags.no_badge_num, [badge_flags.badge_num], hide_on_checked=True, prop="readonly", checked=not attendee.badge_num)) }}</div>
 </div>

diff --git a/uber/templates/forms/attendee/admin_staffing_info.html b/uber/templates/forms/attendee/admin_staffing_info.html
@@ -18,25 +18,6 @@
         {{ form_macros.alpine_form_input(staffing_info.staffing, admin_text=staffing_admin_text, alpine_props={'x-model.boolean':'staffing'}) }}
     </div>
 </div>
-<script type="text/javascript">
-    var checkStaffing = function() {
-        true_evals = [];
-        {% if badge_flags %}
-            true_evals.push({{ [c.STAFF_BADGE, c.CONTRACTOR_BADGE] }}.map(String).includes($("#{{ badge_flags.badge_type.id }}").val()));
-            true_evals.push($("#{{ badge_flags.ribbon.id }}-{{ c.VOLUNTEER_RIBBON }}").prop('checked'));
-        {% endif %}
-        if(true_evals.some(item => item)) {
-            $("#{{ staffing_info.staffing.id }}").prop('checked', true).trigger('change');
-        }
-    }
-    $().ready(function () {
-        checkStaffing();
-        {% if badge_flags %}
-        $("#{{ badge_flags.badge_type.id }}").change(checkStaffing);
-        $("#{{ badge_flags.ribbon.id }}").change(checkStaffing);
-        {% endif %}
-    })
-</script>
 <div class="row g-sm-3" x-show="staffing">
     <div class="col-12">
         <div class="form-text">Walk-On Volunteer</div>

diff --git a/uber/templates/forms/macros.html b/uber/templates/forms/macros.html
@@ -234,6 +234,12 @@
             {{ field(**custom_kwargs) }}
             {{ form_input_extras(field, help_text, admin_text) }}
         </div>
+    {% elif type == 'select' %}
+        <div class="form-floating{% if not no_margin %} mb-3{% endif %}">
+            {{ field(class="form-select", **custom_kwargs) }}
+            {{ alpine_form_label(field, label_text=label_text, required_if=required_if) }}
+            {{ form_input_extras(field, help_text, admin_text) }}
+        </div>
     {% else %}
         <div class="form-floating{% if not no_margin %} mb-3{% endif %}">
             {{ field(class="form-control", **custom_kwargs) }}

diff --git a/uber/templates/registration/form.html b/uber/templates/registration/form.html
@@ -172,7 +172,24 @@ <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" x-data="{badge_placeholder: {{ attendee.placeholder | javascript_bool }}, badge_ribbons: {{ attendee.ribbon | javascript_array }}, staffing: {{ attendee.staffing | javascript_bool }}}">
+<form novalidate method="post" id="attendee-form" action="form"
+      x-data="{
+        badge_placeholder: {{ attendee.placeholder | javascript_bool }},
+        badge_ribbons: {{ attendee.ribbon | javascript_array }},
+        badge_type : {{ attendee.badge_type }},
+        staffing: {{ attendee.staffing | javascript_bool }}
+        }"
+      x-effect="
+          if (Alpine.raw(badge_ribbons).includes({{ c.VOLUNTEER_RIBBON }})) {
+               console.log('Badge ribbons include volunteer')
+               staffing=true
+          }
+          if(badge_type == {{ c.STAFF_BADGE }} || badge_type == {{ c.CONTRACTOR_BADGE }}){
+               console.log('Badge type is staff or contractor!')
+               staffing=true
+          }
+          "
+>
 {{ csrf_token() }}
 <input type="hidden" name="id" value="{{ attendee.db_id }}" />
 <input type="hidden" name="return_to" value="{{ return_to }}" />