Use Vuex more correctly to load categories on budget details page

Signed-off-by: William Brawner <me@wbrawner.com>

src/components/BudgetDetails.vue

@@ -1,26 +1,39 @@
 <template>
-  <div>
+  <div v-if="budget">
-    <h1 v-if="budget" v-text="budget.name"></h1>
+    <h1 v-text="budget.name"></h1>
     <div class="card">
-      
+      <CategoryList v-bind:budget-id="budget.id" v-bind:expense="true"></CategoryList>
+    </div>
+    <div class="card">
+      <CategoryList v-bind:budget-id="budget.id" v-bind:expense="false"></CategoryList>
     </div>
   </div>
 </template>
 <script>
 import { mapGetters } from "vuex";
+import CategoryList from "./CategoryList";
 
 export default {
   name: "budget-details",
   components: {
+    CategoryList
   },
   computed: {
     budget: function(state) {
-      const budgetId = this.$route.params.id
+      const budgetId = this.$route.params.id;
-      const budget = this.$store.getters.budgets.find(budget => budget.id === budgetId);
+      const budget = this.$store.getters.budgets.find(
+        budget => budget.id === budgetId
+      );
       return budget;
     }
   },
   methods: {
+    load() {
+      this.$store.dispatch("budgetDetailsViewed", this.$route.params.id);
+    }
+  },
+  mounted() {
+      this.load()
   }
 };
 </script>

src/components/BudgetList.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <AppNavigationItem v-for="budget in budgets" :key="budget.id" :title="budget.name" v-on:click="view(budget.id)"></AppNavigationItem>
+    <AppNavigationItem
+      v-for="budget in budgets"
+      :key="budget.id"
+      :title="budget.name"
+      v-on:click="view(budget.id)"
+    ></AppNavigationItem>
     <AppNavigationNew text="New Budget"></AppNavigationNew>
   </div>
 </template>
@@ -13,18 +18,22 @@ export default {
   name: "budget-list",
   components: {
     AppNavigationItem,
-    AppNavigationNew
+    AppNavigationNew,
   },
   computed: {
     ...mapGetters(["budgets"])
   },
   methods: {
-    view: function(id) {
+    load: function() {
-			this.$router.push({ name: 'budgetDetails', params: { id: id } })
+      this.$store.dispatch('budgetListViewed')
     },
-    new: function() {
+    view: function(id) {
-
+      this.$router.push({ name: "budgetDetails", params: { id: id } })
-    }
+    },
+    new: function() {}
+  },
+  mounted() {
+    this.load()
   }
 };
-</script>
+</script>

src/components/CategoryList.vue

@@ -0,0 +1,29 @@
+<template>
+  <ul>
+    <li v-for="category in categories" :key="category.id">
+      <p>{{ category.name }}</p>
+    </li>
+  </ul>
+</template>
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "category-list",
+  components: {},
+  props: {
+    budgetId: Number,
+    expense: Boolean
+  },
+  computed: {
+    categories: function(state) {
+        const categories = this.$store.getters.categories(this.budgetId)
+        if (categories) {
+            return categories.filter(category => category.expense === this.expense)
+        } else {
+            return [];
+        }      
+    }
+  }
+};
+</script>

src/main.js

@@ -11,5 +11,5 @@ Vue.prototype.OCA = window.OCA
 new Vue({
     router,
     store,
-    render: h => h(App)
+    render: h => h(App),
-}).$mount('#twigs-app')
+}).$mount('#twigs-app')

src/router/index.js

@@ -2,13 +2,13 @@ import VueRouter from 'vue-router'
 import Vue from 'vue'
 import BudgetDetails from '../components/BudgetDetails'
 
-Vue.use(VueRouter);
+Vue.use(VueRouter)
 
 const routes = [
     {
         path: '/budgets/:id',
         name: 'budgetDetails',
-        component: BudgetDetails
+        component: BudgetDetails,
     }
 ]
 

src/store/index.js

@@ -8,23 +8,49 @@ export default new Vuex.Store({
     state: {
         budgets: [],
         currentBudget: 0,
-        categories: [],
+        categories: {},
         currentCategory: 0,
         transactions: [],
-        currentTransaction: 0
+        currentTransaction: 0,
     },
     getters: {
         budgets: (state) => {
-            if (state.budgets.length === 0) {
-                axios.get(OC.generateUrl("/apps/twigs/api/v1.0/budgets"))
-                    .then(function (response) {
-                        state.budgets = response.data;
-                    })
-            }
             return state.budgets
         },
         budget: (state) => (id) => {
             return state.budgets.find(budget => budget.id === id)
+        },
+        categories: (state) => (budgetId) => {
+            return state.categories[budgetId]
+        },
+    },
+    actions: {
+        budgetListViewed({ commit }) {
+            axios.get(OC.generateUrl('/apps/twigs/api/v1.0/budgets'))
+                .then(function (response) {
+                    commit('setBudgets', response.data)
+                })
+        },
+        budgetDetailsViewed({ commit }, budgetId) {
+            axios.get(OC.generateUrl(`/apps/twigs/api/v1.0/categories?budgetId=${budgetId}`))
+                .then(function (response) {
+                    commit({
+                        type: 'setCategories',
+                        budgetId: budgetId, 
+                        categories: response.data
+                    })
+                })
+        }
+    },
+    mutations: {
+        setBudgets(state, budgets) {
+            state.budgets = budgets
+        },
+        setCategories(state, data) {
+            state.categories = {
+                ...state.categories,
+                [data.budgetId]: data.categories
+            }
         }
     }
-}) 
+})