budgeteer/web/src/store/index.js

import { createStore, createLogger } from 'vuex'
import { LOGIN, LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types'

const store = createStore({
    state () {
        return {
            Session: {
                Token: null,
                User: null
            },
            ShowMenu: null,
            Budgets: {},
            CurrentBudgetID: null,
            Accounts: [],
            CurrentAccountID: null,
            Categories: [],
            Transactions: [],
            Assignments: []
        }
    },
    mutations: {
        toggleMenu(state) {
            state.ShowMenu = !state.ShowMenu;
        },
        initializeStore(state) {
            const store = localStorage.getItem("store");
            if(store){
                this.replaceState(
                    Object.assign(state, JSON.parse(store))
                );
            }
        },
        [TITLE](state, title) {
            document.title = "Budgeteer - " + title;
        },
        [LOGIN_SUCCESS](state, result) {
            state.Session = {
                User: result.User,
                Token: result.Token
            };
            for (const budget of result.Budgets) {
                state.Budgets[budget.ID] = budget 
            }
        },
        setBudgets (state, budgets) {
            state.Budgets = budgets;
        },
        addBudget(state, budget) {
            state.Budgets.push(budget);
        },
        [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: {
        [LOGIN]({state, commit}, login) {
            return fetch("/api/v1/user/login", {method: "POST", body: JSON.stringify(login)})
                .then(x => x.json())
                .then(x => {
                    commit(LOGIN_SUCCESS, x);
                })
        },
        YNAB({getters, dispatch}, formData) {
            return dispatch("POST", {path: "/budget/"+getters.CurrentBudget.ID+"/import/ynab", body: formData});
        },
        GET({getters}, {path}){
            return fetch("/api/v1" + path, {
                headers: getters.AuthHeaders,
            })
        },
        POST({getters}, {path, body}){
            return fetch("/api/v1" + path, {
                method: "POST",
                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: {
        Budgets(state) {
            return state.Budgets || [];
        },
        AuthHeaders(state) {
            return {
                'Authorization': 'Bearer ' + state.Session.Token
            }
        },
        CurrentBudget(state) {
            if(state.CurrentBudgetID == null)
                return {};

            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.subscribe((mutation, state) => {
    let persistedState = {
        Session: state.Session,
        Budgets: state.Budgets,
        Accounts: state.Accounts,
        CurrentBudgetID: state.CurrentBudgetID,
        CurrentAccountID: state.CurrentAccountID,
        ShowMenu: state.ShowMenu
    }
    localStorage.setItem("store", JSON.stringify(persistedState));
})

export default store