From 15baf57136c04142ba6fd110d03485c040e71d34 Mon Sep 17 00:00:00 2001
From: iziram <matthias.hartmann@iziram.fr>
Date: Thu, 20 Apr 2023 18:04:21 +0200
Subject: [PATCH] =?UTF-8?q?Assiduit=C3=A9s=20:=20Page=20Liste=20Assiduites?=
 =?UTF-8?q?=20/=20Justifs=20(WIP)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/justificatifs.py                     |   7 +-
 app/scodoc/html_sidebar.py                   |   2 +-
 app/static/css/assiduites.css                |   4 +
 app/static/js/assiduites.js                  |  55 +++-
 app/templates/assiduites/liste_assiduites.j2 | 330 +++++++++++++++++++
 app/templates/sidebar.j2                     |   2 +-
 app/views/assiduites.py                      |  42 +++
 7 files changed, 434 insertions(+), 8 deletions(-)
 create mode 100644 app/templates/assiduites/liste_assiduites.j2

diff --git a/app/api/justificatifs.py b/app/api/justificatifs.py
index 7017ca1b4b..6228bcf867 100644
--- a/app/api/justificatifs.py
+++ b/app/api/justificatifs.py
@@ -341,6 +341,7 @@ def justif_delete():
         else:
             output["success"][f"{i}"] = {"OK": True}
     db.session.commit()
+
     return jsonify(output)
 
 
@@ -356,8 +357,12 @@ def _delete_singular(justif_id: int, database):
     if archive_name is not None:
         archiver: JustificatifArchiver = JustificatifArchiver()
         archiver.delete_justificatif(justificatif_unique.etudid, archive_name)
-
     database.session.delete(justificatif_unique)
+
+    compute_assiduites_justified(
+        Justificatif.query.filter_by(etudid=justificatif_unique.etudid), True
+    )
+
     return (200, "OK")
 
 
diff --git a/app/scodoc/html_sidebar.py b/app/scodoc/html_sidebar.py
index 5403b4d961..b0d4a23483 100755
--- a/app/scodoc/html_sidebar.py
+++ b/app/scodoc/html_sidebar.py
@@ -138,7 +138,7 @@ def sidebar(etudid: int = None):
         H.append(
             f"""
             <li><a href="{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Calendrier</a></li>
-            <li><a href="{ url_for('absences.ListeAbsEtud', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Liste</a></li>
+            <li><a href="{ url_for('assiduites.liste_assiduites_etud', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Liste</a></li>
             </ul>
             """
         )
diff --git a/app/static/css/assiduites.css b/app/static/css/assiduites.css
index be487a7e35..1301044f44 100644
--- a/app/static/css/assiduites.css
+++ b/app/static/css/assiduites.css
@@ -482,4 +482,8 @@
 
 #page-assiduite-content>* {
     margin: 1.5% 0;
+}
+
+.rouge {
+    color: crimson;
 }
\ No newline at end of file
diff --git a/app/static/js/assiduites.js b/app/static/js/assiduites.js
index bd004f4274..94efe5f92e 100644
--- a/app/static/js/assiduites.js
+++ b/app/static/js/assiduites.js
@@ -856,6 +856,23 @@ function actualizeEtudAssiduite(etudid, has_formsemestre = true) {
   });
 }
 
+function getAllAssiduitesFromEtud(etudid, action) {
+  const url_api = getUrl() + `/api/assiduites/${etudid}`;
+
+  $.ajax({
+    async: true,
+    type: "GET",
+    url: url_api,
+    success: (data, status) => {
+      if (status === "success") {
+        assiduites[etudid] = data;
+        action(data);
+      }
+    },
+    error: () => {},
+  });
+}
+
 /**
  * Déclenchement d'une action après appuie sur un bouton d'assiduité
  * @param {HTMLInputElement} element Bouton d'assiduité appuyé
@@ -1100,10 +1117,6 @@ function createMiniTimeline(assiduitesArray) {
       }
       //ajouter affichage assiduites on over
       setupAssiduiteBuble(block, assiduité);
-
-      if (assiduité.est_just) {
-        block.classList.add("justified");
-      }
     }
 
     const action = (justificatifs) => {
@@ -1675,7 +1688,7 @@ window.onload = () => {
       splitAssiduiteModal(selectedAssiduite);
     }
   });
-  editBtn.addEventListener("click", () => {
+  editBtn?.addEventListener("click", () => {
     if (selectedAssiduite) {
       editAssiduiteModal(selectedAssiduite);
     }
@@ -1934,3 +1947,35 @@ function createJustificatif(justif) {
     }
   );
 }
+
+function getAllJustificatifsFromEtud(etudid, action) {
+  const url_api = getUrl() + `/api/justificatifs/${etudid}`;
+  $.ajax({
+    async: true,
+    type: "GET",
+    url: url_api,
+    success: (data, status) => {
+      if (status === "success") {
+        action(data);
+      }
+    },
+    error: () => {},
+  });
+}
+
+function deleteJustificatif(justif_id) {
+  const path = getUrl() + `/api/justificatif/delete`;
+  sync_post(
+    path,
+    [justif_id],
+    (data, status) => {
+      //success
+      if (data.success.length > 0) {
+      }
+    },
+    (data, status) => {
+      //error
+      console.error(data, status);
+    }
+  );
+}
diff --git a/app/templates/assiduites/liste_assiduites.j2 b/app/templates/assiduites/liste_assiduites.j2
new file mode 100644
index 0000000000..0f60c91d41
--- /dev/null
+++ b/app/templates/assiduites/liste_assiduites.j2
@@ -0,0 +1,330 @@
+{% include "assiduites/alert.j2" %}
+{% include "assiduites/prompt.j2" %}
+{% block app_content %}
+
+<div class="pageContent">
+
+    <h2>Liste de l'assiduité et des justificatifs de <span class="rouge">{{sco.etud.nomprenom}}</span></h2>
+
+    <h3>Assiduités :</h3>
+    <table id="assiduiteTable">
+        <thead>
+            <tr>
+                <th>Début</th>
+                <th>Fin</th>
+                <th>État</th>
+                <th>Module</th>
+                <th>Justifiée</th>
+            </tr>
+        </thead>
+        <tbody id="tableBodyAssiduites">
+        </tbody>
+    </table>
+    <div id="paginationContainerAssiduites" class="pagination-container">
+    </div>
+    <h3>Justificatifs :</h3>
+    <table id="justificatifTable">
+        <thead>
+            <tr>
+                <th>Début</th>
+                <th>Fin</th>
+                <th>État</th>
+                <th>Raison</th>
+            </tr>
+        </thead>
+        <tbody id="tableBodyJustificatifs">
+        </tbody>
+    </table>
+    <div id="paginationContainerJustificatifs" class="pagination-container">
+    </div>
+    <ul id="contextMenu" class="context-menu">
+        <li id="detailOption">Detail</li>
+        <li id="editOption">Editer</li>
+        <li id="deleteOption">Supprimer</li>
+    </ul>
+
+</div>
+{% endblock app_content %}
+
+<style>
+    .pageContent {
+        width: 100%;
+        max-width: 800px;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+    }
+
+    table {
+        border-collapse: collapse;
+
+        text-align: left;
+        margin: 20px 0;
+    }
+
+    th,
+    td {
+        border: 1px solid #dddddd;
+        padding: 8px;
+    }
+
+    th {
+        background-color: #f2f2f2;
+    }
+
+    tr:hover {
+        filter: brightness(1.2)
+    }
+
+    .context-menu {
+        display: none;
+        position: absolute;
+        list-style-type: none;
+        padding: 10px 0;
+        background-color: #f9f9f9;
+        border: 1px solid #ccc;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+    }
+
+    .context-menu li {
+        padding: 8px 16px;
+    }
+
+    .context-menu li:hover {
+        background-color: #ddd;
+    }
+
+    .present {
+        background-color: #9CF1AF;
+    }
+
+    .absent,
+    .invalid {
+        background-color: #F1A69C;
+    }
+
+    .valid {
+        background-color: #8f7eff;
+    }
+
+    .retard {
+        background-color: #F1D99C;
+    }
+
+    /* Ajoutez des styles pour le conteneur de pagination et les boutons */
+    .pagination-container {
+        display: flex;
+        justify-content: center;
+        margin: 20px 0;
+    }
+
+    .pagination-button {
+        padding: 10px;
+        border: 1px solid #ccc;
+        cursor: pointer;
+        background-color: #f9f9f9;
+        margin: 0 5px;
+        text-decoration: none;
+        color: #000;
+    }
+
+    .pagination-button:hover {
+        background-color: #ddd;
+    }
+
+    .pagination-button.active {
+        background-color: #007bff;
+        color: #fff;
+        border-color: #007bff;
+    }
+</style>
+
+<script>
+    const etudid = {{ sco.etud.id }};
+    const paginationContainerAssiduites = document.getElementById("paginationContainerAssiduites");
+    const paginationContainerJustificatifs = document.getElementById("paginationContainerJustificatifs");
+    const itemsPerPage = 10;
+    let currentPageAssiduites = 1;
+    let currentPageJustificatifs = 1;
+
+    const tableBodyAssiduites = document.getElementById("tableBodyAssiduites");
+    const tableBodyJustificatifs = document.getElementById("tableBodyJustificatifs");
+
+    const contextMenu = document.getElementById("contextMenu");
+    const editOption = document.getElementById("editOption");
+    const deleteOption = document.getElementById("deleteOption");
+    let selectedRow;
+
+    document.addEventListener("click", () => {
+        contextMenu.style.display = "none";
+    });
+
+    editOption.addEventListener("click", () => {
+        if (selectedRow) {
+            // Code pour éditer la ligne sélectionnée
+            console.debug("Éditer :", selectedRow);
+        }
+    });
+
+    deleteOption.addEventListener("click", () => {
+        if (selectedRow) {
+            // Code pour supprimer la ligne sélectionnée
+            const type = selectedRow.getAttribute('type');
+            const obj_id = selectedRow.getAttribute('obj_id');
+            if (type == "assiduite") {
+                deleteAssiduite(obj_id);
+
+            } else {
+                deleteJustificatif(obj_id);
+            }
+            loadAll();
+
+
+        }
+    });
+
+    function renderTableAssiduites(page, assiduités) {
+        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(etat);
+
+            row.innerHTML = `
+            <td>${new Date(assiduite.date_debut).toLocaleString()}</td>
+            <td>${new Date(assiduite.date_fin).toLocaleString()}</td>
+            <td>${etat}</td>
+            <td>${assiduite.moduleimpl_id}</td>    <td>${assiduite.est_just ? "Oui" : "Non"
+                }</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();
+    }
+
+    function renderTableJustificatifs(page, justificatifs) {
+        tableBodyJustificatifs.innerHTML = "";
+        const start = (page - 1) * itemsPerPage;
+        const end = start + itemsPerPage;
+
+        justificatifs.slice(start, end).forEach((justificatif) => {
+            const row = document.createElement("tr");
+            row.setAttribute('type', "justificatif");
+            row.setAttribute('obj_id', justificatif.justif_id);
+
+            const etat = justificatif.etat.toLowerCase();
+
+            if (etat == "valide") {
+                row.classList.add('valid');
+            } else {
+                row.classList.add('invalid')
+            }
+
+            row.innerHTML = `
+            <td>${new Date(justificatif.date_debut).toLocaleString()}</td>
+            <td>${new Date(justificatif.date_fin).toLocaleString()}</td>
+            <td>${etat}</td>
+            <td>${justificatif.raison}</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);
+            });
+
+            tableBodyJustificatifs.appendChild(row);
+        });
+        updateActivePaginationButton(false);
+    }
+
+    function renderPaginationButtons(array, assi = true) {
+        const totalPages = Math.ceil(array.length / itemsPerPage);
+
+        if (assi) {
+            paginationContainerAssiduites.innerHTML = ""
+        } else {
+            paginationContainerJustificatifs.innerHTML = ""
+        }
+
+        for (let i = 1; i <= totalPages; i++) {
+            const paginationButton = document.createElement("a");
+            paginationButton.textContent = i;
+            paginationButton.classList.add("pagination-button");
+            if (assi) {
+                paginationButton.addEventListener("click", () => {
+                    currentPageAssiduites = i;
+                    renderTableAssiduites(currentPageAssiduites, array);
+                });
+                paginationContainerAssiduites.appendChild(paginationButton);
+            } else {
+                paginationButton.addEventListener("click", () => {
+                    currentPageJustificatifs = i;
+                    renderTableAssiduites(currentPageJustificatifs, array);
+                });
+                paginationContainerJustificatifs.appendChild(paginationButton);
+            }
+        }
+        updateActivePaginationButton(assi);
+    }
+    function updateActivePaginationButton(assi = true) {
+        if (assi) {
+            const paginationButtons =
+                paginationContainerAssiduites.querySelectorAll("#paginationContainerAssiduites .pagination-button");
+            paginationButtons.forEach((button) => {
+                if (parseInt(button.textContent) === currentPageAssiduites) {
+                    button.classList.add("active");
+                } else {
+                    button.classList.remove("active");
+                }
+            });
+        } else {
+            const paginationButtons =
+                paginationContainerJustificatifs.querySelectorAll("#paginationContainerJustificatifs .pagination-button");
+            paginationButtons.forEach((button) => {
+                if (parseInt(button.textContent) === currentPageJustificatifs) {
+                    button.classList.add("active");
+                } else {
+                    button.classList.remove("active");
+                }
+            });
+        }
+    }
+
+    function loadAll() {
+        getAllAssiduitesFromEtud(etudid, (assi) => {
+            renderTableAssiduites(currentPageAssiduites, assi);
+            renderPaginationButtons(assi), true;
+        })
+
+        getAllJustificatifsFromEtud(etudid, (assi) => {
+            renderTableJustificatifs(currentPageJustificatifs, assi);
+            renderPaginationButtons(assi, false);
+        })
+    }
+
+    window.onload = () => {
+        loadAll();
+    }
+
+</script>
\ No newline at end of file
diff --git a/app/templates/sidebar.j2 b/app/templates/sidebar.j2
index d041380760..b579a1f032 100755
--- a/app/templates/sidebar.j2
+++ b/app/templates/sidebar.j2
@@ -73,7 +73,7 @@
             {% endif %}
             <li><a href="{{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept, 
                     etudid=sco.etud.id) }}">Calendrier</a></li>
-            <li><a href="{{ url_for('absences.ListeAbsEtud', scodoc_dept=g.scodoc_dept, 
+            <li><a href="{{ url_for('assiduites.liste_assiduites_etud', scodoc_dept=g.scodoc_dept, 
                     etudid=sco.etud.id) }}">Liste</a></li>
         </ul>
         {% endif %}
diff --git a/app/views/assiduites.py b/app/views/assiduites.py
index 83bf22b57e..d622ebb120 100644
--- a/app/views/assiduites.py
+++ b/app/views/assiduites.py
@@ -201,6 +201,48 @@ def signal_assiduites_etud():
     ).build()
 
 
+@bp.route("/ListeAssiduitesEtud")
+@scodoc
+@permission_required(Permission.ScoAbsChange)
+def liste_assiduites_etud():
+    """
+    liste_assiduites_etud Affichage de toutes les assiduites et justificatifs d'un etudiant
+    Args:
+        etudid (int): l'identifiant de l'étudiant
+
+    Returns:
+        str: l'html généré
+    """
+
+    etudid = request.args.get("etudid", -1)
+    etud: Identite = Identite.query.get_or_404(etudid)
+    if etud.dept_id != g.scodoc_dept_id:
+        abort(404, "étudiant inexistant dans ce département")
+
+    header: str = html_sco_header.sco_header(
+        page_title="Liste des assiduités",
+        init_qtip=True,
+        javascripts=[
+            "js/assiduites.js",
+            "libjs/moment.new.min.js",
+            "libjs/moment-timezone.js",
+        ],
+        cssstyles=CSSSTYLES
+        + [
+            "css/assiduites.css",
+        ],
+    )
+
+    return HTMLBuilder(
+        header,
+        render_template(
+            "assiduites/liste_assiduites.j2",
+            sco=ScoData(etud),
+            date=datetime.date.today().isoformat(),
+        ),
+    ).build()
+
+
 @bp.route("/SignalAssiduiteGr")
 @scodoc
 @permission_required(Permission.ScoAbsChange)