ScoDoc/app/templates/assiduites/widgets/tableau_assi.j2

<table id="assiduiteTable">
    <thead>
        <tr>
            <th>
                <div>
                    <span>Début</span>
                    <a class="icon order" onclick="order('date_debut', assiduiteCallBack, this)"></a>
                </div>
            </th>
            <th>
                <div>
                    <span>Fin</span>
                    <a class="icon order" onclick="order('date_fin', assiduiteCallBack, this)"></a>
                </div>
            </th>
            <th>
                <div>
                    <span>État</span>
                    <a class="icon order" onclick="order('etat', assiduiteCallBack, this)"></a>
                </div>
            </th>
            <th>
                <div>
                    <span>Module</span>
                    <a class="icon order" onclick="order('moduleimpl_id', assiduiteCallBack, this)"></a>
                </div>
            </th>
            <th>
                <div>
                    <span>Justifiée</span>
                    <a class="icon order" onclick="order('est_just', assiduiteCallBack, this)"></a>
                </div>
            </th>
        </tr>
    </thead>
    <tbody id="tableBodyAssiduites">
    </tbody>
</table>
<div id="paginationContainerAssiduites" class="pagination-container">
</div>

<script>
    const paginationContainerAssiduites = document.getElementById("paginationContainerAssiduites");
    let currentPageAssiduites = 1;
    let orderAssiduites = true;
    let filterAssiduites = {
        columns: [
            "entry_date", "date_debut", "date_fin", "etat", "moduleimpl_id", "est_just"
        ],
        filters: {}
    }
    const tableBodyAssiduites = document.getElementById("tableBodyAssiduites");

    function assiduiteCallBack(assi) {
        assi = filterArray(assi, filterAssiduites.filters)
        renderTableAssiduites(currentPageAssiduites, assi);
        renderPaginationButtons(assi);
    }

    const moduleimpls = {}

    function getModuleImpl(id) {
        if (id == null || id == undefined) {
            moduleimpls[id] = "Pas de module"
        }
        if (id in moduleimpls) {
            return moduleimpls[id];
        }
        const url_api = getUrl() + `/api/moduleimpl/${id}`;
        sync_get(url_api, (data) => {
            moduleimpls[id] = `${data.module.code} ${data.module.abbrev}`;
        }, (data) => { moduleimpls[id] = "Pas de module" });

        return moduleimpls[id];

    }

    function renderTableAssiduites(page, assiduités) {

        generateTableHead(filterAssiduites.columns, true)

        tableBodyAssiduites.innerHTML = "";
        const start = (page - 1) * itemsPerPage;
        const end = start + itemsPerPage;

        assiduités.slice(start, end).forEach((assiduite) => {
            const row = document.createElement("tr");
            row.setAttribute('type', "assiduite");
            row.setAttribute('obj_id', assiduite.assiduite_id);

            const etat = assiduite.etat.toLowerCase();
            row.classList.add(`l-${etat}`);
            filterAssiduites.columns.forEach((k) => {
                const td = document.createElement('td');
                if (k.indexOf('date') != -1) {
                    td.textContent = moment.tz(assiduite[k], TIMEZONE).format(`DD/MM/Y HH:mm`)
                } else if (k.indexOf("module") != -1) {
                    td.textContent = getModuleImpl(assiduite.moduleimpl_id);
                } else if (k.indexOf('est_just') != -1) {
                    td.textContent = assiduite[k] ? "Oui" : "Non"
                } else {
                    td.textContent = assiduite[k].capitalize()
                }

                row.appendChild(td)
            })

            row.addEventListener("contextmenu", (e) => {
                e.preventDefault();
                selectedRow = e.target.parentElement;
                contextMenu.style.top = `${e.clientY}px`;
                contextMenu.style.left = `${e.clientX}px`;
                contextMenu.style.display = "block";
                console.log(selectedRow);
            });

            tableBodyAssiduites.appendChild(row);
        });
        updateActivePaginationButton();
    }

</script>