app/components/Layout/SubHeader/DataTiming.vue

<template>
  <main class="d-flex align-baseline">
    <span class="mr-2 ot-dark_grey--text font-weight-bold">{{ $t('display_data') }} : </span>

    <v-btn-toggle
      v-model="historicalBtn"
      dense
      class="ot-light_grey toggle-btn"
      active-class="ot-green ot-white--text"
      multiple
    >
      <v-btn max-height="25" class="font-weight-normal text-caption">
        {{ $t('past') }}
      </v-btn>

      <v-btn max-height="25" class="font-weight-normal text-caption">
        {{ $t('present') }}
      </v-btn>

      <v-btn max-height="25" class="font-weight-normal text-caption">
        {{ $t('future') }}
      </v-btn>
    </v-btn-toggle>
  </main>
</template>

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

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

const historicalBtn: Ref<Array<number>> = initHistoricalBtn(accessProfileStore.historical as Array<any>)

const unwatch: WatchStopHandle = watch(historicalBtn, async (newValue) => {
  const historicalChoice: Array<string> = initHistoricalChoice(newValue)

  accessProfileStore.setHistorical(historicalChoice)
  setDirty(false)
  await updateMyProfile()
  window.location.reload()
})

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

/**
   * Prépare le tableau de valeur numéraire devant être passé au component v-btn-toggle
   * @param historical
   */
function initHistoricalBtn (historical: Array<any>) {
  const timeChoice:Ref<Array<number>> = ref(Array<number>())
  const historicalArray:Array<any> = ['past', 'present', 'future']

  for (const key in historicalArray) {
    if (historical[historicalArray[key]]) { timeChoice.value.push(parseInt(key)) }
  }
  return timeChoice
}

/**
   * Transforme le résultat renvoyé par le component v-btn-toggle pour l'enregistrer coté AccessProfile
   * @param historical
   */
function initHistoricalChoice (historical: Array<any>) {
  const historicalArray:Array<any> = ['past', 'present', 'future']

  const historicalChoice:Array<string> = []
  for (const key in historical) {
    historicalChoice.push(historicalArray[historical[key]])
  }
  return historicalChoice
}
</script>

<style scoped lang="scss">
  .toggle-btn{
    z-index: 1;
    border-radius: 4px 0 0 4px;
  }
</style>