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

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()
  }
}