Improve Templates (#183)

* Improve Templates

* Fix test case

* Update AI GenerateTemplate

* update openai client and GPT completer

* composer.lock

* Update types and list json with script

* Template changes

* fix on draft template

* Finish opnform templates

---------

Co-authored-by: Forms Dev <chirag+new@notionforms.io>
Co-authored-by: Julien Nahum <julien@nahum.net>

resources/js/store/modules/open/templates.js

@@ -1,55 +1,124 @@
-import Vue from 'vue'
 import axios from 'axios'
 
+export const templatesEndpoint = '/api/templates'
+export const namespaced = true
+
 // state
 export const state = {
   content: [],
+  industries: {},
+  types: {},
+  allLoaded: false,
   loading: false
 }
 
 // getters
 export const getters = {
-  getById: (state) => (id) => {
-    if (state.content.length === 0) return null
-    return state.content.find(item => item.id === id)
-  },
   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 })
+  }
 }
 
 // mutations
 export const mutations = {
   set (state, items) {
     state.content = items
+    state.allLoaded = true
+  },
+  append (state, items) {
+    const ids = items.map((item) => { return item.id })
+    state.content = state.content.filter((val) => !ids.includes(val.id))
+    state.content = state.content.concat(items)
   },
   addOrUpdate (state, item) {
     state.content = state.content.filter((val) => val.id !== item.id)
     state.content.push(item)
   },
-  startLoading () {
+  remove (state, item) {
+    state.content = state.content.filter((val) => val.id !== item.id)
+  },
+  startLoading (state) {
     state.loading = true
   },
-  stopLoading () {
+  stopLoading (state) {
     state.loading = false
+  },
+  setAllLoaded (state, val) {
+    state.allLoaded = val
   }
 }
 
 // actions
 export const actions = {
-  load (context) {
+  resetState (context) {
     context.commit('set', [])
+    context.commit('stopLoading')
+  },
+  loadTypesAndIndustries (context) {
+    if (Object.keys(context.state.industries).length === 0) {
+      import('@/data/forms/templates/industries.json').then((module) => {
+        context.state.industries = module.default
+      })
+    }
+    if (Object.keys(context.state.types).length === 0) {
+      import('@/data/forms/templates/types.json').then((module) => {
+        context.state.types = module.default
+      })
+    }
+  },
+  loadTemplate (context, slug) {
     context.commit('startLoading')
-    return axios.get('/api/templates').then((response) => {
-      context.commit('set', response.data)
+    context.dispatch('loadTypesAndIndustries')
+
+    if (context.getters.getBySlug(slug)) {
+      context.commit('stopLoading')
+      return Promise.resolve()
+    }
+
+    return axios.get(templatesEndpoint + '/' + slug).then((response) => {
+      context.commit('addOrUpdate', response.data)
+      context.commit('stopLoading')
+    }).catch((error) => {
       context.commit('stopLoading')
     })
   },
-  loadIfEmpty ({ context, dispatch, state }) {
-    if (state.content.length === 0) {
-      return dispatch('load')
+  loadAll (context) {
+    context.commit('startLoading')
+    context.dispatch('loadTypesAndIndustries')
+    return axios.get(templatesEndpoint).then((response) => {
+      context.commit('append', response.data)
+      context.commit('setAllLoaded', true)
+      context.commit('stopLoading')
+    }).catch((error) => {
+      context.commit('stopLoading')
+    })
+  },
+  loadIfEmpty (context) {
+    if (!context.state.allLoaded) {
+      return context.dispatch('loadAll')
     }
+    context.commit('stopLoading')
     return Promise.resolve()
   },
+  loadWithLimit (context, limit) {
+    context.commit('startLoading')
+    context.dispatch('loadTypesAndIndustries')
+
+    return axios.get(templatesEndpoint + '?limit=' + limit).then((response) => {
+      context.commit('set', response.data)
+      context.commit('setAllLoaded', false)
+      context.commit('stopLoading')
+    }).catch((error) => {
+      context.commit('stopLoading')
+    })
+  }
 }