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>

1 files changed, 9 insertions, 1 deletions

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 %}