user can edit budget categories

Author: matthiaswh

src/app/App.vue

@@ -54,7 +54,7 @@ export default {
     background-color: #02212B;
 
     .brand {
-      font-size: 36px;
+      font-size: 24px;
       color: #ffffff;
       margin: 40px 0 20px 20px;
       vertical-align: top;

src/app/budgets/components/BudgetCategory.vue

@@ -0,0 +1,23 @@
+<template>
+  <tr class="budget-item">
+    <td><span class="subtitle is-5">{{ getCategoryById(value.category).name }}</span></td>
+    <td><span class="subtitle is-5">${{ value.budgeted }}</span></td>
+    <td><span class="subtitle is-5">${{ value.spent }}</span></td>
+    <td><span class="subtitle is-5">${{ value.budgeted - value.spent }}</span></td>
+    <td><a class='button' @click="$emit('edit-budget-category')">Edit</a></td>
+  </tr>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'budget-item',
+
+  props: ['value'],
+
+  computed: {
+    ...mapGetters(['getCategoryById'])
+  }
+};
+</script>

src/app/budgets/components/CreateUpdateBudget.vue

@@ -58,15 +58,20 @@
             <th>Budgeted</th>
             <th>Spent</th>
             <th>Remaining</th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="bc in selectedBudget.budgetCategories">
-            <td><span class="subtitle is-5">{{ getCategoryById(bc.category).name }}</span></td>
-            <td><span class="subtitle is-5">${{ bc.budgeted }}</span></td>
-            <td><span class="subtitle is-5">${{ bc.spent }}</span></td>
-            <td><span class="subtitle is-5">${{ bc.budgeted - bc.spent }}</span></td>
-          </tr>
+          <template
+            v-for="value, key in selectedBudget.budgetCategories"
+          >
+            <component
+              :is="budgetCategoryComponent(value)"
+              v-model="value"
+              v-on:update-budget-category="saveBudgetCategory"
+              v-on:edit-budget-category="activeBudgetCategory = value"
+            ></component>
+          </template>
           <CreateUpdateBudgetCategory v-on:add-budget-category="addBudgetCategory"></CreateUpdateBudgetCategory>
         </tbody>
         <tfoot>
@@ -75,6 +80,7 @@
             <td>${{ selectedBudget.budgeted }}</td>
             <td>${{ selectedBudget.spent }}</td>
             <td>${{ selectedBudget.budgeted - selectedBudget.spent }}</td>
+            <td></td>
           </tr>
         </tfoot>
       </table>
@@ -90,19 +96,22 @@ import { mapActions, mapGetters } from 'vuex';
 import Datepicker from 'vuejs-datepicker';
 
 import CreateUpdateBudgetCategory from './CreateUpdateBudgetCategory';
+import BudgetCategory from './BudgetCategory';
 
 export default {
   name: 'budget-create-edit-view',
 
   components: {
     Datepicker,
-    CreateUpdateBudgetCategory
+    CreateUpdateBudgetCategory,
+    BudgetCategory
   },
 
   data: () => {
     return {
       selectedBudget: {},
-      editing: false
+      editing: false,
+      activeBudgetCategory: null
     };
   },
 
@@ -123,7 +132,8 @@ export default {
       'createBudget',
       'updateBudget',
       'loadBudgets',
-      'createBudgetCategory'
+      'createBudgetCategory',
+      'updateBudgetCategory'
     ]),
 
     resetAndGo () {
@@ -164,6 +174,21 @@ export default {
       }).then(() => {
         this.selectedBudget = Object.assign({}, this.getBudgetById(this.$route.params.budgetId));
       });
+    },
+
+    saveBudgetCategory (budgetCategory) {
+      // format it how our action expects
+      budgetCategory.category = budgetCategory.category.id;
+      this.updateBudgetCategory({
+        budget: this.selectedBudget,
+        budgetCategory: budgetCategory
+      }).then(() => {
+        this.selectedBudget = Object.assign({}, this.getBudgetById(this.$route.params.budgetId));
+      });
+    },
+
+    budgetCategoryComponent (budgetCategory) {
+      return this.activeBudgetCategory && this.activeBudgetCategory === budgetCategory ? 'create-update-budget-category' : 'budget-category';
     }
   },
 

src/app/budgets/components/CreateUpdateBudgetCategory.vue

@@ -27,8 +27,12 @@
         <span class="subtitle is-5">${{ budgetCategory.spent }}</span>
       </td>
 
+      <td></td>
+
       <td>
-        <a class="button is-primary" @click.prevent="processSave">Add</a>
+        <a class="button is-primary" @click.prevent="processSave">
+          {{ editing ? 'Save' : 'Add' }}
+        </a>
       </td>
 
   </tr>
@@ -46,14 +50,27 @@ export default {
     Multiselect
   },
 
+  props: [
+    'value'
+  ],
+
   data: () => {
     return {
-      budgetCategory: {}
+      budgetCategory: {},
+      editing: false
     };
   },
 
   mounted () {
     this.loadCategories();
+    if (this.value) {
+      this.budgetCategory = Object.assign({}, this.value);
+
+      // we need the selected category name and ID, but the budgetCategory object only holds the ID by default
+      this.budgetCategory.category = this.getCategoryById(this.budgetCategory.category);
+
+      this.editing = true;
+    }
   },
 
   methods: {
@@ -63,8 +80,14 @@ export default {
     ]),
 
     processSave () {
-      this.$emit('add-budget-category', this.budgetCategory);
-      this.budgetCategory = {};
+      // we are passing the saves up to the budget because this budget
+      // category view isn't aware of its parent budget object
+      if (this.editing) {
+        this.$emit('update-budget-category', this.budgetCategory);
+      } else {
+        this.$emit('add-budget-category', this.budgetCategory);
+        this.budgetCategory = {};
+      }
     },
 
     handleCreateCategory (category) {
@@ -84,7 +107,8 @@ export default {
 
   computed: {
     ...mapGetters([
-      'getCategorySelectList'
+      'getCategorySelectList',
+      'getCategoryById'
     ])
   }
 };

src/app/budgets/vuex/actions.js

@@ -96,3 +96,21 @@ export const createBudgetCategory = ({ commit, dispatch, getters }, data) => {
     value: budgetCategory.budgeted
   });
 };
+
+export const updateBudgetCategory = ({ commit, dispatch, getters }, data) => {
+  let newBudget = data.budgetCategory.budgeted;
+  let oldBudget = getters.getBudgetCategoryById(data.budget.id, data.budgetCategory.id).budgeted;
+
+  if (newBudget !== oldBudget) {
+    dispatch('updateBudgetBalance', {
+      budget: data.budget,
+      param: 'budgeted',
+      value: newBudget - oldBudget
+    });
+  }
+
+  commit('UPDATE_BUDGET_CATEGORY', data);
+
+  // save using the budget in our store
+  saveBudget(getters.getBudgetById(data.budget.id));
+};

src/app/budgets/vuex/getters.js

@@ -9,5 +9,13 @@ export default {
 
   getCategorySelectList: (state, getters) => {
     return state.categories && Object.keys(state.categories).length > 0 ? Object.values(state.categories) : [];
+  },
+
+  getBudgetCategoryById: (state, getters) => (budgetId, budgetCategoryId) => {
+    return state.budgets && budgetId in state.budgets
+      ? state.budgets[budgetId].budgetCategories && budgetCategoryId in state.budgets[budgetId].budgetCategories
+        ? state.budgets[budgetId].budgetCategories[budgetCategoryId]
+        : false
+      : false;
   }
 };

src/app/budgets/vuex/mutations.js

@@ -39,5 +39,9 @@ export default {
 
   CREATE_BUDGET_CATEGORY (state, payload) {
     Vue.set(state.budgets[payload.budget.id].budgetCategories, payload.budgetCategory.id, payload.budgetCategory);
+  },
+
+  UPDATE_BUDGET_CATEGORY (state, payload) {
+    state.budgets[payload.budget.id].budgetCategories[payload.budgetCategory.id] = payload.budgetCategory;
   }
 };