🎨 Use multiple checkboxes than multiple select widget

apps/member/forms.py

@@ -4,6 +4,7 @@
 from django import forms
 from django.contrib.auth.forms import AuthenticationForm
 from django.contrib.auth.models import User
+from django.forms import CheckboxSelectMultiple
 from django.utils.translation import gettext_lazy as _
 from note.models import NoteSpecial, Alias
 from note_kfet.inputs import Autocomplete, AmountInput, DatePickerInput
@@ -151,6 +152,7 @@ class MembershipRolesForm(forms.ModelForm):
     roles = forms.ModelMultipleChoiceField(
         queryset=Role.objects.filter(weirole=None).all(),
         label=_("Roles"),
+        widget=CheckboxSelectMultiple(),
     )
 
     class Meta:

apps/wei/forms/registration.py

@@ -4,6 +4,7 @@
 from django import forms
 from django.contrib.auth.models import User
 from django.db.models import Q
+from django.forms import CheckboxSelectMultiple
 from django.utils.translation import gettext_lazy as _
 from note_kfet.inputs import AmountInput, DatePickerInput, Autocomplete, ColorWidget
 
@@ -47,6 +48,7 @@ class WEIChooseBusForm(forms.Form):
         label=_("bus"),
         help_text=_("This choice is not definitive. The WEI organizers are free to attribute for you a bus and a team,"
                     + " in particular if you are a free eletron."),
+        widget=CheckboxSelectMultiple(),
     )
 
     team = forms.ModelMultipleChoiceField(
@@ -54,17 +56,24 @@ class WEIChooseBusForm(forms.Form):
         label=_("Team"),
         required=False,
         help_text=_("Leave this field empty if you won't be in a team (staff, bus chief, free electron)"),
+        widget=CheckboxSelectMultiple(),
     )
 
     roles = forms.ModelMultipleChoiceField(
         queryset=WEIRole.objects.filter(~Q(name="1A")),
         label=_("WEI Roles"),
         help_text=_("Select the roles that you are interested in."),
+        initial=WEIRole.objects.filter(name="Adhérent WEI").all(),
+        widget=CheckboxSelectMultiple(),
     )
 
 
 class WEIMembershipForm(forms.ModelForm):
-    roles = forms.ModelMultipleChoiceField(queryset=WEIRole.objects, label=_("WEI Roles"))
+    roles = forms.ModelMultipleChoiceField(
+        queryset=WEIRole.objects,
+        label=_("WEI Roles"),
+        widget=CheckboxSelectMultiple(),
+    )
 
     def clean(self):
         cleaned_data = super().clean()

apps/wei/views.py

@@ -527,8 +527,9 @@ class WEIRegister2AView(ProtectQuerysetMixin, LoginRequiredMixin, CreateView):
             context["form"].fields["user"].disabled = True
 
         choose_bus_form = WEIChooseBusForm()
-        choose_bus_form.fields["bus"].queryset = Bus.objects.filter(wei=context["club"])
-        choose_bus_form.fields["team"].queryset = BusTeam.objects.filter(bus__wei=context["club"])
+        choose_bus_form.fields["bus"].queryset = Bus.objects.filter(wei=context["club"]).order_by('name')
+        choose_bus_form.fields["team"].queryset = BusTeam.objects.filter(bus__wei=context["club"])\
+            .order_by('bus__name', 'name')
         context['membership_form'] = choose_bus_form
 
         return context

templates/wei/weiregistration_form.html

@@ -14,3 +14,29 @@
         <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
     </form>
 {% endblock %}
+
+{% block extrajavascript %}
+    <script>
+    $(document).ready(function() {
+        function refreshTeams() {
+            let buses = [];
+            $("input[name='bus']:checked").each(function(ignored) {
+                buses.push($(this).parent().text().trim());
+            });
+            console.log(buses);
+            $("input[name='team']").each(function() {
+                let label = $(this).parent();
+                $(this).parent().addClass('d-none');
+                buses.forEach(function(bus) {
+                    if (label.text().includes(bus))
+                        label.removeClass('d-none');
+                });
+            });
+        }
+
+        $("input[name='bus']").change(refreshTeams);
+
+        refreshTeams();
+    });
+    </script>
+{% endblock %}