dates are stored in proper json format and re-objectified when fetched; reject the user if they try to save two budgets with the same month

Author: matthiaswh

src/app/budgets/api.js

@@ -4,6 +4,9 @@ import { processAPIData } from '../../utils';
 const BUDGET_NAMESPACE = 'BUDGET-';
 
 export const saveBudget = (budget) => {
+  budget = Object.assign({}, budget); // clone our object so we can manipulate it before saving
+  budget.month = budget.month.toJSON();
+
   return localforage.setItem(
     BUDGET_NAMESPACE + budget.id,
     budget
@@ -16,6 +19,11 @@ export const saveBudget = (budget) => {
 
 export const fetchBudgets = () => {
   return localforage.startsWith(BUDGET_NAMESPACE).then((res) => {
-    return processAPIData(res);
+    let budgets = processAPIData(res);
+    Object.keys(budgets).forEach((o) => {
+      budgets[o].month = new Date(budgets[o].month);
+    });
+
+    return budgets;
   });
 };

src/app/budgets/components/BudgetsList.vue

@@ -6,7 +6,7 @@
     <router-link :to="{ name: 'accountsList' }">View accounts</router-link>
 
     <ul>
-      <li v-for="budget, key in budgets">
+      <li v-for="budget in sortedBudgets">
         {{ budget.month | moment }}
         ${{ budget.budgeted }}
         ${{ budget.spent }}
@@ -42,7 +42,17 @@ export default {
   computed: {
     ...mapState({
       'budgets': state => state.budgets.budgets
-    })
+    }),
+
+    sortedBudgets () {
+      let sortedKeys = Object.keys(this.budgets).sort((a, b) => {
+        return this.budgets[b].month - this.budgets[a].month;
+      });
+
+      return sortedKeys.map((key) => {
+        return this.budgets[key];
+      });
+    }
   }
 };
 </script>

src/app/budgets/components/CreateUpdateBudget.vue

@@ -74,12 +74,16 @@ export default {
     saveNewBudget () {
       this.createBudget(this.selectedBudget).then(() => {
         this.resetAndGo();
+      }).catch((err) => {
+        alert(err);
       });
     },
 
     saveBudget () {
       this.updateBudget(this.selectedBudget).then(() => {
         this.resetAndGo();
+      }).catch((err) => {
+        alert(err);
       });
     },
 

src/app/budgets/vuex/actions.js

@@ -1,7 +1,23 @@
+import moment from 'moment';
 import { guid } from '../../../utils';
 import { saveBudget, fetchBudgets } from '../api';
 
-export const createBudget = ({ commit }, data) => {
+const verifyUniqueMonth = (budgets, budget) => {
+  // accepts a list of budgets, and the budget being updated
+  // returns true if there is no date collision
+  // returns false if a budget already exists in budgets with the same month as budget
+  let month = moment(budget.month);
+  return !Object.values(budgets).find((o) => {
+    if (o.id === budget.id) return false; // it's the budget we're examining, let's not check if the months are the same
+    return month.isSame(o.month, 'month');
+  });
+};
+
+export const createBudget = ({ commit, state }, data) => {
+  if (!verifyUniqueMonth(state.budgets, data)) {
+    return Promise.reject(new Error('A budget already exists for this month.'));
+  }
+
   let id = guid();
   let budget = Object.assign({ id: id }, data);
 
@@ -11,15 +27,19 @@ export const createBudget = ({ commit }, data) => {
   });
 };
 
-export const updateBudget = ({ commit }, data) => {
+export const updateBudget = ({ commit, state }, data) => {
+  if (!verifyUniqueMonth(state.budgets, data)) {
+    return Promise.reject(new Error('A budget already exists for this month.'));
+  }
+
   commit('UPDATE_BUDGET', { budget: data });
   saveBudget(data);
 };
 
-export const loadBudgets = (state) => {
+export const loadBudgets = ({ state, commit }) => {
   if (!state.budgets || Object.keys(state.budgets).length === 0) {
     return fetchBudgets().then((res) => {
-      state.commit('LOAD_BUDGETS', res);
+      commit('LOAD_BUDGETS', res);
     });
   }
 };