Refix formulaire_feuille_appel avec multiselect corrigé

This commit is contained in:
Emmanuel Viennet 2024-08-23 19:13:15 +02:00
commit b9cf1e9efa
3 changed files with 11 additions and 34 deletions

View File

@ -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(
# ;
[

View File

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

View File

@ -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>
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 %}
{% endblock scripts %}