From ec96b32bbe2fa9335b9cafb28031039f983248cc Mon Sep 17 00:00:00 2001
From: Joep <jcbuhre@gmail.com>
Date: Sat, 9 Sep 2023 13:10:18 +0200
Subject: [PATCH] Converted views/Settings.vue to composition api

---
 frontend/src/views/Settings.vue | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 5f093065..a0e756f2 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -10,17 +10,17 @@
               {{ $t("settings.profileSettings") }}
             </li></router-link
           >
-          <router-link to="/settings/shares" v-if="user.perm.share"
+          <router-link to="/settings/shares" v-if="user?.perm.share"
             ><li :class="{ active: $route.path === '/settings/shares' }">
               {{ $t("settings.shareManagement") }}
             </li></router-link
           >
-          <router-link to="/settings/global" v-if="user.perm.admin"
+          <router-link to="/settings/global" v-if="user?.perm.admin"
             ><li :class="{ active: $route.path === '/settings/global' }">
               {{ $t("settings.globalSettings") }}
             </li></router-link
           >
-          <router-link to="/settings/users" v-if="user.perm.admin"
+          <router-link to="/settings/users" v-if="user?.perm.admin"
             ><li
               :class="{
                 active:
@@ -49,20 +49,17 @@
   </div>
 </template>
 
-<script>
-import { mapState } from "pinia";
+<script setup lang="ts">
 import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import HeaderBar from "@/components/header/HeaderBar.vue";
+import { computed } from "vue";
+
+const authStore = useAuthStore();
+const layoutStore = useLayoutStore();
+
+const user = computed(() => authStore.user)
+const loading = computed(() => layoutStore.loading)
+
 
-export default {
-  name: "settings",
-  components: {
-    HeaderBar,
-  },
-  computed: {
-    ...mapState(useAuthStore, ["user"]),
-    ...mapState(useLayoutStore, ["loading"]),
-  },
-};
 </script>