Permalink
Browse files

added vuejs-datepicker, momentjs & now storing/displaying budget date…

…s in a date format
  • Loading branch information...
matthiaswh committed Feb 24, 2017
1 parent e087a45 commit e2c8ae5833e1be61bca726ecd0dc7653018387f0
@@ -16,8 +16,10 @@
"bulma": "^0.3.1",
"localforage": "^1.4.3",
"localforage-startswith": "^1.2.0",
"moment": "^2.17.1",
"vue": "^2.1.10",
"vue-router": "^2.2.0",
"vuejs-datepicker": "^0.6.2",
"vuex": "^2.1.2"
},
"devDependencies": {
@@ -71,7 +71,7 @@ export default {
resetAndGo () {
this.selectedAccount = {};
this.$router.push({ name: 'accountsListView' });
this.$router.push({ name: 'accountsList' });
},
saveNewAccount () {
@@ -7,7 +7,7 @@
<ul>
<li v-for="budget, key in budgets">
{{ budget.month }}
{{ budget.month | moment }}
${{ budget.budgeted }}
${{ budget.spent }}
${{ budget.income }}
@@ -20,9 +20,15 @@
<script>
import { mapState, mapActions } from 'vuex';
import { moment } from '../../../filters';
export default {
name: 'budgets-list',
filters: {
moment
},
mounted () {
this.loadBudgets();
},
@@ -7,17 +7,17 @@
<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">
<datepicker name="month" input-class="input" format="MMMM yyyy" v-model="selectedBudget.month"></datepicker>
</p>
<label for="budgeted" class="label">Budgeted amount</label>
<p class="control">
<input type="text" class="input" name="budgeted" v-model="selectedBudget.budgeted">
$<input type="number" class="input" name="budgeted" v-model="selectedBudget.budgeted">
</p>
<p class="control">
Spent: {{ selectedBudget.spent }}
Spent: ${{ selectedBudget.spent }}
</p>
<p class="control">
Income: {{ selectedBudget.income }}
Income: ${{ selectedBudget.income }}
</p>
<div class="control is-grouped">
<p class="control">
@@ -33,10 +33,15 @@
<script>
import { mapActions, mapGetters } from 'vuex';
import Datepicker from 'vuejs-datepicker';
export default {
name: 'budget-create-edit-view',
components: {
Datepicker
},
data: () => {
return {
selectedBudget: {}
@@ -63,7 +68,7 @@ export default {
resetAndGo () {
this.selectedBudget = {};
// todo: redirect here
this.$router.push({ name: 'budgetsList' });
},
saveNewBudget () {
@@ -0,0 +1,6 @@
import momentjs from 'moment';
export const moment = (date, format) => {
format = format || 'MMMM YYYY';
return momentjs(date).format(format);
};

0 comments on commit e2c8ae5

Please sign in to comment.