Assiduité : saisie_assiduites_hebdo : liste assi conflits (sco-drop) closes #913

app/static/css/assiduites.css

@@ -754,4 +754,86 @@ tr.row-justificatif.non_valide td.assi-type {
 
 #gtrcontent[data-pdp="true"] .pdp {
   display: block;
+}
+
+.sco-drop {
+  border: 1px solid #e1e1e1;
+  /* Couleur de bordure plus douce */
+  border-radius: 8px;
+  /* Coins plus arrondis */
+  background-color: #fafafa;
+  /* Couleur de fond légère */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  /* Ombre douce pour de la profondeur */
+  width: 100%;
+  /* Adaptation à la largeur de son conteneur */
+  max-width: 600px;
+  /* Largeur maximale pour une meilleure apparence sur grands écrans */
+  margin: 10px auto;
+  /* Centrage avec une marge */
+  position: relative;
+  z-index: 1;
+}
+
+.sco-drop[open] {
+  z-index: 2;
+  /* Empilement au-dessus des autres détails */
+}
+
+.sco-drop summary {
+  font-weight: 600;
+  /* Texte plus épais */
+  color: #333;
+  /* Couleur de texte plus foncée pour le contraste */
+  padding: 7px 10px;
+  /* Plus de padding pour une meilleure ergonomie */
+  cursor: pointer;
+  list-style: none;
+  /* Enlève les puces */
+  outline: none;
+  /* Supprime la bordure de focus par défaut pour un look plus net */
+  user-select: none;
+  /* Empêche la sélection du texte */
+  text-align: center;
+}
+
+.sco-drop summary::-webkit-details-marker {
+  display: none;
+  /* Cache le triangle par défaut sur Chrome/Safari */
+}
+
+.sco-drop summary:focus {
+  outline: none;
+  /* Plus propre sans contour lors du focus */
+}
+
+.sco-drop ul {
+  list-style: none;
+  /* Enlève les puces */
+  margin: 5px 0;
+  padding: 0;
+  background-color: #fff;
+  /* Arrière-plan blanc pour le contenu */
+  position: absolute;
+  border-radius: 8px;
+  z-index: 1000;
+  border: 1px solid #e1e1e1;
+  /* Bordure plus douce */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  /* Ombre douce pour de la profondeur */
+  overflow-y: scroll;
+  max-height: 150px;
+  /* Hauteur maximale pour une meilleure apparence sur grands écrans */
+}
+
+.sco-drop li {
+  padding: 10px 20px;
+  /* Espacement intérieur pour les éléments de liste */
+  border-top: 1px solid #e1e1e1;
+  /* Séparateur subtil entre les éléments */
+}
+
+.sco-drop li:first-child {
+  border-top: none;
+  /* Pas de bordure en haut du premier élément */
 }

app/templates/assiduites/pages/signal_assiduites_hebdo.j2

@@ -335,17 +335,36 @@
             );
     }
 
+    function generateConflitDetails(assiduites){
+        let html = '<details class="sco-drop"><summary>Assiduités en conflit</summary><ul>'
+
+        assiduites.forEach((a)=>{
+            const deb = new Date(a.date_debut);
+            const fin = new Date(a.date_fin);
+            let date = "";
+            if (deb.isSame(fin, "day")){
+                date = `le ${deb.format("DD/MM/YYYY")} de ${deb.format("HH:mm")} à ${fin.format("HH:mm")}`;
+            }else{
+                date = `du ${deb.format("DD/MM/YYYY")} au ${fin.format("DD/MM/YYYY")}`;
+            }
+
+            html += `<li>
+             <a 
+                href="edit_assiduite_etud/${a.assiduite_id}"
+                title="Cliquez pour voir/éditer l'assiduité"
+                target="_blank"
+             >
+             ${a.etat} ${date}
+             </a>
+            </li>`
+
+        })
+
+        return html + "</ul></details>"
+    }
+
 
     function updateTable(assiduites) {
-
-        const img_conflit = `
-    <a
-        class="conflit_calendar"
-        title="Des assiduités existent déjà pour cette période. Cliquez ici pour voir le calendrier de l'assiduité de l'étudiant"
-        data-tooltip
-        target="_blank"
-    >📅</a>`
-
         // Suppression existant
         document.querySelectorAll("td.btns").forEach((el) => {
             el.remove();
@@ -454,8 +473,7 @@
                         tdMatin.setAttribute("data-tooltip", "");
 
                     } else {
-                        tdMatin.innerHTML = img_conflit;
-                        tdMatin.querySelector(".conflit_calendar").href = `calendrier_assi_etud?etudid=${etudid}`;
+                        tdMatin.innerHTML = generateConflitDetails(etudAssiMorning);
                         tdMatin.classList.add("conflit");
                     }
                 }
@@ -485,8 +503,7 @@
                         tdApresmidi.setAttribute("title", text);
                         tdApresmidi.setAttribute("data-tooltip", "");
                     } else {
-                        tdApresmidi.innerHTML = img_conflit;
-                        tdApresmidi.querySelector(".conflit_calendar").href = `calendrier_assi_etud?etudid=${etudid}`;
+                        tdApresmidi.innerHTML = generateConflitDetails(etudAssiAfternoon);
                         tdApresmidi.classList.add("conflit");
                     }
                 }
@@ -560,7 +577,6 @@
     // coche tous les boutons de la colonne
     function allPresent(day, time) {
         // Version naive : coche tous les boutons de la colonne
-        // TODO - Optimiser avec une seule requête API
         let tds = document.querySelectorAll(`td[day="${day}"][time="${time}"]`);
         const real_time = time == "am" ? "matin" : "apresmidi";
         const assi = {

app/templates/assiduites/pages/traitement_justificatifs.j2

@@ -86,87 +86,7 @@
     }
 
 
-    .sco-drop {
-        border: 1px solid #e1e1e1;
-        /* Couleur de bordure plus douce */
-        border-radius: 8px;
-        /* Coins plus arrondis */
-        background-color: #fafafa;
-        /* Couleur de fond légère */
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        /* Ombre douce pour de la profondeur */
-        width: 100%;
-        /* Adaptation à la largeur de son conteneur */
-        max-width: 600px;
-        /* Largeur maximale pour une meilleure apparence sur grands écrans */
-        margin: 10px auto;
-        /* Centrage avec une marge */
-        position: relative;
-        z-index: 1;
-    }
-
-    .sco-drop[open] {
-        z-index: 2;
-        /* Empilement au-dessus des autres détails */
-    }
-
-    .sco-drop summary {
-        font-weight: 600;
-        /* Texte plus épais */
-        color: #333;
-        /* Couleur de texte plus foncée pour le contraste */
-        padding: 7px 10px;
-        /* Plus de padding pour une meilleure ergonomie */
-        cursor: pointer;
-        list-style: none;
-        /* Enlève les puces */
-        outline: none;
-        /* Supprime la bordure de focus par défaut pour un look plus net */
-        user-select: none;
-        /* Empêche la sélection du texte */
-        text-align: center;
-    }
-
-    .sco-drop summary::-webkit-details-marker {
-        display: none;
-        /* Cache le triangle par défaut sur Chrome/Safari */
-    }
-
-    .sco-drop summary:focus {
-        outline: none;
-        /* Plus propre sans contour lors du focus */
-    }
-
-    .sco-drop ul {
-        list-style: none;
-        /* Enlève les puces */
-        margin: 5px 0;
-        padding: 0;
-        background-color: #fff;
-        /* Arrière-plan blanc pour le contenu */
-        position: absolute;
-        border-radius: 8px;
-        z-index: 1000;
-        border: 1px solid #e1e1e1;
-        /* Bordure plus douce */
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-        /* Ombre douce pour de la profondeur */
-        overflow-y: scroll;
-        max-height: 150px;
-        /* Hauteur maximale pour une meilleure apparence sur grands écrans */
-    }
-
-    .sco-drop li {
-        padding: 10px 20px;
-        /* Espacement intérieur pour les éléments de liste */
-        border-top: 1px solid #e1e1e1;
-        /* Séparateur subtil entre les éléments */
-    }
-
-    .sco-drop li:first-child {
-        border-top: none;
-        /* Pas de bordure en haut du premier élément */
-    }
+    
 </style>
 
 {% endblock styles %}