user can delete and edit accounts

Author: matthiaswh

.gitignore

@@ -5,3 +5,4 @@ npm-debug.log
 test/unit/coverage
 test/e2e/reports
 selenium-debug.log
+.idea/

src/app/accounts/components/AccountsListView.vue

@@ -2,20 +2,22 @@
   <div id="accounts-list-view">
     I'm a list of accounts!
 
-    <router-link :to="{ name: 'createEditAccount' }">Add an account</router-link>
+    <router-link :to="{ name: 'createAccount' }">Add an account</router-link>
 
     <ul>
       <li v-for="account, key in accounts">
         {{ account.name }}
         <span class="tag is-small is-info">{{ categories[account.category] }}</span>
         ${{ account.balance }}
+        <a @click="confirmDeleteAccount(account)">Delete</a>
+        <router-link :to="{ name: 'editAccount', params: { accountId: account.id } }">Edit</router-link>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import { CATEGORIES } from '../../../consts';
 
 export default {
@@ -27,6 +29,18 @@ export default {
     };
   },
 
+  methods: {
+    ...mapActions([
+      'deleteAccount'
+    ]),
+
+    confirmDeleteAccount (account) {
+      if (confirm(`Are you sure you want to delete ${account.name}?`)) {
+        this.deleteAccount(account);
+      }
+    }
+  },
+
   computed: {
     ...mapState({
       'accounts': state => state.accounts.accounts

src/app/accounts/components/CreateEditAccount.vue

@@ -4,22 +4,23 @@
 
     <router-link :to="{ name: 'accountsListView' }">View all accounts</router-link>
 
-    <form class="form" @submit.prevent="saveNewAccount">
+    <form class="form" @submit.prevent="processSave">
       <label for="name" class="label">Name</label>
       <p class="control">
-        <input type="text" class="input" name="name" v-model="newAccount.name">
+        <input type="text" class="input" name="name" v-model="selectedAccount.name">
       </p>
       <label for="category" class="label">Category</label>
       <p class="control">
         <span class="select">
-          <select name="category" v-model="newAccount.category">
+          <select name="category" v-model="selectedAccount.category">
             <option v-for="value, key in categories" :value="key">{{ value }}</option>
           </select>
         </span>
       </p>
       <label for="balance" class="label">Balance</label>
       <p class="control">
-        <input type="text" class="input" name="balance" v-model="newAccount.balance">
+        <input type="text" class="input" name="balance" v-model="selectedAccount.balance" v-if="!editing">
+        <span v-else>To update your balance, add a balance adjusting transaction.</span>
       </p>
       <div class="control is-grouped">
         <p class="control">
@@ -34,7 +35,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import { CATEGORIES } from '../../../consts';
 
 export default {
@@ -43,21 +44,58 @@ export default {
   data: () => {
     return {
       categories: CATEGORIES,
-      newAccount: {}
+      selectedAccount: {},
+      editing: false
     };
   },
 
+  mounted () {
+    if ('accountId' in this.$route.params) {
+      let selectedAccount = this.getAccountById(this.$route.params.accountId);
+      if (selectedAccount) {
+        this.editing = true;
+        this.selectedAccount = {
+          name: selectedAccount.name,
+          category: selectedAccount.category,
+          id: selectedAccount.id
+        };
+      }
+      // TODO: the object does not exist, how do we handle this scenario?
+    }
+  },
+
   methods: {
     ...mapActions([
-      'addAccount'
+      'addAccount',
+      'updateAccount'
     ]),
 
+    resetAndGo () {
+      this.selectedAccount = {};
+      this.$router.push({ name: 'accountsListView' });
+    },
+
     saveNewAccount () {
-      this.addAccount(this.newAccount).then(() => {
-        this.newAccount = {};
-        this.$router.push({ name: 'accountsListView' });
+      this.addAccount(this.selectedAccount).then(() => {
+        this.resetAndGo();
       });
+    },
+
+    saveAccount () {
+      this.updateAccount(this.selectedAccount).then(() => {
+        this.resetAndGo();
+      });
+    },
+
+    processSave () {
+      this.editing ? this.saveAccount() : this.saveNewAccount();
     }
+  },
+
+  computed: {
+    ...mapGetters([
+      'getAccountById'
+    ])
   }
 };
 </script>

src/app/accounts/routes.js

@@ -9,6 +9,11 @@ export default [
   {
     path: '/accounts/create',
     component: components.CreateEditAccount,
-    name: 'createEditAccount'
+    name: 'createAccount'
+  },
+  {
+    path: '/accounts/:accountId/edit',
+    component: components.CreateEditAccount,
+    name: 'editAccount'
   }
 ];

src/app/accounts/vuex/actions.js

@@ -1,3 +1,11 @@
 export const addAccount = ({ commit }, data) => {
   commit('ADD_ACCOUNT', { account: data });
 };
+
+export const updateAccount = ({ commit }, data) => {
+  commit('UPDATE_ACCOUNT', { account: data });
+};
+
+export const deleteAccount = ({ commit }, data) => {
+  commit('DELETE_ACCOUNT', { account: data });
+};

src/app/accounts/vuex/getters.js

@@ -0,0 +1,5 @@
+export default {
+  getAccountById: (state, getters) => (accountId) => {
+    return state.accounts && accountId in state.accounts ? state.accounts[accountId] : false;
+  }
+};

src/app/accounts/vuex/index.js

@@ -1,4 +1,5 @@
 import * as actions from './actions';
+import getters from './getters';
 import mutations from './mutations';
 
 const state = {
@@ -8,5 +9,6 @@ const state = {
 export default {
   state,
   actions,
-  mutations
+  mutations,
+  getters
 };

src/app/accounts/vuex/mutations.js

@@ -1,8 +1,17 @@
+import Vue from 'vue';
 import { guid } from '../../../utils';
 
 export default {
   ADD_ACCOUNT (state, payload) {
     let id = guid();
     state.accounts[id] = Object.assign({ id: id }, payload.account);
+  },
+
+  UPDATE_ACCOUNT (state, payload) {
+    state.accounts[payload.account.id] = payload.account;
+  },
+
+  DELETE_ACCOUNT (state, payload) {
+    Vue.delete(state.accounts, payload.account.id);
   }
 };