feat: add dataTable plugin to manage articles

Use dataTable to get features of search , order table of artciles in details species Reviewed-by: andriacap
naturalsolutions · Mar 22, 2024 · d394cf7 · d394cf7
1 parent 5a918b1
commit d394cf7
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 31 deletions.
diff --git a/atlas/static/otherInformations.js b/atlas/static/otherInformations.js
@@ -0,0 +1,37 @@
+$(document).ready(function() {
+    const table = $("#table_articles").DataTable({
+        "paging": true,
+        "ordering": true,
+        "info": true,
+        "language": {
+            url: '//cdn.datatables.net/plug-ins/2.0.2/i18n/fr-FR.json',
+        },
+        "columnDefs": [
+            { "orderable": false, "targets": [0, 3] }
+        ]
+    });
+
+ $("#table_articles").on("click", "tr", function () {
+        const row = table.row(this);
+        const iconElement = $(this).find('.btn-more'); 
+        console.log(iconElement)
+        if (row.child.isShown()) {
+            row.child.hide();
+            $(this).removeClass("shown");
+            iconElement.removeClass("fa-chevron-down").addClass("fa-chevron-right");
+        } else {
+            const articleIndex = row.index();
+            const article = articles[articleIndex];
+
+            row.child(
+                "<div class='moreInfo'>" +
+                    "<strong>Description:</strong>" +
+                    `${article.description}` + "<br>" +
+                    "<strong>Date:</strong> " + `${article.date}` +
+                "</div>"
+            ).show();
+            $(this).addClass("shown");
+            iconElement.removeClass("fa-chevron-right").addClass("fa-chevron-down")
+        }
+    });
+});
diff --git a/atlas/templates/speciesSheet/otherInformations.html b/atlas/templates/speciesSheet/otherInformations.html
@@ -1,3 +1,12 @@
+{% block additionalHeaderAssets %}
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
+<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
+<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
+
+{% endblock %}
+
 {% block otherInformations %}
     <div class="card mt-4" id="otherInformationsPanel">
         <div class="row" id="otherInformations">
@@ -34,49 +43,39 @@
             <div class="tab-content" style="width:100%;">
                  <!-- municipality tab-->
                 {% if articles | length != 0 %}
-                    <div id="articles" class="tab-pane fade show active">
-                        <table class="table table-striped">
+                    <div class="tab-pane fade show active">    
+                        <table id="table_articles" class="table table-striped">
                             <thead>
-                            <th></th>
-                            <th> {{ _('title') }}</th>
-                            <th> {{ _('author')}}</th>
+                                <tr>
+                                    <th></th>
+                                    <th>{{ _('title') }}</th>
+                                    <th>{{ _('author') }}</th>
+                                    <th></th>
+                                </tr>
                             </thead>
                             <tbody>
-
-                            {% for i in range (articles | length) %}
-                                <tr class="accordion-toggle" data-toggle="collapse" data-target=".moreInfo{{ i }}">
-                                    <td> {% if articles[i].id_type == 3 %}
-                                        <span class="fas fa-link"> </span>
-                                    {% else %} <span class="fas fa-paperclip"> </span>
-                                    {% endif %}
-                                    </td>
-
+                                {% for article in articles %}
+                                {% set data = article %}
+                                <tr class="main-row accordion-toggle">
                                     <td>
-                                        <a href="{{ articles[i].path }}" target="_blank"> {{ articles[i].title }} </a>
+                                        {% if article.id_type == 3 %}
+                                        <span class="fas fa-link"></span>
+                                        {% else %}
+                                        <span class="fas fa-paperclip"></span>
+                                        {% endif %}
                                     </td>
-
                                     <td>
-                                        {{ articles[i].author }}
+                                        <a href="{{ article.path }}" target="_blank">{{ article.title }}</a>
                                     </td>
+                                    <td>{{ article.author }}</td>
                                     <td>
-                                        <i class="btn-more"> <span class="fas fa-chevron-down "> </span></i>
+                                        <i class="btn-more fas fa-chevron-right"></i>
                                     </td>
-
                                 </tr>
-                                <tr>
-                                    <td colspan="4" class="hiddenRow" style="padding:0px;">
-                                        <div class="collapse moreInfo{{ i }}">
-                                            <strong> {{ _('description') }} : </strong>
-                                            <br> {{ articles[i].description | safe }} <br>
-                                            <strong> {{ _('date') }} : </strong> {{ articles[i].date }}
-                                        </div>
-                                    </td>
-                                </tr>
-
-                            {% endfor %}
-
+                                {% endfor %}
                             </tbody>
                         </table>
+
                     </div>
                 {% endif %}
                 {% if articles | length != 0 %}
@@ -166,3 +165,9 @@ <h3><a class="badge badge-primary" href="{{ url_for('main.ficheOrganism', id_org
             </div>
         </div>
 {% endblock %}
+{% block additionalFooterAssets %}
+<script>
+    var articles = {{ articles|tojson|safe }};
+</script>
+<script src="{{ url_for('static', filename='otherInformations.js') }}"></script>
+{% endblock %}