app/components/Layout/AlertBar/SuperAdmin.vue

<!--
Super Admin bar

Barre d'alerte qui s'affiche lorsque l'utilisateur est un super admin en mode switch
-->

<template>
  <!-- TODO : fonctionnement à valider -->
  <UiSystemBar v-if="show" class="theme-danger" :on-click="onClick">
    <v-icon small>fas fa-exclamation-triangle</v-icon>
    <span>{{ $t('super_admin_switch_account') }} </span>
  </UiSystemBar>
</template>

<script setup lang="ts">
  import {useAccessProfileStore} from "~/stores/accessProfile";
  import UrlUtils from "~/services/utils/urlUtils";
  import type {ComputedRef} from "@vue/reactivity";
  import {navigateTo} from "#app";
  import {useAdminUrl} from "~/composables/utils/useAdminUrl";

  const { makeAdminUrl } = useAdminUrl()

  const accessProfile = useAccessProfileStore()

  const show: ComputedRef<boolean> = computed(() =>
      accessProfile.originalAccess !== null && accessProfile.originalAccess.isSuperAdminAccess
  )

  const url: ComputedRef<string> = computed(() => {
    const orgId = accessProfile.originalAccess ? accessProfile.originalAccess.organization.id : null
    const originalAccessId = accessProfile.originalAccess ? accessProfile.originalAccess.id : null

    if (show && orgId && originalAccessId) {
      return makeAdminUrl(UrlUtils.join('#', 'switch_user', orgId, originalAccessId, 'exit'))
    }
    return ''
  })

  const onClick = () => {
    navigateTo(url.value,{ external: true })
  }
</script>

<style scoped lang="scss">
.v-system-bar {
  font-size: 14px;
}

.v-icon {
  height: 20px;
  margin: 0 6px;
}
</style>