add the DialogRefreshNeeded component

components/Layout/Dialog/RefreshNeeded.vue

@@ -0,0 +1,44 @@
+<!--
+Une boite de dialogue signalant que la page doit être rechargée (par exemple
+parce que le accessProfile a été modifié dans un autre onglet).
+-->
+<template>
+  <LazyLayoutDialog
+    :show="showRefreshNeededDialog"
+    theme="info"
+  >
+    <template #dialogType>{{ $t('information') }}</template>
+    <template #dialogTitle>{{ $t('refresh_needed') }}</template>
+    <template #dialogText>
+      <v-card-text class="text">
+        <p>
+          {{ $t('refresh_needed_message') }}
+        </p>
+      </v-card-text>
+    </template>
+    <template #dialogBtn>
+      <v-btn class="submitBtn theme-info" @click="refreshPage">
+        {{ $t('refresh_page') }}
+      </v-btn>
+    </template>
+  </LazyLayoutDialog>
+</template>
+
+<script setup lang="ts">
+import { useAccessProfileStore } from '~/stores/accessProfile'
+
+const showRefreshNeededDialog = ref(false)
+
+const accessProfileStore = useAccessProfileStore()
+
+accessProfileStore.$subscribe(() => {
+  showRefreshNeededDialog.value = true
+})
+
+const refreshPage = () => {
+  window.location.reload()
+}
+</script>
+
+<style scoped lang="scss">
+</style>

i18n/lang/fr.json

@@ -763,5 +763,9 @@
   "try_premium_version": "Essayer la version premium",
   "subscribe_to_the_offer": "Souscrire à l'offre",
   "to_know_more": "En savoir plus",
-  "placeListMenuKey": "Lieu"
+  "placeListMenuKey": "Lieu",
+  "information": "Information",
+  "refresh_needed": "Actualisation requise",
+  "refresh_needed_message": "La page a besoin d'être actualisée pour afficher les dernières modifications.",
+  "refresh_page": "Actualiser la page"
 }

pages/dev/poc_refresh_needed.vue

@@ -0,0 +1,29 @@
+<!--
+La boite de dialogue 'RefreshNeeded' est supposé s'afficher dès lors
+que l'accessProfile est modifié.
+-->
+
+<template>
+  <div>
+    <h1>POC Refresh Needed</h1>
+
+    <LayoutDialogRefreshNeeded />
+
+    <v-btn @click="onUpdateClick">Update profile</v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAccessProfileStore } from '~/stores/accessProfile'
+
+definePageMeta({
+  layout: false,
+})
+
+const accessProfile = useAccessProfileStore()
+
+const onUpdateClick = () => {
+  accessProfile.setActivityYear(accessProfile.activityYear + 1)
+  console.log('activity year updated to ' + accessProfile.activityYear)
+}
+</script>

stores/accessProfile.ts

@@ -160,6 +160,10 @@ export const useAccessProfileStore = defineStore('accessProfile', () => {
     setFamilyAccesses(Array.from(profile.familyAccesses))
   }
 
+  const setActivityYear = (year: number) => {
+    activityYear.value = year
+  }
+
   const setHistorical = (past: boolean, present: boolean, future: boolean) => {
     historical.value = <Historical>{
       past,
@@ -213,6 +217,7 @@ export const useAccessProfileStore = defineStore('accessProfile', () => {
     setFamilyAccesses,
     initiateProfile,
     setProfile,
+    setActivityYear,
     setHistorical,
     setHistoricalRange,
     preferencesId,