web/src/pages/Account.vue

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

web/src/pages/BudgetSidebar.vue

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

web/src/router/routes.js

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

web/src/store/budget/index.js

@@ -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) {
+        async fetchBudget ({state, commit, rootState}, budgetid) {
-            fetch("/api/v1/budget/" + budgetid, {
+            const result = await fetch("/api/v1/budget/" + budgetid, {
                 headers: {
                     'Authorization': 'Bearer ' + rootState.Session.Token
                 }
-            })
+            });
-                .then(x => x.json())
+            const response = await result.json();
-                .then(x => commit("setAccounts", x.Accounts));
+            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
+            }
+        }
     }
 }
 

web/src/store/index.js

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