Refix formulaire_feuille_appel avec multiselect corrigé

app/scodoc/sco_groups_view.py

@@ -225,9 +225,8 @@ def menu_groups_choice(
     submit_on_change=False,
     default_deselect_others=True,
     html_export=True,
-    change_event=None,  # XXX ???
 ):
-    """menu pour selection groupes
+    """Menu pour selection groupes
     group_ids est la liste des groupes actuellement sélectionnés
     et doit comporter au moins un élément, sauf si formsemestre_id est spécifié.
     (utilisé pour retrouver le semestre et proposer la liste des autres groupes)
@@ -237,10 +236,6 @@ def menu_groups_choice(
     sinon :
         selecteur.value = [xxx, yyy, ...]
 
-    Si change_event :
-        met à jour l'événement onchange du selecteur
-        (attend du js, plus d'informations sur scu.MultiSelect.change_event)
-
     """
     default_group_id = sco_groups.get_default_group(groups_infos.formsemestre_id)
     n_members = len(sco_groups.get_group_members(default_group_id))
@@ -767,7 +762,7 @@ def groups_table(
                 name="options",
                 html_id="group_list_options",
             )
-            multi_select.change_event("change_list_options(event.target.value);")
+            multi_select.change_event("change_list_options(values);")
             H.extend(
                 # ;
                 [

app/static/js/multi-select.js

@@ -20,7 +20,8 @@
 
     <multi-select>.values() => ["val1",...]
     <multi-select>.values(["val1",...]) => // sélectionne les options correspondantes (ne vérifie pas les options "single")
-    <multi-select>.on("change", (values) => {}) => // écoute le changement de valeur
+    <multi-select>.on((values) => {}) => // écoute le changement de valeur
+    <multi-select>.format((values)=>{}) // modifie les valeurs avant d'être envoyées / récupérées. values est un tableau des valeurs des options sélectionnées
  */
 
 class MultiSelect extends HTMLElement {
@@ -247,8 +248,6 @@ class MultiSelect extends HTMLElement {
       (checkbox) => checkbox.checked
     );
 
-    const values = checkedBoxes.map((checkbox) => checkbox.value);
-
     const opts = checkedBoxes.map((checkbox) => {
       return this.querySelector(`option[value="${checkbox.value}"]`);
     });
@@ -263,6 +262,9 @@ class MultiSelect extends HTMLElement {
       btn.textContent = `${checkedBoxes.length} sélections`;
     }
     this.dispatchEvent(new Event("change"));
+
+    // update the form values
+    this._internals.setFormValue(this._values());
   }
 
   _values(newValues = null) {
@@ -284,7 +286,6 @@ class MultiSelect extends HTMLElement {
         checkbox.checked = newValues.includes(checkbox.value);
       });
 
-      this._internals.setFormValue(this._values());
       this._updateSelect();
     }
   }
@@ -298,7 +299,9 @@ class MultiSelect extends HTMLElement {
   }
 
   on(callback) {
-    this.addEventListener("change", callback);
+    this.addEventListener("change", () => {
+      callback(this._values());
+    });
   }
 
   format(callback) {

app/templates/scolar/formulaire_feuille_appel.j2

@@ -23,7 +23,6 @@
         id="feuille_emargement"
         action="{{request.base_url}}"
         method="post"
-        onsubmit="serializeGroupIds(event)"
     >
         {{ form.hidden_tag() }}
         <div class="infos-button">Groupes&nbsp;: {{grp|safe}}</div>
@@ -56,24 +55,4 @@
 {% include "sco_timepicker.j2" %}
 <script src="{{scu.STATIC_DIR}}/js/groups_view.js"></script>
 <script src="{{scu.STATIC_DIR}}/libjs/purl.js"></script>
-<script>
+{% endblock scripts %}
-function serializeGroupIds(event) {
-    // Dealing with multiselect
-    event.preventDefault();
-    var form = document.getElementById("feuille_emargement");
-    var groupIdsField = form.elements["group_ids"];
-
-    // Check if the group_ids field exists and is an array
-    if (groupIdsField && Array.isArray(groupIdsField.value)) {
-        // Convert the array to a comma-separated string
-        var serializedValue = groupIdsField.value.join(',');
-
-        // Replace the field's value with the serialized string
-        groupIdsField.value = serializedValue;
-    }
-
-    // Now submit the form
-    form.submit();
-}
-</script>
-{% endblock scripts %}