app/components/Layout/AlertBar/SwitchYear.vue

<!--
Switch year bar

Barre d'alerte qui s'affiche lorsque l'utilisateur n'est pas sur l'année courante.
-->

<template>
  <!-- TODO : fonctionnement à valider -->
  <UiSystemBar v-if="show" text-color="warning">
    {{$t('not_current_year')}}

    <a @click="resetYear">
      <strong class="text-neutral-strong">
        {{$t('not_current_year_reset')}}
      </strong>
    </a>
  </UiSystemBar>
</template>

<script setup lang="ts">
  import {useAccessProfileStore} from "~/stores/accessProfile";
  import {useOrganizationProfileStore} from "~/stores/organizationProfile";
  import {ComputedRef} from "@vue/reactivity";
  import {useFormStore} from "~/stores/form";

  const accessProfile = useAccessProfileStore()
  const organizationProfile = useOrganizationProfileStore()
  const { setDirty } = useFormStore()

  const show: ComputedRef<boolean> = computed(() => {
    return (
        accessProfile.historical.past || accessProfile.historical.future ||
        (accessProfile.historical.dateStart && accessProfile.historical.dateStart.length > 0) ||
        (accessProfile.historical.dateEnd && accessProfile.historical.dateEnd.length > 0) ||
        accessProfile.activityYear !== organizationProfile.currentActivityYear
    )
  })

  const resetYear = async () => {
    accessProfile.setHistorical(false, true, false)

    if (organizationProfile.currentActivityYear) {
      accessProfile.activityYear = organizationProfile.currentActivityYear
    }

    setDirty(false)

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

<style scoped lang="scss">
.v-system-bar {
  font-size: 14px;
}

.v-icon {
  height: 20px;
  margin: 0 6px;
}
</style>