Permalink
Browse files

user can create and edit basic budget objects

  • Loading branch information...
matthiaswh committed Feb 22, 2017
1 parent 23182d1 commit c61314f89b00debf32361e72f3c4134e2c4662cd
@@ -0,0 +1,21 @@
import localforage from 'localforage';
import { processAPIData } from '../../utils';
const BUDGET_NAMESPACE = 'BUDGET-';
export const saveBudget = (budget) => {
return localforage.setItem(
BUDGET_NAMESPACE + budget.id,
budget
).then((value) => {
return value;
}).catch((err) => {
console.log('had a little trouble saving that budget', err);
});
};
export const fetchBudgets = () => {
return localforage.startsWith(BUDGET_NAMESPACE).then((res) => {
return processAPIData(res);
});
};
@@ -0,0 +1,87 @@
<template>
<div id="budget-create-edit-view">
You can create and edit budgets with me, woot!
<form class="form" @submit.prevent="processSave">
<label for="month" class="label">Month</label>
<p class="control">
<input type="text" class="input" name="month" v-model="selectedBudget.month">
</p>
<label for="budgeted" class="label">Budgeted amount</label>
<p class="control">
<input type="text" class="input" name="budgeted" v-model="selectedBudget.budgeted">
</p>
<p class="control">
Spent: {{ selectedBudget.spent }}
</p>
<p class="control">
Income: {{ selectedBudget.income }}
</p>
<div class="control is-grouped">
<p class="control">
<button class="button is-primary">Submit</button>
</p>
</div>
</form>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'budget-create-edit-view',
data: () => {
return {
selectedBudget: {}
};
},
mounted () {
if ('budgetId' in this.$route.params) {
this.loadBudgets().then(() => {
let selectedBudget = this.getBudgetById(this.$route.params.budgetId);
if (selectedBudget) {
this.selectedBudget = Object.assign({}, selectedBudget);
}
});
}
},
methods: {
...mapActions([
'createBudget',
'updateBudget',
'loadBudgets'
]),
resetAndGo () {
this.selectedBudget = {};
// todo: redirect here
},
saveNewBudget () {
this.createBudget(this.selectedBudget).then(() => {
this.resetAndGo();
});
},
saveBudget () {
this.updateBudget(this.selectedBudget).then(() => {
this.resetAndGo();
});
},
processSave () {
this.$route.params.budgetId ? this.saveBudget() : this.saveNewBudget();
}
},
computed: {
...mapGetters([
'getBudgetById'
])
}
};
</script>
@@ -1 +1,2 @@
export { default as BudgetsListView } from './BudgetsList';
export { default as CreateUpdateBudget } from './CreateUpdateBudget';
@@ -4,5 +4,15 @@ export default [
{
path: '/budgets',
component: components.BudgetsListView
},
{
path: '/budgets/create',
component: components.CreateUpdateBudget,
name: 'createBudget'
},
{
path: '/budgets/:budgetId/update',
component: components.CreateUpdateBudget,
name: 'updateBudget'
}
];
@@ -1,3 +1,25 @@
export const doSomething = ({ commit }, data) => {
commit('DO_SOMETHING', { data: data });
import { guid } from '../../../utils';
import { saveBudget, fetchBudgets } from '../api';
export const createBudget = ({ commit }, data) => {
let id = guid();
let budget = Object.assign({ id: id }, data);
commit('CREATE_BUDGET', { budget: budget });
saveBudget(budget).then((value) => {
// we saved the budget, what's next?
});
};
export const updateBudget = ({ commit }, data) => {
commit('UPDATE_BUDGET', { budget: data });
saveBudget(data);
};
export const loadBudgets = (state) => {
if (!state.budgets || Object.keys(state.budgets).length === 0) {
return fetchBudgets().then((res) => {
state.commit('LOAD_BUDGETS', res);
});
}
};
@@ -0,0 +1,5 @@
export default {
getBudgetById: (state, getters) => (budgetId) => {
return state.budgets && budgetId in state.budgets ? state.budgets[budgetId] : false;
}
};
@@ -1,12 +1,14 @@
import * as actions from './actions';
import mutations from './mutations';
import getters from './getters';
const state = {
budgets: []
budgets: {}
};
export default {
state,
actions,
mutations
mutations,
getters
};
@@ -1,5 +1,13 @@
export default {
DO_SOMETHING (state, { data }) {
state.something = data;
CREATE_BUDGET (state, payload) {
state.budgets[payload.budget.id] = payload.budget;
},
UPDATE_BUDGET (state, payload) {
state.budgets[payload.budget.id] = payload.budget;
},
LOAD_BUDGETS (state, payload) {
state.budgets = payload;
}
};

0 comments on commit c61314f

Please sign in to comment.