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

…s in a date format

package.json

@@ -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": {

src/app/accounts/components/CreateUpdateAccount.vue

@@ -71,7 +71,7 @@ export default {
 
     resetAndGo () {
       this.selectedAccount = {};
-      this.$router.push({ name: 'accountsListView' });
+      this.$router.push({ name: 'accountsList' });
     },
 
     saveNewAccount () {

src/app/budgets/components/BudgetsList.vue

@@ -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();
   },

src/app/budgets/components/CreateUpdateBudget.vue

@@ -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 () {

src/filters.js

@@ -0,0 +1,6 @@
+import momentjs from 'moment';
+
+export const moment = (date, format) => {
+  format = format || 'MMMM YYYY';
+  return momentjs(date).format(format);
+};