bfg-common 1.5.440 → 1.5.442

package/assets/localization/local_be.json

@@ -1233,6 +1233,7 @@
     "recommendations": "Рэкамендацыі",
     "recommended": "рэкамендуецца",
     "reconnect": "Паўторна падлучыцца",
+    "reconnectDesc": "Ваша сесія скончыцца праз:",
     "redirectUrls": "URL-адрасы перанакіравання",
     "reduceEnergyConsumptionAtTheRisk": "Скароціце спажыванне энергіі з рызыкай зніжэння прадукцыйнасці",
     "reduceEnergyConsumptionWithMin": "Паменшыце спажыванне энергіі з мінімальным кампрамісам у прадукцыйнасці",

package/assets/localization/local_en.json

@@ -1232,6 +1232,7 @@
     "recommendations": "Recommendations",
     "recommended": "recommended",
     "reconnect": "Reconnect",
+    "reconnectDesc": "Your session is about to expire after:",
     "redirectUrls": "Redirect URLs",
     "reduceEnergyConsumptionAtTheRisk": "Reduce energy consumption at the risk of lower performance",
     "reduceEnergyConsumptionWithMin": "Reduce energy consumption with minimal performance compromise",

package/assets/localization/local_hy.json

@@ -1232,6 +1232,7 @@
     "recommendations": "Առաջարկություններ",
     "recommended": "խորհուրդ է տրվում",
     "reconnect": "Կրկին Միացեք",
+    "reconnectDesc": "Ձեր սեսիան կավարտվի հետո՝",
     "redirectUrls": "Վերահղման URL-ներ",
     "reduceEnergyConsumptionAtTheRisk": "Նվազեցնել էներգիայի սպառումը ցածր արդյունավետության վտանգի դեպքում",
     "reduceEnergyConsumptionWithMin": "Նվազեցնել էներգիայի սպառումը նվազագույն կատարողականի փոխզիջումով",

package/assets/localization/local_kk.json

@@ -1232,6 +1232,7 @@
     "recommendations": "Ұсыныстар",
     "recommended": "ұсынылады",
     "reconnect": "Қайта қосылу",
+    "reconnectDesc": "Сіздің сессияңыз мына уақыттан кейін аяқталады:",
     "redirectUrls": "Қайта бағыттау URL мекенжайлары",
     "reduceEnergyConsumptionAtTheRisk": "Төмен өнімділік қаупімен қуат тұтынуды азайтыңыз",
     "reduceEnergyConsumptionWithMin": "Өнімділіктің ең аз төмендеуімен қуат тұтынуды азайтыңыз",

package/assets/localization/local_ru.json

@@ -1232,6 +1232,7 @@
     "recommendations": "Рекомендации",
     "recommended": "рекомендуемый",
     "reconnect": "Повторно подключиться",
+    "reconnectDesc": "Ваша сессия завершится через:",
     "redirectUrls": "URL-адреса перенаправления",
     "reduceEnergyConsumptionAtTheRisk": "Снижение энергопотребления с риском снижения производительности",
     "reduceEnergyConsumptionWithMin": "Снижение энергопотребления с минимальным снижением производительности",

package/assets/localization/local_zh.json

@@ -1231,6 +1231,7 @@
     "recommendations": "建议",
     "recommended": "受到推崇的",
     "reconnect": "重新连接",
+    "reconnectDesc": "您的会话将在以下时间后过期：",
     "redirectUrls": "重定向 URL",
     "reduceEnergyConsumptionAtTheRisk": "以降低性能的風險降低能耗",
     "reduceEnergyConsumptionWithMin": "以最小的性能妥協降低能耗",

package/components/common/countdownTimer/CountdownTimer.vue

@@ -1,26 +1,28 @@
 <template>
-  <div class="countdown-timer">
-    <h3 class="countdown-timer__inner">
-      <span class="countdown-timer__minutes">{{ minutes }}</span>
-      <span class="countdown-timer__separator">:</span>
-      <span class="countdown-timer__seconds"
-        >{{ seconds }} {{ localization.common.seconds }}</span
-      >
-    </h3>
-  </div>
+  <common-countdown-timer-new
+    v-if="isNewView"
+    :minutes="minutes"
+    :seconds="seconds"
+  />
+  <common-countdown-timer-old v-else :minutes="minutes" :seconds="seconds" />
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
 const props = defineProps<{
   timer: number
   totalTime: number
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const secondsInMinute = 60
+
+const formatTime = (time: number): string => {
+  return (time < 10 ? '0' : '') + time
+}
+
 const minutes = computed<string>(() => {
   if (!props.timer) return '00'
   const minutes = Math.floor(props.totalTime / secondsInMinute)
@@ -32,19 +34,6 @@ const seconds = computed<string>(() => {
   const seconds = props.totalTime - +minutes.value * secondsInMinute
   return formatTime(seconds)
 })
-
-const formatTime = (time: number): string => {
-  return (time < 10 ? '0' : '') + time
-}
 </script>
 
-<style lang="scss" scoped>
-.countdown-timer {
-  &__inner {
-    padding-top: 12px;
-    & > span {
-      font-size: 40px;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/countdownTimer/CountdownTimerNew.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="countdown-timer-container flex items-center justify-center">
+    <div class="inner-block">
+      <span class="value">{{ props.minutes }}:{{ props.seconds }}</span>
+      <span class="seconds-text">{{ localization.common.seconds }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  minutes: string
+  seconds: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style>
+:root {
+  --countdown-time-block-bg: #e9ebed66;
+  --countdown-time-value-color: #182531;
+}
+:root.dark-theme {
+  --countdown-time-block-bg: #e9ebed0f;
+  --countdown-time-value-color: #e9eaec;
+}
+</style>
+
+<style lang="scss" scoped>
+.countdown-timer-container {
+  border-radius: 8px;
+  background-color: var(--countdown-time-block-bg);
+
+  .inner-block {
+    margin: 16px 0;
+
+    .value {
+      font-weight: 500;
+      font-size: 40px;
+      color: var(--countdown-time-value-color);
+    }
+    .seconds-text {
+      font-weight: 400;
+      font-size: 16px;
+      color: #9da6ad;
+      margin-left: 6px;
+    }
+  }
+}
+</style>

package/components/common/countdownTimer/CountdownTimerOld.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="countdown-timer">
+    <h3 class="countdown-timer__inner">
+      <span class="countdown-timer__minutes">{{ props.minutes }}</span>
+      <span class="countdown-timer__separator">:</span>
+      <span class="countdown-timer__seconds"
+        >{{ props.seconds }} {{ localization.common.seconds }}</span
+      >
+    </h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  minutes: string
+  seconds: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.countdown-timer {
+  &__inner {
+    padding-top: 12px;
+    & > span {
+      font-size: 40px;
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/modals/{Reconnect.vue → reconnect/Reconnect.vue}

@@ -1,73 +1,71 @@
 <template>
-  <atoms-modal
-    :show="isShow"
-    :title="localization.common.connectionTimeout"
-    test-id="connection-timeout-reconnect-modal"
-    width="580px"
-    class="connection-timeout"
-    is-hide-close-icon
-  >
-    <template #modalBody>
-      <div class="connection-timeout__body">
-        <span>{{ localization.common.yourSessionExpireAfter }}:</span>
-        <common-countdown-timer :timer="timer" :total-time="totalTime" />
-      </div>
-    </template>
-
-    <template #modalFooter>
-      <button
-        id="logout-button"
-        data-id="logout-button"
-        class="btn btn-outline"
-        @click="onLogout"
-      >
-        {{ localization.common.logout }}
-      </button>
-
-      <button
-        id="reconnect-button"
-        data-id="reconnect-button"
-        class="btn btn-primary"
-        @click="onReconnect"
-      >
-        {{ localization.common.reconnect }}
-      </button>
-    </template>
-  </atoms-modal>
+  <common-layout-the-header-modals-reconnect-new
+    v-if="isNewView"
+    :is-show="isShow"
+    :title="title"
+    :timer="timer"
+    :total-time="totalTime"
+    @logout="onLogout"
+    @reconnect="onReconnect"
+  />
+  <common-layout-the-header-modals-reconnect-old
+    v-else
+    :is-show="isShow"
+    :title="title"
+    :timer="timer"
+    :total-time="totalTime"
+    @logout="onLogout"
+    @reconnect="onReconnect"
+  />
 </template>
 
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
 const { $store }: any = useNuxtApp()
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const isShow = computed<boolean>(
   () => $store.getters['main/isShowReconnectModal']
 )
-const hideModal = (): void => {
-  $store.dispatch('main/A_SHOW_RECONNECT_MODAL', false)
-}
 
-const totalTime = ref<number>(60)
+const title = ref<string>(localization.value.common.connectionTimeout)
+
 const timer = ref<NodeJS.Timer | null>(null)
+const totalTime = ref<number>(60)
 const countdown = (): void => {
   totalTime.value--
   if (totalTime.value === 0) {
     endTimer()
   }
 }
-const startTimer = (): void => {
-  timer.value = setInterval(() => countdown(), 1000)
+
+const resetTimer = (): void => {
+  timer.value !== null && clearInterval(timer.value)
+  totalTime.value = 60
 }
-const endTimer = (): void => {
-  onLogout()
+
+const hideModal = (): void => {
+  $store.dispatch('main/A_SHOW_RECONNECT_MODAL', false)
 }
+
 const onLogout = async (): Promise<void> => {
   await $store.dispatch('auth/A_LOGOUT')
   resetTimer()
   hideModal()
 }
+
+const endTimer = (): void => {
+  onLogout()
+}
+
+const startTimer = (): void => {
+  timer.value = setInterval(() => countdown(), 1000)
+}
+
 const onReconnect = async (): Promise<void> => {
   location.reload()
   // await $store.dispatch('auth/A_REFRESH')
@@ -75,10 +73,6 @@ const onReconnect = async (): Promise<void> => {
   hideModal()
 }
 
-const resetTimer = (): void => {
-  timer.value !== null && clearInterval(timer.value)
-  totalTime.value = 60
-}
 watch(
   isShow,
   (newValue) => {
@@ -88,11 +82,4 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped>
-.connection-timeout {
-  &__body {
-    text-align: center;
-    margin: 15px 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/layout/theHeader/modals/reconnect/ReconnectNew.vue

@@ -0,0 +1,74 @@
+<template>
+  <ui-modal
+    :show="props.isShow"
+    :title="props.title"
+    :texts="modalTexts"
+    test-id="reconnect-modal"
+    size="sm"
+    width="560px"
+    @hide="emits('logout')"
+    @submit="emits('reconnect')"
+  >
+    <template #content>
+      <div class="reconnect-content">
+        <div class="icon-content flex items-center gap-2">
+          <span class="icon-sessions"></span>
+          <span class="description-text">{{
+            localization.common.reconnectDesc
+          }}</span>
+        </div>
+        <div class="timer-block mt-4">
+          <common-countdown-timer
+            :timer="props.timer"
+            :total-time="props.totalTime"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footerLeftContent>
+      <span></span>
+    </template>
+  </ui-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  isShow: boolean
+  title: string
+  timer: NodeJS.Timer | null
+  totalTime: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'logout'): void
+  (event: 'reconnect'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = ref<UI_I_ModalTexts>({
+  button1: localization.value.auth.logout,
+  button2: localization.value.common.reconnect,
+})
+</script>
+
+<style lang="scss" scoped>
+.reconnect-content {
+  padding: 16px 32px 8px 32px;
+
+  .icon-content {
+    .icon-sessions {
+      width: 24px;
+      height: 24px;
+    }
+    .description-text {
+      font-size: 14px;
+      font-weight: 400;
+      color: #9da6ad;
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/modals/reconnect/ReconnectOld.vue

@@ -0,0 +1,67 @@
+<template>
+  <atoms-modal
+    :show="props.isShow"
+    :title="props.title"
+    test-id="connection-timeout-reconnect-modal"
+    width="580px"
+    class="connection-timeout"
+    is-hide-close-icon
+  >
+    <template #modalBody>
+      <div class="connection-timeout__body">
+        <span>{{ localization.common.yourSessionExpireAfter }}:</span>
+        <common-countdown-timer
+          :timer="props.timer"
+          :total-time="props.totalTime"
+        />
+      </div>
+    </template>
+
+    <template #modalFooter>
+      <button
+        id="logout-button"
+        data-id="logout-button"
+        class="btn btn-outline"
+        @click="emits('logout')"
+      >
+        {{ localization.common.logout }}
+      </button>
+
+      <button
+        id="reconnect-button"
+        data-id="reconnect-button"
+        class="btn btn-primary"
+        @click="emits('reconnect')"
+      >
+        {{ localization.common.reconnect }}
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  isShow: boolean
+  title: string
+  timer: NodeJS.Timer | null
+  totalTime: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'logout'): void
+  (event: 'reconnect'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.connection-timeout {
+  &__body {
+    text-align: center;
+    margin: 15px 0;
+  }
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/maximumSize/MaximumSize.vue

@@ -1,23 +1,23 @@
-<template>
-  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-maximum-size-new
-    v-if="isNewView"
-    :free-gb="freeGb"
-  />
-  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-maximum-size-old
-    v-else
-    :free-gb="freeGb"
-  />
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  freeMb: number
-}>()
-
-const { $store, $binary }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const freeGb = computed<number>(() => $binary.round(props.freeMb))
-</script>
-
-<style scoped></style>
+<template>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-maximum-size-new
+    v-if="isNewView"
+    :free-gb="freeGb"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-maximum-size-old
+    v-else
+    :free-gb="freeGb"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  freeMb: number
+}>()
+
+const { $store, $binary }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const freeGb = computed<number>(() => $binary.round(props.freeMb))
+</script>
+
+<style scoped></style>

package/package.json

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