Add transfers

frontend/components/accountOverview.vue

@@ -3,7 +3,6 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col">
-          <!-- TODO: Add time-selector -->
           <range-selector
             v-model="timeRange"
           />
@@ -15,7 +14,7 @@
           <div class="btn-group btn-group-sm">
             <button
               class="btn"
-              @click="showAddTransaction = true"
+              @click="showAddTransaction = !showAddTransaction"
             >
               <i class="fas fa-fw fa-plus-circle mr-1" />
               Add Transaction

frontend/components/budgetDashboard.vue

@@ -1,60 +1,175 @@
 <template>
-  <div class="container-fluid">
+  <div>
-    <div class="row">
+    <div class="container-fluid">
-      <div class="col d-flex align-items-center">
+      <div class="row">
-        <range-selector
+        <div class="col d-flex align-items-center">
-          v-model="timeRange"
+          <range-selector
-          :multi-month="false"
+            v-model="timeRange"
-        />
+            :multi-month="false"
+          />
+        </div>
+        <div class="col d-flex align-items-center justify-content-center">
+          <div :class="unallocatedMoneyClass">
+            <span class="fs-4">{{ formatNumber(unallocatedMoney) }} €</span>
+            <span class="small">Unallocated</span>
+          </div>
+        </div>
+        <div class="col d-flex align-items-center justify-content-end">
+          <div class="btn-group btn-group-sm">
+            <button
+              class="btn"
+              data-bs-toggle="modal"
+              data-bs-target="#transferMoneyModal"
+            >
+              <i class="fas fa-fw fa-arrow-right-arrow-left mr-1" />
+              Add Transfer
+            </button>
+          </div>
+        </div>
       </div>
-      <div class="col d-flex align-items-center justify-content-end">
+      <div class="row mt-3">
-        <div :class="unallocatedMoneyClass">
+        <div class="col">
-          <span class="fs-4">{{ formatNumber(unallocatedMoney) }} €</span>
+          <table class="table table-striped small">
-          <span class="small">Unallocated</span>
+            <thead>
+              <tr>
+                <th>Category</th>
+                <th class="text-end">
+                  Allocated
+                </th>
+                <th class="text-end">
+                  Activity
+                </th>
+                <th class="text-end">
+                  Available
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="cat in categories"
+                :key="cat.id"
+              >
+                <td>{{ cat.name }}</td>
+                <td :class="{'text-end': true, 'text-danger': (allocatedByCategory[cat.id] || 0) < 0}">
+                  {{ formatNumber(allocatedByCategory[cat.id] || 0) }} €
+                </td>
+                <td :class="{'text-end': true, 'text-danger': (activityByCategory[cat.id] || 0) < 0}">
+                  {{ formatNumber(activityByCategory[cat.id] || 0) }} €
+                </td>
+                <td :class="{'text-end': true, 'text-danger': cat.balance < 0}">
+                  {{ formatNumber(cat.balance) }} €
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>
-    <div class="row mt-3">
+
-      <div class="col">
+    <div
-        <table class="table table-striped small">
+      id="transferMoneyModal"
-          <thead>
+      ref="transferMoneyModal"
-            <tr>
+      class="modal fade"
-              <th>Category</th>
+      tabindex="-1"
-              <th class="text-end">
+      aria-labelledby="transferMoneyModalLabel"
-                Allocated
+      aria-hidden="true"
-              </th>
+    >
-              <th class="text-end">
+      <div class="modal-dialog modal-sm">
-                Activity
+        <div class="modal-content">
-              </th>
+          <div class="modal-header">
-              <th class="text-end">
+            <h1
-                Available
+              id="transferMoneyModalLabel"
-              </th>
+              class="modal-title fs-5"
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="cat in categories"
-              :key="cat.id"
             >
-              <td>{{ cat.name }}</td>
+              Transfer Money
-              <td :class="{'text-end': true, 'text-danger': (allocatedByCategory[cat.id] || 0) < 0}">
+            </h1>
-                {{ formatNumber(allocatedByCategory[cat.id] || 0) }} €
+            <button
-              </td>
+              type="button"
-              <td :class="{'text-end': true, 'text-danger': (activityByCategory[cat.id] || 0) < 0}">
+              class="btn-close"
-                {{ formatNumber(activityByCategory[cat.id] || 0) }} €
+              data-bs-dismiss="modal"
-              </td>
+              aria-label="Close"
-              <td :class="{'text-end': true, 'text-danger': cat.balance < 0}">
+            />
-                {{ formatNumber(cat.balance) }} €
+          </div>
-              </td>
+          <div class="modal-body">
-            </tr>
+            <div class="mb-3">
-          </tbody>
+              <label
-        </table>
+                for="transferMoneyModalFrom"
+                class="form-label"
+              >From</label>
+              <select
+                id="transferMoneyModalFrom"
+                v-model="modals.createTransfer.from"
+                class="form-select"
+              >
+                <option
+                  v-for="cat in transferableCategories"
+                  :key="cat.id"
+                  :value="cat.id"
+                >
+                  {{ cat.name }}
+                </option>
+              </select>
+            </div>
+
+            <div class="mb-3">
+              <label
+                for="transferMoneyModalTo"
+                class="form-label"
+              >To</label>
+              <select
+                id="transferMoneyModalTo"
+                v-model="modals.createTransfer.to"
+                class="form-select"
+              >
+                <option
+                  v-for="cat in transferableCategories"
+                  :key="cat.id"
+                  :value="cat.id"
+                >
+                  {{ cat.name }}
+                </option>
+              </select>
+            </div>
+
+            <div class="mb-3">
+              <label
+                for="transferMoneyModalAmount"
+                class="form-label"
+              >Amount</label>
+              <div class="input-group">
+                <input
+                  id="transferMoneyModalAmount"
+                  v-model.number="modals.createTransfer.amount"
+                  type="number"
+                  min="0.01"
+                  step="0.01"
+                  class="form-control text-end"
+                >
+                <span class="input-group-text">€</span>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-primary"
+              :disabled="!transferModalValid"
+              @click="transferMoney"
+            >
+              <i class="fas fa-fw fa-arrow-right-arrow-left mr-1" />
+              Transfer
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+/* eslint-disable sort-imports */
+import { Modal } from 'bootstrap'
+
 import { formatNumber } from '../helpers'
 import rangeSelector from './rangeSelector.vue'
 import { unallocatedMoneyAcc } from '../constants'
@@ -89,6 +204,25 @@ export default {
       return accounts
     },
 
+    transferModalValid() {
+      if (!this.modals.createTransfer.from || !this.modals.createTransfer.to) {
+        return false
+      }
+
+      if (this.modals.createTransfer.from === this.modals.createTransfer.to) {
+        return false
+      }
+
+      return true
+    },
+
+    transferableCategories() {
+      const accounts = this.accounts
+        .filter(acc => acc.type === 'category')
+      accounts.sort((a, b) => a.name.localeCompare(b.name))
+      return accounts
+    },
+
     unallocatedMoney() {
       const acc = this.accounts.filter(acc => acc.id === unallocatedMoneyAcc)[0] || null
       if (acc === null) {
@@ -98,7 +232,7 @@ export default {
     },
 
     unallocatedMoneyClass() {
-      const classes = ['d-inline-flex', 'flex-column', 'text-center', 'ms-auto', 'p-2', 'rounded']
+      const classes = ['d-inline-flex', 'flex-column', 'text-center', 'p-2', 'rounded']
       if (this.unallocatedMoney < 0) {
         classes.push('bg-danger')
       } else if (this.unallocatedMoney === 0) {
@@ -113,6 +247,14 @@ export default {
 
   data() {
     return {
+      modals: {
+        createTransfer: {
+          amount: 0,
+          from: unallocatedMoneyAcc,
+          to: '',
+        },
+      },
+
       timeRange: {},
       transactions: [],
     }
@@ -131,6 +273,25 @@ export default {
     },
 
     formatNumber,
+
+    transferMoney() {
+      const params = new URLSearchParams()
+      params.set('amount', this.modals.createTransfer.amount.toFixed(2))
+
+      return fetch(`/api/accounts/${this.modals.createTransfer.from}/transfer/${this.modals.createTransfer.to}?${params.toString()}`, {
+        method: 'PUT',
+      })
+        .then(() => {
+          this.$emit('update-accounts')
+          Modal.getInstance(this.$refs.transferMoneyModal).toggle()
+
+          this.modals.createTransfer = {
+            amount: 0,
+            from: unallocatedMoneyAcc,
+            to: '',
+          }
+        })
+    },
   },
 
   name: 'AccountingAppBudgetDashboard',