Convert frontend to Vue #3
| @@ -1,74 +0,0 @@ | |||||||
| import { TITLE } from "../mutation-types"; |  | ||||||
|  |  | ||||||
| const budget = { |  | ||||||
|     state () { |  | ||||||
|         return { |  | ||||||
|                 Accounts: [], |  | ||||||
|                 CurrentAccount: null, |  | ||||||
|                 Categories: [], |  | ||||||
|                 Transactions: [], |  | ||||||
|                 Assignments: [] |  | ||||||
|         } |  | ||||||
|     }, |  | ||||||
|     mutations: { |  | ||||||
|         setAccounts (state, accounts) { |  | ||||||
|             state.Accounts = accounts; |  | ||||||
|         }, |  | ||||||
|         setCurrentAccount(state, account) { |  | ||||||
|             state.CurrentAccount = account; |  | ||||||
|         }, |  | ||||||
|         setTransactions(state, transactions){ |  | ||||||
|             state.Transactions = transactions; |  | ||||||
|         } |  | ||||||
|     }, |  | ||||||
|     getters: { |  | ||||||
|         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 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 budget |  | ||||||
| @@ -3,6 +3,11 @@ const dashboard = { | |||||||
|         return { |         return { | ||||||
|             Budgets: [], |             Budgets: [], | ||||||
|             CurrentBudget: null, |             CurrentBudget: null, | ||||||
|  |             Accounts: [], | ||||||
|  |             CurrentAccount: null, | ||||||
|  |             Categories: [], | ||||||
|  |             Transactions: [], | ||||||
|  |             Assignments: [] | ||||||
|         } |         } | ||||||
|     }, |     }, | ||||||
|     mutations: { |     mutations: { | ||||||
| @@ -14,6 +19,15 @@ const dashboard = { | |||||||
|         }, |         }, | ||||||
|         setCurrentBudget(state, budget) { |         setCurrentBudget(state, budget) { | ||||||
|             state.CurrentBudget = budget; |             state.CurrentBudget = budget; | ||||||
|  |         }, | ||||||
|  |         setAccounts (state, accounts) { | ||||||
|  |             state.Accounts = accounts; | ||||||
|  |         }, | ||||||
|  |         setCurrentAccount(state, account) { | ||||||
|  |             state.CurrentAccount = account; | ||||||
|  |         }, | ||||||
|  |         setTransactions(state, transactions){ | ||||||
|  |             state.Transactions = transactions; | ||||||
|         } |         } | ||||||
|     }, |     }, | ||||||
|     getters: { |     getters: { | ||||||
| @@ -22,6 +36,21 @@ const dashboard = { | |||||||
|         }, |         }, | ||||||
|         CurrentBudget(state) { |         CurrentBudget(state) { | ||||||
|             return state.CurrentBudget || {}; |             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: { |     actions: { | ||||||
| @@ -54,6 +83,35 @@ const dashboard = { | |||||||
|                 commit("setCurrentBudget", element); |                 commit("setCurrentBudget", element); | ||||||
|                 break |                 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 | ||||||
|  |             } | ||||||
|         } |         } | ||||||
|     } |     } | ||||||
| } | } | ||||||
|   | |||||||
| @@ -1,6 +1,5 @@ | |||||||
| import { createStore } from 'vuex' | import { createStore } from 'vuex' | ||||||
| import dashboard from './dashboard/index' | import dashboard from './dashboard/index' | ||||||
| import budget from './budget/index' |  | ||||||
| import { LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types' | import { LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types' | ||||||
|  |  | ||||||
| const store = createStore({ | const store = createStore({ | ||||||
| @@ -14,7 +13,7 @@ const store = createStore({ | |||||||
|     }, |     }, | ||||||
|     mutations: { |     mutations: { | ||||||
|         initializeStore(state) { |         initializeStore(state) { | ||||||
|             let store = localStorage.getItem("store"); |             const store = localStorage.getItem("store"); | ||||||
|             if(store){ |             if(store){ | ||||||
|                 this.replaceState( |                 this.replaceState( | ||||||
|                     Object.assign(state, JSON.parse(store)) |                     Object.assign(state, JSON.parse(store)) | ||||||
| @@ -32,8 +31,7 @@ const store = createStore({ | |||||||
|         } |         } | ||||||
|     }, |     }, | ||||||
|     modules: { |     modules: { | ||||||
|         dashboard, |         dashboard | ||||||
|         budget |  | ||||||
|     } |     } | ||||||
| }) | }) | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user