app/components/Layout/Dialog/RefreshNeeded.vue

<!--
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()

onMounted(() => {
  accessProfileStore.$subscribe(() => {
    showRefreshNeededDialog.value = true
  })
})


const refreshPage = () => {
  window.location.reload()
}
</script>

<style scoped lang="scss">
</style>