components/location/LocationResults/LocationResults.vue

<template>
  <div class="location_results">
    <LocationResultsView
      :results="results"
      :categories="resultsCategories"
      :loading="loading"
      :updated-at="getValidatedTimestamp"
    />
  </div>
</template>
<script>
import LocationResultsView from '@c/location/LocationResults/LocationResultsView.vue'
import { getLocationSearchSelectionLimit } from '@/services/search-service.js'
import { mapGetters } from 'vuex'
export default {
  components: {
    LocationResultsView,
  },
  computed: {
    ...mapGetters({
      getValidatedTimestamp: 'search_module/getValidatedTimestamp',
      getResultsFromType: 'location_module/getResultsFromType',
      selectionType: 'search_module/activeSearchFormTabName',
      currentSearchMode: 'search_module/currentMode',
      pendingRequestStartingWith: 'api/pendingRequestStartingWith',
    }),
    loading() {
      return this.pendingRequestStartingWith('main_search')
    },
    results() {
      return this.getResultsFromType(this.selectionType)
    },
    resultsCategories() {
      let categoriesGetterPaths = {
        vehicle: 'search_module/getVehicleCategories',
        driver: 'search_module/getDriverCategories',
        circuit: 'search_module/getCircuitCategories',
      }
      return (
        (this.selectionType &&
          this.$store.getters[categoriesGetterPaths[this.selectionType]].map(
            (c) => {
              return {
                ...c,
                parent: c.parent || c.parent_id,
              }
            }
          )) ||
        []
      )
    },
  },
  watch: {
    getValidatedTimestamp() {
      if (this.hasHistorySelectionExeededLimit()) {
        let selectionLength =
          this.$store['getters']['search_module/getSelectionLength']
        return this.$alertPopup.showSelectionLimitWarning(
          selectionLength,
          getLocationSearchSelectionLimit()
        )
      }

      this.$store.dispatch('search_module/setHasResults', true)
      this.updateResults()
    },
    loading() {
      if (this.loading) {
        this.$store.state.search_module.isSearchInProgress = true
      } else {
        this.$store.state.search_module.isSearchInProgress = false
      }
    },
  },
  methods: {
    hasHistorySelectionExeededLimit() {
      let selectionLength =
        this.$store['getters']['search_module/getSelectionLength']
      return (
        this.$store['getters']['search_module/getSelectedDateRanges'].length >
          0 && selectionLength > getLocationSearchSelectionLimit()
      )
    },
    onSearchPerformed(type) {
      return async () => {
        if (type == this.selectionType) {
          //this.loading = false;
        }
      }
    },
    async updateResults() {
      this.$store.dispatch('app/changeLayout', {
        menu_full_collapse: false,
        menu_collapsed: false,
        sub_menu: false,
      })

      //Clear previous results
      this.$store.dispatch(
        'location_module/clearResultsByType',
        this.selectionType
      )

      //  If Advanced search (Form), launch single search
      if (this.currentSearchMode === 'advanced_search') {
        this.$store
          .dispatch('location_module/performSearch', {
            selectionType: this.selectionType,
          })
          .then(this.onSearchPerformed(this.selectionType))
      } else {
        //  If "Free search", launch multiple search
        this.$nextTick(() => {
          performMultipleSearch.apply(this).catch(this.$logError)
        })
      }
    },
  },
}

/**
 * While in "Free search" (Input in on top of map), the user can combine vehicles/drivers/circuits. For now, we should call the APIs separately, at the same time (Multiple search)
 */
function performMultipleSearch() {
  return Promise.all([
    this.$store
      .dispatch('location_module/performSearch', {
        selectionType: 'vehicle',
      })
      .then(this.onSearchPerformed('vehicle')),
    this.$store
      .dispatch('location_module/performSearch', {
        selectionType: 'driver',
      })
      .then(this.onSearchPerformed('driver')),
    this.$store
      .dispatch('location_module/performSearch', {
        selectionType: 'circuit',
      })
      .then(this.onSearchPerformed('circuit')),
  ])
}
</script>