Refactoring stores and templates pages to comp. api

client/stores/auth.js

@@ -22,7 +22,7 @@ export const useAuthStore = defineStore('auth', {
     stopImpersonating() {
       this.token = this.admin_token
       this.admin_token = null
-      this.fetchUser()
+        // TODO: re-fetch user
     },
 
     setToken(token) {
@@ -79,7 +79,7 @@ export const useAuthStore = defineStore('auth', {
 
     async logout() {
       try {
-        await axios.post('/api/logout')
+        await useOpnApi('logout', {method: 'POST'})
       } catch (e) {
       }
 

client/stores/templates.js

@@ -1,120 +1,53 @@
 import {defineStore} from 'pinia'
+import {useContentStore} from "~/composables/stores/useContentStore.js";
 
-export const templatesEndpoint = '/templates'
-export const useTemplatesStore = defineStore('templates', {
-  state: () => ({
-    content: [], // TODO: convert to a map
-    industries: {},
-    types: {},
-    allLoaded: false,
-    loading: false
-  }),
-  getters: {
-    getBySlug: (state) => (slug) => {
-      if (state.content.length === 0) return null
-      return state.content.find(item => item.slug === slug)
-    },
-    getTemplateTypes: (state) => (slugs) => {
-      if (state.types.length === 0) return null
-      return Object.values(state.types).filter((val) => slugs.includes(val.slug)).map((item) => {
-        return item.name
-      })
-    },
-    getTemplateIndustries: (state) => (slugs) => {
-      if (state.industries.length === 0) return null
-      return Object.values(state.industries).filter((val) => slugs.includes(val.slug)).map((item) => {
-        return item.name
-      })
-    }
-  },
-  actions: {
-    set(items) {
-      this.content = items
-      this.allLoaded = true
-    },
-    append(items) {
-      const ids = items.map((item) => {
-        return item.id
-      })
-      this.content = this.content.filter((val) => !ids.includes(val.id))
-      this.content = this.content.concat(items)
-    },
-    addOrUpdate(item) {
-      this.content = this.content.filter((val) => val.id !== item.id)
-      this.content.push(item)
-    },
-    remove(item) {
-      this.content = this.content.filter((val) => val.id !== item.id)
-    },
-    startLoading() {
-      this.loading = true
-    },
-    stopLoading() {
-      this.loading = false
-    },
-    setAllLoaded(val) {
-      this.allLoaded = val
-    },
-    resetState() {
-      this.set([])
-      this.stopLoading()
-    },
-    async loadTypesAndIndustries() {
-      if (Object.keys(this.industries).length === 0 || Object.keys(this.types).length === 0) {
-        // const files = import.meta.glob('~/data/forms/templates/*.json')
-        // console.log(await files['/data/forms/templates/industries.json']())
-        // this.industries = await files['/data/forms/templates/industries.json']()
-        // this.types = await files['/data/forms/templates/types.json']()
-      }
-    },
-    loadTemplate(slug) {
-      console.log('loading template',slug)
-      this.startLoading()
-      this.loadTypesAndIndustries()
+const templatesEndpoint = 'templates'
+export const useTemplatesStore = defineStore('templates', () => {
 
-      if (this.getBySlug(slug)) {
-        this.stopLoading()
-        return Promise.resolve()
-      }
+  const contentStore = useContentStore('slug')
 
-      return useOpnApi(templatesEndpoint + '/' + slug).then(({data, error}) => {
-        this.addOrUpdate(data.value)
-        this.stopLoading()
-      }).catch((error) => {
-        this.stopLoading()
-      })
-    },
-    loadAll(options = null) {
-      this.startLoading()
-      this.loadTypesAndIndustries()
+  const allLoaded = ref(false)
+  const industries = ref({})
+  const types = ref({})
 
-      // Prepare with options
-      let queryStr = ''
-      if (options !== null) {
-        for (const [key, value] of Object.entries(options)) {
-          queryStr += '&' + encodeURIComponent(key) + '=' + encodeURIComponent(value)
-        }
-        queryStr = queryStr.slice(1)
-      }
-      return useOpnApi((queryStr) ? templatesEndpoint + '?' + queryStr : templatesEndpoint).then(({data, error}) => {
-        if (options !== null) {
-          this.set(data.value)
-          this.setAllLoaded(false)
-        } else {
-          this.append(data.value)
-          this.setAllLoaded(true)
-        }
-        this.stopLoading()
-      }).catch((error) => {
-        this.stopLoading()
-      })
-    },
-    loadIfEmpty() {
-      if (!this.allLoaded) {
-        return this.loadAll()
-      }
-      this.stopLoading()
-      return Promise.resolve()
+  const getTemplateTypes = computed((state) => (slugs) => {
+    if (state.types.length === 0) return null
+    return Object.values(state.types).filter((val) => slugs.includes(val.slug)).map((item) => {
+      return item.name
+    })
+    // todo: use map
+  })
+  const getTemplateIndustries = computed((state) => (slugs) => {
+    if (state.industries.length === 0) return null
+    return Object.values(state.industries).filter((val) => slugs.includes(val.slug)).map((item) => {
+      return item.name
+    })
+  })
+
+  const loadTypesAndIndustries = function() {
+    if (Object.keys(this.industries).length === 0 || Object.keys(this.types).length === 0) {
+      // const files = import.meta.glob('~/data/forms/templates/*.json')
+      // console.log(await files['/data/forms/templates/industries.json']())
+      // this.industries = await files['/data/forms/templates/industries.json']()
+      // this.types = await files['/data/forms/templates/types.json']()
     }
   }
+
+  return {
+    ...contentStore,
+    industries,
+    types,
+    getTemplateTypes,
+    getTemplateIndustries,
+    loadTypesAndIndustries,
+  }
 })
+
+export const fetchTemplate = (slug) => {
+  return useOpnApi(templatesEndpoint + '/' + slug)
+}
+
+export const fetchAllTemplates = () => {
+  return useOpnApi(templatesEndpoint)
+}
+

client/stores/workspaces.js

@@ -7,7 +7,7 @@ const storedWorkspaceId = useStorage('currentWorkspace', 0)
 
 export const useWorkspacesStore = defineStore('workspaces', {
   state: () => ({
-    content: [],
+    content: new Map,
     currentId: null,
     loading: false
   }),
@@ -70,6 +70,7 @@ export const useWorkspacesStore = defineStore('workspaces', {
     load() {
       this.set([])
       this.startLoading()
+      console.log('loaindgworkspaces')
       return useOpnApi(workspaceEndpoint).then(({data, error}) => {
         this.set(data.value)
         this.stopLoading()