user can create and edit basic budget objects

src/app/budgets/api.js

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

src/app/budgets/components/CreateUpdateBudget.vue

@@ -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>

src/app/budgets/components/index.js

@@ -1 +1,2 @@
 export { default as BudgetsListView } from './BudgetsList';
+export { default as CreateUpdateBudget } from './CreateUpdateBudget';

src/app/budgets/routes.js

@@ -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'
   }
 ];

src/app/budgets/vuex/actions.js

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

src/app/budgets/vuex/getters.js

@@ -0,0 +1,5 @@
+export default {
+  getBudgetById: (state, getters) => (budgetId) => {
+    return state.budgets && budgetId in state.budgets ? state.budgets[budgetId] : false;
+  }
+};

src/app/budgets/vuex/index.js

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

src/app/budgets/vuex/mutations.js

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