bfg-common 1.4.188 → 1.4.189

package/components/atoms/datepicker/Datepicker.vue

@@ -165,7 +165,9 @@ import type { UI_I_Items } from '~/components/atoms/datepicker/lib/models/interf
 import {
   getMonthsFunc,
   getWeekdaysFunc,
-} from '~/components/atoms/datepicker/lib/config/datapicker'
+  datepickerWidth,
+  datepickerHeight,
+} from '~/components/atoms/datepicker/lib/config/datepicker'
 import { getShortMonths } from '~/components/atoms/datepicker/lib/config/allShortMonths'
 
 const { $isDate } = useNuxtApp()
@@ -392,8 +394,15 @@ const showHideCalendar = (): void => {
     `.calendar-id-${uniqueId.value}`
   ) as HTMLElement
 
-  calendarTop.value = element.getBoundingClientRect().y - 314 + 2
-  calendarLeft.value = element.getBoundingClientRect().x - 278 / 2
+  const elementSizes = element.getBoundingClientRect()
+
+  const isOverTop = elementSizes.y - datepickerWidth + 2 < 0
+  // Set content top
+  if (!isOverTop) calendarTop.value = elementSizes.y - datepickerWidth + 2
+  else calendarTop.value = elementSizes.y + elementSizes.height + 2
+
+  // Set content left
+  calendarLeft.value = elementSizes.x - datepickerHeight / 2
 
   isShowCalendar.value = !isShowCalendar.value
 }

package/components/atoms/datepicker/lib/config/{datapicker.ts → datepicker.ts}

@@ -1,4 +1,4 @@
-import type{ UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 export const getMonthsFunc = (localization: UI_I_Localization): string[] => {
   return [
@@ -41,3 +41,6 @@ export const getWeekdaysFunc = (
 
   return result
 }
+
+export const datepickerWidth = 314
+export const datepickerHeight = 278

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

@@ -70,6 +70,7 @@
 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 { checkIsTokenExpired } from '~/lib/utils/token'
 
 const props = defineProps<{
   isShowMainMenu: boolean
@@ -90,6 +91,8 @@ const props = defineProps<{
   newViewLocal: boolean
   timeFormat: string
   isDarkTheme: boolean
+  isPauseReconnect: boolean
+  expireTimeFromState: number
 }>()
 
 const emits = defineEmits<{
@@ -106,7 +109,55 @@ const emits = defineEmits<{
   (event: 'update-remote-console', value: string): void
   (event: 'update-vm-clusters', 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>(20 * 60 * 1000)
+
+const startInactivityTimer = (): void => {
+  inactivityTimer.value = setTimeout(() => {
+    // Проверяем если isPauseReconnect истина то не показываем модальное окно переподключения,
+    // к примеру если загружаем файл и он загружается дольше чем срабатывает таймаут
+    if (props.isPauseReconnect) {
+      startInactivityTimer()
+      return
+    }
+
+    const expireTime =
+      props.expireTimeFromState || useLocalStorage('accessTokenExpiredTime')
+
+    const isExpiredToken = checkIsTokenExpired(expireTime)
+
+    isExpiredToken && emits('show-redirect-login-modal', true)
+
+    if (!isExpiredToken) {
+      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>

package/components/common/monitor/overview/filters/Filters.vue

@@ -54,6 +54,7 @@
     v-if="isShowIntervalModal"
     :selected-periods="props.selectedPeriods"
     :format-date="props.formatDate"
+    :current-lang="props.currentLang"
     @hide="onHideIntervalModal"
     @submit="onSubmitIntervalModal"
   />
@@ -82,6 +83,7 @@ const props = defineProps<{
   selectedPeriods: number[]
   formatDate: string
   project: UI_T_Project
+  currentLang: string
   formatTime?: string
 }>()
 

package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModal.vue

@@ -40,7 +40,7 @@
                 <div class="section-datepicker">
                   <atoms-datepicker
                     v-model="dateFrom"
-                    :lang="currentLang"
+                    :lang="props.currentLang"
                     class="chart-option-setting-row custom-time-input"
                     test-id="overview-first-date-datepicker"
                     @update="onUpdateDateFrom"
@@ -76,7 +76,7 @@
                 <div class="section-datepicker">
                   <atoms-datepicker
                     v-model="dateTo"
-                    :lang="currentLang"
+                    :lang="props.currentLang"
                     class="chart-option-setting-row custom-time-input"
                     test-id="overview-first-date-to-datepicker"
                     @update="onUpdateDateTo"
@@ -112,6 +112,7 @@ import { checkDateFunc } from '~/components/common/monitor/overview/filters/cust
 const props = defineProps<{
   formatDate: string
   selectedPeriods: number[]
+  currentLang: string
 }>()
 
 const emits = defineEmits<{
@@ -119,12 +120,13 @@ const emits = defineEmits<{
   (event: 'submit', value: number[]): void
 }>()
 
-const { $store, $formattedDate, $formattedTime, $isDate, $getUnixByDate } =
-  useNuxtApp()
+const { $formattedDate, $formattedTime, $isDate, $getUnixByDate } = useNuxtApp()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const titleIntervalModal = ref<string>(`${localization.value.common.timeRange}:`)
+const titleIntervalModal = ref<string>(
+  `${localization.value.common.timeRange}:`
+)
 
 const selectedItem = ref<string>('')
 
@@ -165,15 +167,6 @@ const getCurrentTime = (): void => {
   currentTimeTo.value = $formattedTime(props.selectedPeriods[1], '', true)
 }
 
-const timeFormatUpdater = computed<number>(
-  () => $store.getters['main/getTimeFormatUpdater']
-)
-const currentLang = ref<string>(useLocalStorage('lang') || 'ru_RU')
-watch(timeFormatUpdater, () => {
-  currentLang.value = useLocalStorage('lang') || 'ru_RU'
-  getCurrentTime()
-})
-
 const onUpdateDateFrom = (val: number): void => {
   if (!val) return
 

package/lib/utils/token.ts

@@ -0,0 +1,34 @@
+// import type { API_I_Login } from '~/store/modules/auth/lib/models/interfaces'
+//
+// export const setTokensFunc = (data: API_I_Login): void => {
+//   const token = data.access_token || ''
+//   const expiredTime = data.at_expires || null
+//
+//   useLocalStorage('accessTokenExpiredTime', expiredTime)
+//
+//   const tokenCookie = useCookie('pnc-ui-token')
+//   tokenCookie.value = `Bearer ${token}`
+//
+//   const refreshToken = data.refresh_token || ''
+//   const refreshTokenCookie = useCookie('pnc-ui-refresh-token')
+//   refreshTokenCookie.value = refreshToken
+//
+//   const accessTokenExpiredTime = useCookie('token-expired-time')
+//   accessTokenExpiredTime.value = '' + expiredTime
+// }
+
+export const checkIsTokenExpired = (expireTime: number): boolean => {
+  const currentTimeMilliseconds = new Date().getTime()
+  const expireTimeMilliseconds = expireTime * 1000
+
+  return expireTimeMilliseconds < currentTimeMilliseconds
+}
+// export const clearToken = (): void => {
+//   const tokenCookie = useCookie('pnc-ui-token')
+//   const refreshTokenCookie = useCookie('pnc-ui-refresh-token')
+//   const expiredTime = useCookie('token-expired-time')
+//
+//   tokenCookie.value = ''
+//   refreshTokenCookie.value = ''
+//   expiredTime.value = ''
+// }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.188",
+  "version": "1.4.189",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",