Reworked workspaces store

resources/js/components/Modal.vue

@@ -20,7 +20,7 @@
             </button>
           </div>
           <div class="sm:flex sm:flex-col sm:items-start">
-            <div v-if="$scopedSlots.hasOwnProperty('icon')" class="flex w-full justify-center mb-4">
+            <div v-if="$slots.hasOwnProperty('icon')" class="flex w-full justify-center mb-4">
               <div class="w-14 h-14 rounded-full flex justify-center items-center"
                    :class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'"
               >
@@ -28,7 +28,7 @@
               </div>
             </div>
             <div class="mt-3 text-center sm:mt-0 w-full">
-              <h2 v-if="$scopedSlots.hasOwnProperty('title')"
+              <h2 v-if="$slots.hasOwnProperty('title')"
                   class="text-2xl font-semibold text-center text-gray-900"
               >
                 <slot name="title" />

resources/js/components/Navbar.vue

@@ -71,7 +71,7 @@
                     My Forms
                   </router-link>
 
-                  <router-link v-if="userOnboarded" :to="{ name: 'my_templates' }"
+                  <router-link v-if="userOnboarded" :to="{ name: 'templates-my-templates' }"
                                class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -80,7 +80,7 @@
                     My Templates
                   </router-link>
 
-                  <router-link :to="{ name: 'settings.profile' }"
+                  <router-link :to="{ name: 'settings-profile' }"
                                class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
                     <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"

resources/js/components/open/forms/OpenCompleteForm.vue

@@ -129,6 +129,12 @@ export default {
     submitButtonClass: { type: String, default: '' }
   },
 
+  setup () {
+    return {
+      isIframe: useIsIframe()
+    }
+  },
+
   data () {
     return {
       loading: false,
@@ -143,10 +149,8 @@ export default {
   },
 
   computed: {
-    isIframe () {
-      return window.location !== window.parent.location || window.frameElement
-    },
     isEmbedPopup () {
+      if (process.server) return false
       return window.location.href.includes('popup=true')
     },
     theme () {

resources/js/middleware/check-auth.js

@@ -1,4 +1,5 @@
-import { useAuthStore } from '../stores/auth';
+import { useAuthStore } from '../stores/auth'
+import { useWorkspacesStore } from '../stores/workspaces'
 import * as Sentry from '@sentry/vue'
 
 export function initCrisp (user) {
@@ -45,6 +46,7 @@ export default async (to, from, next) => {
       authStore.fetchUser().then((user) => {
         initCrisp(user)
         initSentry(user)
+        useWorkspacesStore().fetchWorkspaces()
       })
     } catch (e) {
       console.error(e)

resources/js/pages/home.vue

@@ -74,12 +74,14 @@
                     </li>
                   </ul>
                   <div v-if="['draft','closed'].includes(form.visibility) || (form.tags && form.tags.length > 0)" class="mt-1 flex items-center flex-wrap gap-3">
-                    <span v-if="form.visibility=='draft'" 
-                        class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+                    <span v-if="form.visibility=='draft'"
+                          class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+                    >
                       Draft
                     </span>
-                    <span v-else-if="form.visibility=='closed'" 
-                        class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+                    <span v-else-if="form.visibility=='closed'"
+                          class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+                    >
                       Closed
                     </span>
                     <span v-for="(tag,i) in form.tags" :key="tag"
@@ -105,31 +107,18 @@
 
 <script>
 import { computed } from 'vue'
-import { useAuthStore } from '../stores/auth';
-import { useFormsStore } from '../stores/forms';
-import { useWorkspacesStore } from '../stores/workspaces';
+import { useAuthStore } from '../stores/auth'
+import { useFormsStore } from '../stores/forms'
+import { useWorkspacesStore } from '../stores/workspaces'
 import Fuse from 'fuse.js'
 import Form from 'vform'
 import TextInput from '../components/forms/TextInput.vue'
 import OpenFormFooter from '../components/pages/OpenFormFooter.vue'
-import ExtraMenu from '../components/pages/forms/show/ExtraMenu.vue'
-
-const loadForms = function () {
-  const formsStore = useFormsStore()
-  const workspacesStore = useWorkspacesStore()
-  formsStore.startLoading()
-  workspacesStore.loadIfEmpty().then(() => {
-    formsStore.loadIfEmpty(workspacesStore.currentId)
-  })
-}
+import ExtraMenu from '../components/pages/forms/show/ExtraMenu.vue
 
 export default {
   components: { OpenFormFooter, TextInput, ExtraMenu },
 
-  beforeRouteEnter (to, from, next) {
-    loadForms()
-    next()
-  },
   middleware: 'auth',
 
   props: {
@@ -141,12 +130,16 @@ export default {
     const authStore = useAuthStore()
     const formsStore = useFormsStore()
     const workspacesStore = useWorkspacesStore()
+
+    formsStore.startLoading()
+    formsStore.loadIfEmpty(workspacesStore.currentId)
+
     return {
       formsStore,
       workspacesStore,
-      user : computed(() => authStore.user),
-      forms : computed(() => formsStore.content),
-      formsLoading : computed(() => formsStore.loading)
+      user: computed(() => authStore.user),
+      forms: computed(() => formsStore.content),
+      formsLoading: computed(() => formsStore.loading)
     }
   },
 
@@ -161,26 +154,6 @@ export default {
     }
   },
 
-  mounted () {},
-
-  methods: {
-    editForm (form) {
-      this.selectedForm = form
-      this.showEditFormModal = true
-    },
-    onTagClick (tag) {
-      const idx = this.selectedTags.indexOf(tag)
-      if (idx === -1) {
-        this.selectedTags.push(tag)
-      } else {
-        this.selectedTags.splice(idx, 1)
-      }
-    },
-    viewForm (form) {
-      this.$router.push({ name: 'forms.show', params: { slug: form.slug } })
-    }
-  },
-
   computed: {
     isFilteringForms () {
       return (this.searchForm.search !== '' && this.searchForm.search !== null) || this.selectedTags.length > 0
@@ -218,6 +191,26 @@ export default {
     allTags () {
       return this.formsStore.getAllTags
     }
+  },
+
+  mounted () {},
+
+  methods: {
+    editForm (form) {
+      this.selectedForm = form
+      this.showEditFormModal = true
+    },
+    onTagClick (tag) {
+      const idx = this.selectedTags.indexOf(tag)
+      if (idx === -1) {
+        this.selectedTags.push(tag)
+      } else {
+        this.selectedTags.splice(idx, 1)
+      }
+    },
+    viewForm (form) {
+      this.$router.push({ name: 'forms.show', params: { slug: form.slug } })
+    }
   }
 }
 </script>

resources/js/stores/forms.js

@@ -80,4 +80,4 @@ export const useFormsStore = defineStore('forms', {
       return Promise.resolve()
     }
   }
-})
+})