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>