dates are stored in proper json format and re-objectified when fetche…

…d; reject the user if they try to save two budgets with the same month

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);
    });
  }
};