From 871e85ae26c60f3fc3c904cb50efb8144d90f2c0 Mon Sep 17 00:00:00 2001
From: Iziram <matthias.hartmann@iziram.fr>
Date: Sat, 24 Aug 2024 18:24:46 +0200
Subject: [PATCH] fixes multi-select (form + groups)

---
 app/scodoc/sco_groups_view.py |  2 +-
 app/static/js/groups_view.js  |  2 ++
 app/static/js/multi-select.js | 13 ++++++++-----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/scodoc/sco_groups_view.py b/app/scodoc/sco_groups_view.py
index d4817ee2..574ab4d0 100644
--- a/app/scodoc/sco_groups_view.py
+++ b/app/scodoc/sco_groups_view.py
@@ -747,7 +747,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(
                 # ;
                 [
diff --git a/app/static/js/groups_view.js b/app/static/js/groups_view.js
index 7f16a580..2f26c09b 100644
--- a/app/static/js/groups_view.js
+++ b/app/static/js/groups_view.js
@@ -54,6 +54,8 @@ function change_list_options(selected_options) {
     var option = options[i];
     if ($.inArray(option, selected_options) >= 0) {
       urlParams.set(option, "1");
+    } else {
+      urlParams.delete(option);
     }
   }
   window.location = url.href;
diff --git a/app/static/js/multi-select.js b/app/static/js/multi-select.js
index 178586f8..acd2226b 100644
--- a/app/static/js/multi-select.js
+++ b/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) {