From a7345611f934f58038477b634b1a4b5095c6c56b Mon Sep 17 00:00:00 2001
From: Knut Ahlers <knut@ahlers.me>
Date: Sun, 21 Jan 2024 00:51:47 +0100
Subject: [PATCH] Improve UI/UX

Signed-off-by: Knut Ahlers <knut@ahlers.me>
---
 frontend/components/accountOverview.vue       | 20 ++++---
 frontend/components/accountsSidebar.vue       | 58 ++++---------------
 .../components/accountsSidebarAccList.vue     | 55 ++++++++++++++++++
 3 files changed, 80 insertions(+), 53 deletions(-)
 create mode 100644 frontend/components/accountsSidebarAccList.vue

diff --git a/frontend/components/accountOverview.vue b/frontend/components/accountOverview.vue
index 2e91181..d8bebb4 100644
--- a/frontend/components/accountOverview.vue
+++ b/frontend/components/accountOverview.vue
@@ -2,15 +2,20 @@
   <div>
     <div class="container-fluid">
       <div class="row">
-        <div class="col d-flex align-items-center">
+        <div class="col d-flex fs-3 align-items-center text-semibold">
+          {{ accountIdToName[accountId] }}
+        </div>
+        <div class="col d-flex align-items-center justify-content-end">
           <range-selector
             v-model="timeRange"
           />
         </div>
-        <div class="col d-flex text-center flex-column">
-          <span class="fs-3 mb-2 text-semibold">{{ accountIdToName[accountId] }}</span>
-          <div class="d-flex align-items-center mx-auto">
-            <div class="d-inline-flex text-center flex-column mx-4">
+      </div>
+
+      <div class="row mt-3">
+        <div class="col d-flex align-items-center">
+          <div class="d-flex align-items-start">
+            <div class="d-inline-flex text-center flex-column me-4">
               {{ formatNumber(account.balance - balanceUncleared) }} €
               <span class="form-text mt-0">
                 <i class="fas fa-fw fa-copyright mr-1 text-success" />
@@ -26,7 +31,7 @@
               </span>
             </div>
             =
-            <div class="d-inline-flex text-center flex-column mx-4">
+            <div class="d-inline-flex text-center flex-column ms-4">
               {{ formatNumber(account.balance) }} €
               <span class="form-text mt-0">Working Balance</span>
             </div>
@@ -58,7 +63,7 @@
               @click="editSelected"
             >
               <i class="fas fa-fw fa-pencil mr-1" />
-              Edit
+              Edit Transaction
             </button>
             <button
               type="button"
@@ -95,6 +100,7 @@
           </div>
         </div>
       </div>
+
       <div class="row mt-3">
         <div class="col">
           <table class="table table-striped small">
diff --git a/frontend/components/accountsSidebar.vue b/frontend/components/accountsSidebar.vue
index d49c304..50ba82b 100644
--- a/frontend/components/accountsSidebar.vue
+++ b/frontend/components/accountsSidebar.vue
@@ -18,52 +18,14 @@
     -->
     <hr>
     <ul class="list-unstyled lh-lg ps-0">
-      <li class="mb-1 fw-semibold">
-        <div class="d-flex align-items-center">
-          <i class="fas fa-fw fa-credit-card me-1" /> Budget
-          <span :class="{'ms-auto': true, 'text-danger': budgetSum < 0}">
-            {{ formatNumber(budgetSum) }} €
-          </span>
-        </div>
-        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ps-3 small">
-          <li>
-            <router-link
-              v-for="acc in budgetAccounts"
-              :key="acc.id"
-              class="d-flex align-items-center text-white text-decoration-none"
-              :to="{ name: 'account-transactions', params: { accountId: acc.id }}"
-            >
-              {{ acc.name }}
-              <span :class="{'ms-auto': true, 'text-danger': acc.balance < 0}">
-                {{ formatNumber(acc.balance) }} €
-              </span>
-            </router-link>
-          </li>
-        </ul>
-      </li>
-      <li class="mb-1 fw-semibold">
-        <div class="d-flex align-items-center">
-          <i class="fas fa-fw fa-coins me-1" /> Tracking
-          <span :class="{'ms-auto': true, 'text-danger': trackingSum < 0}">
-            {{ formatNumber(trackingSum) }} €
-          </span>
-        </div>
-        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ps-3 small">
-          <li>
-            <router-link
-              v-for="acc in trackingAccounts"
-              :key="acc.id"
-              class="d-flex align-items-center text-white text-decoration-none"
-              :to="{ name: 'account-transactions', params: { accountId: acc.id }}"
-            >
-              {{ acc.name }}
-              <span :class="{'ms-auto': true, 'text-danger': acc.balance < 0}">
-                {{ formatNumber(acc.balance) }} €
-              </span>
-            </router-link>
-          </li>
-        </ul>
-      </li>
+      <acc-list
+        :accounts="budgetAccounts"
+        header="Budget"
+      />
+      <acc-list
+        :accounts="trackingAccounts"
+        header="Tracking"
+      />
     </ul>
     <button
       class="btn btn-sm w-100"
@@ -169,10 +131,14 @@
 /* eslint-disable sort-imports */
 import { Modal } from 'bootstrap'
 
+import accList from './accountsSidebarAccList.vue'
+
 import { formatNumber } from '../helpers'
 import { unallocatedMoneyAcc } from '../constants'
 
 export default {
+  components: { accList },
+
   computed: {
     budgetAccounts() {
       const accs = (this.accounts || []).filter(acc => acc.type === 'budget')
diff --git a/frontend/components/accountsSidebarAccList.vue b/frontend/components/accountsSidebarAccList.vue
new file mode 100644
index 0000000..fa1ace1
--- /dev/null
+++ b/frontend/components/accountsSidebarAccList.vue
@@ -0,0 +1,55 @@
+<template>
+  <li class="mb-1 fw-semibold">
+    <div class="d-flex align-items-center">
+      <i class="fas fa-fw fa-credit-card me-1" /> {{ header }}
+      <span :class="{'ms-auto': true, 'text-danger': sum < 0}">
+        {{ formatNumber(sum) }} €
+      </span>
+    </div>
+    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ps-3 small">
+      <li>
+        <router-link
+          v-for="acc in accounts"
+          :key="acc.id"
+          class="d-flex align-items-center text-white text-decoration-none"
+          :to="{ name: 'account-transactions', params: { accountId: acc.id }}"
+        >
+          {{ acc.name }}
+          <span :class="{'ms-auto': true, 'text-danger': acc.balance < 0}">
+            {{ formatNumber(acc.balance) }} €
+          </span>
+        </router-link>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { formatNumber } from '../helpers'
+
+export default {
+  computed: {
+    sum() {
+      return this.accounts.reduce((sum, acc) => sum + acc.balance, 0)
+    },
+  },
+
+  methods: {
+    formatNumber,
+  },
+
+  name: 'AccountingAppAccountSidebarAccountList',
+
+  props: {
+    accounts: {
+      required: true,
+      type: Array,
+    },
+
+    header: {
+      required: true,
+      type: String,
+    },
+  },
+}
+</script>