header.ce.vue

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { getUserDetails } from './auth'
import { getI18n, t } from '@/i18n'
import { state, replaceUrlsVariables } from '@/shared'
import { allNodes } from '@/utils'
import Menu from '@/ui/Menu.vue'
import AccountItem from '@/ui/AccountItem.vue'
import Logo from '@/ui/Logo.vue'
import BurgerIcon from '@/ui/icons/BurgerIcon.vue'

const props = defineProps<{
  activeApp?: string
  configFile?: string
  stylesheet?: string
  height?: number
  legacyHeader?: string
  legacyUrl?: string
  logoUrl?: string
  customNonce?: string
}>()
const navigation = computed(() => state.navigation)
const isAnonymous = computed(() => !state.user || state.user.anonymous)
const isWarned = computed(() => state.user?.warned)
const remainingDays = computed(() => state.user?.remainingDays)
const loginUrl = computed(() => {
  const href = new URL(replaceUrlsVariables(state.config.login.url))
  for (const param of state.config.login.params || []) {
    const key = Object.keys(param)[0]
    href.searchParams.set(key, replaceUrlsVariables(param[key]))
  }
  return href.toString()
})
const logoutUrl = computed(() =>
  replaceUrlsVariables(
    state.user?.isExternalAuth && state.config.logoutExternalUrl
      ? state.config.logoutExternalUrl
      : state.config.logoutUrl
  )
)

function determineActiveApp(): void {
  const navigationSource =
    (state.navigation?.menus?.length ?? 0) > 0 ? state.navigation : state.menu
  const allLinks = allNodes(navigationSource, 'activeAppUrl')
  const computedUrl = window.location.href.substring(
    window.location.origin.length,
    window.location.href.length
  )
  let matched: boolean
  for (const link of allLinks) {
    matched = false
    const activeAppUrlSplitted = link.split(':')
    const base =
      activeAppUrlSplitted.length > 1 ? activeAppUrlSplitted[0] : 'start'
    const url = replaceUrlsVariables(
      activeAppUrlSplitted.length > 1
        ? activeAppUrlSplitted[1]
        : activeAppUrlSplitted[0]
    )
    switch (base) {
      case 'end':
        matched = computedUrl.endsWith(url)
        break
      case 'includes':
        matched = computedUrl.includes(url)
        break
      case 'exact':
        matched = computedUrl === url
        break
      default:
        matched = computedUrl.startsWith(url)
        break
    }
    state.matchedRouteScore =
      matched && link.length > state.matchedRouteScore
        ? link.length
        : state.matchedRouteScore
    if (matched && state.matchedRouteScore === link?.length) {
      state.activeAppUrl = link
    }
  }
}

function setI18nAndActiveApp(i18n?: any) {
  state.lang3 = getI18n(
    i18n || {},
    state.config.lang || navigator.language.substring(0, 2) || 'en'
  )
  state.config.logoutExternalUrl ??= state.config.logoutUrl
  determineActiveApp()
  state.loaded = true
}

onMounted(() => {
  if (props.legacyHeader !== 'true') {
    getUserDetails().then(user => {
      state.user = user
      state.config.stylesheet ??= props.stylesheet
      if (props.configFile)
        fetch(props.configFile)
          .then(res => res.json())
          .then(json => {
            state.config = Object.assign({}, state.config, json.config)
            const incomingNavigation = json.navigation
            if (incomingNavigation?.menus?.length) {
              state.navigation = Object.assign(
                {},
                state.navigation,
                incomingNavigation
              )
            } else if (json.menu) {
              state.navigation = Object.assign({}, state.navigation, {
                menus: [json.menu],
              })
            } else if (incomingNavigation) {
              state.navigation = Object.assign(
                {},
                state.navigation,
                incomingNavigation
              )
            }
            if (json.menu) {
              state.menu = json.menu
            }
            setI18nAndActiveApp(json.i18n)
          })
      else setI18nAndActiveApp()
    })
  }
})
</script>

<template>
  <div v-if="props.legacyHeader === 'true'">
    <iframe
      class="w-full"
      v-bind:src="`${props.legacyUrl}${
        props.activeApp ? `?active=${props.activeApp}` : ''
      }`"
      :style="`height:${props.height}px;width:100%;border:0;`"
    ></iframe>
  </div>
  <header
    v-else-if="state.loaded"
    class="host h-[80px] text-base"
    :class="{ 'has-custom-stylesheet': state.config.stylesheet }"
    :style="`height:${props.height}px`"
  >
    <link
      rel="stylesheet"
      :href="state.config.stylesheet"
      v-if="state.config.stylesheet"
      :nonce="props.customNonce"
    />
    <link
      rel="stylesheet"
      :href="state.config.iconsUrl"
      v-if="state.config.iconsUrl"
      :nonce="props.customNonce"
    />
    <div
      class="justify-between text-slate-600 lg:flex hidden h-full bg-white lg:text-sm"
    >
      <div class="flex header-left flex-1 min-w-0">
        <Logo :logoUrl="props.logoUrl || state.config.logoUrl" />
        <nav
          :class="[
            'flex items-center font-semibold header-nav grow',
            navigation.class || 'justify-start',
          ]"
        >
          <Menu :items="navigation?.menus ?? []" />

          <span class="text-gray-400 text-xs" v-if="isWarned">
            <a href="/console/account/changePassword">
              {{ t('remaining_days_msg_part1') }} {{ remainingDays }}
              {{ t('remaining_days_msg_part2') }}
              {{ t('remaining_days_msg_part3') }}</a
            ></span
          >
        </nav>
      </div>
      <AccountItem
        :is-anonymous="isAnonymous"
        :login-url="loginUrl"
        :logout-url="logoutUrl"
      />
    </div>
    <div class="flex-col lg:hidden w-full h-full">
      <div
        class="h-full flex items-center justify-between px-4 py-1 shrink-0 w-full bg-primary/10"
      >
        <div class="h-full flex">
          <BurgerIcon class="mr-3" />
          <Logo :logoUrl="props.logoUrl || state.config.logoUrl" />
        </div>
        <AccountItem
          :is-anonymous="isAnonymous"
          :login-url="loginUrl"
          :logout-url="logoutUrl"
        />
      </div>

      <div
        class="absolute z-[1000] bg-white w-full duration-300 transition-opacity ease-in-out"
      >
        <nav class="flex flex-col font-semibold" v-if="state.mobileMenuOpen">
          <Menu :items="navigation?.menus ?? []" />
        </nav>
      </div>
    </div>
  </header>
</template>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;

.host {
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-feature-settings: normal;
}

@layer components {
  @layer colors {
    header:not(.has-custom-stylesheet) {
      --georchestra-header-primary: #85127e;
      --georchestra-header-primary-light: #85127e1a;
    }
  }
  .nav-item-mobile {
    @apply text-xl block text-center py-3 w-full border-b border-b-slate-300 first-letter:capitalize;
    display: flex;
    justify-content: center;
  }

  .nav-item {
    @apply relative w-fit block after:hover:scale-x-100 xl:mx-3 md:mx-2 hover:text-black first-letter:capitalize text-base;
  }

  .nav-item:after {
    @apply block content-[''] absolute h-[3px] bg-primary w-full scale-x-0  transition duration-300 origin-left;
  }

  .nav-item.active {
    @apply after:scale-x-100 after:bg-primary after:bg-none text-gray-900;
  }

  .btn {
    @apply px-4 py-2 mx-2 text-slate-100 bg-primary rounded hover:bg-slate-700 transition-colors first-letter:capitalize;
  }

  .link-btn {
    @apply text-primary hover:text-slate-700 hover:underline underline-offset-8 decoration-2 decoration-slate-700 flex flex-col items-center;
  }

  .dropdown > li {
    @apply block text-center hover:bg-primary-light text-gray-700 hover:text-black capitalize;
  }

  .dropdown > li > a {
    @apply block w-full h-full py-3;
  }

  .dropdown > li.active {
    @apply bg-primary-light;
  }

  .disabled {
    @apply cursor-pointer pointer-events-none;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }
}
</style>