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

Implement account-view

Browse Source
This commit is contained in:
Jan Bader 2022-01-25 19:03:58 +00:00
parent e184ef933f
commit 458f4f0e8f
5 changed files with 87 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/pages/Account.vue Normal file
View File

@ -0,0 +1,39 @@
<script>
export default {
mounted() {
this.$store.dispatch("setCurrentAccount", {budgetid: this.budgetid, accountid: this.accountid})
},
props: ["budgetid", "accountid"]
}
</script>
<template>
<v-container>
<table class="container col-lg-12" id="content">
<tr v-for="transaction in $store.getters.Transactions" class="{{transaction.Date.After now ? 'future' : ''}}">
<td>{{transaction.Date}}</td>
<td>
{{transaction.Account}}
</td>
<td>
{{transaction.Payee}}
</td>
<td>
{{transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : ""}}
</td>
<td>
{{transaction.GroupID ? "☀" : ""}}
</td>
<td>
<a :href="'/budget/'+$store.getters.CurrentBudget.ID+'/transaction/'+transaction.ID">{{transaction.Memo}}</a>
</td>
<td>
{{transaction.Amount}}
</td>
<td>
{{transaction.Status}}
</td>
</tr>
</table>
</v-container>
</template>

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

@ -1,6 +1,6 @@
<script>
export default {
props: ['budgetid'],
props: ['budgetid', 'accountid'],
mounted () {
this.$store.dispatch("setCurrentBudget", this.budgetid)
}
@ -22,7 +22,7 @@ export default {
On-Budget Accounts
<ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued">
<li>
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/account/'+$store.getters.CurrentBudget.ID">{{account.Name}}</router-link>
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/account/'+account.ID">{{account.Name}}</router-link>
<span>{{account.Balance.Int / 100}}</span>
</li>
</ul>
@ -31,7 +31,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/'+$store.getters.CurrentBudget.ID">{{account.Name}}</router-link>
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/account/'+account.ID">{{account.Name}}</router-link>
<span>{{account.Balance.Int / 100}}</span>
</li>
</ul>

4
web/src/router/routes.js
View File

@ -3,13 +3,15 @@ import BudgetSidebar from '../pages/BudgetSidebar.vue';
import Dashboard from '../pages/Dashboard.vue';
import Login from '../pages/Login.vue';
import Register from '../pages/Register.vue';
import Account from '../pages/Account.vue';
const routes = [
{ path: '/', name: 'Index', component: Dashboard },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard },
{ path: '/login', name: 'Login', component: Login },
{ path: '/register', name: 'Register', component: Register },
{ path: '/budget/:budgetid', name: 'Budget', components: {default: Dashboard, sidebar: BudgetSidebar}, props: true },
{ path: '/budget/:budgetid', name: 'Budget', components: { default: Dashboard, sidebar: BudgetSidebar }, props: true },
{ path: '/budget/:budgetid/account/:accountid', name: 'Account', components: { default: Account, sidebar: BudgetSidebar }, props: true },
]
const router = createRouter({

40
web/src/store/budget/index.js
View File

@ -2,6 +2,7 @@ const budget = {
state () {
return {
Accounts: [],
CurrentAccount: null,
Categories: [],
Transactions: [],
Assignments: []
@ -10,29 +11,58 @@ const budget = {
mutations: {
setAccounts (state, accounts) {
state.Accounts = accounts;
},
setCurrentAccount(state, account) {
state.CurrentAccount = account;
}
},
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: {
fetchBudget ({state, commit, rootState}, budgetid) {
fetch("/api/v1/budget/" + budgetid, {
async fetchBudget ({state, commit, rootState}, budgetid) {
const result = await fetch("/api/v1/budget/" + budgetid, {
headers: {
'Authorization': 'Bearer ' + rootState.Session.Token
}
})
.then(x => x.json())
.then(x => commit("setAccounts", x.Accounts));
});
const response = await result.json();
return commit("setAccounts", response.Accounts);
},
async fetchAccount ({state, commit, rootState}, accountid) {
const result = await fetch("/api/v1/account/" + accountid, {
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("setTitle", element.Name);
break
}
}
}
}

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

@ -39,9 +39,13 @@ const store = createStore({
})
store.subscribe((mutation, state) => {
if(mutation.type == "setCurrentBudget"){
console.log(mutation, state);
store.dispatch("fetchBudget", mutation.payload.ID)
switch(mutation.type){
case "setCurrentBudget":
store.dispatch("fetchBudget", mutation.payload.ID)
break;
case "setCurrentAccount":
store.dispatch("fetchAccount", mutation.payload.ID)
break;
}
})