From 9b8ae7a44dee3e9b1bba69ea599749cfbfb9c8d7 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 9 Feb 2022 23:14:46 +0000
Subject: [PATCH] =?UTF-8?q?And=20on=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue | 123 ++++++++++++++++++++++++++----------------------
 1 file changed, 67 insertions(+), 56 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 400a617..aa79715 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,77 +1,88 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { LOGOUT } from "./store/mutation-types";
+import { useBudgetsStore } from "./stores/budgets";
+import { useSessionStore } from "./stores/session";
+import { useSettingsStore } from "./stores/settings";
 
 export default defineComponent({
-  computed: {
-    loggedIn() {
-      return this.$store.state.Session.Token;
-    }
-  },
-  methods: {
-    logout () {
-      this.$store.commit(LOGOUT);
-      this.$router.push("/login")
+    computed: {
+        loggedIn() {
+            return this.$store.state.Session.Token;
+        }
     },
-    toggleMenu () {
-      this.$store.commit("toggleMenu");
+    methods: {
+        logout() {
+            this.$store.commit(LOGOUT);
+            this.$router.push("/login")
+        },
+        toggleMenu() {
+            this.$store.commit("toggleMenu");
+        },
+        toggleMenuSize() {
+            this.$store.commit("toggleMenuSize");
+        }
     },
-    toggleMenuSize () {
-      this.$store.commit("toggleMenuSize");
+    beforeCreate() {
+        const store = localStorage.getItem("store");
+        if (!store)
+            return;
+
+        const restoredState = JSON.parse(store);
+        if (!restoredState)
+            return;
+
+        const sessionStore = useSessionStore();
+        sessionStore.User = restoredState.Session.User;
+        sessionStore.Token = restoredState.Session.Token;
+        for (const budget of restoredState.Budgets || []) {
+            sessionStore.Budgets.set(budget[0], budget[1]);
+        }
+
+        const budgetsStore = useBudgetsStore();
+        budgetsStore.CurrentBudgetID = restoredState.CurrentBudgetID;
+
+        const settingsStore = useSettingsStore();
+        settingsStore.ShowMenu = restoredState.ShowMenu;
+        settingsStore.ExpandMenu = restoredState.ExpandMenu;
     }
-  },
-  beforeCreate () {
-            const store = localStorage.getItem("store");
-            if (!store)
-                return;
-
-            const restoredState = JSON.parse(store);
-            if (!restoredState)
-                return;
-
-            state.Session = restoredState.Session;
-            state.CurrentBudgetID = restoredState.CurrentBudgetID;
-            state.ShowMenu = restoredState.ShowMenu;
-            state.ExpandMenu = restoredState.ExpandMenu;
-
-            for (const budget of restoredState.Budgets || []) {
-                state.Budgets.set(budget[0], budget[1]);
-            }
-  }
 })
 </script>
 
 <template>
-  <div class="box-border w-full">
-    <div class="flex bg-gray-400 p-4 m-2 rounded-lg">
-      <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
-      <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
+    <div class="box-border w-full">
+        <div class="flex bg-gray-400 p-4 m-2 rounded-lg">
+            <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
+            <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
 
-      <span class="flex-1">{{$store.getters.CurrentBudgetName}}</span>
+            <span class="flex-1">{{ $store.getters.CurrentBudgetName }}</span>
 
-      <div class="flex flex-1 flex-row justify-end -mx-4">
-        <router-link class="mx-4" v-if="loggedIn" to="/dashboard">Dashboard</router-link>
-        <router-link class="mx-4" v-if="!loggedIn" to="/login">Login</router-link>
-        <a class="mx-4" v-if="loggedIn" @click="logout">Logout</a>
-      </div>
+            <div class="flex flex-1 flex-row justify-end -mx-4">
+                <router-link class="mx-4" v-if="loggedIn" to="/dashboard">Dashboard</router-link>
+                <router-link class="mx-4" v-if="!loggedIn" to="/login">Login</router-link>
+                <a class="mx-4" v-if="loggedIn" @click="logout">Logout</a>
+            </div>
+        </div>
+
+        <div class="flex flex-col md:flex-row flex-1">
+            <div
+                :class="[$store.state.ExpandMenu ? 'md:w-72' : 'md:w-36', $store.state.ShowMenu ? '' : 'hidden']"
+                class="md:block flex-shrink-0 w-full"
+            >
+                <router-view name="sidebar"></router-view>
+            </div>
+
+            <div class="flex-1 p-6">
+                <router-view></router-view>
+            </div>
+        </div>
     </div>
-
-    <div class="flex flex-col md:flex-row flex-1">
-      <div :class="[$store.state.ExpandMenu ? 'md:w-72' : 'md:w-36', $store.state.ShowMenu ? '' : 'hidden']" class="md:block flex-shrink-0 w-full">
-        <router-view name="sidebar"></router-view>
-      </div>
-
-      <div class="flex-1 p-6">
-        <router-view></router-view>
-      </div>
-    </div>
-  </div>
 </template>
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 </style>