Reworked workspaces store

client/components/global/WorkspaceDropdown.vue

@@ -42,9 +42,6 @@
 
 <script>
 import { computed } from 'vue'
-import { useAuthStore } from '../../stores/auth.js'
-import { useFormsStore } from '../../stores/forms.js'
-import { useWorkspacesStore } from '../../stores/workspaces.js'
 import Dropdown from '~/components/global/Dropdown.vue'
 
 export default {
@@ -62,7 +59,7 @@ export default {
       formsStore,
       workspacesStore,
       user: computed(() => authStore.user),
-      workspaces: computed(() => workspacesStore.content),
+      workspaces: computed(() => workspacesStore.getAll),
       loading: computed(() => workspacesStore.loading)
     }
   },
@@ -83,8 +80,10 @@ export default {
     switchWorkspace (workspace) {
       this.workspacesStore.setCurrentId(workspace.id)
       this.$refs.dropdown.close()
-      if (this.$route.name !== 'home') {
-        this.$router.push({ name: 'home' })
+      const router = useRouter()
+      const route = useRoute()
+      if (route.name !== 'home') {
+        router.push({ name: 'home' })
       }
       this.formsStore.load(workspace.id)
     },

client/components/pages/auth/components/LoginForm.vue

@@ -42,7 +42,8 @@
 
 <script>
 import ForgotPasswordModal from '../ForgotPasswordModal.vue'
-import {opnFetch} from "~/composables/useOpnApi.js";
+import {opnFetch} from "~/composables/useOpnApi.js"
+import {fetchAllWorkspaces} from "~/stores/workspaces.js"
 
 export default {
   name: 'LoginForm',
@@ -58,9 +59,9 @@ export default {
   },
 
   setup () {
-    const authStore = useAuthStore()
     return {
-      authStore
+      authStore: useAuthStore(),
+      workspaceStore: useWorkspacesStore()
     }
   },
 
@@ -84,6 +85,9 @@ export default {
       const userData = await opnFetch('user')
       this.authStore.setUser(userData)
 
+      const workspaces = await fetchAllWorkspaces()
+      this.workspaceStore.set(workspaces.data.value)
+
       // Redirect home.
       this.redirect()
     },

client/components/pages/welcome/TemplatesSlider.vue

@@ -23,12 +23,12 @@
       </router-link>
     </div>
 
-    <div v-if="templates.length > 0"
+    <div v-if="sliderTemplates.length > 0"
          class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
     >
       <ul ref="templates-slider" class="flex justify-center md:justify-start animate-infinite-scroll">
         <li v-for="(template, i) in sliderTemplates" :key="template.id" class="mx-4 w-72 h-auto">
-          <single-template :slug="template.slug" />
+          <single-template :template="template" />
         </li>
       </ul>
     </div>
@@ -37,29 +37,31 @@
 
 <script>
 import { computed } from 'vue'
-import { useTemplatesStore } from '../../../stores/templates'
 import SingleTemplate from '../templates/SingleTemplate.vue'
 
 export default {
   components: { SingleTemplate },
-  props: { },
   setup () {
     const templatesStore = useTemplatesStore()
+    templatesStore.initTypesAndIndustries()
+
+    onMounted(() => {
+      if (templatesStore.getAll.length < 10) {
+        opnFetch('templates',{query: {limit: 10}}).then((data) => {
+          templatesStore.set(data)
+        })
+      }
+    })
+
     return {
       templatesStore,
-      templates : computed(() => templatesStore.content)
-    }
-  },
-  data: () => ({}),
-
-  computed: {
-    sliderTemplates () {
-      return this.templates.slice(0, 20)
+      allLoaded: computed(() => templatesStore.allLoaded),
+      sliderTemplates: computed(() => templatesStore.getAll.slice(0, 10))
     }
   },
 
   watch: {
-    templates: {
+    sliderTemplates: {
       deep: true,
       handler () {
         this.$nextTick(() => {
@@ -69,10 +71,6 @@ export default {
     }
   },
 
-  mounted() {
-    this.templatesStore.loadAll({ limit: 20 })
-  },
-
   methods: {
     setInfinite () {
       const ul = this.$refs['templates-slider']