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

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

export default {
  namespaced: true,

  // initial state
  state : {
    keys: "",
    term: "",
    items: [],
    offset: 0,
    limit: 15,
    infos: null,
    count: 0
  },

  // getters
  getters : {},

  // mutations
  mutations : {
    setItems (state, items) {
      state.items = 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
    },
    resetOffset(state) {
      state.offset = 0
    },
    incrementOffset(state) {
      state.offset += state.limit
    }
  },

  // actions
  actions : {
    newSearch({ dispatch, commit, state }) {
      console.log('Search newSearch');
      commit('resetItems')
      commit('resetOffset')
      dispatch('getResults')
    },
    getResults ({ dispatch, commit, state }) {
      let params = {
        keys: state.keys,
        term: state.term,
        offset:state.offset,
        limit: state.limit
      }
      // console.log('Search getResults params', params);
      let 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)
          dispatch('getItems', data.items)
        })
        .catch(( error ) => {
            console.warn('Issue with getResults', error)
            Promise.reject(error)
        })
    },
    getItems({ dispatch, commit, state}, itemslist) {
      let params = {
        // include: 'images', // no needs to include thanks to consumers_image_styles module
        'filter[uuids-groupe][group][conjunction]': 'OR'
      };
      for (var i = 0; i < itemslist.length; i++) {
        let uuid = itemslist[i].uuid
        params[`filter[${uuid}][condition][path]`] = 'id'
        params[`filter[${uuid}][condition][value]`] = uuid
        params[`filter[${uuid}][condition][operator]`] = '='
        params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
      }
      console.log('search JSONAPI params', params);
      let q = qs.stringify(params)
      return JSONAPI.get('node/materiau?'+q)
        .then(({ data }) => {
          console.log('search getItems data', data)
          dispatch('parseItems', data)
          // commit('setItems', data.items)
        })
        .catch(( error ) => {
            console.warn('Issue with getItems', error)
            Promise.reject(error)
        })
    },
    parseItems({ dispatch, commit, state }, { data }) {
      console.log('search parseItems data', data)
      let items = []
      for (var i = 0; i < data.length; i++) {
        let itemsrc = data[i]
        let attrs = itemsrc.attributes
        let relations = itemsrc.relationships

        // get field values
        let item = {
          title: attrs.title,
          description: attrs.field_short_description,
          body: attrs.body,
          reference: attrs.field_reference,
        }

        // get images included values
        let imgsrc = relations.images.data
        item.images = []
        for (var j = 0; j < imgsrc.length; j++) {
        //   // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
        //   let index = included.findIndex(p => p.id == imgsrc[j].id)
        //   let img = included[index]
          item.images.push({
            title: imgsrc[j].meta.title,
            url: imgsrc[j].meta.imageDerivatives.links.card_medium.href
          })
        }

        items.push(item)
      }
      console.log('items', items);
      commit('setItems', items);
    }
  }
}