From b849c350f11dc2b5cceda1601a93e5c73be84970 Mon Sep 17 00:00:00 2001
From: Arthur ZHU <arthur.zhu38@gmail.com>
Date: Thu, 17 Feb 2022 20:11:20 +0100
Subject: [PATCH] tableau avec datatables

---
 app/entreprises/routes.py                     |   9 +-
 app/templates/entreprises/contacts.html       | 117 +++++++++-------
 app/templates/entreprises/entreprises.html    | 126 ++++++++++--------
 .../entreprises/entreprises_validation.html   |  98 ++++++++++----
 4 files changed, 215 insertions(+), 135 deletions(-)

diff --git a/app/entreprises/routes.py b/app/entreprises/routes.py
index e3226c71..547d2051 100644
--- a/app/entreprises/routes.py
+++ b/app/entreprises/routes.py
@@ -53,10 +53,7 @@ def index():
     """
     Permet d'afficher une page avec la liste des entreprises et une liste des dernières opérations
     """
-    page = request.args.get("page", 1, type=int)
-    entreprises = Entreprise.query.filter_by(visible=True).paginate(
-        page=page, per_page=10
-    )
+    entreprises = Entreprise.query.filter_by(visible=True)
     logs = EntrepriseLog.query.order_by(EntrepriseLog.date.desc()).limit(LOGS_LEN).all()
     return render_template(
         "entreprises/entreprises.html",
@@ -103,12 +100,10 @@ def contacts():
     """
     Permet d'afficher une page la liste des contacts et une liste des dernières opérations
     """
-    page = request.args.get("page", 1, type=int)
     contacts = (
         db.session.query(EntrepriseContact, Entreprise)
         .join(Entreprise, EntrepriseContact.entreprise_id == Entreprise.id)
         .filter_by(visible=True)
-        .paginate(page=page, per_page=10)
     )
     logs = EntrepriseLog.query.order_by(EntrepriseLog.date.desc()).limit(LOGS_LEN).all()
     return render_template(
@@ -902,7 +897,7 @@ def import_entreprises():
         entreprises_import = []
         siret_list = []
         ligne = 0
-        titles = ["siret", "nom_entreprise", "adresse", "ville", "codepostal", "pays"]
+        titles = ["siret", "nom", "adresse", "ville", "code_postal", "pays"]
         if data[1][0] != titles:
             flash("Veuillez utilisez la feuille excel à remplir")
             return render_template(
diff --git a/app/templates/entreprises/contacts.html b/app/templates/entreprises/contacts.html
index 7ee982f7..7830f83a 100644
--- a/app/templates/entreprises/contacts.html
+++ b/app/templates/entreprises/contacts.html
@@ -1,6 +1,13 @@
 {# -*- mode: jinja-html -*- #}
 {% extends 'base.html' %}
 
+{% block styles %}
+{{super()}}
+<script src="/ScoDoc/static/jQuery/jquery-1.12.4.min.js"></script>
+<link rel="stylesheet" type="text/css" href="/ScoDoc/static/DataTables2022/datatables.min.css">
+<script type="text/javascript" charset="utf8" src="/ScoDoc/static/DataTables2022/datatables.min.js"></script>
+{% endblock %}
+
 {% block app_content %}
     {% include 'entreprises/nav.html' %}
 
@@ -19,63 +26,77 @@
         {% if current_user.has_permission(current_user.Permission.RelationsEntreprisesExport, None) %}
             <a class="btn btn-default" href="{{ url_for('entreprises.import_contacts') }}">Importer des contacts</a>
         {% endif %}
-        {% if current_user.has_permission(current_user.Permission.RelationsEntreprisesExport, None) and contacts.items %}
+        {% if current_user.has_permission(current_user.Permission.RelationsEntreprisesExport, None) and contacts %}
             <a class="btn btn-default" href="{{ url_for('entreprises.export_contacts') }}">Exporter la liste des contacts</a>
         {% endif %}
     </div>
 
     <div class="container">
         <h1>Liste des contacts</h1>
-        {% if contacts.items %}
-        <div class="table-responsive">
-            <table class="table table-bordered table-hover">
+        <table id="table-contacts">
+            <thead>
                 <tr>
-                    <th>Nom</th>
-                    <th>Prenom</th>
-                    <th>Telephone</th>
-                    <th>Mail</th>
-                    <th>Poste</th>
-                    <th>Service</th>
-                    <th>Entreprise</th>
+                    <td data-priority="1">Nom</td>
+                    <td data-priority="3">Prenom</td>
+                    <td data-priority="4">Telephone</td>
+                    <td data-priority="5">Mail</td>
+                    <td data-priority="6">Poste</td>
+                    <td data-priority="7">Service</td>
+                    <td data-priority="2">Entreprise</td>
                 </tr>
-                {% for contact in contacts.items %}
-                <tr class="table-row active">
-                    <th>{{ contact[0].nom }}</th>
-                    <th>{{ contact[0].prenom }}</th>
-                    <th>{{ contact[0].telephone }}</th>
-                    <th>{{ contact[0].mail }}</th>
-                    <th>{{ contact[0].poste}}</th>
-                    <th>{{ contact[0].service}}</th>
-                    <th><a href="{{ url_for('entreprises.fiche_entreprise', id=contact[1].id) }}">{{ contact[1].nom }}</a></th>
+            </thead>
+            <tbody>
+            {% for contact in contacts %}
+                <tr>
+                    <td>{{ contact[0].nom }}</td>
+                    <td>{{ contact[0].prenom }}</td>
+                    <td>{{ contact[0].telephone }}</td>
+                    <td>{{ contact[0].mail }}</td>
+                    <td>{{ contact[0].poste}}</td>
+                    <td>{{ contact[0].service}}</td>
+                    <td><a href="{{ url_for('entreprises.fiche_entreprise', id=contact[1].id) }}">{{ contact[1].nom }}</a></td>
                 </tr>
-                {% endfor %}
-            </table>
-        </div>
-
-        <div class="text-center">
-            <a href="{{ url_for('entreprises.contacts', page=contacts.prev_num) }}" class="btn btn-default {% if contacts.page == 1 %}disabled{% endif %}">
-                &laquo;
-            </a>
-            {% for page_num in contacts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
-            {% if page_num %}
-                    {% if contacts.page == page_num %}
-                    <a href="{{ url_for('entreprises.contacts', page=page_num) }}" class="btn btn-inverse">{{ page_num }}</a>
-                    {% else %}
-                    <a href="{{ url_for('entreprises.contacts', page=page_num) }}" class="btn btn-default">{{ page_num }}</a>
-                    {% endif %}
-            {% else %}
-                ...
-            {% endif %}
             {% endfor %}
-            <a href="{{ url_for('entreprises.contacts', page=contacts.next_num) }}" class="btn btn-default {% if contacts.page == contacts.pages %}disabled{% endif %}">
-                &raquo;
-            </a>
-        </div>
-        <p class="text-center">
-            Page {{ contacts.page }} sur {{ contacts.pages }}
-        </p>
-        {% else %}
-            <div>Aucun contact présent dans la base</div>
-        {% endif %}
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td>Nom</td>
+                    <td>Prenom</td>
+                    <td>Telephone</td>
+                    <td>Mail</td>
+                    <td>Poste</td>
+                    <td>Service</td>
+                    <td>Entreprise</td>
+                </tr>
+            </tfoot>
+        </table>
     </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            let table = new DataTable('#table-contacts',
+            {
+                "autoWidth": false,
+                "responsive": {
+                    "details": true
+                },
+                "pageLength": 10,
+                "language": {
+                    "emptyTable": "Aucune donnée disponible dans le tableau",
+                    "info": "Affichage de _START_ à _END_ sur _TOTAL_ entrées",
+                    "infoEmpty": "Affichage de 0 à 0 sur 0 entrées",
+                    "infoFiltered": "(filtrées depuis un total de _MAX_ entrées)",
+                    "lengthMenu": "Afficher _MENU_ entrées",
+                    "loadingRecords": "Chargement...",
+                    "processing":     "Traitement...",
+                    "search": "Rechercher:",
+                    "zeroRecords": "Aucune entrée correspondante trouvée",
+                    "paginate": {
+                        "next":       "Suivante",
+                        "previous":   "Précédente"
+                    }
+                }
+            });
+        });
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/entreprises/entreprises.html b/app/templates/entreprises/entreprises.html
index 3219c78d..8e2768c6 100644
--- a/app/templates/entreprises/entreprises.html
+++ b/app/templates/entreprises/entreprises.html
@@ -1,6 +1,13 @@
 {# -*- mode: jinja-html -*- #}
 {% extends 'base.html' %}
 
+{% block styles %}
+{{super()}}
+<script src="/ScoDoc/static/jQuery/jquery-1.12.4.min.js"></script>
+<link rel="stylesheet" type="text/css" href="/ScoDoc/static/DataTables2022/datatables.min.css">
+<script type="text/javascript" charset="utf8" src="/ScoDoc/static/DataTables2022/datatables.min.js"></script>
+{% endblock %}
+
 {% block app_content %}
     {% include 'entreprises/nav.html' %}
 
@@ -22,80 +29,93 @@
         {% if current_user.has_permission(current_user.Permission.RelationsEntreprisesExport, None) %}
             <a class="btn btn-default" href="{{ url_for('entreprises.import_entreprises') }}">Importer des entreprises</a>
         {% endif %}
-        {% if entreprises %}
-            {% if current_user.has_permission(current_user.Permission.RelationsEntreprisesExport, None) and entreprises.items%}
-                <a class="btn btn-default" href="{{ url_for('entreprises.export_entreprises') }}">Exporter la liste des entreprises</a>
-            {% endif %}
+        {% if current_user.has_permission(current_user.Permission.RelationsEntreprisesExport, None) and entreprises %}
+            <a class="btn btn-default" href="{{ url_for('entreprises.export_entreprises') }}">Exporter la liste des entreprises</a>
         {% endif %}
     </div>
 
     <div class="container">
         <h1>Liste des entreprises</h1>
-        {% if entreprises.items %}
-        <div class="table-responsive">
-            <table class="table table-bordered table-hover" style="margin-bottom:60px;">
+        <table id="table-entreprises">
+            <thead>
                 <tr>
-                    <th>SIRET</th>
-                    <th>Nom</th>
-                    <th>Adresse</th>
-                    <th>Code postal</th>
-                    <th>Ville</th>
-                    <th>Pays</th>
+                    <td data-priority="2">SIRET</td>
+                    <td data-priority="1">Nom</td>
+                    <td data-priority="4">Adresse</td>
+                    <td data-priority="6">Code postal</td>
+                    <td data-priority="5">Ville</td>
+                    <td data-priority="7">Pays</td>
                     {% if current_user.has_permission(current_user.Permission.RelationsEntreprisesChange, None) %}
-                    <th>Action</th>
+                    <td data-priority="3">Action</td>
                     {% endif %}
                 </tr>
-                {% for entreprise in entreprises.items %}
-                <tr class="table-row active">
-                    <th><a href="{{ url_for('entreprises.fiche_entreprise', id=entreprise.id) }}">{{ entreprise.siret }}</a></th>
-                    <th>{{ entreprise.nom }}</th>
-                    <th>{{ entreprise.adresse }}</th>
-                    <th>{{ entreprise.codepostal }}</th>
-                    <th>{{ entreprise.ville }}</th>
-                    <th>{{ entreprise.pays }}</th>
+            </thead>
+            <tbody>
+                {% for entreprise in entreprises %}
+                <tr>
+                    <td><a href="{{ url_for('entreprises.fiche_entreprise', id=entreprise.id) }}">{{ entreprise.siret }}</a></td>
+                    <td>{{ entreprise.nom }}</td>
+                    <td>{{ entreprise.adresse }}</td>
+                    <td>{{ entreprise.codepostal }}</td>
+                    <td>{{ entreprise.ville }}</td>
+                    <td>{{ entreprise.pays }}</td>
                     {% if current_user.has_permission(current_user.Permission.RelationsEntreprisesChange, None) %}
-                    <th>
+                    <td>
                         <div class="btn-group">
                             <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Action
                                 <span class="caret"></span>
                             </a>
-                            <ul class="dropdown-menu pull-right">
+                            <ul class="dropdown-menu pull-left">
                                 <li><a href="{{ url_for('entreprises.edit_entreprise', id=entreprise.id) }}">Modifier</a></li>
                                 <li><a href="{{ url_for('entreprises.delete_entreprise', id=entreprise.id) }}" style="color:red">Supprimer</a></li>
                             </ul>
                         </div>
-                    </th>
+                    </td>
                     {% endif %}
                 </tr>
                 {% endfor %}
-            </table>
-        </div>
-
-        <div class="text-center">
-            <a href="{{ url_for('entreprises.index', page=entreprises.prev_num) }}" class="btn btn-default {% if entreprises.page == 1 %}disabled{% endif %}">
-                &laquo;
-            </a>
-            {% for page_num in entreprises.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
-            {% if page_num %}
-                    {% if entreprises.page == page_num %}
-                    <a href="{{ url_for('entreprises.index', page=page_num) }}" class="btn btn-inverse">{{ page_num }}</a>
-                    {% else %}
-                    <a href="{{ url_for('entreprises.index', page=page_num) }}" class="btn btn-default">{{ page_num }}</a>
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td>SIRET</td>
+                    <td>Nom</td>
+                    <td>Adresse</td>
+                    <td>Code postal</td>
+                    <td>Ville</td>
+                    <td>Pays</td>
+                    {% if current_user.has_permission(current_user.Permission.RelationsEntreprisesChange, None) %}
+                    <td>Action</td>
                     {% endif %}
-            {% else %}
-                ...
-            {% endif %}
-            {% endfor %}
-            <a href="{{ url_for('entreprises.index', page=entreprises.next_num) }}" class="btn btn-default {% if entreprises.page == entreprises.pages %}disabled{% endif %}">
-                &raquo;
-            </a>
-        </div>
-
-        <p class="text-center">
-            Page {{ entreprises.page }} sur {{ entreprises.pages }}
-        </p>
-        {% else %}
-            <div>Aucune entreprise présent dans la base</div>
-        {% endif %}
+                </tr>
+            </tfoot>
+        </table>
     </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            let table = new DataTable('#table-entreprises',
+            {
+                "autoWidth": false,
+                "responsive": {
+                    "details": true
+                },
+                "pageLength": 10,
+                "language": {
+                    "emptyTable": "Aucune donnée disponible dans le tableau",
+                    "info": "Affichage de _START_ à _END_ sur _TOTAL_ entrées",
+                    "infoEmpty": "Affichage de 0 à 0 sur 0 entrées",
+                    "infoFiltered": "(filtrées depuis un total de _MAX_ entrées)",
+                    "lengthMenu": "Afficher _MENU_ entrées",
+                    "loadingRecords": "Chargement...",
+                    "processing":     "Traitement...",
+                    "search": "Rechercher:",
+                    "zeroRecords": "Aucune entrée correspondante trouvée",
+                    "paginate": {
+                        "next":       "Suivante",
+                        "previous":   "Précédente"
+                    }
+                }
+            });
+        });
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/entreprises/entreprises_validation.html b/app/templates/entreprises/entreprises_validation.html
index 90c787a5..a7fbf0c9 100644
--- a/app/templates/entreprises/entreprises_validation.html
+++ b/app/templates/entreprises/entreprises_validation.html
@@ -1,6 +1,13 @@
 {# -*- mode: jinja-html -*- #}
 {% extends 'base.html' %}
 
+{% block styles %}
+{{super()}}
+<script src="/ScoDoc/static/jQuery/jquery-1.12.4.min.js"></script>
+<link rel="stylesheet" type="text/css" href="/ScoDoc/static/DataTables2022/datatables.min.css">
+<script type="text/javascript" charset="utf8" src="/ScoDoc/static/DataTables2022/datatables.min.js"></script>
+{% endblock %}
+
 {% block app_content %}
     {% include 'entreprises/nav.html' %}
 
@@ -17,35 +24,72 @@
     
     <div class="container">
         <h1>Liste des entreprises à valider</h1>
-        {% if entreprises %}
-        <div class="table-responsive">
-            <table class="table table-bordered table-hover">
+        <table id="table-entreprises-validation">
+            <thead>
                 <tr>
-                    <th>SIRET</th>
-                    <th>Nom</th>
-                    <th>Adresse</th>
-                    <th>Code postal</th>
-                    <th>Ville</th>
-                    <th>Pays</th>
-                    <th>Action</th>
+                    <td data-priority="3">SIRET</td>
+                    <td data-priority="1">Nom</td>
+                    <td data-priority="4">Adresse</td>
+                    <td data-priority="5">Code postal</td>
+                    <td data-priority="6">Ville</td>
+                    <td data-priority="7">Pays</td>
+                    <td data-priority="2">Action</td>
                 </tr>
-                {% for entreprise in entreprises %}
-                <tr class="table-row active">
-                    <th><a href="{{ url_for('entreprises.fiche_entreprise_validation', id=entreprise.id) }}">{{ entreprise.siret }}</a></th>
-                    <th>{{ entreprise.nom }}</th>
-                    <th>{{ entreprise.adresse }}</th>
-                    <th>{{ entreprise.codepostal }}</th>
-                    <th>{{ entreprise.ville }}</th>
-                    <th>{{ entreprise.pays }}</th>
-                    <th>
-                        <a class="btn btn-default" href="{{ url_for('entreprises.fiche_entreprise_validation', id=entreprise.id) }}">Voir</a>
-                    </th>
+            </thead>
+            <tbody>
+            {% for entreprise in entreprises %}
+            <tr class="table-row active">
+                <th><a href="{{ url_for('entreprises.fiche_entreprise_validation', id=entreprise.id) }}">{{ entreprise.siret }}</a></th>
+                <th>{{ entreprise.nom }}</th>
+                <th>{{ entreprise.adresse }}</th>
+                <th>{{ entreprise.codepostal }}</th>
+                <th>{{ entreprise.ville }}</th>
+                <th>{{ entreprise.pays }}</th>
+                <th>
+                    <a class="btn btn-default" href="{{ url_for('entreprises.fiche_entreprise_validation', id=entreprise.id) }}">Voir</a>
+                </th>
+            </tr>
+            {% endfor %}
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td>SIRET</td>
+                    <td>Nom</td>
+                    <td>Adresse</td>
+                    <td>Code postal</td>
+                    <td>Ville</td>
+                    <td>Pays</td>
+                    <td>Action</td>
                 </tr>
-                {% endfor %}
-            </table>
-        </div>
-        {% else %}
-            <div>Aucune entreprise à valider</div>
-        {% endif %}
+            </tfoot>
+        </table>
     </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            let table = new DataTable('#table-entreprises-validation',
+            {
+                "autoWidth": false,
+                "responsive": {
+                    "details": true
+                },
+                "pageLength": 10,
+                "language": {
+                    "emptyTable": "Aucune donnée disponible dans le tableau",
+                    "info": "Affichage de _START_ à _END_ sur _TOTAL_ entrées",
+                    "infoEmpty": "Affichage de 0 à 0 sur 0 entrées",
+                    "infoFiltered": "(filtrées depuis un total de _MAX_ entrées)",
+                    "lengthMenu": "Afficher _MENU_ entrées",
+                    "loadingRecords": "Chargement...",
+                    "processing":     "Traitement...",
+                    "search": "Rechercher:",
+                    "zeroRecords": "Aucune entrée correspondante trouvée",
+                    "paginate": {
+                        "next":       "Suivante",
+                        "previous":   "Précédente"
+                    }
+                }
+            });
+        });
+    </script>
 {% endblock %}
\ No newline at end of file