working towards a multi-select with change on other vars solution

uber/custom_tags.py

@@ -840,3 +840,10 @@ def javascript_bool(val):
         return 'true'
     else:
         return 'false'
+
+@JinjaEnv.jinja_filter
+def javascript_array(val):
+    if val:
+        return '['+ val + ']'
+    else:
+        return '[]'

uber/templates/forms/attendee/admin_badge_flags.html

@@ -178,7 +178,7 @@
 
 {% block ribbons %}
 <div class="row g-sm-3">
-    <div class="col-12">{{ form_macros.form_input(badge_flags.ribbon) }}</div>
+    <div class="col-12">{{ form_macros.alpine_form_input(badge_flags.ribbon,alpine_props={'x-model':'badge_ribbons'}) }}</div>
 </div>
 {% if staffing_info %}
 {{ form_macros.toggle_fields_js(badge_flags.ribbon, [staffing_info.staffing], on_values=[c.VOLUNTEER_RIBBON], prop='checked') }}

uber/templates/forms/attendee/admin_staffing_info.html

@@ -15,13 +15,6 @@
 <div class="row g-sm-3">
     <div class="col-12">
         <div class="form-text">Volunteering/Staffing</div>
-        {{ form_macros.toggle_checkbox(staffing_info.staffing, [staffing_info.walk_on_volunteer,
-                                                                staffing_info.requested_depts_ids,
-                                                                staffing_info.assigned_depts_ids,
-                                                                staffing_info.agreed_to_volunteer_agreement,
-                                                                staffing_info.got_staff_merch,
-                                                                staffing_info.hotel_eligible
-                                                                ], admin_text=staffing_admin_text) }}
         {{ form_macros.alpine_form_input(staffing_info.staffing, admin_text=staffing_admin_text, alpine_props={'x-model.boolean':'staffing'}) }}
     </div>
 </div>
@@ -44,27 +37,27 @@
         {% endif %}
     })
 </script>
-<div class="row g-sm-3">
+<div class="row g-sm-3" x-show="staffing">
     <div class="col-12">
         <div class="form-text">Walk-On Volunteer</div>
         {{ form_macros.form_input(staffing_info.walk_on_volunteer) }}
     </div>
 </div>
 
 {% if c.PUBLIC_DEPARTMENT_OPTS_WITH_DESC|length > 1 %}
-<div class="row g-sm-3">
+<div class="row g-sm-3" x-show="staffing">
     <div class="col-12">{{ form_macros.form_input(staffing_info.requested_depts_ids) }}</div>
 </div>
 {% endif %}
 
-<div class="row g-sm-3">
+<div class="row g-sm-3" x-show="staffing">
     <div class="col-12">{{ form_macros.form_input(staffing_info.assigned_depts_ids) }}</div>
 </div>
 {% endblock %}
 
 {% block merch_info %}
 {% if c.SEPARATE_STAFF_MERCH %}
-<div class="row g-sm-3">
+<div class="row g-sm-3" x-show="staffing">
     <div class="col-12 col-sm-6">
         <div class="form-text">Staff Merch Owed</div>
         <div class="mb-3">{{ attendee.staff_merch }}</div>
@@ -78,7 +71,7 @@
 {% endblock %}
 
 {% block checklist_info %}
-<div class="row g-sm-3">
+<div class="row g-sm-3" x-show="staffing">
     {% if c.VOLUNTEER_AGREEMENT_ENABLED %}
     <div class="col">
         {{ form_macros.form_input(staffing_info.agreed_to_volunteer_agreement,

uber/templates/forms/macros.html

@@ -201,7 +201,7 @@
     </label>
 {% endmacro %}
 
-{% macro alpine_form_input(field, label_text='', help_text='', admin_text='', no_margin=False, alpine_props=None) %}
+{% macro alpine_form_input(field, label_text='', help_text='', admin_text='', no_margin=False, alpine_props=dict() ) %}
     {#
     Renders the bootstrap scaffolding needed for a WTForms field based on its widget.
     field (Field): WTForms form field.
@@ -229,6 +229,11 @@
             {{ alpine_form_label(field, label_text=label_text, required_if=required_if, class="form-check-label") }}
             {{ form_input_extras(field, help_text, admin_text) }}
         </div>
+    {% elif type == 'checkgroup' %}
+        <div class="card card-body{% if not no_margin %} mb-3{% endif %}">
+            {{ field(**custom_kwargs) }}
+            {{ 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) }}

uber/templates/registration/attendee_data.html

@@ -135,7 +135,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" x-data="{badge_placeholder: {{ attendee.placeholder | javascript_bool }}, staffing: {{ attendee.staffing | javascript_bool }}}">
+<form novalidate method="post" action="../registration/update_attendee" id="attendee_form" x-data="{badge_placeholder: {{ attendee.placeholder | javascript_bool }}, badge_ribbons: {{ attendee.ribbon | javascript_array }}, staffing: {{ attendee.staffing | javascript_bool }}}">
   {{ csrf_token() }}
   <input type="hidden" name="id" value="{{ attendee.db_id }}" />
   {% include "forms/attendee/admin_badge_flags.html" %}

uber/templates/registration/form.html

@@ -172,7 +172,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" x-data="{badge_placeholder: {{ attendee.placeholder | javascript_bool }}, 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 }}, staffing: {{ attendee.staffing | javascript_bool }}}">
 {{ csrf_token() }}
 <input type="hidden" name="id" value="{{ attendee.db_id }}" />
 <input type="hidden" name="return_to" value="{{ return_to }}" />