Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
user can delete and edit accounts
  • Loading branch information
matthiaswh committed Feb 14, 2017
1 parent d569fce commit 6c3e206
Show file tree
Hide file tree
Showing 8 changed files with 96 additions and 14 deletions.
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -5,3 +5,4 @@ npm-debug.log
test/unit/coverage
test/e2e/reports
selenium-debug.log
.idea/
18 changes: 16 additions & 2 deletions src/app/accounts/components/AccountsListView.vue
Expand Up @@ -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 {
Expand All @@ -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
Expand Down
58 changes: 48 additions & 10 deletions src/app/accounts/components/CreateEditAccount.vue
Expand Up @@ -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">
Expand All @@ -34,7 +35,7 @@
</template>

<script>
import { mapActions } from 'vuex';
import { mapActions, mapGetters } from 'vuex';
import { CATEGORIES } from '../../../consts';
export default {
Expand All @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion src/app/accounts/routes.js
Expand Up @@ -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'
}
];
8 changes: 8 additions & 0 deletions 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 });
};
5 changes: 5 additions & 0 deletions 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;
}
};
4 changes: 3 additions & 1 deletion 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 = {
Expand All @@ -8,5 +9,6 @@ const state = {
export default {
state,
actions,
mutations
mutations,
getters
};
9 changes: 9 additions & 0 deletions 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);
}
};

0 comments on commit 6c3e206

Please sign in to comment.