bfg-common 1.5.707 → 1.5.709

package/components/common/help/navbar/right/Right.vue

@@ -8,7 +8,8 @@
     >
       <atoms-the-icon name="arrow" />
     </button>
-    <div v-else class="h-full">
+
+    <div v-else class="h-full flex-direction-column">
       <div class="navbar__header">
         <p class="title">{{ props.title }}</p>
         <button
@@ -19,15 +20,17 @@
           <atoms-the-icon name="close" />
         </button>
       </div>
+
       <div class="navbar__content content-links">
         <a
           v-for="item in props.items"
           :key="item.text"
           :data-id="item.testId"
           :href="item.to"
-          :class="['link-item', { active: route.hash === item.to }]"
-          >{{ item.text }}</a
+          :class="['link-item', { active: activeHash === item.to }]"
         >
+          {{ item.text }}
+        </a>
       </div>
     </div>
   </div>
@@ -41,39 +44,96 @@ const props = defineProps<{
   items: UI_I_ContentNavbarItem[]
 }>()
 
-const route = useRoute()
-
 const isShow = ref<boolean>(true)
+const activeHash = ref<string>('')
 
-const checkActiveLink = (): void => {
-  const links = document.querySelectorAll('.content-links .link-item')
+let observer: IntersectionObserver | null = null
+let rootElement: Element | null = null
 
-  if (!links.length) return
+const setActiveHashFromLocation = () => {
+  // decodeURIComponent чтобы корректно читать хэши с кириллицей/спецсимволами
+  activeHash.value =
+    typeof window !== 'undefined'
+      ? decodeURIComponent(window.location.hash || '')
+      : ''
+}
+
+const observeLinks = (): void => {
+  const headingsSelector =
+    '.help .content-renderer h1, .help .content-renderer h2, .help .content-renderer h3, .help .content-renderer h4, .help .content-renderer h5, .help .content-renderer h6'
 
-  links.forEach((item) => {
-    const linkElement = item as HTMLLinkElement
+  const headingNodes = Array.from(
+    document.querySelectorAll<HTMLElement>(headingsSelector)
+  ).filter((h) => !!h.id)
 
-    linkElement.classList.remove('active')
-    const linkHref = linkElement.getAttribute('href')
-    if (linkHref && route.hash === linkHref) linkElement.classList.add('active')
-    else if (!route.hash) links[0].classList.add('active')
-  })
+  if (headingNodes.length) {
+    const options: IntersectionObserverInit = {
+      root: rootElement || null,
+      rootMargin: '0px 0px -99% 0px', // активна пока верх секции у top root
+      threshold: 0,
+    }
+
+    observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return
+        const id = entry.target.getAttribute('id')
+        if (!id) return
+        const newHash = `#${id}`
+
+        // Если уже такой hash — ничего не делаем
+        if (decodeURIComponent(window.location.hash || '') === newHash) {
+          activeHash.value = newHash
+          return
+        }
+
+        // Обновляем URL без скролла
+        history.replaceState(null, '', newHash)
+        activeHash.value = newHash
+      })
+    }, options)
+
+    headingNodes.forEach((h) => observer?.observe(h))
+  }
 }
 
-const parentCurrentScrollPosition = (): void => {
-  const parentElement = document.querySelector('.help__content')
-  if (!parentElement || route.hash) return
+const init = (): void => {
+  rootElement = document.querySelector('.help__content')
+
+  setActiveHashFromLocation()
 
-  parentElement.scrollTop = 0
+  if (props.items?.length) {
+    const first = props.items[0]?.to ?? ''
+    if (first) {
+      history.replaceState(null, '', first)
+      setActiveHashFromLocation()
+    }
+  }
+
+  observeLinks()
 }
 
+onMounted(() => {
+  init()
+})
+let isRouteUpdated = false
 onUpdated(() => {
-  parentCurrentScrollPosition()
-  checkActiveLink()
+  if (isRouteUpdated) {
+    init()
+    isRouteUpdated = false
+  }
 })
 
-onMounted(() => {
-  checkActiveLink()
+// cleanup при unmount
+onUnmounted(() => {
+  observer?.disconnect()
+})
+onBeforeRouteUpdate((to, from, next) => {
+  // обработка оснавной навигации, делаем cleanup
+  if (from.path !== to.path) {
+    observer?.disconnect()
+    isRouteUpdated = true
+  }
+  next()
 })
 </script>
 
@@ -101,6 +161,7 @@ onMounted(() => {
     cursor: pointer;
     margin: 12px 6px;
   }
+
   &__header {
     display: flex;
     justify-content: space-between;
@@ -128,10 +189,12 @@ onMounted(() => {
       }
     }
   }
+
   &__content {
     height: 100%;
     overflow: auto;
   }
+
   .link-item {
     display: block;
     color: var(--global-font-color);

package/components/common/layout/theHeader/TheHeader.vue

@@ -1,191 +1,186 @@
-<template>
-  <common-layout-the-header-new
-    v-if="props.newView"
-    v-model:security="security"
-    :is-show-main-menu="props.isShowMainMenu"
-    :company-name="props.companyName"
-    :beta-text="props.betaText"
-    :global-refresh-loading="props.globalRefreshLoading"
-    :hostname="props.hostname"
-    :project-name="props.projectName"
-    :is-preference="props.isPreference"
-    :selected-language-type="props.selectedLanguageType"
-    :selected-lang="props.selectedLang"
-    :new-view="props.newView"
-    :new-view-local="props.newViewLocal"
-    :time-format="props.timeFormat"
-    :project="props.project"
-    :is-dark-theme="props.isDarkTheme"
-    :remote-console="props.remoteConsole"
-    :vm-cluster="props.vmCluster"
-    :security-loader="props.securityLoader"
-    :recovery="props.recovery"
-    @toggle-main-menu="emits('toggle-main-menu')"
-    @show-preference="emits('show-preference')"
-    @reset-preference="emits('reset-preference')"
-    @hide-preference="emits('hide-preference')"
-    @global-refresh="emits('global-refresh')"
-    @update-time-format="emits('update-time-format', $event)"
-    @change-theme-mode="emits('change-theme-mode')"
-    @update-language="emits('update-language', $event)"
-    @update-is-browser="emits('update-is-browser', $event)"
-    @update-is-new-view="emits('update-is-new-view', $event)"
-    @update-remote-console="emits('update-remote-console', $event)"
-    @update-vm-clusters="emits('update-vm-clusters', $event)"
-    @security-confirm="emits('security-confirm', $event)"
-    @submit-preferences="emits('submit-preferences')"
-  />
-  <common-layout-the-header-old
-    v-else
-    v-model:security="security"
-    :company-name="props.companyName"
-    :beta-text="props.betaText"
-    :global-refresh-loading="props.globalRefreshLoading"
-    :hostname="props.hostname"
-    :project-name="props.projectName"
-    :is-preference="props.isPreference"
-    :selected-language-type="props.selectedLanguageType"
-    :selected-lang="props.selectedLang"
-    :new-view="props.newView"
-    :new-view-local="props.newViewLocal"
-    :time-format="props.timeFormat"
-    :project="props.project"
-    :remote-console="props.remoteConsole"
-    :vm-cluster="props.vmCluster"
-    :security-loader="props.securityLoader"
-    :recovery="props.recovery"
-    @toggle-main-menu="emits('toggle-main-menu')"
-    @show-preference="emits('show-preference')"
-    @hide-preference="emits('hide-preference')"
-    @global-refresh="emits('global-refresh')"
-    @update-time-format="emits('update-time-format', $event)"
-    @change-theme-mode="emits('change-theme-mode')"
-    @update-language="emits('update-language', $event)"
-    @update-is-browser="emits('update-is-browser', $event)"
-    @update-is-new-view="emits('update-is-new-view', $event)"
-    @update-remote-console="emits('update-remote-console', $event)"
-    @update-vm-clusters="emits('update-vm-clusters', $event)"
-    @security-confirm="emits('security-confirm', $event)"
-    @submit-preferences="emits('submit-preferences')"
-  />
-
-  <common-layout-the-header-modals-reconnect />
-  <common-layout-the-header-modals-redirect-login />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
-import type {
-  UI_I_Recovery
-} from "~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces";
-import { checkIsTokenExpired } from '~/lib/utils/token'
-
-const security = defineModel<boolean>('security')
-
-const props = withDefaults(
-    defineProps<{
-      isShowMainMenu: boolean
-      companyName: string
-      betaText: string
-      globalRefreshLoading: boolean
-      project: UI_T_Project
-      projectName: string
-      hostname: string
-      isPreference: boolean
-      selectedLanguageType: string
-      selectedLang: UI_I_Dropdown
-      remoteConsole: string
-      vmCluster: boolean
-      newView: boolean
-      newViewLocal: boolean
-      timeFormat: string
-      isDarkTheme: boolean
-      isPauseReconnect: boolean
-      expireTimeFromState: number
-      isShowReconnectModal: boolean
-      isShowRedirectLoginModal: boolean
-      securityLoader?: boolean // для Сферы
-      recovery?: UI_I_Recovery | null // для Сферы
-    }>(),
-    {
-      securityLoader: false,
-      recovery: null
-    }
-)
-
-const emits = defineEmits<{
-  (event: 'toggle-main-menu'): void
-  (event: 'global-refresh'): void
-  (event: 'show-preference'): void
-  (event: 'reset-preference'): void
-  (event: 'hide-preference'): void
-  (event: 'change-theme-mode'): void
-  (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language', value: UI_I_Dropdown): void
-  (event: 'update-is-browser', value: string): void
-  (event: 'update-is-new-view', value: boolean): void
-  (event: 'update-remote-console', value: string): void
-  (event: 'update-vm-clusters', value: boolean): void
-  (event: 'security-confirm', value: boolean): void
-  (event: 'submit-preferences'): void
-  (event: 'show-redirect-login-modal', value: boolean): void
-  (event: 'show-reconnect-modal', value: boolean): void
-}>()
-
-const inactivityTimer = ref<NodeJS.Timeout | undefined>(undefined)
-const inactivityTimeout = ref<number>(10 * 60 * 1000)
-
-const startInactivityTimer = (): void => {
-  inactivityTimer.value = setTimeout(() => {
-    // Проверяем если isPauseReconnect истина то не показываем модальное окно переподключения,
-    // к примеру если загружаем файл и он загружается дольше чем срабатывает таймаут
-
-    if (props.isPauseReconnect) {
-      startInactivityTimer()
-      return
-    }
-
-    const expireTime =
-      props.expireTimeFromState || useCookie('token-expired-time').value
-
-    const isExpiredToken = checkIsTokenExpired(expireTime)
-
-    if (isExpiredToken) {
-      emits('show-redirect-login-modal', true)
-
-      if (props.isShowReconnectModal) {
-        emits('show-reconnect-modal', false)
-      }
-    }
-
-    if (!isExpiredToken && !props.isShowRedirectLoginModal) {
-      emits('show-reconnect-modal', true)
-      startInactivityTimer()
-    }
-
-    console.log('Пользователь бездействует!')
-  }, inactivityTimeout.value)
-}
-
-const resetInactivityTimer = (): void => {
-  // Сброс таймера бездействия при каждом действии пользователя
-  inactivityTimer.value !== null && clearTimeout(inactivityTimer.value)
-  startInactivityTimer()
-}
-
-onMounted(() => {
-  document.addEventListener('mousemove', resetInactivityTimer)
-
-  startInactivityTimer()
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mousemove', resetInactivityTimer)
-
-  inactivityTimer.value !== null && clearTimeout(inactivityTimer.value)
-})
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-layout-the-header-new
+    v-if="props.newView"
+    v-model:security="security"
+    v-model:new-view-local="newViewLocal"
+    :is-show-main-menu="props.isShowMainMenu"
+    :company-name="props.companyName"
+    :beta-text="props.betaText"
+    :global-refresh-loading="props.globalRefreshLoading"
+    :hostname="props.hostname"
+    :project-name="props.projectName"
+    :is-preference="props.isPreference"
+    :selected-language-type="props.selectedLanguageType"
+    :selected-lang="props.selectedLang"
+    :new-view="props.newView"
+    :time-format="props.timeFormat"
+    :project="props.project"
+    :is-dark-theme="props.isDarkTheme"
+    :remote-console="props.remoteConsole"
+    :vm-cluster="props.vmCluster"
+    :security-loader="props.securityLoader"
+    :recovery="props.recovery"
+    @toggle-main-menu="emits('toggle-main-menu')"
+    @show-preference="emits('show-preference')"
+    @reset-preference="emits('reset-preference')"
+    @hide-preference="emits('hide-preference')"
+    @global-refresh="emits('global-refresh')"
+    @update-time-format="emits('update-time-format', $event)"
+    @change-theme-mode="emits('change-theme-mode')"
+    @update-language="emits('update-language', $event)"
+    @update-is-browser="emits('update-is-browser', $event)"
+    @update-remote-console="emits('update-remote-console', $event)"
+    @update-vm-clusters="emits('update-vm-clusters', $event)"
+    @security-confirm="emits('security-confirm', $event)"
+    @submit-preferences="emits('submit-preferences')"
+  />
+  <common-layout-the-header-old
+    v-else
+    v-model:security="security"
+    v-model:new-view-local="newViewLocal"
+    :company-name="props.companyName"
+    :beta-text="props.betaText"
+    :global-refresh-loading="props.globalRefreshLoading"
+    :hostname="props.hostname"
+    :project-name="props.projectName"
+    :is-preference="props.isPreference"
+    :selected-language-type="props.selectedLanguageType"
+    :selected-lang="props.selectedLang"
+    :new-view="props.newView"
+    :time-format="props.timeFormat"
+    :project="props.project"
+    :remote-console="props.remoteConsole"
+    :vm-cluster="props.vmCluster"
+    :security-loader="props.securityLoader"
+    :recovery="props.recovery"
+    @toggle-main-menu="emits('toggle-main-menu')"
+    @show-preference="emits('show-preference')"
+    @hide-preference="emits('hide-preference')"
+    @global-refresh="emits('global-refresh')"
+    @update-time-format="emits('update-time-format', $event)"
+    @change-theme-mode="emits('change-theme-mode')"
+    @update-language="emits('update-language', $event)"
+    @update-is-browser="emits('update-is-browser', $event)"
+    @update-remote-console="emits('update-remote-console', $event)"
+    @update-vm-clusters="emits('update-vm-clusters', $event)"
+    @security-confirm="emits('security-confirm', $event)"
+    @submit-preferences="emits('submit-preferences')"
+  />
+
+  <common-layout-the-header-modals-reconnect />
+  <common-layout-the-header-modals-redirect-login />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
+import { checkIsTokenExpired } from '~/lib/utils/token'
+
+const security = defineModel<boolean>('security')
+const newViewLocal = defineModel<boolean>('newViewLocal')
+
+const props = withDefaults(
+  defineProps<{
+    isShowMainMenu: boolean
+    companyName: string
+    betaText: string
+    globalRefreshLoading: boolean
+    project: UI_T_Project
+    projectName: string
+    hostname: string
+    isPreference: boolean
+    selectedLanguageType: string
+    selectedLang: UI_I_Dropdown
+    remoteConsole: string
+    vmCluster: boolean
+    newView: boolean
+    timeFormat: string
+    isDarkTheme: boolean
+    isPauseReconnect: boolean
+    expireTimeFromState: number
+    isShowReconnectModal: boolean
+    isShowRedirectLoginModal: boolean
+    securityLoader?: boolean // для Сферы
+    recovery?: UI_I_Recovery | null // для Сферы
+  }>(),
+  {
+    securityLoader: false,
+    recovery: null,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'toggle-main-menu'): void
+  (event: 'global-refresh'): void
+  (event: 'show-preference'): void
+  (event: 'reset-preference'): void
+  (event: 'hide-preference'): void
+  (event: 'change-theme-mode'): void
+  (event: 'update-time-format', value: UI_T_TimeValue): void
+  (event: 'update-language', value: UI_I_Dropdown): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'update-remote-console', value: string): void
+  (event: 'update-vm-clusters', value: boolean): void
+  (event: 'security-confirm', value: boolean): void
+  (event: 'submit-preferences'): void
+  (event: 'show-redirect-login-modal', value: boolean): void
+  (event: 'show-reconnect-modal', value: boolean): void
+}>()
+
+const inactivityTimer = ref<NodeJS.Timeout | undefined>(undefined)
+const inactivityTimeout = ref<number>(10 * 60 * 1000)
+
+const startInactivityTimer = (): void => {
+  inactivityTimer.value = setTimeout(() => {
+    // Проверяем если isPauseReconnect истина то не показываем модальное окно переподключения,
+    // к примеру если загружаем файл и он загружается дольше чем срабатывает таймаут
+
+    if (props.isPauseReconnect) {
+      startInactivityTimer()
+      return
+    }
+
+    const expireTime =
+      props.expireTimeFromState || useCookie('token-expired-time').value
+
+    const isExpiredToken = checkIsTokenExpired(expireTime)
+
+    if (isExpiredToken) {
+      emits('show-redirect-login-modal', true)
+
+      if (props.isShowReconnectModal) {
+        emits('show-reconnect-modal', false)
+      }
+    }
+
+    if (!isExpiredToken && !props.isShowRedirectLoginModal) {
+      emits('show-reconnect-modal', true)
+      startInactivityTimer()
+    }
+
+    console.log('Пользователь бездействует!')
+  }, inactivityTimeout.value)
+}
+
+const resetInactivityTimer = (): void => {
+  // Сброс таймера бездействия при каждом действии пользователя
+  inactivityTimer.value !== null && clearTimeout(inactivityTimer.value)
+  startInactivityTimer()
+}
+
+onMounted(() => {
+  document.addEventListener('mousemove', resetInactivityTimer)
+
+  startInactivityTimer()
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousemove', resetInactivityTimer)
+
+  inactivityTimer.value !== null && clearTimeout(inactivityTimer.value)
+})
+</script>
+
+<style scoped lang="scss"></style>