app/components/Layout/SubHeader/DataTiming.vue

<template>
  <main class="d-flex align-baseline">
    <span v-show="mdAndUp" class="mr-2 font-weight-bold on-neutral"
      >{{ $t('display_data') }} :
    </span>

    <v-btn-toggle
      ref="toggle"
      :model-value="historicalValue"
      density="compact"
      :color="color"
      multiple
      divider
      border
      :rounded="true"
      class="toggle-btn"
      @update:model-value="onUpdate"
    >
      <v-btn
        v-for="(choice, index) in historicalChoices"
        :key="index"
        :value="choice"
        max-height="25"
        :class="
          'font-weight-normal text-caption ' +
          (historicalValue.includes(choice)
            ? 'theme-primary'
            : 'theme-neutral-soft')
        "
      >
        <!-- TODO: on ne devrait pas avoir besoin du if et de la classe 'btn-selected' dans v-btn, mais à l'heure
         qu'il est, le component ne fonctionne pas comme attendu. A revoir quand vuetify 3 sera plus stable -->
        {{ $t(choice) }}
      </v-btn>
    </v-btn-toggle>
  </main>
</template>

<script setup lang="ts">
import type { Ref } from 'vue'
import { useDisplay, useTheme } from 'vuetify'
import { useFormStore } from '~/stores/form'
import { useAccessProfileStore } from '~/stores/accessProfile'
import { useEntityManager } from '~/composables/data/useEntityManager'
import Access from '~/models/Access/Access'
import { usePageStore } from '~/stores/page'
import { useRefreshProfile } from '~/composables/data/useRefreshProfile'

// TODO: en v3.0.5, pas de solution documentée pour renseigner directement la couleur dans le template, à revoir
const color = useTheme().current.value.colors.primary

const { setDirty } = useFormStore()
const accessProfileStore = useAccessProfileStore()
const { em } = useEntityManager()
const { mdAndUp } = useDisplay()
const pageStore = usePageStore()
const { refreshProfile } = useRefreshProfile()

const toggle = ref(null)

const historicalChoices: Array<'past' | 'present' | 'future'> = [
  'past',
  'present',
  'future',
]

const historicalValue: Ref<Array<string>> = ref(
  historicalChoices.filter((item) => accessProfileStore.historical[item]),
)

const onUpdate = async (newValue: Array<string>) => {
  historicalValue.value = newValue

  const accessId = accessProfileStore.currentAccessId

  accessProfileStore.setHistorical(
    historicalValue.value.includes('past'),
    historicalValue.value.includes('present'),
    historicalValue.value.includes('future'),
  )

  setDirty(false)
  pageStore.loading = true

  await em.patch(Access, accessId, {
    historical: accessProfileStore.historical,
  })
  if (import.meta.server) {
    // Force profile refresh server side to avoid a bug where server and client stores diverge on profile refresh
    await refreshProfile()
  }

  window.location.reload()
}
</script>

<style scoped lang="scss">
.v-btn-group {
  max-height: 22px;
}

.v-btn {
  padding: 0 8px;
}

.v-btn.btn-selected {
  background-color: rgb(var(--v-theme-primary)) !important;
}
</style>