space switcher

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>
+                        <template v-if="spaces.length > 1">
-                        <v-list-subheader>Spaces</v-list-subheader>
+                            <v-divider></v-divider>
-                        <v-list-item>Space 1</v-list-item>
+                            <v-list-subheader>{{ $t('YourSpaces')}}</v-list-subheader>
-                        <v-list-item>Space 2</v-list-item>
+                            <v-list-item v-for="s in spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
-                        <v-list-item>Space 3</v-list-item>
+                                <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>
 

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[])
 

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)
         })