From e66822596389ffc3ed71f47460e52c5adb4e8a2d Mon Sep 17 00:00:00 2001
From: rix1337 <>
Date: Sat, 29 Jul 2023 16:04:33 +0200
Subject: [PATCH] Move Balances to header

---
 .github/Changelog.md                          |  8 +-
 .../src/components/Balances.vue               | 87 -------------------
 .../vuejs_frontend/src/components/Budgets.vue |  2 +-
 .../vuejs_frontend/src/components/Head.vue    | 65 +++++++++++++-
 .../src/components/Transactions.vue           | 14 +--
 .../vuejs_frontend/src/components/_Main.vue   |  2 -
 6 files changed, 81 insertions(+), 97 deletions(-)
 delete mode 100644 budgeteer/web_interface/vuejs_frontend/src/components/Balances.vue

diff --git a/.github/Changelog.md b/.github/Changelog.md
index a1f2df1..f1ffe30 100644
--- a/.github/Changelog.md
+++ b/.github/Changelog.md
@@ -5,4 +5,10 @@
 ---
 
 ### Changelog BudgeTeer:
-- Save balances, budgets and open transactions on lock
\ No newline at end of file
+- Save balances, budgets and open transactions on lock
+- Check budget entry for validity
+- Move balances to header
+- ToDo:
+    - Fix Date picker for budget validity
+    - Check budget validity calculating remaining budget for the current month in the header
+    - Show save button on modification/check/deletion of balances, budgets and open transactions
diff --git a/budgeteer/web_interface/vuejs_frontend/src/components/Balances.vue b/budgeteer/web_interface/vuejs_frontend/src/components/Balances.vue
deleted file mode 100644
index 88a752f..0000000
--- a/budgeteer/web_interface/vuejs_frontend/src/components/Balances.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup>
-import {useStore} from 'vuex'
-
-const store = useStore()
-
-store.commit('getBalances')
-</script>
-
-
-<template>
-  <div class="container">
-    <div class="row my-3">
-      <div class="col-md-10 offset-md-1">
-        <div class="card text-center shadow my-3">
-          <div class="card-header">
-            <h1>
-              <i class="bi bi-bar-chart-line-fill"/> Kontostände
-            </h1>
-          </div>
-          <div class="card-body">
-            <div class="row justify-content-center mt-2">
-              <div v-for="(item, index) in store.state.data.balances" :key="item" class="balance">
-                <div class="input-group">
-                  <div class="input-group-prepend">
-                    <input :disabled="store.state.locked"
-                           v-model="store.state.data.balances[index].label"
-                           class="form-control">
-                  </div>
-                  <input :disabled="store.state.locked"
-                         v-model="store.state.data.balances[index].balance"
-                         type="number"
-                         step="0.01"
-                         class="form-control">
-                  <div class="input-group-append">
-                    <span class="input-group-text"> €</span>
-                  </div>
-                  <div v-if="!store.state.locked"
-                       class="input-group-append">
-                    <select :disabled="store.state.locked"
-                            v-model="store.state.data.balances[index].type"
-                            class="form-control">
-                      <option value="checking">Girokonto</option>
-                      <option value="savings">Sparkonto</option>
-                    </select>
-                  </div>
-                  <div v-if="!store.state.locked"
-                       class="input-group-append">
-                    <button
-                        class="btn btn-outline-primary"
-                        type="button"
-                        @click="store.state.data.balances.splice(index - 1, 0, store.state.data.balances.splice(index, 1)[0])"
-                    >
-                      <i class="bi bi-arrow-up"/>
-                    </button>
-                    <button
-                        class="btn btn-outline-primary"
-                        type="button"
-                        @click="store.state.data.balances.splice(index + 1, 0, store.state.data.balances.splice(index, 1)[0])"
-                    >
-                      <i class="bi bi-arrow-down"/>
-                    </button>
-                    <button
-                        class="btn btn-outline-danger"
-                        type="button"
-                        @click="store.state.data.balances.splice(index, 1)"
-                    >
-                      <i class="bi bi-trash3"/>
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <div v-if="!store.state.locked" class="row justify-content-center mt-2">
-                <button
-                    class="btn btn-outline-primary"
-                    type="button"
-                    @click="store.state.data.balances.push({label:'',amount:''})"
-                >
-                  Konto hinzufügen
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/budgeteer/web_interface/vuejs_frontend/src/components/Budgets.vue b/budgeteer/web_interface/vuejs_frontend/src/components/Budgets.vue
index 16e1a08..e019fd2 100644
--- a/budgeteer/web_interface/vuejs_frontend/src/components/Budgets.vue
+++ b/budgeteer/web_interface/vuejs_frontend/src/components/Budgets.vue
@@ -160,7 +160,7 @@ function checkEntryInDisplayMonth(entry) {
                                 class="btn btn-outline-success"
                                 type="button"
                                 @click="store.state.data.budgets[category_index].entries[entry_index].booked = true">
-                              <i class="bi bi-check2"/>
+                              <i class="bi bi-check"/>
                             </button>
                           </div>
                         </div>
diff --git a/budgeteer/web_interface/vuejs_frontend/src/components/Head.vue b/budgeteer/web_interface/vuejs_frontend/src/components/Head.vue
index f13c73e..8054490 100644
--- a/budgeteer/web_interface/vuejs_frontend/src/components/Head.vue
+++ b/budgeteer/web_interface/vuejs_frontend/src/components/Head.vue
@@ -7,6 +7,8 @@ import axios from 'axios'
 const store = useStore()
 const toast = useToast()
 
+store.commit('getBalances')
+
 onMounted(() => {
   getVersion()
   setInterval(getVersion, 300 * 1000)
@@ -82,7 +84,7 @@ const current_budget = computed({
       }
     }
 
-    return (parseFloat(balances_total_amount + transactions_total_amount + current_budget_total_amount).toFixed(2))
+    return (balances_total_amount + transactions_total_amount + current_budget_total_amount).toFixed(2)
   }
 })
 
@@ -109,6 +111,67 @@ const current_month = ref(
           <div class="card-body">
             <div class="row justify-content-center mt-2">
               <h2>Restbudget {{ current_month }}: {{ current_budget }} €</h2>
+              <div class="row justify-content-center mt-2">
+                <div v-for="(item, index) in store.state.data.balances" :key="item" class="balance">
+                  <div class="input-group">
+                    <div class="input-group-prepend">
+                      <input :disabled="store.state.locked"
+                             v-model="store.state.data.balances[index].label"
+                             class="form-control">
+                    </div>
+                    <input :disabled="store.state.locked"
+                           v-model="store.state.data.balances[index].balance"
+                           type="number"
+                           step="0.01"
+                           class="form-control">
+                    <div class="input-group-append">
+                      <span class="input-group-text"> €</span>
+                    </div>
+                    <div v-if="!store.state.locked"
+                         class="input-group-append">
+                      <select :disabled="store.state.locked"
+                              v-model="store.state.data.balances[index].type"
+                              class="form-control">
+                        <option value="checking">Girokonto</option>
+                        <option value="savings">Sparkonto</option>
+                      </select>
+                    </div>
+                    <div v-if="!store.state.locked"
+                         class="input-group-append">
+                      <button
+                          class="btn btn-outline-primary"
+                          type="button"
+                          @click="store.state.data.balances.splice(index - 1, 0, store.state.data.balances.splice(index, 1)[0])"
+                      >
+                        <i class="bi bi-arrow-up"/>
+                      </button>
+                      <button
+                          class="btn btn-outline-primary"
+                          type="button"
+                          @click="store.state.data.balances.splice(index + 1, 0, store.state.data.balances.splice(index, 1)[0])"
+                      >
+                        <i class="bi bi-arrow-down"/>
+                      </button>
+                      <button
+                          class="btn btn-outline-danger"
+                          type="button"
+                          @click="store.state.data.balances.splice(index, 1)"
+                      >
+                        <i class="bi bi-trash3"/>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="!store.state.locked" class="row justify-content-center mt-2">
+                  <button
+                      class="btn btn-outline-primary"
+                      type="button"
+                      @click="store.state.data.balances.push({label:'',amount:''})"
+                  >
+                    Konto hinzufügen
+                  </button>
+                </div>
+              </div>
               <div class="col-md-auto p-1">
                 <button aria-controls="offcanvasBottomSettings" class="btn btn-outline-primary"
                         data-bs-target="#offcanvasBottomSettings"
diff --git a/budgeteer/web_interface/vuejs_frontend/src/components/Transactions.vue b/budgeteer/web_interface/vuejs_frontend/src/components/Transactions.vue
index 5fc91eb..665cd0c 100644
--- a/budgeteer/web_interface/vuejs_frontend/src/components/Transactions.vue
+++ b/budgeteer/web_interface/vuejs_frontend/src/components/Transactions.vue
@@ -22,17 +22,19 @@ store.commit('getOpenTransactions')
               <div v-for="(item, index) in store.state.data.open_transactions" :key="item" class="transaction">
                 <div class="input-group">
                   <div class="input-group-prepend">
-                    <input v-model="store.state.data.open_transactions[index].label"
+                    <input :disabled="store.state.locked"
+                           v-model="store.state.data.open_transactions[index].label"
                            class="form-control">
                   </div>
-                  <input v-model="store.state.data.open_transactions[index].amount"
+                  <input :disabled="store.state.locked"
+                         v-model="store.state.data.open_transactions[index].amount"
                          type="number"
                          step="0.01"
                          class="form-control">
                   <div class="input-group-append">
                     <span class="input-group-text"> €</span>
                   </div>
-                  <div class="input-group-append">
+                  <div v-if="!store.state.locked" class="input-group-append">
                     <button
                         class="btn btn-outline-primary"
                         type="button"
@@ -47,12 +49,14 @@ store.commit('getOpenTransactions')
                     >
                       <i class="bi bi-arrow-down"/>
                     </button>
+                  </div>
+                  <div class="input-group-append">
                     <button
-                        class="btn btn-outline-danger"
+                        class="btn btn-outline-success"
                         type="button"
                         @click="store.state.data.open_transactions.splice(index, 1)"
                     >
-                      <i class="bi bi-trash3"/>
+                      <i class="bi bi-check"/>
                     </button>
                   </div>
                 </div>
diff --git a/budgeteer/web_interface/vuejs_frontend/src/components/_Main.vue b/budgeteer/web_interface/vuejs_frontend/src/components/_Main.vue
index f56c3bf..78283b5 100644
--- a/budgeteer/web_interface/vuejs_frontend/src/components/_Main.vue
+++ b/budgeteer/web_interface/vuejs_frontend/src/components/_Main.vue
@@ -6,7 +6,6 @@ import "bootstrap"
 import Head from './Head.vue'
 import Settings from './Settings.vue'
 import Transactions from "./Transactions.vue"
-import Balances from "./Balances.vue"
 import Budgets from "./Budgets.vue"
 </script>
 
@@ -15,7 +14,6 @@ import Budgets from "./Budgets.vue"
     <!--- Main Items -->
     <Head/>
     <Transactions/>
-    <Balances/>
     <Budgets/>
     <!-- Offcanvas Items -->
     <Settings/>