From 5ce859f267ef6cc5270df050ba6b2bc071c8b206 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sun, 22 Dec 2024 14:06:55 +0100
Subject: [PATCH] space switcher

---
 vue3/src/apps/tandoor/Tandoor.vue             | 34 +++++++++++++++----
 .../components/settings/UserSpaceSettings.vue | 10 ++++--
 vue3/src/stores/UserPreferenceStore.ts        |  1 +
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index e31ff75a9a..1b36b005ff 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -42,11 +42,18 @@
                         </v-list-item>
                         <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
                         <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
-                        <v-divider></v-divider>
-                        <v-list-subheader>Spaces</v-list-subheader>
-                        <v-list-item>Space 1</v-list-item>
-                        <v-list-item>Space 2</v-list-item>
-                        <v-list-item>Space 3</v-list-item>
+                        <template v-if="spaces.length > 1">
+                            <v-divider></v-divider>
+                            <v-list-subheader>{{ $t('YourSpaces')}}</v-list-subheader>
+                            <v-list-item v-for="s in spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
+                                <template #prepend>
+                                    <v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
+                                    <v-icon icon="fa-solid fa-circle" v-else></v-icon>
+                                </template>
+                                {{ s.name}}
+                            </v-list-item>
+                        </template>
+
                         <v-divider></v-divider>
                         <v-list-item link>
                             <template #prepend>
@@ -151,11 +158,26 @@ import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 import {TAutomation, TCookLog, TFood, TKeyword, TPropertyType, TSupermarket, TSupermarketCategory, TUnit, TUnitConversion, TUserFile, TViewLog} from "@/types/Models";
 import NavigationDrawerContextMenu from "@/components/display/NavigationDrawerContextMenu.vue";
 import {useDjangoUrls} from "@/composables/useDjangoUrls";
+import {onMounted, ref} from "vue";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import {ApiApi, Space} from "@/openapi";
 
 const {lgAndUp} = useDisplay()
 const {getDjangoUrl} = useDjangoUrls()
 
-useUserPreferenceStore()
+const spaces = ref([] as Space[])
+
+onMounted(() => {
+    let api = new ApiApi()
+
+    useUserPreferenceStore()
+
+    api.apiSpaceList().then(r => {
+        spaces.value = r.results
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+})
 
 </script>
 
diff --git a/vue3/src/components/settings/UserSpaceSettings.vue b/vue3/src/components/settings/UserSpaceSettings.vue
index c29da53add..6634993ab1 100644
--- a/vue3/src/components/settings/UserSpaceSettings.vue
+++ b/vue3/src/components/settings/UserSpaceSettings.vue
@@ -2,13 +2,16 @@
 
     <v-row>
         <v-col>
-            <p class="text-h6">{{ $t('YourSpaces') }}</p>
+            <p class="text-h6">
+                {{ $t('YourSpaces') }}
+                <v-btn color="create" prepend-icon="$add" class="float-right" size="small" :href="getDjangoUrl('space-overview')">{{$t('New')}}</v-btn>
+            </p>
             <v-divider></v-divider>
         </v-col>
     </v-row>
 
     <v-row>
-        <v-col cols="6" v-for="s in spaces">
+        <v-col cols="6" v-for="s in spaces" :key="s.id">
             <v-card @click="useUserPreferenceStore().switchSpace(s)">
                 <v-img height="200px" cover :src="(s.image !== undefined) ? s.image?.preview  : recipeDefaultImage" :alt="$t('Image')"></v-img>
                 <v-card-title>{{ s.name }}
@@ -28,6 +31,9 @@ import {ApiApi, Space} from "@/openapi";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import recipeDefaultImage from '../../assets/recipe_no_image.svg'
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import {useDjangoUrls} from "@/composables/useDjangoUrls";
+
+const {getDjangoUrl} = useDjangoUrls()
 
 const spaces = ref([] as Space[])
 
diff --git a/vue3/src/stores/UserPreferenceStore.ts b/vue3/src/stores/UserPreferenceStore.ts
index 437b639fc4..beb85139db 100644
--- a/vue3/src/stores/UserPreferenceStore.ts
+++ b/vue3/src/stores/UserPreferenceStore.ts
@@ -109,6 +109,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
 
         api.apiSwitchActiveSpaceRetrieve({spaceId: space.id}).then(r => {
             loadActiveSpace()
+            location.reload()
         }).catch(err => {
             useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
         })