Paginate the list of bills (#480)

We display 100 bills on each page.  We only show previous/next buttons (at
the top of the view) and the list of pages (at the bottom) if there are
more than one pages.

This uses built-in pagination support from Flask-SQLAlchemy:

  https://flask-sqlalchemy.palletsprojects.com/en/2.x/api/#flask_sqlalchemy.BaseQuery.paginate
  https://flask-sqlalchemy.palletsprojects.com/en/2.x/api/#flask_sqlalchemy.Pagination

ihatemoney/static/css/main.css

@@ -272,6 +272,15 @@ footer .footer-left {
   margin-top: 30px;
 }
 
+#previous-page {
+  margin-top: 30px;
+}
+
+#next-page {
+  margin-top: 30px;
+  padding-left: 2em;
+}
+
 /* Avoid text color flickering when it loose focus as the modal appears */
 .btn-primary[data-toggle="modal"] {
   color: #fff;

ihatemoney/templates/list_bills.html

@@ -97,13 +97,23 @@ <h3 class="modal-title">{{ _('Add a bill') }}</h3>
         </div>
     </div>
 
-    {% if bills.count() > 0 %}
+{% if bills.pages > 1 %}
+    <span id="previous-page" class="float-left">
+      <a class="btn btn-outline-secondary float-left {% if bills.page == 1 %}disabled{% endif %}" href="{{ url_for('main.list_bills', page=bills.prev_num) }}">&laquo; {{ _("Newer bills") }}</a>
+    </span>
+
+    <span id="next-page" class="float-left">
+      <a class="btn btn-outline-secondary float-left {% if bills.page == bills.pages %}disabled{% endif %}" href="{{ url_for('main.list_bills', page=bills.next_num) }}">{{ _("Older bills") }} &raquo;</a>
+    </span>
+{% endif %}
+
+    {% if bills.total > 0 %}
         <div class="clearfix"></div>
 
         <table id="bill_table" class="col table table-striped table-hover table-responsive-sm">
             <thead><tr><th>{{ _("When?") }}</th><th>{{ _("Who paid?") }}</<th><th>{{ _("For what?") }}</th><th>{{ _("For whom?") }}</th><th>{{ _("How much?") }}</th><th>{{ _("Actions") }}</th></tr></thead>
         <tbody>
-        {% for bill in bills %}
+        {% for bill in bills.items %}
         <tr owers="{{bill.owers|join(',','id')}}" payer="{{bill.payer.id}}">
                 <td>
                     <span data-toggle="tooltip" data-placement="top"
@@ -133,6 +143,20 @@ <h3 class="modal-title">{{ _('Add a bill') }}</h3>
         </tbody>
         </table>
 
+{% if bills.pages > 1 %}
+<ul class="pagination">
+  <li class="page-item {% if bills.page == 1 %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.prev_num) }}">&laquo; Newer bills</a></li>
+  {%- for page in bills.iter_pages() %}
+  {% if page %}
+  <li class="page-item {% if page == bills.page %}active{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=page) }}">{{ page }}</a></li>
+  {% else %}
+  <li class="page-item disabled"><span class="ellipsis page-link">…</span></li>
+  {% endif %}
+  {%- endfor %}
+  <li class="page-item {% if bills.page == bills.pages %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.next_num) }}">Older bills &raquo;</a></li>
+</ul>
+{% endif %}
+
     {% else %}
         <div class="py-3 d-flex justify-content-center empty-bill">
         <div class="card d-inline-flex p-2">

ihatemoney/web.py

@@ -586,7 +586,11 @@ def list_bills():
     if "last_selected_payer" in session:
         bill_form.payer.data = session["last_selected_payer"]
     # Preload the "owers" relationship for all bills
-    bills = g.project.get_bills().options(orm.subqueryload(Bill.owers))
+    bills = (
+        g.project.get_bills()
+        .options(orm.subqueryload(Bill.owers))
+        .paginate(per_page=100, error_out=True)
+    )
 
     return render_template(
         "list_bills.html",