nocodb/packages/nc-gui/layouts/shared-view.vue

<script lang="ts" setup>
import { iconMap, onMounted, useEventListener, useGlobal, useRouter, useSharedView } from '#imports'

const { isLoading, appInfo } = useGlobal()

const { sharedView } = useSharedView()

const router = useRouter()

onMounted(() => {
  // check if we are inside an iframe
  // if we are, communicate to the parent page whenever we navigate to a new url,
  // so that the parent page can respond to it properly.
  // E.g. by making the browser navigate to that url, and not just the iframe.
  // This is useful for integrating NocoDB into other products,
  // such as Outline (https://github.com/outline/outline/pull/4184).
  if (window.parent !== window) {
    const notifyLocationChange = (value: string) =>
      window.parent.postMessage(
        {
          event: 'locationchange',
          payload: { value },
        },
        '*',
      )

    router.afterEach((to) => notifyLocationChange(location.origin + to.fullPath))
    useEventListener(window, 'beforeunload', () => {
      const { href } = document.activeElement as { href?: string }
      if (href) notifyLocationChange(href)
    })
  }

  // handle meta title
  if (sharedView.value?.title) {
    document.title = `${sharedView.value.title}`
  } else {
    document.title = 'NocoDB'
  }
})
</script>

<script lang="ts">
export default {
  name: 'SharedView',
}
</script>

<template>
  <a-layout id="nc-app">
    <a-layout class="!flex-col bg-white">
      <a-layout-header class="flex !bg-primary items-center text-white pl-3 pr-4 shadow-lg">
        <a
          class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105"
          href="https://github.com/nocodb/nocodb"
          target="_blank"
          rel="noopener noreferrer"
        >
          <a-tooltip placement="bottom">
            <template #title>
              {{ appInfo.version }}
            </template>
            <img width="35" alt="NocoDB" src="~/assets/img/icons/256x256-trans.png" />
          </a-tooltip>
        </a>

        <div>
          <div class="flex justify-center items-center">
            <div class="flex items-center gap-2 ml-3 text-white">
              <template v-if="isLoading">
                <span class="text-white" data-testid="nc-loading">{{ $t('general.loading') }}</span>

                <component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin ': isLoading }" />
              </template>

              <div v-else class="text-xl font-semibold truncate text-white nc-shared-view-title flex gap-2 items-center">
                <GeneralViewIcon v-if="sharedView" class="!text-xl" :meta="sharedView" />
                {{ sharedView?.title }}
              </div>
            </div>
          </div>
        </div>

        <div class="flex-1" />
      </a-layout-header>

      <div class="w-full overflow-hidden" style="height: calc(100vh - var(--topbar-height))">
        <slot />
      </div>
    </a-layout>
  </a-layout>
</template>