From cf7fc2ec874f57f2410d4b4638c5141d6f7cdbc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Manuel=20Forc=C3=A9n=20Mu=C3=B1oz?= <manuforcen@gmail.com>
Date: Wed, 20 Mar 2024 20:26:28 +0100
Subject: [PATCH] Added navigation to account view

---
 static/styles.css                  |  8 ++++
 templates/accounts.html            | 65 +++++++++++++++++++++++-------
 templates/accounts_add_txs.html    | 12 +++---
 webserver/src/routes/ui/account.rs | 17 +++++---
 4 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 24e1af5..49beb93 100644
--- a/static/styles.css
+++ b/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;
 }
diff --git a/templates/accounts.html b/templates/accounts.html
index 7e429ae..f63fa7c 100644
--- a/templates/accounts.html
+++ b/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 %}
 
diff --git a/templates/accounts_add_txs.html b/templates/accounts_add_txs.html
index 805610d..7dcf8cd 100644
--- a/templates/accounts_add_txs.html
+++ b/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)]
diff --git a/webserver/src/routes/ui/account.rs b/webserver/src/routes/ui/account.rs
index 2194f59..225431c 100644
--- a/webserver/src/routes/ui/account.rs
+++ b/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,