app/components/Layout/SubHeader/DataTimingRange.vue

<template>
  <main class="d-flex align-center data-timing-range">
    <div v-if="show" class="d-flex align-center" style="max-height: 100%">
      <span class="pl-2 mr-2 font-weight-bold">
        {{ $t('period_choose') }}
      </span>

      <UiInputDatePicker
        label="date_choose"
        :data="datesRange"
        range
        dense
        single-line
        height="22"
        @update="updateDateTimeRange"
      />
    </div>

    <v-btn
        ref="btn"
        class="time-btn ml-1"
        height="22" min-height="22" max-height="22"
        width="25" min-width="25" max-width="25"
        elevation="0"
        @click="show = !show"
    >
      <v-icon icon="fas fa-history" color="ot-grey" class="font-weight-normal" style="font-size: 14px;" />
    </v-btn>

    <v-tooltip location="bottom" :activator="btn">
      <span>{{ $t('history_help') }}</span>
    </v-tooltip>
  </main>
</template>

<script setup lang="ts">
import {Ref} from "@vue/reactivity";
import {useAccessProfileStore} from "~/stores/accessProfile";
import {useFormStore} from "~/stores/form";
import {WatchStopHandle} from "@vue/runtime-core";
import {useEntityManager} from "~/composables/data/useEntityManager";
import {Access} from "~/models/Access/Access";

const btn: Ref = ref(null)
const show: Ref<boolean> = ref(false)

const { setDirty } = useFormStore()
const accessProfileStore = useAccessProfileStore()
const { em } = useEntityManager()

const datesRange: Ref<Array<string | null | undefined>> = ref([
  accessProfileStore.historical.dateStart,
  accessProfileStore.historical.dateEnd
])

const updateDateTimeRange = async (dates:Array<string>): Promise<any> => {
  if (accessProfileStore.id === null) {
    throw new Error('Invalid profile id')
  }

  accessProfileStore.setHistoricalRange(dates[0], dates[1])
  setDirty(false)

  await em.patch(
      Access,
      accessProfileStore.id,
      {'historical': accessProfileStore.historical}
  )

  window.location.reload()
}

/**
 * Emit event when component is hidden / shown
  */
const emit = defineEmits(['showDateTimeRange'])

const unwatch: WatchStopHandle = watch(show, (newValue) => {
  emit('showDateTimeRange', newValue)
})

onUnmounted(() => {
  unwatch()
})

// Show by default if a date range is defined in store
if (accessProfileStore.historical.dateStart || accessProfileStore.historical.dateEnd) {
  show.value = true
  emit('showDateTimeRange', true)
}
</script>

<style scoped lang="scss">
.v-btn--active .v-icon {
  color: #FFF !important;
}

.time-btn {
  border-width: 1px 1px 1px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

.data-timing-range {
  max-height: 22px;

  :deep(.v-text-field) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  :deep(.v-input) {
    max-height: 22px;
    min-height: 22px;
    height: 22px;
  }

  :deep(.v-icon) {
    max-height: 22px;
  }

  :deep(.v-field__input) {
    font-size: 14px;
    width: 400px !important;
    padding: 0;
    max-height: 22px;
    min-height: 22px;
    height: 22px;
  }

  :deep(.v-field-label) {
    top: 0;
    font-size: 14px;
    max-height: 22px;
    min-height: 22px;
    height: 22px;
  }

  :deep(.v-input__prepend) {
    padding-top: 0;
    font-size: 14px;
  }
}

</style>