diff --git a/gestion_employe/static/gestion_employe/js/index.js b/gestion_employe/static/gestion_employe/js/index.js index 9c31f13..31bf495 100644 --- a/gestion_employe/static/gestion_employe/js/index.js +++ b/gestion_employe/static/gestion_employe/js/index.js @@ -29,6 +29,7 @@ tableau_liste_employe.on("rowClick", function (row, rowData) { const data = rowData.getData(); document.getElementById('detail-id').value = data.id; + document.querySelector("#modalContratsEmploye").dataset.employeId = data.id; document.getElementById('detail-matricule').value = data.matricule; document.getElementById('detail-employe').value = data.employe; document.getElementById('detail-fonction').value = data.fonction; @@ -270,68 +271,86 @@ const listeContratExpirant = new Tabulator("#listeContratExpirant", { ajaxURL: $("boutonContratExpirants").dataset.urlexpirants, }) -/* let tabContrats = null; - -document.getElementById("modalContratsEmploye").addEventListener("show.bs.modal", function () { - - const employeId = document.getElementById("detail-id").value; +let tabContrats = null; +$("boutonVoirContrats").addEventListener("click", function () { + const employeId = $("detail-id").value; if (!employeId) { - alert("Aucun employé sélectionné"); + $("nom-employe-contrat").textContent = "Aucun employé sélectionné."; return; } - fetch(`/employé/employe/${employeId}/contrats/`) + $("modalContratsEmploye").dataset.employeId = employeId; + + const modalDetail = $("modalDetailEmploye"); + modalDetail.addEventListener( + "hidden.bs.modal", + () => bootstrap.Modal.getOrCreateInstance($("modalContratsEmploye")).show(), + {once: true} + ); + bootstrap.Modal.getOrCreateInstance(modalDetail).hide(); +}); + +$("modalContratsEmploye").addEventListener("shown.bs.modal", function () { + const employeId = this.dataset.employeId; + const urlTemplate = this.dataset.urlTemplate; + const tableElement = $("table-contrats-tabulator"); + + if (tabContrats) { + tabContrats.destroy(); + tabContrats = null; + } + + if (!employeId) { + $("nom-employe-contrat").textContent = "Aucun employé sélectionné."; + return; + } + + tableElement.replaceChildren(); + $("nom-employe-contrat").textContent = "Chargement..."; + const url = urlTemplate.replace("123456789", employeId); + + fetch(url) .then(response => { if (!response.ok) { - throw new Error("Erreur HTTP " + response.status); + throw new Error(`Erreur HTTP ${response.status}`); } return response.json(); }) .then(data => { + $("nom-employe-contrat").textContent = data.employe; - document.getElementById("nom-employe-contrat").innerText = - data.employe; - - if (tabContrats) { - tabContrats.destroy(); - } - - tabContrats = new Tabulator( - "#table-contrats-tabulator", - { - data: data.contrats, - layout: "fitColumns", - placeholder: "Aucun contrat", - - columns: [ - { title: "Numéro", field: "numero_contrat" }, - { title: "Type", field: "type_contrat" }, - { title: "Date début", field: "date_debut" }, - { title: "Date fin", field: "date_fin" }, - { title: "Salaire", field: "salaire_mensuel" }, - { title: "Statut", field: "statut" }, - - { - title: "Contrat", - field: "fichier", - formatter: function(cell) { - const url = cell.getValue(); - - if (!url) { - return "Aucun fichier"; - } - - return ` - Ouvrir - `; - } - } - ] - } - ); + tabContrats = new Tabulator(tableElement, { + data: data.contrats, + layout: "fitColumns", + pagination: true, + paginationSize: 10, + placeholder: "Aucun contrat", + columns: [ + {title: "Numéro", field: "numero_contrat"}, + {title: "Type", field: "type_contrat"}, + {title: "Date début", field: "date_debut"}, + {title: "Date fin", field: "date_fin"}, + {title: "Salaire", field: "salaire_mensuel"}, + {title: "Statut", field: "statut"}, + { + title: "Contrat", + field: "fichier", + formatter: "link", + formatterParams: {target: "_blank"}, + }, + ], + }); }) .catch(error => { - console.error("Erreur :", error); + console.error("Erreur lors du chargement des contrats :", error); + $("nom-employe-contrat").textContent = + "Impossible de charger les contrats."; + tableElement.textContent = + "Une erreur est survenue lors du chargement des contrats."; }); -}); */ +}); + +$("modalContratsEmploye").addEventListener("hidden.bs.modal", function () { + bootstrap.Modal.getOrCreateInstance($("modalDetailEmploye")).show(); +}); diff --git a/gestion_employe/templates/gestion_employe/index.html b/gestion_employe/templates/gestion_employe/index.html index 7e37c58..bdb1dcc 100644 --- a/gestion_employe/templates/gestion_employe/index.html +++ b/gestion_employe/templates/gestion_employe/index.html @@ -58,6 +58,7 @@ {% block 'modal' %} {% include "gestion_employe/parts/modalDetailEmploye.html" %} {% include "gestion_employe/parts/modalCreationContrat.html" %} + {% include "gestion_employe/parts/modalContratsEmploye.html" %} {% include "gestion_employe/parts/modalAffectationProjet.html" %} {% include "gestion_employe/parts/modalDocument.html" %} {% include "gestion_employe/parts/modalListeContratExpirants.html" %} diff --git a/gestion_employe/templates/gestion_employe/parts/modalContratsEmploye.html b/gestion_employe/templates/gestion_employe/parts/modalContratsEmploye.html index 6b780bf..5465a93 100644 --- a/gestion_employe/templates/gestion_employe/parts/modalContratsEmploye.html +++ b/gestion_employe/templates/gestion_employe/parts/modalContratsEmploye.html @@ -1,4 +1,4 @@ -