components/shared/SearchModule/SMSelection.vue

<template>
  <div class="search_module_selection" @click="toggleSuggestionsSearch">
    <div
      class="search_module_selection__inner"
      :class="{ with_selection: showSelection }"
    >
      <div
        v-show="showSelection"
        class="search_module_selected"
        :class="{ 'd-none': !showSelection }"
      >
        <div
          v-for="item in selectedVehicles"
          :key="item.id"
          class="item text-wrap"
        >
          <span
            class="iconify"
            data-icon="mdi:dump-truck"
            data-inline="false"
          />
          {{ item.name }}
          <span
            class="remove_icon"
            aria-hidden="true"
            @click="deselectItem(item.id, 'vehicle')"
            >&times;</span
          >
        </div>

        <div
          v-for="item in selectedDrivers"
          :key="item.id"
          class="item text-wrap"
        >
          <span
            class="iconify"
            data-icon="mdi:account-hard-hat"
            data-inline="false"
          />
          {{ item.name }}
          <span
            class="remove_icon"
            aria-hidden="true"
            @click="deselectItem(item.id, 'driver')"
            >&times;</span
          >
        </div>

        <div
          v-for="item in selectedCircuits"
          :key="item.id"
          class="item text-wrap"
        >
          <span
            class="iconify"
            data-icon="mdi:road-variant"
            data-inline="false"
          />
          {{ item.name }}
          <span
            class="remove_icon"
            aria-hidden="true"
            @click="deselectItem(item.id, 'circuit')"
            >&times;</span
          >
        </div>

        <div
          v-for="(range, index) in selectedDateRanges"
          :key="index"
          class="item text-wrap"
        >
          <span
            class="iconify"
            data-icon="mdi:calendar-range"
            data-inline="false"
          />
          {{ getFormattedRange(range) }}
          <span
            class="remove_icon"
            aria-hidden="true"
            @click="deselectItem(range, 'date_range')"
            >&times;</span
          >
        </div>
      </div>
    </div>
    <SMSuggestion
      ref="suggestions"
      :autocomplete="suggestions"
      :visible="true || ((fixedInput || showInput) && visible)"
      :class="{ 'mtt-4': hasSelection }"
      :back-arrow="backArrow"
      @onQuery="(query) => $emit('onQuery', query)"
      @escape="showInput = false"
      @inputClick="onInputClick"
    >
      <template #input-left>
        <slot name="input-left" />
      </template>
    </SMSuggestion>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import SMSuggestion from './SMSuggestion.vue'
import moment from 'moment'

/**
 * Search module input
 */
export default {
  components: {
    SMSuggestion,
  },
  props: {
    backArrow: {
      type: Boolean,
      default: false,
    },
    visible: {
      type: Boolean,
      default: true,
    },
    suggestions: {
      type: Boolean,
      default: true,
    },
    showSelected: {
      type: Boolean,
      default: true,
    },
    fixedInput: {
      type: Boolean,
      default: false,
    },
    results: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showInput: this.fixedInput,
      searchdCategories: [],
      searchdCategory: null,
    }
  },
  computed: {
    ...mapGetters({
      selectedVehicles: 'search_module/getSelectedVehicles',
      selectedDrivers: 'search_module/getSelectedDrivers',
      selectedCircuits: 'search_module/getSelectedCircuits',
      selectedDateRanges: 'search_module/getSelectedDateRanges',
      hasSelection: 'search_module/hasSelection',
    }),
    showSelection() {
      return this.suggestions && this.hasSelection
    },
  },
  methods: {
    onInputClick() {
      this.$emit('inputClick')
    },
    getFormattedRange(range) {
      let format = 'DD/MM/YY HH[h]mm'
      return (
        moment(range[0]).format(format) +
        ' - ' +
        moment(range[1]).format(format)
      )
    },
    focusInput() {
      this.$log.debug('SMSelection.focusInput')
      this.$nextTick(() => {
        this.$refs.suggestions.focusInput()
        this.$refs.suggestions.clearQuery()
      })
    },
    showSuggestions() {
      this.showInput = true
      if (this.showInput && this.visible) {
        this.focusInput()
      }
    },
    hideSuggestions() {
      this.showInput = false
    },
    toggleSuggestionsSearch() {
      if (!this.fixedInput) {
        this.showInput = !this.showInput
        if (this.showInput && this.visible) {
          this.focusInput()
        }
      }
      this.$emit('click')
    },
    deletSelectedCategory() {},
    deletSelectedCircuit() {},
    deletSelectedChauffeur() {},
    deselectItem(value, type) {
      this.$store.dispatch('search_module/deselectItem', {
        value,
        type,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.search_module_selection {
  min-height: 40px;
  border-radius: 3px;
  //box-shadow: 0px 0px 7px;
}

.search_module__fixed_bar {
  & .search_module_selection__inner {
    margin-right: 100px;
    max-height: 40px;
  }
}
.search_module_selection__inner {
  margin-right: 100px;
  max-height: 40px;
  overflow-y: auto;
}
.search_module_selection__inner.with_selection {
  margin-top: 10px;
  margin-bottom: 10px;
  max-height: 60px;
}
.remove_icon {
  cursor: pointer;
  padding: 5px;
}
.item {
  display: inline-block;
  background-color: var(--color-main);
  color: #fff;
  width: fit-content;
  border-radius: 5px;
  padding: 2px;
  //margin: 2px;
  font-size: 14px;
  margin: 5px 0px 0px 5px;
}
.text-wrap {
  font-size: 12px;
}
</style>