app/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 {useOrganizationProfileStore} from "~/store/profile/organization";

const organizationProfile = useOrganizationProfileStore()

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

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

</script>

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