gdp_vuewp/src/store/modules/search.js

import axios from 'axios'

import { REST } from 'api/rest-axios'
import qs from 'querystring'

const _filterskeys = ['persons', 'places', 'objects']
const _CancelToken = axios.CancelToken
// const _cancelTokenSource = _CancelToken.source()
let _cancelTokens = []

export default {
  namespaced: true,
  testconst: 'Hello',

  // initial state
  state: {
    keys: '',
    searchedKeys: '',
    searchTypeOptions: [
      { 'code': 'text', 'label': 'Dans les textes' },
      { 'code': 'persons', 'label': 'Dans les personnes' },
      { 'code': 'places', 'label': 'Dans les lieux' },
      { 'code': 'objects', 'label': 'Dans les objets' }
    ],
    searchTypeValue: { 'code': 'text', 'label': 'Dans les textes' },
    filters: { persons: [], places: [], objects: [] },
    activeFilters: { persons: [], places: [], objects: [] },
    sortOptions: [
      { code: 'date', label: 'date' },
      { code: 'score', label: 'pertinence' },
      { code: 'size', label: 'nombre de mots' }
    ],
    sorting: null,
    results: [],
    resultsQuantity: null,
    isloading: false,
    limit: 10,
    offset: 0,
    opened: false
  },

  // getters
  getters: {},

  // mutations
  mutations: {
    setKeys (state, keys) {
      state.keys = keys
    },
    setSearchKeys (state) {
      state.searchedKeys = state.keys
    },
    setResults (state, content) {
      state.results = state.results.concat(content)
    },
    resetResults (state) {
      console.log('resetResults')
      state.results = []
    },
    resetOffset (state) {
      state.offset = 0
    },
    setResultsCount (state, quantity) {
      state.resultsQuantity = quantity
    },
    incrementOffset (state) {
      state.offset += state.limit
    },
    setIsloading (state, isloading) {
      console.log('setIsloading', isloading)
      state.isloading = isloading
    },
    setOpened (state, opened) {
      state.opened = opened
    },
    setSearchTypeValue (state, value) {
      state.searchTypeValue = value
    },
    setFilters (state, filters) {
      for (let index in filters) {
        if (filters.hasOwnProperty(index)) {
          console.log('index', index)
          if (filters[index]) {
            if (Array.isArray(filters[index])) {
              state.filters[index] = []
              for (var i = 0; i < filters[index].length; i++) {
                if (filters[index][i].uuid && filters[index][i].title) {
                  state.filters[index].push({
                    code: filters[index][i].uuid,
                    label: filters[index][i].title
                  })
                }
              }
            } else {
              if (filters[index].uuid && filters[index].title) {
                state.filters[index] = [{
                  code: filters[index].uuid,
                  label: filters[index].title
                }]
              }
            }
          } else {
            state.filters[index] = []
          }
        }
      }
      console.log('filters', state.filters)
    },
    setActiveFilters (state, filters) {
      // console.log('setActiveFilters', filters)
      state.activeFilters[filters.index] = filters.value
      // console.log('state.activeFilters', state.activeFilters)
    },
    resetActiveFilters (state) {
      for (var index of _filterskeys) {
        state.activeFilters[index] = []
      }
    },
    setSorting (state, sort) {
      console.log('setSorting', sort)
      state.sorting = sort
    }
  },

  // actions
  actions: {
    getResults ({ dispatch, commit, state }, pl) {
      console.log(`getResults keys: ${pl.keys}, infiniteLoading:`, pl.infiniteLoading)

      if (!pl.infiniteLoading) {
        // loading indicator unless we are on infiniteloading
        commit('setIsloading', true)
        commit('resetOffset')
        // cancel infiniteloading requests
        _cancelTokens.forEach((ct, i) => {
          console.log('_cancelTokens forEach ct', ct)
          ct.cancel('new or updated search fired')
        })
      }

      // construct params
      let params = {
        search: `${pl.keys}`,
        start: state.offset,
        count: state.limit
      }
      if (state.searchTypeValue.code !== 'text') {
        params.type = state.searchTypeValue.code
      }
      let f
      for (var index of _filterskeys) {
        if (state.activeFilters[index].length) {
          f = `filter${index.charAt(0).toUpperCase()}${index.slice(1)}`
          params[f] = []
          for (var i = 0; i < state.activeFilters[index].length; i++) {
            params[f].push(state.activeFilters[index][i].code)
          }
        }
      }
      if (state.sorting) {
        params.sort = state.sorting.code
      }
      // console.log('Search getResults params', params);
      let q = qs.stringify(params)

      // construct options
      let ops = {}
      if (pl.infiniteLoading) {
        ops.cancelToken = pl.infiniteLoading.cancelToken
      }

      return REST.get(`${window.apipath}/search?` + q, ops)
        .then(({ data }) => {
          console.log(`search REST quantity: ${data.meta.quantity.quantity}, offset+limit: ${state.offset + state.limit}, data:`, data)
          commit('setResultsCount', data.meta.quantity)
          commit('setFilters', data.meta.filters)

          if (state.isloading) {
            // a new or updated search has been launched :
            // we dont apply the infinite loading received results
            // and we reset the infinite loader
            // pl.infiniteLoading.$state.reset()
            _cancelTokens.forEach((ct, i) => {
              console.log('_cancelTokens forEach AFTER ct', ct)
              ct.cancel('new or updated search fired')
              ct.$state.complete()
            })
            _cancelTokens = []
          }

          if (!pl.infiniteLoading) {
            // we are not on infiniteloading
            // new or updated search
            commit('resetResults')
            commit('setSearchKeys')
            commit('setResults', data.content)
            commit('setIsloading', false)
            commit('setOpened', true)
          } else {
            // we are on infiniteloading
            // normal InfiniteLoading procedure
            commit('setResults', data.content)
            if (state.offset + state.limit > data.meta.quantity.quantity) {
              // tell to vue-infinite-loading plugin that there is no new page
              pl.infiniteLoading.$state.complete()
            } else {
              // tell to vue-infinite-loading plugin that newpage is loaded
              pl.infiniteLoading.$state.loaded()
            }
          }
        })
        .catch((error) => {
          // console.warn('Issue with search', error)
          if (axios.isCancel(error)) {
            console.info(`Request canceled, message: ${error.message}`)
            // TODO: the $state here is probably not the good one
            // Promise.reject(error)
            // pl.infiniteLoading.$state.reset()
          } else {
            commit('setIsloading', false)
            if (pl.infiniteLoading) {
              pl.infiniteLoading.$state.error()
            }
            Promise.reject(error)
          }
        })
    },
    newSearch ({ dispatch, commit, state }) {
      commit('resetActiveFilters')
      dispatch('getResults', { keys: state.keys })
      // .then((e) => {
      //   console.log('dispatch get results then', e)
      // })
    },
    updateSearch ({ dispatch, commit, state }) {
      dispatch('getResults', { keys: state.searchedKeys })
    },
    nextResultsBatch ({ dispatch, commit, state }, $infiniteLoadingState) {
      console.log(`nextResultsBatch, isloading: ${state.isloading}`, $infiniteLoadingState)
      if (state.isloading) {
        // we are loading a new or updated searche
        // we stop the infinite
        $infiniteLoadingState.complete()
      } else {
        commit('incrementOffset')
        if (state.offset < state.resultsQuantity.quantity) {
          dispatch('getResults', {
            keys: state.searchedKeys,
            infiniteLoading: {
              $state: $infiniteLoadingState,
              cancelToken: new _CancelToken((c) => {
                _cancelTokens.push({
                  cancel: c,
                  $state: $infiniteLoadingState
                })
              })
            }
          })
        } else {
          $infiniteLoadingState.complete()
        }
      }
    }
  }
}