app_vue2/components/Layout/AlertBar/SwitchYear.vue

<!--
Switch year bar : Barre qui s'affiche lorsque l'utilisateur n'est pas sur l'année courante.
-->

<template>
  <UiSystemBar color="ot_warning" v-if="isShow">
    <template #bar.text>
      {{$t('not_current_year')}}
      <a @click="resetYear"><strong class="ot_black--text">{{$t('not_current_year_reset')}}</strong></a>
    </template>
  </UiSystemBar>
</template>

<script lang="ts">
import { defineComponent, useContext, computed} from '@nuxtjs/composition-api'
import {accessState, organizationState} from "~/types/interfaces";
import {$useDirtyForm} from "~/use/form/useDirtyForm";
import {$useMyProfileUpdater} from "~/use/updater/useMyProfileUpdater";

export default defineComponent({
  setup () {
    const { store, $dataPersister } = useContext()
    const { markFormAsNotDirty } = $useDirtyForm(store)
    const { updateMyProfile, setHistorical, setActivityYear } = $useMyProfileUpdater(store, $dataPersister)

    const profileAccess:accessState = store.state.profile.access
    const profileOrganization:organizationState = store.state.profile.organization

    const isShow = computed(() => {
      return (
        profileAccess.historical.past || profileAccess.historical.future
        ||
        profileAccess.historical.dateStart || profileAccess.historical.dateEnd
        ||
        profileAccess.activityYear !== profileOrganization.currentActivityYear
      )
    })

    const resetYear = async () =>{
      setHistorical(['present'])
      setActivityYear(profileOrganization.currentActivityYear)
      markFormAsNotDirty()
      await updateMyProfile()
      window.location.reload()
    }

    return {
      isShow,
      resetYear
    }
  }
})
</script>

<style scoped>

</style>