materio-d8/web/themes/custom/materiotheme/vuejs/store/modules/search.js

// import { REST } from 'vuejs/api/rest-axios'
// import { JSONAPI } from 'vuejs/api/json-axios'
import { MA } from 'vuejs/api/ma-axios'
import qs from 'querystring-es3'

import materiauGQL from 'vuejs/api/gql/materiausearch.fragment.gql'

export default {
  namespaced: true,

  // initial state
  state: {
    keys: '',
    term: '',
    uuids: [],
    items: [],
    offset: 0,
    limit: 15,
    infos: null,
    count: 0,
    noresults: false,
    // infinteState will come from vue-infinite-loading plugin
    // implemented in vuejs/components/Content/Base.vue
    infiniteLoadingState: null
  },

  // getters
  getters: {},

  // mutations
  mutations: {
    setUuids (state, uuids) {
      state.uuids = state.uuids.concat(uuids)
    },
    resetUuids (state) {
      state.uuids = []
    },
    setMaterials (state, items) {
      state.items = state.items.concat(items)
    },
    resetItems (state) {
      state.items = []
    },
    setKeys (state, keys) {
      state.keys = keys
    },
    setTerm (state, term) {
      state.term = term
    },
    setInfos (state, infos) {
      state.infos = infos
    },
    setCount (state, count) {
      state.count = count
    },
    resetCount (state, count) {
      state.count = false
    },
    setNoresults (state) {
      state.noresults = true
    },
    resetNoresults (state) {
      state.noresults = false
    },
    resetOffset (state) {
      state.offset = 0
    },
    incrementOffset (state) {
      state.offset += state.limit
    },
    setInfiniteState (state, infiniteLoadingstate) {
      state.infiniteLoadingState = infiniteLoadingstate
    }
  },

  // actions
  actions: {
    newSearch ({ dispatch, commit, state }) {
      console.log('Search newSearch')
      commit('resetUuids')
      commit('resetItems')
      commit('resetCount')
      commit('resetNoresults')
      commit('resetOffset')
      this.commit('Common/setPagetitle', state.keys)
      dispatch('getResults')
    },
    nextPage ({ dispatch, commit, state }, $infiniteLoadingstate) {
      console.log('Search nextPage', $infiniteLoadingstate)
      commit('incrementOffset')
      commit('setInfiniteState', $infiniteLoadingstate)
      dispatch('getResults')
    },
    getResults ({ dispatch, commit, state }) {
      const params = {
        keys: state.keys,
        term: state.term,
        offset: state.offset,
        limit: state.limit
      }
      // console.log('Search getResults params', params);
      const q = qs.stringify(params)
      return MA.get('/materio_sapi/getresults?' + q)
        .then(({ data }) => {
          console.log('search MA getresults data', data)
          // commit('setItems', data.items)
          commit('setInfos', data.infos)
          commit('setCount', data.count)
          if (data.count) {
            commit('setUuids', data.uuids)
            // loadMaterials is on mixins
            // https://github.com/huybuidac/vuex-extensions

            dispatch('loadMaterialsGQL', {
              ids: data.nids,
              gqlfragment: materiauGQL,
              callBack: 'loadMaterialsCallBack'
            })

            // dispatch('loadMaterials', {
            //   uuids: data.uuids,
            //   imgStyle: ['card_medium', 'card_full'],
            //   callBack: 'loadMaterialsCallBack'
            // })
          } else {
            commit('setNoresults')
          }
        })
        .catch((error) => {
          console.warn('Issue with getResults', error)
          Promise.reject(error)
        })
    },
    loadMaterialsCallBack ({ commit, state }, { items, callBackArgs }) {
      console.log('search loadMaterialsCallBack', items)
      commit('setMaterials', items)
      if (state.infiniteLoadingState) {
        if (state.offset + state.limit > state.count) {
          console.log('Search infinite completed')
          // tell to vue-infinite-loading plugin that there si no new page
          state.infiniteLoadingState.complete()
        } else {
          console.log('Search infinite loaded')
          // tell to vue-infinite-loading plugin that newpage is loaded
          state.infiniteLoadingState.loaded()
        }
      }
    }
  }
}