Implement currentBudget and move infos to sidebar

web/src/App.vue

@@ -2,6 +2,11 @@
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 export default {
+  data() {
+    return {
+      showMenu: null
+    }
+  },
   computed: {
     loggedIn() {
       return this.$store.state.Session.Token;
@@ -28,6 +33,10 @@ export default {
       </ul>
     </v-app-bar>
 
+    <v-navigation-drawer app v-model="showMenu">
+      <router-view name="sidebar"></router-view>
+    </v-navigation-drawer>
+  
     <v-main>
       <router-view></router-view>
     </v-main>

web/src/pages/Budget.vue

@@ -1,57 +0,0 @@
-<script>
-export default {
-  mounted () {
-    this.$store.dispatch("fetchBudget", this.$route.params.budgetid)
-  }
-}
-
-</script>
-
-<template>
-  <h1>Budget</h1>
-  <h1>
-    <a href="/dashboard">⌂</a>
-    {{$store.getters.CurrentBudget.Name}}
-  </h1>
-  <ul>
-    <li><a href="/budget/{{$store.getters.CurrentBudget.ID}}">Budget</a></li>
-    <li>Reports (Coming Soon)</li>
-    <li><a href="/budget/{{$store.getters.CurrentBudget.ID}}/all-accounts">All Accounts</a></li>
-    <li>
-      On-Budget Accounts
-      <ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued">
-          <li>
-            <a href="/budget/{{$store.getters.CurrentBudget.ID}}/account/{{.ID}}">{{account.Name}}</a>
-            <span>{{account.Balance.Int / 100}}</span>
-          </li>
-      </ul>
-    </li>
-    <li>
-      Off-Budget Accounts
-      <ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued">
-          <li>
-            <a href="/budget/{{$store.getters.CurrentBudget.ID}}/account/{{.ID}}">{{account.Name}}</a>
-            <span>{{account.Balance.Int / 100}}</span>
-          </li>
-      </ul>
-    </li>
-    <li>
-      Closed Accounts
-    </li>
-    <li>
-      <a href="/budget/{{$.Budget.ID}}/accounts">Edit accounts</a>
-    </li>
-    <li>
-      + Add Account
-    </li>
-    <li>
-      <a href="/budget/{{.Budget.ID}}/settings">Budget-Settings</a>
-    </li>
-    <li>
-      <a href="/admin">Admin</a>
-    </li>
-    <li>
-      <a href="/api/v1/user/logout">Logout</a>
-    </li>
-</ul>        
-</template>

web/src/pages/BudgetSidebar.vue

@@ -0,0 +1,55 @@
+<script>
+export default {
+  mounted () {
+    const budgetid = this.$route.params.budgetid;
+    this.$store.dispatch("setCurrentBudget", budgetid)
+  }
+}
+
+</script>
+
+<template>
+  <h1>Budget</h1>
+  <h1>
+    <router-link to="/dashboard">⌂</router-link>
+    {{$store.getters.CurrentBudget.Name}}
+  </h1>
+  <ul>
+    <li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID">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/'+$store.getters.CurrentBudget.ID">{{account.Name}}</router-link>
+            <span>{{account.Balance.Int / 100}}</span>
+          </li>
+      </ul>
+    </li>
+    <li>
+      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>
+            <span>{{account.Balance.Int / 100}}</span>
+          </li>
+      </ul>
+    </li>
+    <li>
+      Closed Accounts
+    </li>
+    <li>
+      <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/accounts'">Edit accounts</router-link>
+    </li>
+    <li>
+      + Add Account
+    </li>
+    <li>
+      <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/settings'">Budget-Settings</router-link>
+    </li>
+    <li>
+      <router-link to="/admin">Admin</router-link>
+    </li>
+</ul>        
+</template>

web/src/router/routes.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import Budget from '../pages/Budget.vue';
 import Dashboard from '../pages/Dashboard.vue';
 import Login from '../pages/Login.vue';
@@ -6,13 +6,14 @@ import Register from '../pages/Register.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', component: Budget },
+  { path: '/budget/:budgetid',  name: 'Budget', components: {default: Dashboard, sidebar: Budget } },
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
 })
 

web/src/store/dashboard/index.js

@@ -11,24 +11,30 @@ const dashboard = {
         },
         addBudget(state, budget) {
             state.Budgets.push(budget);
+        },
+        setCurrentBudget(state, budget) {
+            state.CurrentBudget = budget;
         }
     },
     getters: {
         Budgets(state) {
             return state.Budgets || [];
+        },
+        CurrentBudget(state) {
+            return state.CurrentBudget || {};
         }
     },
     actions: {
-        fetchDashboard ({state, commit, rootState}) {
+        async fetchDashboard ({state, commit, rootState}) {
-            fetch("/api/v1/dashboard", {
+            const response = await fetch("/api/v1/dashboard", {
                 headers: {
                     'Authorization': 'Bearer ' + rootState.Session.Token
                 }
             })
-                .then(x => x.json())
+            const data = await response.json();
-                .then(x => commit("setBudgets", x.Budgets));
+            commit("setBudgets", data.Budgets);
         },
-        newBudget ({state, commit, rootState}, budgetName) {
+        async newBudget ({state, commit, rootState}, budgetName) {
             fetch("/api/v1/budget/new", {
                 method: "POST",
                 body: JSON.stringify({name: budgetName}),
@@ -38,6 +44,17 @@ const dashboard = {
             })
                 .then(x => x.json())
                 .then(x => commit("addBudget", x));
+        },
+        async setCurrentBudget({state, commit, dispatch}, budgetid) {
+            await dispatch("fetchDashboard");
+            for (const element of state.Budgets) {
+                if(element.ID != budgetid) 
+                    continue
+                
+                commit("setCurrentBudget", element);
+                break
+            }
+            await dispatch("fetchBudget", budgetid);
         }
     }
 }