bfg-common 1.5.443 → 1.5.444

package/components/common/diagramMain/port/Ports.vue

@@ -1,47 +1,47 @@
-<template>
-  <g>
-    <template v-if="props.network.toggle">
-      <template v-for="port in props.network.ports" :key="port.id">
-        <common-diagram-main-port
-          :network="props.network"
-          :port="port"
-          :is-dark-mode="props.isDarkMode"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          @select-port="onSelectPort"
-          @show-modal="onShowModal"
-        />
-      </template>
-    </template>
-  </g>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ModalsInitialData,
-  UI_I_NetworkFullWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-port', networkId: string, portId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const onSelectPort = (networkId: string, portId: string) =>
-  emits('select-port', networkId, portId)
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
-  emits('show-modal', value, properties)
-</script>
+<template>
+  <g>
+    <template v-if="props.network.toggle">
+      <template v-for="port in props.network.ports" :key="port.id">
+        <common-diagram-main-port
+          :network="props.network"
+          :port="port"
+          :is-dark-mode="props.isDarkMode"
+          :selected-port="props.selectedPort"
+          :selected-adapter="props.selectedAdapter"
+          @select-port="onSelectPort"
+          @show-modal="onShowModal"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFullWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-port', networkId: string, portId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const onSelectPort = (networkId: string, portId: string) =>
+  emits('select-port', networkId, portId)
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
+  emits('show-modal', value, properties)
+</script>

package/components/common/layout/theHeader/helpMenu/About.vue

@@ -1,82 +1,82 @@
-<template>
-  <Teleport to="body">
-    <common-layout-the-header-help-menu-about-new
-      v-if="isNewView"
-      :title="title"
-      :subtitle="subtitle"
-      :about-heading-text="aboutHeadingText"
-      :about-desc-one="aboutDesc1"
-      :about-desc-second="aboutDesc2"
-      :project-name="props.projectName"
-      :url="companyWebSitePath"
-      @hide="emits('hide')"
-    />
-
-    <common-layout-the-header-help-menu-about-old
-      v-else
-      :title="title"
-      :subtitle="subtitle"
-      :about-heading-text="aboutHeadingText"
-      :about-desc-one="aboutDesc1"
-      :about-desc-second="aboutDesc2"
-      :project-name="props.projectName"
-      :url="companyWebSitePath"
-      @hide="emits('hide')"
-    />
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  version: string
-  projectName: string
-}>()
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store }: any = useNuxtApp()
-const config = useRuntimeConfig()
-
-const companyName = computed<string>(
-  () => config.public[`COMPANY_NAME_${useEnvLanguage()}`]
-)
-const brandName = computed<string>(
-  () => config.public[`TRADEMARK_${useEnvLanguage()}`]
-)
-
-const companyWebSitePath = ref<string>('https://iridium-soft.com/')
-
-const title = computed<string>(() => `${brandName.value}® ${props.projectName}`)
-const subtitle = computed<string>(() =>
-  localization.value.layout.aboutWebClientVersion
-    .replace('{0}', props.projectName)
-    .replace('{1}', props.version)
-)
-
-const aboutHeadingText = computed<string>(() =>
-  localization.value.layout.aboutHeading.replace(
-    '{companyName}',
-    companyName.value
-  ).replace(
-    '{year}',
-      new Date().getFullYear() + ''
-  )
-)
-
-const aboutDesc1 = computed<string>(() =>
-  localization.value.layout.aboutDesc1
-    .replaceAll('{companyName}', companyName.value)
-    .replaceAll('{trademark}', brandName.value)
-)
-const aboutDesc2 = computed<string>(() =>
-  localization.value.layout.aboutDesc2
-    .replaceAll('{companyName}', companyName.value)
-    .replaceAll('{trademark}', brandName.value)
-)
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-</script>
+<template>
+  <Teleport to="body">
+    <common-layout-the-header-help-menu-about-new
+      v-if="isNewView"
+      :title="title"
+      :subtitle="subtitle"
+      :about-heading-text="aboutHeadingText"
+      :about-desc-one="aboutDesc1"
+      :about-desc-second="aboutDesc2"
+      :project-name="props.projectName"
+      :url="companyWebSitePath"
+      @hide="emits('hide')"
+    />
+
+    <common-layout-the-header-help-menu-about-old
+      v-else
+      :title="title"
+      :subtitle="subtitle"
+      :about-heading-text="aboutHeadingText"
+      :about-desc-one="aboutDesc1"
+      :about-desc-second="aboutDesc2"
+      :project-name="props.projectName"
+      :url="companyWebSitePath"
+      @hide="emits('hide')"
+    />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  version: string
+  projectName: string
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const config = useRuntimeConfig()
+
+const companyName = computed<string>(
+  () => config.public[`COMPANY_NAME_${useEnvLanguage()}`]
+)
+const brandName = computed<string>(
+  () => config.public[`TRADEMARK_${useEnvLanguage()}`]
+)
+
+const companyWebSitePath = ref<string>('https://iridium-soft.com/')
+
+const title = computed<string>(() => `${brandName.value}® ${props.projectName}`)
+const subtitle = computed<string>(() =>
+  localization.value.layout.aboutWebClientVersion
+    .replace('{0}', props.projectName)
+    .replace('{1}', props.version)
+)
+
+const aboutHeadingText = computed<string>(() =>
+  localization.value.layout.aboutHeading.replace(
+    '{companyName}',
+    companyName.value
+  ).replace(
+    '{year}',
+      new Date().getFullYear() + ''
+  )
+)
+
+const aboutDesc1 = computed<string>(() =>
+  localization.value.layout.aboutDesc1
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+const aboutDesc2 = computed<string>(() =>
+  localization.value.layout.aboutDesc2
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>

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>