From a8e74c98df44fc7632c036e8e534d93e8fc4de48 Mon Sep 17 00:00:00 2001
From: bmatt <36943357+bmatticus@users.noreply.github.com>
Date: Fri, 6 Mar 2020 17:06:17 -0500
Subject: Bmatticus/feature/112 dashboard sorting (#538)

* Added DataTables for table sorting, pagination, and searching of bill_table for dashboard. Issue #112

* Moved datatables CSS/JS to dashboard to reduce loaded data throughout

* Moved link back to proper place, in head tab, but added if to prevent loading CSS/JS for datatables outside of the dashboard. Also added eye icon to drill into list_billa API to be more consistent with the look and feel of the overall site.

Co-authored-by: bmatt <bmatt@nuc01.attlocal.net>
---
 ihatemoney/templates/dashboard.html | 10 +++++++++-
 ihatemoney/templates/layout.html    |  4 ++++
 2 files changed, 13 insertions(+), 1 deletion(-)

(limited to 'ihatemoney/templates')

diff --git a/ihatemoney/templates/dashboard.html b/ihatemoney/templates/dashboard.html
index 807e3e2..b77a0ba 100644
--- a/ihatemoney/templates/dashboard.html
+++ b/ihatemoney/templates/dashboard.html
@@ -5,7 +5,7 @@
     <thead><tr><th>{{ _("Project") }}</th><th>{{ _("Number of members") }}</th><th>{{ _("Number of bills") }}</th><th>{{_("Newest bill")}}</th><th>{{_("Oldest bill")}}</th><th>{{_("Actions")}}</th></tr></thead>
     <tbody>{% for project in projects|sort(attribute='name') %}
         <tr>
-        <td>{{ project.name }}</td><td>{{ project.members | count }}</td><td>{{ project.get_bills().count() }}</td>
+        <td><a href="{{ url_for(".list_bills", project_id=project.id) }}" title="{{ project.name }}">{{ project.name }}</a></td><td>{{ project.members | count }}</td><td>{{ project.get_bills().count() }}</td>
         {% if project.has_bills() %}
         <td>{{ project.get_bills().all()[0].date }}</td>
         <td>{{ project.get_bills().all()[-1].date }}</td>
@@ -16,11 +16,19 @@
         <td class="project-actions">
             <a class="edit" href="{{ url_for(".edit_project", project_id=project.id) }}" title="{{ _("edit") }}">{{ _('edit') }}</a>
             <a class="delete" href="{{ url_for(".delete_project", project_id=project.id) }}" title="{{ _("delete") }}">{{ _('delete') }}</a>
+            <a class="see" href="{{ url_for(".list_bills", project_id=project.id) }}" title="{{ _("see") }}">{{ _('see') }}</a>
         </td>
         </tr>
     {% endfor %}
     </tbody>
 </table>
+<script language="JavaScript">
+$(document).ready(function() {
+    $('#bill_table').DataTable({
+        paging: true
+    });
+})
+</script>
 {% else %}
 <div class="alert alert-danger">{{ _("The Dashboard is currently deactivated.") }}</div>
 {% endif %}
diff --git a/ihatemoney/templates/layout.html b/ihatemoney/templates/layout.html
index 664182a..dc3d32f 100644
--- a/ihatemoney/templates/layout.html
+++ b/ihatemoney/templates/layout.html
@@ -12,6 +12,10 @@
     <script src="{{ url_for("static", filename="js/popper.min.js") }}"></script>
     <script src="{{ url_for("static", filename="js/tagsinput.js") }}"></script>
     <script src="{{ url_for("static", filename="js/bootstrap.min.js") }}"></script>
+    {%- if request.path == "/dashboard" %}
+    <link rel=stylesheet type=text/css href="{{ url_for("static", filename='css/datatables.min.css') }}">
+    <script src="{{ url_for("static", filename="js/datatables.min.js") }}"></script>
+    {%- endif %}
     {% block head %}{% endblock %}
     <script type="text/javascript" charset="utf-8">
         $(document).ready(function(){
-- 
cgit v1.1