components/location/LocationIdentBacs/LocationIdentBacs.vue

<template>
  <div>
    <b-spinner
      v-if="isLoading"
      class="loader"
      variant="info"
      style="width: 3rem; height: 3rem; margin: 0 auto; display: block"
    />

    <div class="row pl-3">
      <div class="col-6">
        <SectionField
          v-if="!isLoading"
          is-row
          :title="$t('common.Véhicule')"
          title-class="text-bold"
          :value="item.vehicleName"
          value-class="pl-1"
        />
      </div>
      <div class="col-6">
        <SectionField
          v-if="!isLoading"
          is-row
          :title="$t('common.date')"
          data-i18n-code="common.date"
          title-class="text-bold"
          :value="formattedDate(item.date)"
          value-class="pl-1"
        />
      </div>
    </div>

    <div v-if="!isLoading">
      <LocationIdentBacsSynthesis
        class="mt-2"
        :synthesis="identificationBacsSynthesis"
      />

      <LocationIdentBacsDetails
        class="mt-4"
        :items="identificationBacsDetails"
        @on-item-click="onItemClick"
      />
    </div>
  </div>
</template>
<script>
import locationLayoutModesMixin from '@c/location/mixins/location-layout-modes.js'
import { mapGetters } from 'vuex'
import LocationIdentBacsSynthesis from './LocationIdentBacsSynthesis.vue'
import LocationIdentBacsDetails from './LocationIdentBacsDetails.vue'
import moment from 'moment'
import SectionField from '@c/shared/SectionField.vue'

/**
 * List feature
 * @namespace components
 * @category components
 * @subcategory location/identification
 * @module LocationIdentBacs
 **/
export default {
  name: 'LocationIdentBacs',
  components: {
    LocationIdentBacsSynthesis,
    SectionField,
    LocationIdentBacsDetails,
  },
  mixins: [locationLayoutModesMixin],
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    view: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      color: '#164470',
      isLoading: false,
      markersArray: [],
    }
  },
  computed: {
    ...mapGetters({
      identificationBacsSynthesis:
        'location_module/identificationBacsSynthesis',
      identificationBacsDetails: 'location_module/identificationBacsDetails',
    }),
  },
  watch: {
    item: {
      async handler() {
        this.update()
      },
      deep: true,
    },
  },
  async created() {
    this.update()
    this.switchToListMode({
      mapComponent: 'LocationIdentBacsMap',
    })
  },
  methods: {
    async update() {
      this.isLoading = true
      await this.$store.dispatch(
        'location_module/fetchIdentificationBacsData',
        {
          vehicleId: this.item.id,
          date: this.item.date,
        }
      )
      this.isLoading = false
    },
    onItemClick(value) {
      this.$mitt.emit('SIMPLICITI_MAP_FIT_TO_BOUNDS', [[value.lat, value.lng]])
      this.$mitt.emit('SIMPLICITI_MAP_OPEN_MARKER_POPUP', {
        groupName: 'bacs_markers',
        layerId: value.id,
      })
    },
    formattedDate(date) {
      return this.$date.formatDate(date)
    },
  },
}
</script>

<style lang="scss" scoped></style>