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

127 lines
3.5 KiB
JavaScript

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 = {
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)
},
remove (state, item) {
state.content = state.content.filter((val) => val.id !== item.id)
},
startLoading (state) {
state.loading = true
},
stopLoading (state) {
state.loading = false
},
setAllLoaded (state, val) {
state.allLoaded = val
}
}
// actions
export const actions = {
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')
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')
})
},
loadAll (context, options=null) {
context.commit('startLoading')
context.dispatch('loadTypesAndIndustries')
// 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 axios.get((queryStr) ? templatesEndpoint + '?' + queryStr : templatesEndpoint).then((response) => {
if(options !== null){
context.commit('set', response.data)
context.commit('setAllLoaded', false)
} else {
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()
}
}