can now delete categories

budgit.client/src/components/Analysis.vue

@@ -5,6 +5,7 @@
       <i v-show="category._id" class="text-3xl mdi mdi-delete hover:bg-red-400 hover:text-stone-900 cursor-pointer" @click="removeCategory()"></i>
     </div>
     <h4 class="text-2xl">Spent: ${{totalSpent()}}</h4>
+    <!-- make this an input -->
     <h4 class="text-2xl">Budgeted: ${{category.budgeted}}</h4>
   </div>
 </template>
@@ -13,6 +14,7 @@
 <script>
 import { computed, reactive, onMounted, ref, watchEffect } from "vue";
 import { AppState } from '../AppState'
+import { categoriesService } from "../services/CategoriesService";
 
 
 export default {
@@ -30,9 +32,16 @@ export default {
       },
       category: computed(() => AppState.activeCategory),
       async removeCategory() {
+        try {
           if (!AppState.activeCategory._id) {
             console.log('trying to delete overview...')
           }
+          // call service
+          categoriesService.remove(this.category._id)
+          
+        } catch (error) {
+          console.log(error)
+        }
       }
     }
   }

budgit.client/src/components/Transaction.vue

@@ -1,12 +1,9 @@
 <template>
-  <form class="component flex flex-wrap md:flex-nowrap justify-between bg-stone-800 mb-2" @submit.prevent="update">
+  <form class="component flex flex-wrap md:flex-nowrap justify-between bg-stone-800 mb-2 transition fade-out duration-300" @submit.prevent="update">
     <div class="pr-4">
       <input type="date" v-model="transData.date" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
     </div>
     <div class="pr-4">
-      <!-- TODO this is bad! don't manipulate the prop -->
-      <!-- Look at cars in gregslist? -->
-      <!-- use editable object -->
       <span class="flex">
         $
         <input type="number" v-model="transData.amount" :placeholder="transData.amount" class="w-24 bg-stone-800 text-slate-50 hover:bg-green-300 hover:text-stone-900">
@@ -27,7 +24,7 @@
       <input type="text" v-model="transData.comment" :placeholder="transData.comment" class="text-slate-50 bg-stone-800 w-full hover:bg-green-300 hover:text-stone-900">
     </div>
     <div>
-      <button class="text-slate-50 bg-stone-800 px-1 hover:bg-green-300 hover:text-stone-900" @click="update">
+      <button class="text-slate-50 bg-stone-800 px-1 hover:bg-green-300 hover:text-stone-900" @click="update" :id="'transSave-' + transaction._id">
         <i class="mdi mdi-floppy"></i>
       </button>
     </div>
@@ -71,11 +68,21 @@ export default {
       async update() {
         // console.log(props.transaction)
         // send off request to update transaction
+        const transBar = document.getElementById('transSave-' + props.transaction._id)
         try {
           // use the editable object instead
           await transactionsService.update(transData.value)
+
+          // change styling to show user value was changed
+          transBar.classList.add('bg-green-300', 'text-stone-900')
+          transBar.classList.add('ease-out')
+          setTimeout(() => {transBar.classList.remove('bg-green-300', 'text-stone-900', 'ease-out')}, 800)
         } catch (error) {
           console.log(error)
+          // change styling to show user there was an error saving
+          transBar.classList.add('bg-red-400', 'text-stone-900')
+          transBar.classList.add('ease-out')
+          setTimeout(() => {transBar.classList.remove('bg-red-400', 'text-stone-900', 'ease-out')}, 800)
         }
       },
       async remove() {

budgit.client/src/services/CategoriesService.js

@@ -30,6 +30,12 @@ class CategoriesService {
     }
     AppState.activeCategory = overview
   }
+
+  async remove(categoryId) {
+    const res = await api.delete('api/categories/' + categoryId)
+    AppState.categories = AppState.categories.filter((c) => c._id != categoryId)
+    await transactionsService.getAll()
+  }
 }
 
 export const categoriesService = new CategoriesService()

budgit/server/services/CategoriesService.js

@@ -1,5 +1,6 @@
 import { dbContext } from '../db/DbContext'
 import { BadRequest } from '../utils/Errors'
+import { transactionsService } from './TransactionsService'
 
 
 class CategoriesService {
@@ -35,6 +36,7 @@ class CategoriesService {
       throw new BadRequest('category does not exist')
     }
     // throw new BadRequest(original)
+    // original.accountId = accountId
     original.name = update.name || original.name
     original.budgeted = update.budgeted || original.budgeted
     original.targetAmt = update.targetAmt || original.targetAmt
@@ -52,8 +54,18 @@ class CategoriesService {
       throw new BadRequest('category does not exist')
     }
     // TODO this needs to reallocate all transactions under this category to unassigned
+    const transactions = await transactionsService.getAll(accountId)
+    for (const t in transactions) {
+      if (transactions[t].categoryId == categoryId) {
+        await transactionsService.update(accountId, transactions[t]._id, {
+          categoryId: null
+        })
+      }
+    }
+    // need to update transactions with FE
+
     category.remove()
-    return category
+    return category._id
   }
 }
   

todo.txt

@@ -0,0 +1,7 @@
+- create removeCategory method/service/CRUD
+- integrate chart.js
+- create a way to change budgeted amounts
+- do something with targets
+- UX tweaks
+- optimize backend (populate is slow...)
+- create a way to inflow money