Permalink
Browse files

user can edit budget categories

  • Loading branch information...
matthiaswh committed Apr 11, 2017
1 parent f7bd25d commit 0e8972c5e95146c7c320e37f2c1684b1e9ee1244
@@ -54,7 +54,7 @@ export default {
background-color: #02212B;
.brand {
font-size: 36px;
font-size: 24px;
color: #ffffff;
margin: 40px 0 20px 20px;
vertical-align: top;
@@ -0,0 +1,23 @@
<template>
<tr class="budget-item">
<td><span class="subtitle is-5">{{ getCategoryById(value.category).name }}</span></td>
<td><span class="subtitle is-5">${{ value.budgeted }}</span></td>
<td><span class="subtitle is-5">${{ value.spent }}</span></td>
<td><span class="subtitle is-5">${{ value.budgeted - value.spent }}</span></td>
<td><a class='button' @click="$emit('edit-budget-category')">Edit</a></td>
</tr>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'budget-item',
props: ['value'],
computed: {
...mapGetters(['getCategoryById'])
}
};
</script>
@@ -58,15 +58,20 @@
<th>Budgeted</th>
<th>Spent</th>
<th>Remaining</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="bc in selectedBudget.budgetCategories">
<td><span class="subtitle is-5">{{ getCategoryById(bc.category).name }}</span></td>
<td><span class="subtitle is-5">${{ bc.budgeted }}</span></td>
<td><span class="subtitle is-5">${{ bc.spent }}</span></td>
<td><span class="subtitle is-5">${{ bc.budgeted - bc.spent }}</span></td>
</tr>
<template
v-for="value, key in selectedBudget.budgetCategories"
>
<component
:is="budgetCategoryComponent(value)"
v-model="value"
v-on:update-budget-category="saveBudgetCategory"
v-on:edit-budget-category="activeBudgetCategory = value"
></component>
</template>
<CreateUpdateBudgetCategory v-on:add-budget-category="addBudgetCategory"></CreateUpdateBudgetCategory>
</tbody>
<tfoot>
@@ -75,6 +80,7 @@
<td>${{ selectedBudget.budgeted }}</td>
<td>${{ selectedBudget.spent }}</td>
<td>${{ selectedBudget.budgeted - selectedBudget.spent }}</td>
<td></td>
</tr>
</tfoot>
</table>
@@ -90,19 +96,22 @@ import { mapActions, mapGetters } from 'vuex';
import Datepicker from 'vuejs-datepicker';
import CreateUpdateBudgetCategory from './CreateUpdateBudgetCategory';
import BudgetCategory from './BudgetCategory';
export default {
name: 'budget-create-edit-view',
components: {
Datepicker,
CreateUpdateBudgetCategory
CreateUpdateBudgetCategory,
BudgetCategory
},
data: () => {
return {
selectedBudget: {},
editing: false
editing: false,
activeBudgetCategory: null
};
},
@@ -123,7 +132,8 @@ export default {
'createBudget',
'updateBudget',
'loadBudgets',
'createBudgetCategory'
'createBudgetCategory',
'updateBudgetCategory'
]),
resetAndGo () {
@@ -164,6 +174,21 @@ export default {
}).then(() => {
this.selectedBudget = Object.assign({}, this.getBudgetById(this.$route.params.budgetId));
});
},
saveBudgetCategory (budgetCategory) {
// format it how our action expects
budgetCategory.category = budgetCategory.category.id;
this.updateBudgetCategory({
budget: this.selectedBudget,
budgetCategory: budgetCategory
}).then(() => {
this.selectedBudget = Object.assign({}, this.getBudgetById(this.$route.params.budgetId));
});
},
budgetCategoryComponent (budgetCategory) {
return this.activeBudgetCategory && this.activeBudgetCategory === budgetCategory ? 'create-update-budget-category' : 'budget-category';
}
},
@@ -27,8 +27,12 @@
<span class="subtitle is-5">${{ budgetCategory.spent }}</span>
</td>
<td></td>
<td>
<a class="button is-primary" @click.prevent="processSave">Add</a>
<a class="button is-primary" @click.prevent="processSave">
{{ editing ? 'Save' : 'Add' }}
</a>
</td>
</tr>
@@ -46,14 +50,27 @@ export default {
Multiselect
},
props: [
'value'
],
data: () => {
return {
budgetCategory: {}
budgetCategory: {},
editing: false
};
},
mounted () {
this.loadCategories();
if (this.value) {
this.budgetCategory = Object.assign({}, this.value);
// we need the selected category name and ID, but the budgetCategory object only holds the ID by default
this.budgetCategory.category = this.getCategoryById(this.budgetCategory.category);
this.editing = true;
}
},
methods: {
@@ -63,8 +80,14 @@ export default {
]),
processSave () {
this.$emit('add-budget-category', this.budgetCategory);
this.budgetCategory = {};
// we are passing the saves up to the budget because this budget
// category view isn't aware of its parent budget object
if (this.editing) {
this.$emit('update-budget-category', this.budgetCategory);
} else {
this.$emit('add-budget-category', this.budgetCategory);
this.budgetCategory = {};
}
},
handleCreateCategory (category) {
@@ -84,7 +107,8 @@ export default {
computed: {
...mapGetters([
'getCategorySelectList'
'getCategorySelectList',
'getCategoryById'
])
}
};
@@ -96,3 +96,21 @@ export const createBudgetCategory = ({ commit, dispatch, getters }, data) => {
value: budgetCategory.budgeted
});
};
export const updateBudgetCategory = ({ commit, dispatch, getters }, data) => {
let newBudget = data.budgetCategory.budgeted;
let oldBudget = getters.getBudgetCategoryById(data.budget.id, data.budgetCategory.id).budgeted;
if (newBudget !== oldBudget) {
dispatch('updateBudgetBalance', {
budget: data.budget,
param: 'budgeted',
value: newBudget - oldBudget
});
}
commit('UPDATE_BUDGET_CATEGORY', data);
// save using the budget in our store
saveBudget(getters.getBudgetById(data.budget.id));
};
@@ -9,5 +9,13 @@ export default {
getCategorySelectList: (state, getters) => {
return state.categories && Object.keys(state.categories).length > 0 ? Object.values(state.categories) : [];
},
getBudgetCategoryById: (state, getters) => (budgetId, budgetCategoryId) => {
return state.budgets && budgetId in state.budgets
? state.budgets[budgetId].budgetCategories && budgetCategoryId in state.budgets[budgetId].budgetCategories
? state.budgets[budgetId].budgetCategories[budgetCategoryId]
: false
: false;
}
};
@@ -39,5 +39,9 @@ export default {
CREATE_BUDGET_CATEGORY (state, payload) {
Vue.set(state.budgets[payload.budget.id].budgetCategories, payload.budgetCategory.id, payload.budgetCategory);
},
UPDATE_BUDGET_CATEGORY (state, payload) {
state.budgets[payload.budget.id].budgetCategories[payload.budgetCategory.id] = payload.budgetCategory;
}
};

0 comments on commit 0e8972c

Please sign in to comment.