feat: dataTable on media

Add sort, paginate, search features on table article

Reviewed-by: andriac

atlas/static/otherInformations.js

@@ -0,0 +1,36 @@
+$(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'); 
+        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")
+        }
+    });
+});

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">
@@ -31,6 +40,68 @@
             </ul>
 
 
+            <div class="tab-content" style="width:100%;">
+                 <!-- municipality tab-->
+                {% if articles | length != 0 %}
+                    <div id="articles" class="tab-pane fade show active">    
+                        <table id="table_articles" class="table table-striped">
+                            <thead>
+                                <tr>
+                                    <th></th>
+                                    <th>{{ _('title') }}</th>
+                                    <th>{{ _('author') }}</th>
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for article in articles %}
+                                {% set data = article %}
+                                <tr class="main-row accordion-toggle">
+                                    <td>
+                                        {% if article.id_type == 3 %}
+                                        <span class="fas fa-link"></span>
+                                        {% else %}
+                                        <span class="fas fa-paperclip"></span>
+                                        {% endif %}
+                                    </td>
+                                    <td>
+                                        <a href="{{ article.path }}" target="_blank">{{ article.title | safe }}</a>
+                                    </td>
+                                    <td>{{ article.author }}</td>
+                                    <td>
+                                        <i class="btn-more fas fa-chevron-right"></i>
+                                    </td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+
+                    </div>
+                {% endif %}
+                {% if articles | length != 0 %}
+                    <div id="communes" class="tab-pane fade">
+                {% else %}
+                    <li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#communes">
+                        <b>{{ communes|length }}</b> {{ _('municipalities')|lower if communes|length > 1 else _('municipality')|lower }}</a>
+                    </li>
+                {% endif %}
+
+                {% if configuration.ORGANISM_MODULE %}
+                    <li class="nav-item">
+                        <a class="nav-link" data-toggle="tab" href="#organisms">
+                            <b>{{ organisms|length }} </b> {{ _('organisms')|lower if organisms|length > 1 else _('organism')|lower }}
+                        </a>
+                </li>
+                {% endif %}
+
+                {% if configuration.DISPLAY_OBSERVERS %}
+                    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#observateurs">
+                        <b>{{ observers|length }} </b> {{ _('observers')|lower if observers|length > 1 else _('observer')|lower }}
+                    </a></li>
+                {% endif %}
+            </ul>
+
+
             <div class="tab-content" style="width:100%;">
                  <!-- municipality tab-->
                 {% if articles | length != 0 %}
@@ -165,4 +236,11 @@ <h3><a class="badge badge-primary" href="{{ url_for('main.ficheOrganism', id_org
 
             </div>
         </div>
+    </div>
+{% endblock %}
+{% block additionalFooterAssets %}
+<script>
+    var articles = {{ articles|tojson|safe }};
+</script>
+<script src="{{ url_for('static', filename='otherInformations.js') }}"></script>
 {% endblock %}