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) {
--
GitLab