Merge stores and handle fetching from router

web/src/main.js

@@ -12,3 +12,12 @@ app.use(router)
 app.use(store)
 app.use(vuetify)
 app.mount('#app')
+
+router.beforeEach(async (to, from, next) => {
+  await store.dispatch("setCurrentBudget", to.params.budgetid);
+  await store.dispatch("setCurrentAccount", {
+        accountid: to.params.accountid,
+        budgetid: to.params.budgetid
+  });
+  next();
+})

web/src/pages/Account.vue

@@ -1,13 +1,5 @@
 <script>
 export default {
-    mounted() {
-        this.$store.dispatch("setCurrentAccount", {budgetid: this.budgetid, accountid: this.accountid})
-    },
-    watch: {
-        accountid () {
-            this.$store.dispatch("setCurrentAccount", {budgetid: this.budgetid, accountid: this.accountid})
-        }
-    },
     props: ["budgetid", "accountid"]
 }
 </script>
@@ -21,9 +13,6 @@ export default {
         <table>
             <tr v-for="transaction in $store.getters.Transactions" class="{{transaction.Date.After now ? 'future' : ''}}">
                 <td style="width: 90px;">{{transaction.Date.substring(0, 10)}}</td>
-                <!--<td>
-                    {{transaction.Account}}
-                </td>-->
                 <td style="max-width: 150px;">
                     {{transaction.Payee}}
                 </td>

web/src/pages/BudgetSidebar.vue

@@ -1,11 +1,7 @@
 <script>
 export default {
   props: ['budgetid', 'accountid'],
-  mounted () {
-    this.$store.dispatch("setCurrentBudget", this.budgetid)
 }
-}
-
 </script>
 
 <template>
@@ -14,14 +10,14 @@ export default {
     {{$store.getters.CurrentBudget.Name}}
   </h1>
   <ul>
-    <li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID">Budget</router-link></li>
+    <li><router-link :to="'/budget/'+budgetid">Budget</router-link></li>
     <li>Reports (Coming Soon)</li>
     <!--<li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/all-accounts'">All Accounts</router-link></li>-->
     <li>
       On-Budget Accounts
       <ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued">
           <li>
-            <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/account/'+account.ID">{{account.Name}}</router-link>
+            <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
             <span>{{account.Balance.Int / 100}}</span>
           </li>
       </ul>
@@ -30,7 +26,7 @@ export default {
       Off-Budget Accounts
       <ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued">
           <li>
-            <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/account/'+account.ID">{{account.Name}}</router-link>
+            <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
             <span>{{account.Balance.Int / 100}}</span>
           </li>
       </ul>

web/src/pages/Dashboard.vue

@@ -3,14 +3,6 @@ import NewBudget from '@/dialogs/NewBudget.vue';
 
 export default {
     props: ["budgetid"],
-    mounted() {
-        //this.$store.dispatch("fetchDashboard");
-    },
-    watch: {
-        budgetid () {
-            this.$store.dispatch("setCurrentBudget", this.budgetid)
-        }
-    },
     components: { NewBudget }
 }
 </script>

web/src/store/index.js

@@ -1,5 +1,4 @@
 import { createStore, createLogger } from 'vuex'
-import dashboard from './modules/dashboard'
 import { LOGIN, LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types'
 
 const store = createStore({
@@ -10,6 +9,12 @@ const store = createStore({
                 User: null
             },
             Budgets: {},
+            CurrentBudgetID: null,
+            Accounts: [],
+            CurrentAccountID: null,
+            Categories: [],
+            Transactions: [],
+            Assignments: []
         }
     },
     mutations: {
@@ -41,6 +46,18 @@ const store = createStore({
         },
         [LOGOUT](state, token) {
             state.Session = { Token: null, User: null }
+        },
+        setCurrentBudgetID(state, budgetid) {
+            state.CurrentBudgetID = budgetid;
+        },
+        setCurrentAccountID(state, accountid) {
+            state.CurrentAccountID = accountid;
+        },
+        setAccounts (state, accounts) {
+            state.Accounts = accounts;
+        },
+        setTransactions(state, transactions){
+            state.Transactions = transactions;
         }
     },
     actions: {
@@ -66,6 +83,56 @@ const store = createStore({
                 headers: getters.AuthHeaders,
                 body: body,
             })
+        },
+        /*async fetchDashboard ({state, commit, rootState}) {
+            const response = await fetch("/api/v1/dashboard", {
+                headers: {
+                    'Authorization': 'Bearer ' + rootState.Session.Token
+                }
+            })
+            const data = await response.json();
+            commit("setBudgets", data.Budgets);
+        },*/
+        async newBudget ({state, commit, dispatch, rootState}, budgetName) {
+            const result = await dispatch("POST", {
+                path: "/budget/new", 
+                body: JSON.stringify({name: budgetName})});
+            const response = await result.json();
+            commit("addBudget", response)
+        },
+        async setCurrentBudget({state, commit, dispatch, rootState}, budgetid) {
+            commit("setCurrentBudgetID", budgetid);
+
+            if (budgetid == null)
+                return
+
+            await dispatch("fetchBudget", budgetid)
+        },
+        async fetchBudget ({state, commit, dispatch, rootState}, budgetid) {
+            const result = await dispatch("GET", {path: "/budget/" + budgetid});
+            const response = await result.json();
+            return commit("setAccounts", response.Accounts);
+        },
+        async fetchAccount ({state, commit, rootState}, accountid) {
+            const result = await fetch("/api/v1/account/" + accountid + "/transactions", {
+                headers: {
+                    'Authorization': 'Bearer ' + rootState.Session.Token
+                }
+            });
+            const response = await result.json();
+            commit("setTransactions", response.Transactions);
+        },
+        async setCurrentAccount({state, commit, dispatch, getters}, {budgetid, accountid}) {
+            if (budgetid == null)
+                return
+
+            await dispatch("fetchBudget", budgetid);
+            commit("setCurrentAccountID", accountid);
+            if (accountid == null)
+                return
+
+            commit(TITLE, getters.CurrentAccount.Name);
+            await dispatch("fetchAccount", accountid)
         }
     },
     getters: {
@@ -76,30 +143,46 @@ const store = createStore({
             return {
                 'Authorization': 'Bearer ' + state.Session.Token
             }
-        }
         },
-    modules: {
+        CurrentBudget(state) {
-        dashboard
+            if(state.CurrentBudgetID == null)
+                return {};
+
+            console.log(state.Budgets, state.CurrentBudgetID);
+            const budgets = state.Budgets.filter(x => x.ID == state.CurrentBudgetID);
+            if(budgets.length > 0)
+                return budgets[0];
+            
+            return {};
+        },
+        Accounts(state) {
+            return state.Accounts || [];
+        },
+        CurrentAccount(state) {
+            if(state.CurrentAccountID == null)
+                return {name: "Not found"};
+            return state.Accounts.filter(x => x.ID == state.CurrentAccountID)[0];
+        },
+        OnBudgetAccounts(state) {
+            return (state.Accounts || []).filter(x => x.OnBudget);
+        },
+        OffBudgetAccounts(state) {
+            return (state.Accounts || []).filter(x => !x.OnBudget);
+        },
+        Transactions(state) {
+            return (state.Transactions || []);
+        }
     },
     plugins: [createLogger()]
 })
 
-store.subscribeAction({
-    after(mutation, state) {
-        switch(mutation.type){
-            case "setCurrentBudget":
-                return store.dispatch("fetchBudget", mutation.payload)
-            case "setCurrentAccount":
-                return store.dispatch("fetchAccount", mutation.payload)
-        }
-    }
-})
-
 store.subscribe((mutation, state) => {
     let persistedState = {
         Session: state.Session,
         Budgets: state.Budgets,
-        CurrentBudget: state.CurrentBudget
+        Accounts: state.Accounts,
+        CurrentBudgetID: state.CurrentBudgetID,
+        CurrentAccountID: state.CurrentAccountID
     }
     localStorage.setItem("store", JSON.stringify(persistedState));
 })

web/src/store/modules/dashboard.js

@@ -1,110 +0,0 @@
-import { TITLE } from "../mutation-types";
-
-const dashboard = {
-    state () {
-        return {
-            CurrentBudget: null,
-            Accounts: [],
-            CurrentAccount: null,
-            Categories: [],
-            Transactions: [],
-            Assignments: []
-        }
-    },
-    mutations: {
-        setCurrentBudget(state, budget) {
-            state.CurrentBudget = budget;
-        },
-        setAccounts (state, accounts) {
-            state.Accounts = accounts;
-        },
-        setCurrentAccount(state, account) {
-            state.CurrentAccount = account;
-        },
-        setTransactions(state, transactions){
-            state.Transactions = transactions;
-        }
-    },
-    getters: {
-        CurrentBudget(state) {
-            return state.CurrentBudget || {};
-        },
-        Accounts(state) {
-            return state.Accounts || [];
-        },
-        CurrentAccount(state) {
-            return state.CurrentAccount || {};
-        },
-        OnBudgetAccounts(state) {
-            return (state.Accounts || []).filter(x => x.OnBudget);
-        },
-        OffBudgetAccounts(state) {
-            return (state.Accounts || []).filter(x => !x.OnBudget);
-        },
-        Transactions(state) {
-            return (state.Transactions || []);
-        }
-    },
-    actions: {
-        /*async fetchDashboard ({state, commit, rootState}) {
-            const response = await fetch("/api/v1/dashboard", {
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.Session.Token
-                }
-            })
-            const data = await response.json();
-            commit("setBudgets", data.Budgets);
-        },*/
-        async newBudget ({state, commit, rootState}, budgetName) {
-            fetch("/api/v1/budget/new", {
-                method: "POST",
-                body: JSON.stringify({name: budgetName}),
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.Session.Token
-                }
-            })
-                .then(x => x.json())
-                .then(x => commit("addBudget", x));
-        },
-        async setCurrentBudget({state, commit, dispatch, rootState}, budgetid) {
-            for (const element of rootState.Budgets) {
-                if(element.ID != budgetid) 
-                    continue
-                
-                commit("setCurrentBudget", element);
-                break
-            }
-        },
-        async fetchBudget ({state, commit, rootState}, budgetid) {
-            const result = await fetch("/api/v1/budget/" + budgetid, {
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.Session.Token
-                }
-            });
-            const response = await result.json();
-            return commit("setAccounts", response.Accounts);
-        },
-        async fetchAccount ({state, commit, rootState}, accountid) {
-            const result = await fetch("/api/v1/account/" + accountid + "/transactions", {
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.Session.Token
-                }
-            });
-            const response = await result.json();
-            return commit("setTransactions", response.Transactions);
-        },
-        async setCurrentAccount({state, commit, dispatch}, {budgetid, accountid}) {
-            await dispatch("fetchBudget", budgetid);
-            for (const element of state.Accounts) {
-                if(element.ID != accountid) 
-                    continue
-                
-                commit("setCurrentAccount", element);
-                commit(TITLE, element.Name);
-                break
-            }
-        }
-    }
-}
-
-export default dashboard