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']

client/composables/stores/useContentStore.js

@@ -17,12 +17,12 @@ export const useContentStore = (mapKey = 'id') => {
     return content.value.get(key)
   }
 
+  const length = computed(() => content.value.size)
+
   // Actions
   function set(items) {
     content.value = new Map
-    items.forEach((item) => {
-      content.value.set(item[mapKey], item)
-    })
+    save(items)
   }
 
   function save(items) {
@@ -31,7 +31,6 @@ export const useContentStore = (mapKey = 'id') => {
       content.value.set(item[mapKey], item)
     })
   }
-
   function remove(item) {
     content.value.remove(item[mapKey])
   }
@@ -54,6 +53,7 @@ export const useContentStore = (mapKey = 'id') => {
     loading,
     getAll,
     getByKey,
+    length,
     set,
     save,
     remove,

client/middleware/01.check-auth.global.js

@@ -1,4 +1,4 @@
-import {useWorkspacesStore} from "~/stores/workspaces.js";
+import {fetchAllWorkspaces} from "~/stores/workspaces.js";
 
 export default defineNuxtRouteMiddleware(async(to, from) => {
   const authStore = useAuthStore()
@@ -7,5 +7,10 @@ export default defineNuxtRouteMiddleware(async(to, from) => {
   if (authStore.token && !authStore.user) {
     const {data, error} = await useOpnApi('user')
     authStore.setUser(data.value)
+
+    // Load workspaces
+    const workspaceStore = useWorkspacesStore()
+    const {data: workspacesData, error: workspacesError} = await fetchAllWorkspaces()
+    workspaceStore.save(workspacesData.value)
   }
 })

client/pages/home.vue

@@ -23,7 +23,7 @@
     <div class="flex bg-white">
       <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
         <div class="mt-8 pb-0">
-          <text-input v-if="forms.length > 0" class="mb-6" :form="searchForm" name="search" label="Search a form"
+          <text-input v-if="forms.length > 0" class="mb-6" v-model="search" name="search" label="Search a form"
                       placeholder="Name of form to search"
           />
           <div v-if="allTags.length > 0" class="mb-4">
@@ -63,7 +63,7 @@
           <div v-else-if="forms.length > 0" class="mb-10">
             <div v-if="enrichedForms && enrichedForms.length">
               <div v-for="(form) in enrichedForms" :key="form.id"
-                   class="mt-4 p-4 flex group bg-white hover:bg-gray-50 dark:bg-notion-dark items-center"
+                   class="mt-4 p-4 flex group bg-white hover:bg-gray-50 dark:bg-notion-dark items-center relative"
               >
                 <div class="flex-grow items-center truncate cursor-pointer" role="button"
                      @click.prevent="viewForm(form)">
@@ -111,16 +111,15 @@
   </div>
 </template>
 
-<script>
-import {computed} from 'vue'
+<script setup>
 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'
+import {refDebounced} from "@vueuse/core";
 
 const loadForms = function () {
   const formsStore = useFormsStore()
@@ -131,105 +130,74 @@ const loadForms = function () {
   })
 }
 
-export default {
-  components: {OpenFormFooter, TextInput, ExtraMenu},
+// metaTitle: {type: String, default: 'Your Forms'},
+// metaDescription: {
+//   type: String,
+//   default: 'All of your OpnForm are here. Create new forms, or update your existing one!'
+// }
 
-  props: {
-    metaTitle: {type: String, default: 'Your Forms'},
-    metaDescription: {
-      type: String,
-      default: 'All of your OpnForm are here. Create new forms, or update your existing one!'
-    }
-  },
+const authStore = useAuthStore()
+const formsStore = useFormsStore()
+const workspacesStore = useWorkspacesStore()
 
-  async setup() {
-    const authStore = useAuthStore()
-    const formsStore = useFormsStore()
-    const workspacesStore = useWorkspacesStore()
+definePageMeta({
+  middleware: "auth"
+})
 
-    definePageMeta({
-      middleware: "auth"
-    })
+// State
+const {content: forms, loading: formsLoading} = storeToRefs(formsStore)
+const showEditFormModal = ref(false)
+const selectedForm = ref(null)
+const search = ref('')
+const debounceSearch = refDebounced(search, 500)
+const selectedTags = ref(new Set())
 
-    loadForms()
-    return {
-      formsStore,
-      workspacesStore,
-      user: computed(() => authStore.user),
-      forms: computed(() => formsStore.content),
-      formsLoading: computed(() => formsStore.loading)
-    }
-  },
-
-  data() {
-    return {
-      showEditFormModal: false,
-      selectedForm: null,
-      searchForm: new Form({
-        search: ''
-      }),
-      selectedTags: []
-    }
-  },
-
-  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
-    },
-    enrichedForms() {
-      let enrichedForms = this.forms.map((form) => {
-        form.workspace = this.workspacesStore.getById(form.workspace_id)
-        return form
-      })
-
-      // Filter by Selected Tags
-      if (this.selectedTags.length > 0) {
-        enrichedForms = enrichedForms.filter((item) => {
-          return (item.tags && item.tags.length > 0) ? this.selectedTags.every(r => item.tags.includes(r)) : false
-        })
-      }
-
-      if (!this.isFilteringForms || this.searchForm.search === '' || this.searchForm.search === null) {
-        return enrichedForms
-      }
-
-      // Fuze search
-      const fuzeOptions = {
-        keys: [
-          'title',
-          'slug',
-          'tags'
-        ]
-      }
-      const fuse = new Fuse(enrichedForms, fuzeOptions)
-      return fuse.search(this.searchForm.search).map((res) => {
-        return res.item
-      })
-    },
-    allTags() {
-      return this.formsStore.getAllTags
-    }
+// Methods
+const editForm = (form) => {
+  selectedForm.value = form
+  showEditFormModal.value = true
+}
+const onTagClick = (tag) => {
+  if (selectedTags.value.has(tag)) {
+    selectedTags.value.remove(tag)
+  } else {
+    selectedTags.value.add(tag)
   }
 }
+const viewForm = (form) => {
+  useRouter.push({name: 'forms.show', params: {slug: form.slug}})
+}
+
+// Computed
+const isFilteringForms = computed(() => {
+  return (search.value !== '' && search.value !== null) || selectedTags.value.size > 0
+})
+const allTags = computed(() => {
+  return formsStore.getAllTags
+})
+const enrichedForms = computed(() => {
+  let enrichedForms = forms.value.map((form) => {
+    form.workspace = workspacesStore.getByKey(form.workspace_id)
+    return form
+  }).filter((form) => {
+    return form.tags && form.tags.length ? [...selectedTags].every(r => form.tags.includes(r)) : false
+  })
+
+  if (!isFilteringForms || search.value === '' || search.value === null) {
+    return enrichedForms
+  }
+
+  // Fuze search
+  const fuzeOptions = {
+    keys: [
+      'title',
+      'slug',
+      'tags'
+    ]
+  }
+  const fuse = new Fuse(enrichedForms, fuzeOptions)
+  return fuse.search(search.value).map((res) => {
+    return res.item
+  })
+})
 </script>

client/pages/index.vue

@@ -126,7 +126,7 @@
 <!--        <testimonials/>-->
 <!--      </div>-->
 
-<!--      <templates-slider class="max-w-full mb-12"/>-->
+      <templates-slider class="max-w-full mb-12"/>
 
       <div class="w-full bg-blue-900 p-12 md:p-24 text-center">
         <h4 class="font-semibold text-3xl text-white">

client/pages/templates/index.vue

@@ -13,7 +13,7 @@
       </div>
     </section>
 
-    <templates-list :templates="templates"/>
+    <templates-list :templates="templates" :loading="loading"/>
 
     <open-form-footer class="mt-8 border-t"/>
   </div>
@@ -30,5 +30,6 @@ import {loadAllTemplates} from "~/stores/templates.js";
 const templatesStore = useTemplatesStore()
 loadAllTemplates(templatesStore)
 
+const loading = computed(() => templatesStore.loading)
 const templates = computed(() => templatesStore.getAll)
 </script>

client/stores/templates.js

@@ -36,26 +36,29 @@ export const useTemplatesStore = defineStore('templates', () => {
     ...contentStore,
     industries,
     types,
+    allLoaded,
     getTemplateTypes,
     getTemplateIndustries,
     initTypesAndIndustries
   }
 })
 
-export const fetchTemplate = (slug) => {
-  return useOpnApi(templatesEndpoint + '/' + slug)
+export const fetchTemplate = (slug, options = {}) => {
+  return useOpnApi(templatesEndpoint + '/' + slug, options)
 }
 
-export const fetchAllTemplates = () => {
-  return useOpnApi(templatesEndpoint)
+export const fetchAllTemplates = (options = {}) => {
+  return useOpnApi(templatesEndpoint, options)
 }
 
-export const loadAllTemplates = async (store) => {
+export const loadAllTemplates = async (store, options={}) => {
+  console.log('in------',store, store.allLoaded)
   if (!store.allLoaded) {
     store.startLoading()
     store.initTypesAndIndustries()
-    const {data} = await fetchAllTemplates()
+    const {data} = await fetchAllTemplates(options)
     store.set(data.value)
+    store.stopLoading()
     store.allLoaded = true
   }
 }

client/stores/workspaces.js

@@ -1,93 +1,50 @@
 import {defineStore} from 'pinia'
 import {useStorage} from "@vueuse/core"
+import {useContentStore} from "~/composables/stores/useContentStore.js";
 
 export const workspaceEndpoint = 'open/workspaces/'
 
-const storedWorkspaceId = useStorage('currentWorkspace', 0)
+export const useWorkspacesStore = defineStore('workspaces', () => {
 
-export const useWorkspacesStore = defineStore('workspaces', {
-  state: () => ({
-    content: new Map,
-    currentId: null,
-    loading: false
-  }),
-  getters: {
-    getById: (state) => (id) => {
-      if (state.content.length === 0) return null
-      return state.content.find(item => item.id === id)
-    },
-    getCurrent (){
-      if (this.content.length === 0 || this.currentId === null) return null
-      return this.content.find(item => item.id === this.currentId)
-    }
-  },
-  actions: {
-    set(items) {
-      this.content = items
-      if (this.currentId == null && this.content.length > 0) {
-        // If one only, set it
-        if (this.content.length === 1) {
-          this.setCurrentId(items[0].id)
-        } else if (storedWorkspaceId && this.content.find(item => item.id === parseInt(storedWorkspaceId.value))) {
-          // Check local storage for current workspace, or take first
-          this.setCurrentId(parseInt(storedWorkspaceId.value))
-        } else {
-          // Else, take first
-          this.setCurrentId(items[0].id)
-        }
-      } else {
-        this.setCurrentId(null)
-      }
-    },
-    setCurrentId(id) {
-      this.currentId = id
-      storedWorkspaceId.value = id
-    },
-    addOrUpdate(item) {
-      this.content = this.content.filter((val) => val.id !== item.id)
-      this.content.push(item)
-      if (this.currentId == null) {
-        this.currentId = item.id
-        storedWorkspaceId.value = this.currentId
-      }
-    },
-    remove(itemId) {
-      this.content = this.content.filter((val) => val.id !== itemId)
-      if (this.currentId === itemId) {
-        this.setCurrentId(this.content.length > 0 ? this.content[0].id : null)
-      }
-    },
-    startLoading() {
-      this.loading = true
-    },
-    stopLoading() {
-      this.loading = false
-    },
-    resetState() {
-      this.set([])
-      this.stopLoading()
-    },
-    load() {
-      this.set([])
-      this.startLoading()
-      console.log('loaindgworkspaces')
-      return useOpnApi(workspaceEndpoint).then(({data, error}) => {
-        this.set(data.value)
-        this.stopLoading()
-      })
-    },
-    loadIfEmpty() {
-      if (this.content.length === 0) {
-        return this.load()
-      }
-      return Promise.resolve()
-    },
-    delete(id) {
-      this.startLoading()
-      return useOpnApi(workspaceEndpoint + id, {method: 'DELETE'}).then(({data}) => {
-        this.remove(data.value.workspace_id)
-        this.stopLoading()
-      })
+  const storedWorkspaceId = useCookie('currentWorkspace')
+
+  const contentStore = useContentStore()
+  const currentId = ref(storedWorkspaceId)
+
+  const getCurrent = computed(() => {
+    return contentStore.getByKey(currentId.value)
+  })
+
+  const setCurrentId = (id) => {
+    currentId.value = id
+    storedWorkspaceId.value = id
+  }
+
+  const save = (items) => {
+    contentStore.save(items)
+    console.log('cookie issi', currentId.value, contentStore.length.value)
+    if (currentId.value == null && contentStore.length.value) {
+      setCurrentId(items[0].id)
     }
   }
+
+  const remove = (itemId) => {
+    contentStore.remove(itemId)
+    if (currentId.value === itemId) {
+      setCurrentId(contentStore.length.value > 0 ? contentStore.getAll[0].id : null)
+    }
+  }
+
+  return {
+    ...contentStore,
+    currentId,
+    getCurrent,
+    setCurrentId,
+    save,
+    remove
+  }
 })
+
+export const fetchAllWorkspaces = (options = {}) => {
+  return useOpnApi(workspaceEndpoint, options)
+}