dubacq/ScoDoc
1
0
Fork 0
forked from ScoDoc/ScoDoc
Code Pull Requests Activity

fixes multi-select (form + groups)

Browse Source
This commit is contained in:
Iziram 2024-08-24 18:24:46 +02:00
parent bdc6c90bfc
commit 871e85ae26
3 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/scodoc/sco_groups_view.py
View File

@ -747,7 +747,7 @@ def groups_table(
name="options", name="options",
html_id="group_list_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( H.extend(
# ; # ;
[ [

2
app/static/js/groups_view.js
View File

@ -54,6 +54,8 @@ function change_list_options(selected_options) {
var option = options[i]; var option = options[i];
if ($.inArray(option, selected_options) >= 0) { if ($.inArray(option, selected_options) >= 0) {
urlParams.set(option, "1"); urlParams.set(option, "1");
} else {
urlParams.delete(option);
} }
} }
window.location = url.href; window.location = url.href;

13
app/static/js/multi-select.js
View File

@ -20,7 +20,8 @@
<multi-select>.values() => ["val1",...] <multi-select>.values() => ["val1",...]
<multi-select>.values(["val1",...]) => // sélectionne les options correspondantes (ne vérifie pas les options "single") <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 { class MultiSelect extends HTMLElement {
@ -247,8 +248,6 @@ class MultiSelect extends HTMLElement {
(checkbox) => checkbox.checked (checkbox) => checkbox.checked
); );
const values = checkedBoxes.map((checkbox) => checkbox.value);
const opts = checkedBoxes.map((checkbox) => { const opts = checkedBoxes.map((checkbox) => {
return this.querySelector(`option[value="${checkbox.value}"]`); return this.querySelector(`option[value="${checkbox.value}"]`);
}); });
@ -263,6 +262,9 @@ class MultiSelect extends HTMLElement {
btn.textContent = `${checkedBoxes.length} sélections`; btn.textContent = `${checkedBoxes.length} sélections`;
} }
this.dispatchEvent(new Event("change")); this.dispatchEvent(new Event("change"));
// update the form values
this._internals.setFormValue(this._values());
} }
_values(newValues = null) { _values(newValues = null) {
@ -284,7 +286,6 @@ class MultiSelect extends HTMLElement {
checkbox.checked = newValues.includes(checkbox.value); checkbox.checked = newValues.includes(checkbox.value);
}); });
this._internals.setFormValue(this._values());
this._updateSelect(); this._updateSelect();
} }
} }
@ -298,7 +299,9 @@ class MultiSelect extends HTMLElement {
} }
on(callback) { on(callback) {
this.addEventListener("change", callback); this.addEventListener("change", () => {
callback(this._values());
});
} }
format(callback) { format(callback) {