can now create new categories

budgit.client/src/components/Category.vue

@@ -23,6 +23,9 @@ export default {
     return {
       totalSpent() {
         let total = 0;
+        if (!props.category.transactions) {
+          return 0
+        }
         for (let t = 0; t < props.category.transactions.length; t++) {
           total += props.category.transactions[t].amount
         }

budgit.client/src/pages/OverviewPage.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="component">
-    <p class="hover:text-green-300 hidden md:block cursor-pointer">Add Category</p>
-    <div class="flex md:mx-40 flex-col md:flex-row">
+    <div class="hidden md:block cursor-pointer">
+      <form @submit.prevent="createCategory">
+        <input type="text" v-model="newCatName" placeholder="Add New Category" required class="text-slate-50 bg-stone-800 hover:bg-green-300 hover:text-stone-900 p-1">
+        <button type="submit" class="text-slate-50 bg-stone-800 hover:bg-green-300 hover:text-stone-900 p-1">
+          <i class="mdi mdi-plus"></i>
+        </button>
+      </form>
+    </div>
+    <div class="flex md:mt-6 md:mx-40 flex-col md:flex-row">
       <div class="md:w-4/12 md:order-last my-4 md:my-0 bg-stone-800">analysis container</div>
       <div class="md:w-8/12 md:mr-4">
         <div class="flex justify-between bg-stone-700 text-green-300 hover:bg-green-200 hover:text-stone-900 mb-2 p-2 pr-0">
@@ -37,7 +44,15 @@ export default {
       }
     })
     return {
-      categories: computed(() => AppState.categories)
+      newCatName: '',
+      categories: computed(() => AppState.categories),
+      async createCategory() {
+        try {
+          await categoriesService.create(this.newCatName)
+        } catch (error) {
+          console.log(error)
+        }
+      }
     }
   }
 }

budgit.client/src/pages/TransactionsPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="component">
-    <div class="flex mt-6 md:mx-40 flex-col">
+    <div class="flex mt-4 md:mt-14 md:mx-40 flex-col">
       <AddTransaction :categories="categories" />
       <Transaction v-for="t in transactions" :key="t._id" :transaction="t" :categories="categories" />
     </div>

budgit.client/src/services/CategoriesService.js

@@ -9,6 +9,11 @@ class CategoriesService {
     // console.log(res.data)
     AppState.categories = res.data
   }
+
+  async create(newCatName) {
+    const res = await api.post('api/categories', {name: newCatName})
+    AppState.categories.push(res.data)
+  }
 }
 
 export const categoriesService = new CategoriesService()