Added navigation to account view

static/styles.css

@@ -598,10 +598,18 @@ video {
   flex-grow: 1;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
 
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
 .overflow-auto {
   overflow: auto;
 }

templates/accounts.html

@@ -9,22 +9,57 @@
 </div>
 <div>
   <table>
-    <tr>
-      <th>Description</th>
-      <th>Date</th>
-      <th>Amount</th>
-      <th>Category</th>
-    </tr>
-    {% for tx in transactions %}
-    <tr>
-      <td>{{tx.description}}</td>
-      <td>{{tx.transaction_timestamp}}</td>
-      <td>{{tx.amount/100}}</td>
-      <td>{{tx.category}}</td>
-    </tr>
-    {% endfor %}
+    <thead>
+      <tr>
+        <th>Description</th>
+        <th>Date</th>
+        <th>Amount</th>
+        <th>Category</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for tx in transactions %}
+      <tr>
+        <td>{{tx.description}}</td>
+        <td>{{tx.transaction_timestamp}}</td>
+        <td>{{tx.amount/100}}</td>
+        <td>{{tx.category}}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
   </table>
-  <p>Loaded {{n_txs}} transactions</p>
+  <div class="flex">
+    <div class="flex grow flex-row justify-evenly">
+      <div>
+        <a href="/accounts/id/{{account.account_id}}?entries={{n_entries}}&page={{prev_page}}">&lt;</a>
+      </div>
+      <div>{{curr_page}}</div>
+      <div>
+        <a href="/accounts/id/{{account.account_id}}?entries={{n_entries}}&page={{next_page}}">&gt;</a>
+      </div>
+    </div>
+    <div>
+      <select onchange="onSelect(event)">
+        <option {% if n_entries == 10 %}selected="selected"{% endif %}>10</option>
+        <option {% if n_entries == 20 %}selected="selected"{% endif %}>20</option>
+        <option {% if n_entries == 50 %}selected="selected"{% endif %}>50</option>
+        <option {% if n_entries == 100 %}selected="selected"{% endif %}>100</option>
+        <option {% if n_entries == 200 %}selected="selected"{% endif %}>200</option>
+      </select>
+    </div>
+  </div>
 </div>
+<style>
+  table {
+    border-spacing: 0.2rem;
+  }
+</style>
+<script>
+  function onSelect(e) {
+    let params = new URLSearchParams();
+    params.set("entries", e.target.value);
+    window.location.search = params.toString();
+  }
+</script>
 {% endblock body %}
 

templates/accounts_add_txs.html

@@ -28,19 +28,19 @@
     ['None', null],
     ['Date dd/mm/yyyy', el => {
       let split = el.split('/');
-      return new Date(
+      return new Date(Date.UTC(
         parseInt(split[2], 10),
-        parseInt(split[1], 10),
+        parseInt(split[1], 10)-1,
         parseInt(split[0], 10),
-      );
+      ));
     }],
     ['Date yyyy/mm/dd', el => {
       let split = el.split('/');
-      return new Date(
+      return new Date(Date.UTC(
         parseInt(split[0], 10),
-        parseInt(split[1], 10),
+        parseInt(split[1], 10)-1,
         parseInt(split[2], 10),
-      );
+      ));
     }],
     ['Description', el => el],
     ['Amount', el => parseFloat(el)]

webserver/src/routes/ui/account.rs

@@ -16,7 +16,8 @@ use accounters::models::{transaction::TxConflictResolutionMode, Account, Transac
 
 #[derive(Deserialize)]
 pub struct AccountViewParams {
-    movements: Option<i32>,
+    entries: Option<i32>,
+    page: Option<i32>,
 }
 
 pub async fn list(
@@ -24,7 +25,7 @@ pub async fn list(
     State(tmpls): State<Arc<Tera>>,
     uid: UserToken,
     Path(account_id): Path<i32>,
-    Query(AccountViewParams { movements }): Query<AccountViewParams>,
+    Query(AccountViewParams { entries, page }): Query<AccountViewParams>,
 ) -> impl IntoResponse {
     let mut ctx = Context::new();
 
@@ -47,11 +48,14 @@ pub async fn list(
         );
     }
 
+    let n_entries = entries.unwrap_or(10).max(10);
+    let page = page.unwrap_or(0).max(0);
+
     let txs = match Transaction::list(
         db.as_ref(),
         account.get_id(),
-        movements.unwrap_or(10),
-        0,
+        n_entries,
+        n_entries * page,
         false,
     )
     .await
@@ -68,7 +72,10 @@ pub async fn list(
 
     ctx.insert("account", &account);
     ctx.insert("transactions", &txs);
-    ctx.insert("n_txs", &txs.len());
+    ctx.insert("prev_page", &((page - 1).max(0)));
+    ctx.insert("curr_page", &page);
+    ctx.insert("next_page", &(page + 1));
+    ctx.insert("n_entries", &(n_entries));
 
     (
         StatusCode::OK,