From 57b247767d8b1516afb1bb5bae7a77cb049cfc8e Mon Sep 17 00:00:00 2001
From: Annika <nikzneko@gmail.com>
Date: Wed, 13 Jul 2022 15:58:16 -0600
Subject: [PATCH] can now create new categories

---
 budgit.client/src/components/Category.vue     |  3 +++
 budgit.client/src/pages/OverviewPage.vue      | 21 ++++++++++++++++---
 budgit.client/src/pages/TransactionsPage.vue  |  2 +-
 .../src/services/CategoriesService.js         |  5 +++++
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/budgit.client/src/components/Category.vue b/budgit.client/src/components/Category.vue
index f8352ed..7913009 100644
--- a/budgit.client/src/components/Category.vue
+++ b/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
         }
diff --git a/budgit.client/src/pages/OverviewPage.vue b/budgit.client/src/pages/OverviewPage.vue
index 193d7be..1fd3a23 100644
--- a/budgit.client/src/pages/OverviewPage.vue
+++ b/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)
+        }
+      }
     }
   }
 }
diff --git a/budgit.client/src/pages/TransactionsPage.vue b/budgit.client/src/pages/TransactionsPage.vue
index a577e41..a567c2c 100644
--- a/budgit.client/src/pages/TransactionsPage.vue
+++ b/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>
diff --git a/budgit.client/src/services/CategoriesService.js b/budgit.client/src/services/CategoriesService.js
index e6511bb..3a6c13d 100644
--- a/budgit.client/src/services/CategoriesService.js
+++ b/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()
\ No newline at end of file