ScoDoc/app/templates/assiduites/moduleimpl_dynamic_selector.j2

<label for="moduleimpl_select">
    Module
    <select id="moduleimpl_select">
        <option value="" selected> Non spécifié </option>
    </select>
</label>


<script>

    function getEtudFormSemestres() {
        let semestre = {};
        sync_get(getUrl() + `/api/etudiant/etudid/${etudid}/formsemestres`, (data) => {
            semestre = data;
        });
        return semestre;
    }

    function filterFormSemestres(semestres) {
        const date = new moment.tz(
            document.querySelector("#tl_date").value,
            TIMEZONE
        );

        semestres = semestres.filter((fm) => {
            return date.isBetween(fm.date_debut_iso, fm.date_fin_iso)
        })

        return semestres;
    }

    function getFormSemestreProgramme(fm_id) {
        let semestre = {};
        sync_get(getUrl() + `/api/formsemestre/${fm_id}/programme`, (data) => {
            semestre = data;
        });
        return semestre;
    }

    function getModulesImplByFormsemestre(semestres) {
        const map = new Map();

        semestres.forEach((fm) => {
            const array = [];

            const fm_p = getFormSemestreProgramme(fm.formsemestre_id);
            ["ressources", "saes", "modules"].forEach((r) => {
                if (r in fm_p) {
                    fm_p[r].forEach((o) => {
                        array.push(getModuleInfos(o))
                    })
                }
            })

            map.set(fm.titre_num, array)
        })

        return map;
    }

    function getModuleInfos(obj) {
        return {
            moduleimpl_id: obj.moduleimpl_id,
            titre: obj.module.titre,
            code: obj.module.code,
        }
    }


    function populateSelect(sems, selected) {
        const select = document.getElementById('moduleimpl_select');
        select.innerHTML = `<option value="" selected> Non spécifié </option>`

        sems.forEach((mods, label) => {
            const optGrp = document.createElement('optgroup');
            optGrp.label = label

            mods.forEach((obj) => {
                const opt = document.createElement('option');
                opt.value = obj.moduleimpl_id;
                opt.textContent = `${obj.code} ${obj.titre}`
                if (obj.moduleimpl_id == selected) {
                    opt.setAttribute('selected', 'true');
                }

                optGrp.appendChild(opt);
            })
            select.appendChild(optGrp);
        })

    }

    function updateSelect(moduleimpl_id) {
        let sem = getEtudFormSemestres()
        sem = filterFormSemestres(sem)
        const mod = getModulesImplByFormsemestre(sem)
        populateSelect(mod, moduleimpl_id);
    }

    function updateSelectedSelect(moduleimpl_id) {
        const mod_id = moduleimpl_id != null ? moduleimpl_id : ""
        document.getElementById('moduleimpl_select').value = mod_id;
    }



    window.onload = () => {
        document.getElementById('moduleimpl_select').addEventListener('change', () => {
            const mod_id = document.getElementById('moduleimpl_select').value;

            const assi = getCurrentAssiduite(etudid);
            if (assi) {
                editAssiduite(assi.assiduite_id, assi.etat);
            }
        })

        const conflicts = getAssiduitesConflict(etudid);
        if (conflicts.length > 0) {
            updateSelectedSelect(conflicts[0].moduleimpl_id);
        }
    }



</script>

<style>
    #moduleimpl_select {
        width: 125px;
        text-overflow: ellipsis;
    }
</style>