Skip to content

Commit 6c3e206

Browse files
committed
user can delete and edit accounts
1 parent d569fce commit 6c3e206

File tree

8 files changed

+96
-14
lines changed

8 files changed

+96
-14
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ npm-debug.log
55
test/unit/coverage
66
test/e2e/reports
77
selenium-debug.log
8+
.idea/

src/app/accounts/components/AccountsListView.vue

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,22 @@
22
<div id="accounts-list-view">
33
I'm a list of accounts!
44

5-
<router-link :to="{ name: 'createEditAccount' }">Add an account</router-link>
5+
<router-link :to="{ name: 'createAccount' }">Add an account</router-link>
66

77
<ul>
88
<li v-for="account, key in accounts">
99
{{ account.name }}
1010
<span class="tag is-small is-info">{{ categories[account.category] }}</span>
1111
${{ account.balance }}
12+
<a @click="confirmDeleteAccount(account)">Delete</a>
13+
<router-link :to="{ name: 'editAccount', params: { accountId: account.id } }">Edit</router-link>
1214
</li>
1315
</ul>
1416
</div>
1517
</template>
1618

1719
<script>
18-
import { mapState } from 'vuex';
20+
import { mapState, mapActions } from 'vuex';
1921
import { CATEGORIES } from '../../../consts';
2022
2123
export default {
@@ -27,6 +29,18 @@ export default {
2729
};
2830
},
2931
32+
methods: {
33+
...mapActions([
34+
'deleteAccount'
35+
]),
36+
37+
confirmDeleteAccount (account) {
38+
if (confirm(`Are you sure you want to delete ${account.name}?`)) {
39+
this.deleteAccount(account);
40+
}
41+
}
42+
},
43+
3044
computed: {
3145
...mapState({
3246
'accounts': state => state.accounts.accounts

src/app/accounts/components/CreateEditAccount.vue

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,23 @@
44

55
<router-link :to="{ name: 'accountsListView' }">View all accounts</router-link>
66

7-
<form class="form" @submit.prevent="saveNewAccount">
7+
<form class="form" @submit.prevent="processSave">
88
<label for="name" class="label">Name</label>
99
<p class="control">
10-
<input type="text" class="input" name="name" v-model="newAccount.name">
10+
<input type="text" class="input" name="name" v-model="selectedAccount.name">
1111
</p>
1212
<label for="category" class="label">Category</label>
1313
<p class="control">
1414
<span class="select">
15-
<select name="category" v-model="newAccount.category">
15+
<select name="category" v-model="selectedAccount.category">
1616
<option v-for="value, key in categories" :value="key">{{ value }}</option>
1717
</select>
1818
</span>
1919
</p>
2020
<label for="balance" class="label">Balance</label>
2121
<p class="control">
22-
<input type="text" class="input" name="balance" v-model="newAccount.balance">
22+
<input type="text" class="input" name="balance" v-model="selectedAccount.balance" v-if="!editing">
23+
<span v-else>To update your balance, add a balance adjusting transaction.</span>
2324
</p>
2425
<div class="control is-grouped">
2526
<p class="control">
@@ -34,7 +35,7 @@
3435
</template>
3536

3637
<script>
37-
import { mapActions } from 'vuex';
38+
import { mapActions, mapGetters } from 'vuex';
3839
import { CATEGORIES } from '../../../consts';
3940
4041
export default {
@@ -43,21 +44,58 @@ export default {
4344
data: () => {
4445
return {
4546
categories: CATEGORIES,
46-
newAccount: {}
47+
selectedAccount: {},
48+
editing: false
4749
};
4850
},
4951
52+
mounted () {
53+
if ('accountId' in this.$route.params) {
54+
let selectedAccount = this.getAccountById(this.$route.params.accountId);
55+
if (selectedAccount) {
56+
this.editing = true;
57+
this.selectedAccount = {
58+
name: selectedAccount.name,
59+
category: selectedAccount.category,
60+
id: selectedAccount.id
61+
};
62+
}
63+
// TODO: the object does not exist, how do we handle this scenario?
64+
}
65+
},
66+
5067
methods: {
5168
...mapActions([
52-
'addAccount'
69+
'addAccount',
70+
'updateAccount'
5371
]),
5472
73+
resetAndGo () {
74+
this.selectedAccount = {};
75+
this.$router.push({ name: 'accountsListView' });
76+
},
77+
5578
saveNewAccount () {
56-
this.addAccount(this.newAccount).then(() => {
57-
this.newAccount = {};
58-
this.$router.push({ name: 'accountsListView' });
79+
this.addAccount(this.selectedAccount).then(() => {
80+
this.resetAndGo();
5981
});
82+
},
83+
84+
saveAccount () {
85+
this.updateAccount(this.selectedAccount).then(() => {
86+
this.resetAndGo();
87+
});
88+
},
89+
90+
processSave () {
91+
this.editing ? this.saveAccount() : this.saveNewAccount();
6092
}
93+
},
94+
95+
computed: {
96+
...mapGetters([
97+
'getAccountById'
98+
])
6199
}
62100
};
63101
</script>

src/app/accounts/routes.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ export default [
99
{
1010
path: '/accounts/create',
1111
component: components.CreateEditAccount,
12-
name: 'createEditAccount'
12+
name: 'createAccount'
13+
},
14+
{
15+
path: '/accounts/:accountId/edit',
16+
component: components.CreateEditAccount,
17+
name: 'editAccount'
1318
}
1419
];

src/app/accounts/vuex/actions.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
export const addAccount = ({ commit }, data) => {
22
commit('ADD_ACCOUNT', { account: data });
33
};
4+
5+
export const updateAccount = ({ commit }, data) => {
6+
commit('UPDATE_ACCOUNT', { account: data });
7+
};
8+
9+
export const deleteAccount = ({ commit }, data) => {
10+
commit('DELETE_ACCOUNT', { account: data });
11+
};

src/app/accounts/vuex/getters.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
getAccountById: (state, getters) => (accountId) => {
3+
return state.accounts && accountId in state.accounts ? state.accounts[accountId] : false;
4+
}
5+
};

src/app/accounts/vuex/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as actions from './actions';
2+
import getters from './getters';
23
import mutations from './mutations';
34

45
const state = {
@@ -8,5 +9,6 @@ const state = {
89
export default {
910
state,
1011
actions,
11-
mutations
12+
mutations,
13+
getters
1214
};

src/app/accounts/vuex/mutations.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1+
import Vue from 'vue';
12
import { guid } from '../../../utils';
23

34
export default {
45
ADD_ACCOUNT (state, payload) {
56
let id = guid();
67
state.accounts[id] = Object.assign({ id: id }, payload.account);
8+
},
9+
10+
UPDATE_ACCOUNT (state, payload) {
11+
state.accounts[payload.account.id] = payload.account;
12+
},
13+
14+
DELETE_ACCOUNT (state, payload) {
15+
Vue.delete(state.accounts, payload.account.id);
716
}
817
};

0 commit comments

Comments
 (0)