app_vue2/components/Layout/SubHeader/ActivityYear.vue

<template>
  <main class="d-flex">
    <span class="mr-2 ot_dark_grey--text font-weight-bold">{{ $t(label) }} : </span>
    <UiXeditableText
      class="activity-year-input"
      type="number"
      :data="activityYear"
      @update="updateActivityYear"
    >
      <template #xeditable.read="{inputValue}">
        <v-icon aria-hidden="false" class="ot_green--text" x-small>
          fas fa-edit
        </v-icon>
        <strong class="ot_green--text"> {{ inputValue }} <span v-if="yearPlusOne">/ {{ parseInt(inputValue) + 1 }}</span></strong>
      </template>
    </UiXeditableText>
  </main>
</template>

<script lang="ts">
import { defineComponent, useContext } from '@nuxtjs/composition-api'
import { useMyProfile } from '~/composables/data/useMyProfile'
import { $organizationProfile } from '~/services/profile/organizationProfile'
import { $useForm } from '~/composables/form/useForm'

export default defineComponent({
  setup () {
    const { store } = useContext()
    const { updateMyProfile, setActivityYear, activityYear } = useMyProfile()
    const { markFormAsNotDirty } = $useForm()

    const organizationProfile = $organizationProfile(store)

    const yearPlusOne:boolean = !organizationProfile.isManagerProduct()
    const label:string = organizationProfile.isSchool() ? 'schooling_year' : organizationProfile.isArtist() ? 'season_year' : 'cotisation_year'

    const updateActivityYear = async (newDate:number) => {
      markFormAsNotDirty()
      setActivityYear(newDate)
      await updateMyProfile()
      window.location.reload()
    }

    return {
      activityYear,
      label,
      yearPlusOne,
      updateActivityYear
    }
  }
})
</script>

<style lang="scss">
  .activity-year-input{
    max-height: 20px;
    input{
      font-size: 14px;
      width: 55px !important;
    }
  }
</style>