user can delete and edit accounts

.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);
  }
};