Synchro Apogée: listes d'étudiants en tables triables

app/scodoc/sco_inscr_passage.py

@@ -684,13 +684,30 @@ def etuds_select_box(
         )
     if sel_inscrits:
         H.append(
-            f"""<a href="#" class="stdlink" onclick="sem_select_inscrits('{box_id}');">inscrits</a>"""
+            f"""<a href="#"
+            class="stdlink" onclick="sem_select_inscrits('{box_id}');"
+            >inscrits</a>"""
         )
     if with_checkbox or sel_inscrits:
         H.append(")")
     if xls_url:
         H.append(f'<a href="{xls_url}">{scu.ICON_XLS}</a>&nbsp;')
     H.append("</div>")
+    checkbox_title = "<th></th>" if with_checkbox else ""
+    H.append(
+        f"""<table class="etuds-box">
+            <thead>
+                <tr>
+                    <th>Étape</th>
+                    {checkbox_title}
+                    <th>Nom</th>
+                    <th>Paiement</th>
+                    <th>Finalisé</th>
+                </tr>
+            </thead>
+            <tbody>
+            """
+    )
     for etud in etuds:
         is_inscrit = etud.get("inscrit", False)
         extra_class = (
@@ -708,6 +725,10 @@ def etuds_select_box(
                 extra_class=extra_class,
             )
         )
+    H.append(
+        """</tbody>
+             </table>"""
+    )
 
     H.append("</div>")
     return "\n".join(H)
@@ -737,32 +758,34 @@ def _etud_row(
         # ce n'est pas un etudiant ScoDoc
         elink = nomprenom
 
-    if etud.get("datefinalisationinscription", None):
-        elink += (
-            '<span class="finalisationinscription">'
-            + " : inscription finalisée le "
-            + etud["datefinalisationinscription"].strftime(scu.DATE_FMT)
-            + "</span>"
-        )
+    checkbox_cell = (
+        f"""<td><input type="checkbox" name="{checkbox_name}:list"
+                value="{etud[etud_key]}" {'checked="checked"' if is_inscrit else ''}>
+            </td>
+        """
+        if with_checkbox
+        else ""
+    )
+    paiement = etud.get("paiementinscription", True)
+    datefinalisation = etud.get("datefinalisationinscription")
+    H.append(
+        f"""
+        <tr class="{extra_class}">
+        <td class="etape">{etud.get("etape", "") or ""}</td>
+        {checkbox_cell}
+        <td data-order="{etud.get("nom", "").upper()}">{elink}</td>
+        <td class="paiement {'' if paiement else 'paspaye'}">{
+            '' if paiement else 'non paiement'
+        }</td>
+        <td class="finalise" data-order="{
+            datefinalisation.isoformat() if datefinalisation else ''
+            }">{"inscription finalisée le " + datefinalisation.strftime(scu.DATE_FMT)
+            if datefinalisation else "" }
+        </td>
+        </tr>
+        """
+    )
 
-    if not etud.get("paiementinscription", True):
-        elink += '<span class="paspaye"> (non paiement)</span>'
-
-    H.append(f"""<div class="pas_etud {extra_class}">""")
-    if "etape" in etud:
-        etape_str = etud["etape"] or ""
-    else:
-        etape_str = ""
-    H.append(f"""<span class="sp_etape">{etape_str}</span>""")
-    if with_checkbox:
-        H.append(
-            f"""<input type="checkbox" name="{checkbox_name}:list"
-                value="{etud[etud_key]}" {'checked="checked"' if is_inscrit else ''}>"""
-        )
-    H.append(elink)
-    if with_checkbox:
-        H.append("""</input>""")
-    H.append("</div>")
     return "\n".join(H)
 
 

app/scodoc/sco_synchro_etuds.py

@@ -299,7 +299,9 @@ def formsemestre_synchro_etuds(
                 )
 
     return render_template(
-        "sco_page.j2", title="Synchronisation des étudiants", content="\n".join(H)
+        "formsemestre/synchro_etuds.j2",
+        title="Synchronisation des étudiants",
+        content="\n".join(H),
     )
 
 

app/static/css/scodoc.css

@@ -3812,11 +3812,13 @@ div.link_defaillance {
 }
 
 div.pas_sembox {
+  width: fit-content;
   margin-top: 10px;
   border: 2px solid #a0522d;
   padding: 5px;
   margin-right: 10px;
   font-family: arial, verdana, sans-serif;
+  background-color: #f7f7f7;
 }
 
 span.sp_etape {
@@ -3846,8 +3848,38 @@ span.paspaye a {
   color: #9400d3 !important;
 }
 
+table.etuds-box {
+  border-collapse: collapse;
+}
+
+table.etuds-box th,
+table.etuds-box tbody tr td {
+  padding: 4px;
+  text-align: left;
+}
+
+table.etuds-box th {
+  background-color: #f2f2f2;
+}
+
+table.etuds-box td.etape {
+  font-family: monospace;
+}
+
+table.etuds-box td.paiement,
+table.etuds-box td.finalise {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+table.etuds-box td.paiement.paspaye {
+  color: #9400d3 !important;
+}
+
+table.etuds-box td.finalise,
 span.finalisationinscription {
   color: green;
+  font-weight: normal;
 }
 
 .pas_sembox_title a {

app/templates/formsemestre/synchro_etuds.j2

@@ -0,0 +1,16 @@
+{% extends "sco_page.j2" %}
+{% import 'wtf.j2' as wtf %}
+
+{% block scripts %}
+{{ super() }}
+<script>
+    $(document).ready(function() {
+        $('.etuds-box').DataTable({
+            paging: false,
+            autoWidth: false,
+            searching: false,
+            info: false  // Disable the "Showing 1 to X of X entries" information
+        });
+    });
+</script>
+{% endblock %}