jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Merge stores and handle fetching from router

Browse Source
This commit is contained in:
Jan Bader 2022-01-29 23:26:57 +00:00
parent 6f7aa28d22
commit e8dbb54086
6 changed files with 111 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/main.js
View File

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

11
web/src/pages/Account.vue
View File

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

10
web/src/pages/BudgetSidebar.vue
View File

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

8
web/src/pages/Dashboard.vue
View File

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

115
web/src/store/index.js
View File

@ -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: {
dashboard
CurrentBudget(state) {
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));
})

110
web/src/store/modules/dashboard.js
View File

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