Permalink
Browse files

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
  • Loading branch information...
matthiaswh committed Feb 10, 2017
1 parent bb85b37 commit d569fce06a9d0abb840b09938948d6a1e65f0a0b
@@ -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>
@@ -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>
@@ -1 +1,2 @@
export { default as AccountsListView } from './AccountsListView';
export { default as CreateEditAccount } from './CreateEditAccount';
@@ -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'
}
];
@@ -1,3 +1,3 @@
export const doSomething = ({ commit }, data) => {
commit('DO_SOMETHING', { data: data });
export const addAccount = ({ commit }, data) => {
commit('ADD_ACCOUNT', { account: data });
};
@@ -2,7 +2,7 @@ import * as actions from './actions';
import mutations from './mutations';
const state = {
something: {}
accounts: {}
};
export default {
@@ -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);
}
};
View
@@ -0,0 +1,5 @@
export const CATEGORIES = {
'CREDIT_CARD': 'Credit Card',
'CHECKING': 'Checking',
'SAVINGS': 'Savings'
};
View
@@ -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';
View
@@ -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();
};

0 comments on commit d569fce

Please sign in to comment.