From daaf5173a63239fe067e02bb6da257c1297aa743 Mon Sep 17 00:00:00 2001
From: Annika <nikzneko@gmail.com>
Date: Wed, 13 Jul 2022 16:27:53 -0600
Subject: [PATCH] stubbed out analysis pane

---
 budgit.client/src/AppState.js             |  3 ++-
 budgit.client/src/components/Analysis.vue | 20 ++++++++++++++++++++
 budgit.client/src/components/Category.vue |  8 +++++++-
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 budgit.client/src/components/Analysis.vue

diff --git a/budgit.client/src/AppState.js b/budgit.client/src/AppState.js
index 48c126e..3062a9b 100644
--- a/budgit.client/src/AppState.js
+++ b/budgit.client/src/AppState.js
@@ -5,5 +5,6 @@ export const AppState = reactive({
   user: {},
   account: {},
   transactions: [],
-  categories: []
+  categories: [],
+  activeCategory: {}
 })
diff --git a/budgit.client/src/components/Analysis.vue b/budgit.client/src/components/Analysis.vue
new file mode 100644
index 0000000..a0cfa57
--- /dev/null
+++ b/budgit.client/src/components/Analysis.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="component">
+
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  setup(){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/budgit.client/src/components/Category.vue b/budgit.client/src/components/Category.vue
index 732a497..97181b4 100644
--- a/budgit.client/src/components/Category.vue
+++ b/budgit.client/src/components/Category.vue
@@ -1,8 +1,10 @@
 <template>
-  <div :class="`component flex justify-between mb-2 p-2 pr-0 bg-stone-800 hover:text-stone-900 ${totalSpent() > category.budgeted ? 'text-red-400 hover:bg-red-400' : 'hover:bg-green-300'}`">
+  <div @click="openCategory"
+  :class="`component flex justify-between mb-2 p-2 pr-0 bg-stone-800 hover:text-stone-900 ${totalSpent() > category.budgeted ? 'text-red-400 hover:bg-red-400' : 'hover:bg-green-300'}`">
     <h3 class="text-2xl">{{category.name}}</h3>
     <div class="flex">
     <p class="w-16 px-2 border-l-2 border-stone-900">${{totalSpent()}}</p>
+    <!-- TODO turn this into an input field for editing -->
     <p class="w-16 px-2 border-l-2 border-stone-900">${{category.budgeted}}</p>
     </div>
   </div>
@@ -11,6 +13,7 @@
 
 <script>
 import { computed, reactive, onMounted, ref, watchEffect } from "vue";
+import { AppState } from "../AppState";
 
 export default {
   props: {
@@ -30,6 +33,9 @@ export default {
           total += props.category.transactions[t].amount
         }
         return total
+      },
+      openCategory() {
+        AppState.activeCategory = props.category
       }
     }
   }