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, submit_on_change=False,
default_deselect_others=True, default_deselect_others=True,
html_export=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 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é. 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) (utilisé pour retrouver le semestre et proposer la liste des autres groupes)
@ -237,10 +236,6 @@ def menu_groups_choice(
sinon : sinon :
selecteur.value = [xxx, yyy, ...] 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) default_group_id = sco_groups.get_default_group(groups_infos.formsemestre_id)
n_members = len(sco_groups.get_group_members(default_group_id)) n_members = len(sco_groups.get_group_members(default_group_id))
@ -767,7 +762,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(
# ; # ;
[ [

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

View File

@ -23,7 +23,6 @@
id="feuille_emargement" id="feuille_emargement"
action="{{request.base_url}}" action="{{request.base_url}}"
method="post" method="post"
onsubmit="serializeGroupIds(event)"
> >
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
<div class="infos-button">Groupes&nbsp;: {{grp|safe}}</div> <div class="infos-button">Groupes&nbsp;: {{grp|safe}}</div>
@ -56,24 +55,4 @@
{% include "sco_timepicker.j2" %} {% include "sco_timepicker.j2" %}
<script src="{{scu.STATIC_DIR}}/js/groups_view.js"></script> <script src="{{scu.STATIC_DIR}}/js/groups_view.js"></script>
<script src="{{scu.STATIC_DIR}}/libjs/purl.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 %}