Split store

web/src/pages/Budgeting.vue

@@ -60,13 +60,11 @@ export default defineComponent({
             <th>Activity</th>
             <th>Available</th>
         </tr>
-        <tr v-for="category in $store.state.Categories">
+        <tr v-for="category in $store.getters.Categories(2022, 1)">
             <td>{{category.Group}}</td>
             <td>{{category.Name}}</td>
-            <td>
+            <td></td>
-            </td>
+            <td></td>
-            <td>
-            </td>
             <td>{{category.AvailableLastMonth}}</td>
             <td>{{category.Assigned}}</td>
             <td>{{category.Activity}}</td>

web/src/router/index.ts

@@ -15,7 +15,7 @@ const routes = [
   { path: "/login", name: "Login", component: Login },
   { path: "/register", name: "Register", component: Register },
   { path: "/budget/:budgetid", name: "Budget", components: { default: Budgeting, sidebar: BudgetSidebar }, props: true },
-  { path: "/budget/:budgetid/:year/:month", name: "Budget", components: { default: Budgeting, sidebar: BudgetSidebar }, props: true },
+  { path: "/budget/:budgetid/:year/:month", name: "Budget with date", components: { default: Budgeting, sidebar: BudgetSidebar }, props: true },
   { path: "/budget/:budgetid/Settings", name: "Budget Settings", components: { default: Settings, sidebar: BudgetSidebar }, props: true },
   { path: "/budget/:budgetid/account/:accountid", name: "Account", components: { default: Account, sidebar: BudgetSidebar }, props: true },
 ]

web/src/store/budget/index.ts

@@ -0,0 +1,117 @@
+import { Module } from "vuex";
+import { FETCH_ACCOUNT, FETCH_BUDGET, SET_CURRENT_ACCOUNT } from "../action-types";
+import { LOGOUT, TITLE } from "../mutation-types";
+
+export interface BudgetState {
+    Accounts: Map<string, Account>,
+    CurrentAccountID?: string,
+    Categories: Map<string, Category>,
+    Transactions: [],
+    Assignments: []
+}
+
+export interface Account {
+    ID: string
+    OnBudget: boolean
+}
+
+export interface Category {
+    Group: string
+    Name: string
+    AvailableLastMonth: number
+    Assigned: number
+    Activity: number
+    Available: number
+}
+
+export const budgetStore : Module<BudgetState, any> = {
+    state: {
+        Accounts: new Map<string, Account>(),
+        CurrentAccountID: undefined,
+        Categories: new Map<string, Category>(),
+        Transactions: [],
+        Assignments: []
+    },
+
+    mutations: {
+        initializeStore(state) {
+            const store = localStorage.getItem("store");
+            if (!store)
+                return;
+
+            const restoredState = JSON.parse(store);
+            if (!restoredState)
+                return;
+
+            state.CurrentAccountID = restoredState.CurrentAccountID;
+
+            for (const account of restoredState.Accounts || []) {
+                state.Accounts.set(account[0], account[1]);
+            }
+        },
+        [LOGOUT](state) {
+            state.Accounts.clear();
+            state.Categories.clear();
+            state.Transactions = [];
+            state.Assignments = [];
+        },
+        addAccount(state, account) {
+            state.Accounts.set(account.ID, account);
+        },
+        addCategory(state, category) {
+            state.Categories.set(category.ID, category);
+        },
+        setCurrentAccountID(state, accountid) {
+            state.CurrentAccountID = accountid;
+        },
+        setTransactions(state, transactions) {
+            state.Transactions = transactions;
+        }
+    },
+
+    getters: {
+        Accounts(state) {
+            return state.Accounts.values();
+        },
+        Categories: (state) => (year : number, month : number) => {
+            return state.Categories.values();
+        },
+        CurrentAccount(state) : Account | undefined {
+            if (state.CurrentAccountID == null)
+                return undefined;
+            return state.Accounts.get(state.CurrentAccountID);
+        },
+        OnBudgetAccounts(state) {
+            return Array.from(state.Accounts.values()).filter(x => x.OnBudget);
+        },
+        OffBudgetAccounts(state) {
+            return Array.from(state.Accounts.values()).filter(x => !x.OnBudget);
+        },
+        Transactions(state) {
+            return (state.Transactions || []);
+        }
+    },
+
+    actions: {
+        async [SET_CURRENT_ACCOUNT]({ state, commit, dispatch, getters }, { budgetid, accountid }) {
+            if (budgetid == null)
+                return
+
+            commit("setCurrentAccountID", accountid);
+            if (accountid == null)
+                return
+
+            commit(TITLE, getters.CurrentAccount.Name);
+            await dispatch(FETCH_ACCOUNT, accountid)
+        },
+        async [FETCH_ACCOUNT]({ 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);
+        },
+    }
+}

web/src/store/index.ts

@@ -2,6 +2,7 @@ import { InjectionKey } from 'vue'
 import { createStore, Store, createLogger } from 'vuex'
 import { LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types'
 import { FETCH_ACCOUNT, FETCH_BUDGET, GET, REGISTER, IMPORT_YNAB, LOGIN, NEW_BUDGET, POST, SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './action-types'
+import { budgetStore } from './budget'
 
 export interface State {
     Session: {
@@ -11,11 +12,6 @@ export interface State {
     ShowMenu?: boolean,
     Budgets: Map<string, Budget>,
     CurrentBudgetID?: string,
-    Accounts: Map<string, Account>,
-    CurrentAccountID?: string,
-    Categories: Array<Category>,
-    Transactions: [],
-    Assignments: []
 }
 
 export interface Budget {
@@ -24,20 +20,6 @@ export interface Budget {
     AvailableBalance: number
 }
 
-export interface Account {
-    ID: string
-    OnBudget: boolean
-}
-
-export interface Category {
-    Group: string
-    Name: string
-    AvailableLastMonth: number
-    Assigned: number
-    Activity: number
-    Available: number
-}
-
 export const key: InjectionKey<Store<State>> = Symbol()
 
 export const store = createStore<State>({
@@ -49,11 +31,6 @@ export const store = createStore<State>({
         ShowMenu: undefined,
         Budgets: new Map<string, Budget>(),
         CurrentBudgetID: undefined,
-        Accounts: new Map<string, Account>(),
-        CurrentAccountID: undefined,
-        Categories: [],
-        Transactions: [],
-        Assignments: []
     },
     mutations: {
         deleteBudget(state: State, budgetid: string) {
@@ -73,15 +50,11 @@ export const store = createStore<State>({
 
             state.Session = restoredState.Session;
             state.CurrentBudgetID = restoredState.CurrentBudgetID;
-            state.CurrentAccountID = restoredState.CurrentAccountID;
             state.ShowMenu = restoredState.ShowMenu;
 
             for (const budget of restoredState.Budgets || []) {
                 state.Budgets.set(budget[0], budget[1]);
             }
-            for (const account of restoredState.Accounts || []) {
-                state.Accounts.set(account[0], account[1]);
-            }
         },
         [TITLE](state, title) {
             document.title = "Budgeteer - " + title;
@@ -98,26 +71,13 @@ export const store = createStore<State>({
         addBudget(state, budget) {
             state.Budgets.set(budget.ID, budget);
         },
-        addAccount(state, account) {
+        [LOGOUT](state) {
-            state.Accounts.set(account.ID, account);
-        },
-        [LOGOUT](state, token) {
             state.Session = { Token: undefined, User: undefined };
             state.Budgets.clear();
-            state.Accounts.clear();
-            state.Categories = [];
-            state.Transactions = [];
-            state.Assignments = [];
         },
         setCurrentBudgetID(state, budgetid) {
             state.CurrentBudgetID = budgetid;
         },
-        setCurrentAccountID(state, accountid) {
-            state.CurrentAccountID = accountid;
-        },
-        setTransactions(state, transactions) {
-            state.Transactions = transactions;
-        }
     },
     actions: {
         [LOGIN]({ state, commit }, login) {
@@ -176,36 +136,15 @@ export const store = createStore<State>({
             for (const account of response.Accounts || []) {
                 commit("addAccount", account);
             }
+            for (const category of response.Categories || []) {
+                commit("addCategory", category);
+            }
         },
-        async [FETCH_ACCOUNT]({ 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 [SET_CURRENT_ACCOUNT]({ state, commit, dispatch, getters }, { budgetid, accountid }) {
-            if (budgetid == null)
-                return
-
-            await dispatch(FETCH_BUDGET, budgetid);
-            commit("setCurrentAccountID", accountid);
-            if (accountid == null)
-                return
-
-            commit(TITLE, getters.CurrentAccount.Name);
-            await dispatch(FETCH_ACCOUNT, accountid)
-        }
     },
     getters: {
         Budgets(state) {
             return state.Budgets.values();
         },
-        Accounts(state) {
-            return state.Accounts.values();
-        },
         AuthHeaders(state) {
             return {
                 'Authorization': 'Bearer ' + state.Session.Token
@@ -229,31 +168,20 @@ export const store = createStore<State>({
                 return currentBudget.Name;
             return "";
         },
-        CurrentAccount(state) : Account | undefined {
-            if (state.CurrentAccountID == null)
-                return undefined;
-            return state.Accounts.get(state.CurrentAccountID);
-        },
-        OnBudgetAccounts(state) {
-            return Array.from(state.Accounts.values()).filter(x => x.OnBudget);
-        },
-        OffBudgetAccounts(state) {
-            return Array.from(state.Accounts.values()).filter(x => !x.OnBudget);
-        },
-        Transactions(state) {
-            return (state.Transactions || []);
-        }
     },
-    plugins: [createLogger()]
+    plugins: [createLogger()],
+    modules: {
+        budget: budgetStore
+    }
 })
 
 store.subscribe((mutation, state) => {
     let persistedState = {
         Session: state.Session,
         Budgets: [...state.Budgets],
-        Accounts: [...state.Accounts],
+//        Accounts: [...state.Accounts],
         CurrentBudgetID: state.CurrentBudgetID,
-        CurrentAccountID: state.CurrentAccountID,
+        //CurrentAccountID: state.CurrentAccountID,
         ShowMenu: state.ShowMenu
     }
     localStorage.setItem("store", JSON.stringify(persistedState));