Changes

spaces/pages/settings/index.vue

@@ -1,8 +1,12 @@
 <script setup>
 
 const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const router = useRouter()
 
 const items = [{
+  label: 'Profil',
+},{
   label: 'Projekte',
   content: 'This is the content shown for Tab1'
 }, {
@@ -11,15 +15,72 @@ const items = [{
 }, {
   label: 'Dokumente'
 }]
+
+const colorMode = useColorMode()
+const isLight = computed({
+  get() {
+    return colorMode.value !== 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
+
 </script>
 
 <template>
   <UTabs
       :items="items"
+      class="h-100"
   >
     <template #item="{item}">
-      <UCard class="mt-5 overflow-y-scroll scroll">
-        <div v-if="item.label === 'Projekte'">
+      <UCard class="mt-5">
+        <div v-if="item.label === 'Profil'">
+          <div v-if="dataStore.getOwnProfile.tenants.length > 1">
+            <UDivider
+                class="my-3"
+                label="Tenant"
+            />
+
+            <USelectMenu
+                :options="dataStore.getOwnProfile.tenants"
+                option-attribute="name"
+                value-attribute="id"
+                v-model="dataStore.currentTenant"
+                @change="dataStore.changeTenant()"
+            />
+          </div>
+
+          <UDivider
+              class="my-3"
+              label="Profil"
+          />
+
+          <InputGroup>
+            <UButton
+                :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+                color="white"
+                variant="outline"
+                aria-label="Theme"
+                @click="isLight = !isLight"
+            />
+            <UButton
+                color="rose"
+                variant="outline"
+                @click="async () => {
+                      await supabase.auth.signOut()
+                      await dataStore.clearStore()
+                      await router.push('/login')
+
+                  }"
+            >
+              Ausloggen
+            </UButton>
+          </InputGroup>
+
+        </div>
+        <div v-else-if="item.label === 'Projekte'">
           <UDivider
             label="Phasenvorlagen"
           />