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 accessProfileUpdated = ref(false)

const accessProfileStore = useAccessProfileStore()
const pageStore = usePageStore()

const showRefreshNeededDialog = computed(
  () => accessProfileUpdated.value && !pageStore.loading,
)

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

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

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