user can now create accounts and view the list of all accounts - adde…

…d action, mutation, view, and form for adding an account; also added basic navigation between list and create accounts

src/app/accounts/components/AccountsListView.vue

@@ -1,12 +1,37 @@
 <template>
   <div id="accounts-list-view">
     I'm a list of accounts!
+
+    <router-link :to="{ name: 'createEditAccount' }">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 }}
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import { CATEGORIES } from '../../../consts';
+
 export default {
-  name: 'accounts-list-view'
+  name: 'accounts-list-view',
+
+  data () {
+    return {
+      categories: CATEGORIES
+    };
+  },
+
+  computed: {
+    ...mapState({
+      'accounts': state => state.accounts.accounts
+    })
+  }
 };
 </script>
 

src/app/accounts/components/CreateEditAccount.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="accounts-create-edit-view">
+    You can create and edit accounts with me, yippee!
+
+    <router-link :to="{ name: 'accountsListView' }">View all accounts</router-link>
+
+    <form class="form" @submit.prevent="saveNewAccount">
+      <label for="name" class="label">Name</label>
+      <p class="control">
+        <input type="text" class="input" name="name" v-model="newAccount.name">
+      </p>
+      <label for="category" class="label">Category</label>
+      <p class="control">
+        <span class="select">
+          <select name="category" v-model="newAccount.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">
+      </p>
+      <div class="control is-grouped">
+        <p class="control">
+          <button class="button is-primary">Submit</button>
+        </p>
+        <p class="control">
+          <router-link :to="{ name: 'accountsListView' }"><button class="button is-link">Cancel</button></router-link>
+        </p>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import { CATEGORIES } from '../../../consts';
+
+export default {
+  name: 'accounts-create-edit-view',
+
+  data: () => {
+    return {
+      categories: CATEGORIES,
+      newAccount: {}
+    };
+  },
+
+  methods: {
+    ...mapActions([
+      'addAccount'
+    ]),
+
+    saveNewAccount () {
+      this.addAccount(this.newAccount).then(() => {
+        this.newAccount = {};
+        this.$router.push({ name: 'accountsListView' });
+      });
+    }
+  }
+};
+</script>
+
+<style scoped lang='scss'>
+#accounts-create-edit-view {
+}
+</style>

src/app/accounts/components/index.js

@@ -1 +1,2 @@
 export { default as AccountsListView } from './AccountsListView';
+export { default as CreateEditAccount } from './CreateEditAccount';

src/app/accounts/routes.js

@@ -3,6 +3,12 @@ import * as components from './components';
 export default [
   {
     path: '/',
-    component: components.AccountsListView
+    component: components.AccountsListView,
+    name: 'accountsListView'
+  },
+  {
+    path: '/accounts/create',
+    component: components.CreateEditAccount,
+    name: 'createEditAccount'
   }
 ];

src/app/accounts/vuex/actions.js

@@ -1,3 +1,3 @@
-export const doSomething = ({ commit }, data) => {
-  commit('DO_SOMETHING', { data: data });
+export const addAccount = ({ commit }, data) => {
+  commit('ADD_ACCOUNT', { account: data });
 };

src/app/accounts/vuex/index.js

@@ -2,7 +2,7 @@ import * as actions from './actions';
 import mutations from './mutations';
 
 const state = {
-  something: {}
+  accounts: {}
 };
 
 export default {

src/app/accounts/vuex/mutations.js

@@ -1,5 +1,8 @@
+import { guid } from '../../../utils';
+
 export default {
-  DO_SOMETHING (state, { data }) {
-    state.something = data;
+  ADD_ACCOUNT (state, payload) {
+    let id = guid();
+    state.accounts[id] = Object.assign({ id: id }, payload.account);
   }
 };

src/consts.js

@@ -0,0 +1,5 @@
+export const CATEGORIES = {
+  'CREDIT_CARD': 'Credit Card',
+  'CHECKING': 'Checking',
+  'SAVINGS': 'Savings'
+};

src/main.js

@@ -1,6 +1,8 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
+import 'bulma/css/bulma.css';
+
 import { App } from './app';
 import router from './router';
 import store from './store';

src/utils.js

@@ -0,0 +1,10 @@
+// thanks to http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
+export const guid = function () {
+  function s4 () {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
+    s4() + '-' + s4() + s4() + s4();
+};