bfg-common 1.5.755 → 1.5.757

package/components/common/pages/backups/backupsNew/Skeleton.vue

@@ -19,7 +19,7 @@
       <ui-skeleton-item width="96" height="20" class="ml-auto" />
     </div>
     <div class="right-content grid p-4">
-      <div class="flex justify-between gap-4 flex-wrap top-container">
+      <div class="flex justify-between gap-4 pr-4 flex-wrap top-container">
         <ui-skeleton-item width="80" height="20" />
         <div class="actions-block flex">
           <ui-skeleton-item width="20" height="20" />
@@ -29,7 +29,13 @@
           <ui-skeleton-item width="20" height="20" />
         </div>
       </div>
-      <div class="details-block flex flex-col my-6">
+      <div
+        ref="detailsScrollBlock"
+        :class="[
+          'details-block flex flex-col my-6',
+          { 'has-scroll': hasScroll },
+        ]"
+      >
         <div
           v-for="index in detailsItemsCount"
           :key="index"
@@ -45,7 +51,19 @@
 </template>
 
 <script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useElementSize } from '@vueuse/core'
+
 const detailsItemsCount = ref<number>(3)
+
+const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
+const { height } = useElementSize(detailsElement)
+
+const hasScroll = computed<boolean>(
+  () =>
+    height.value &&
+    detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
+)
 </script>
 
 <style>
@@ -84,6 +102,8 @@ const detailsItemsCount = ref<number>(3)
     }
   }
   .right-content {
+    padding-right: 0;
+
     .top-container {
       .actions-block {
         grid-column-gap: 10px;
@@ -98,6 +118,10 @@ const detailsItemsCount = ref<number>(3)
       grid-row-gap: 10px;
       overflow: auto;
 
+      &:not(.has-scroll) {
+        padding-right: 16px;
+      }
+
       .details-block-item {
         background-color: var(--backups-right-skeleton-item-bg-color);
         border-radius: 6px;

package/components/common/pages/backups/modals/deleteBackup/DeleteBackup.vue

@@ -48,6 +48,7 @@ const description = computed<string>(() => {
 
 const modalTexts = computed<UI_I_ModalTexts>(() => {
   return {
+    button1: localization.value.common.cancel,
     button2: props.isAll
       ? localization.value.common.deleteAll
       : localization.value.common.delete,

package/components/common/vm/snapshots/new/New.vue

@@ -227,6 +227,7 @@
 </template>
 
 <script setup lang="ts">
+import { useTemplateRef } from 'vue'
 import { useElementSize } from '@vueuse/core'
 import type { UI_I_InfoBlock } from '~/node_modules/bfg-uikit/components/ui/infoBlock/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
@@ -268,19 +269,14 @@ const onSelectContextMenuItem = (actionType: UI_T_SnapshotActionType): void => {
   emits('show-modal', actionType)
 }
 
-const detailsScrollBlock = ref<HTMLElement | null>(null)
-const { height } = useElementSize(detailsScrollBlock)
-const hasScroll = ref<boolean>(false)
-const checkScroll = (): void => {
-  const element = detailsScrollBlock.value
-  if (element) {
-    hasScroll.value = element.scrollHeight > element.clientHeight
-  }
-}
+const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
+const { height } = useElementSize(detailsElement)
 
-watch(height, () => {
-  checkScroll()
-})
+const hasScroll = computed<boolean>(
+  () =>
+    height.value &&
+    detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
+)
 </script>
 
 <style>

package/components/common/vm/snapshots/new/Skeleton.vue

@@ -19,7 +19,7 @@
       <ui-skeleton-item width="96" height="20" class="ml-auto" />
     </div>
     <div class="right-content grid p-4">
-      <div class="flex justify-between gap-4 flex-wrap top-container">
+      <div class="flex justify-between gap-4 pr-4 flex-wrap top-container">
         <ui-skeleton-item width="80" height="20" />
         <div class="actions-block flex">
           <ui-skeleton-item width="20" height="20" />
@@ -29,7 +29,13 @@
           <ui-skeleton-item width="20" height="20" />
         </div>
       </div>
-      <div class="details-block flex flex-col my-6">
+      <div
+        ref="detailsScrollBlock"
+        :class="[
+          'details-block flex flex-col my-6',
+          { 'has-scroll': hasScroll },
+        ]"
+      >
         <div
           v-for="index in detailsItemsCount"
           :key="index"
@@ -45,7 +51,19 @@
 </template>
 
 <script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useElementSize } from '@vueuse/core'
+
 const detailsItemsCount = ref<number>(6)
+
+const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
+const { height } = useElementSize(detailsElement)
+
+const hasScroll = computed<boolean>(
+  () =>
+    height.value &&
+    detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
+)
 </script>
 
 <style>
@@ -84,6 +102,8 @@ const detailsItemsCount = ref<number>(6)
     }
   }
   .right-content {
+    padding-right: 0;
+
     .top-container {
       .actions-block {
         grid-column-gap: 10px;
@@ -98,6 +118,10 @@ const detailsItemsCount = ref<number>(6)
       grid-row-gap: 10px;
       overflow: auto;
 
+      &:not(.has-scroll) {
+        padding-right: 16px;
+      }
+
       .details-block-item {
         background-color: var(--snapshots-right-skeleton-item-bg-color);
         border-radius: 6px;

package/components/common/wizards/network/add/Add.vue

@@ -251,10 +251,12 @@ const globalPermissions = computed<any>(
 
 // Step's content data (connectionType)
 const connectionType = ref<string>(
-  !globalPermissions.value['Networks.CreateSysx'] &&
-    !globalPermissions.value['Networks.CreatePortGroup']
+  globalPermissions.value === undefined
+    ? '0'
+    : !globalPermissions.value?.['Networks.CreateSysx'] &&
+      !globalPermissions.value?.['Networks.CreatePortGroup']
     ? '2'
-    : !globalPermissions.value['Networks.CreateSysx']
+    : !globalPermissions.value?.['Networks.CreateSysx']
     ? '1'
     : '0'
 )
@@ -291,7 +293,7 @@ const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
 // Step's content data and changers (targetDevice)
 const targetDevice = ref<UI_I_TargetDevice>(
   useDeepCopy(
-    targetDeviceInitialFunc(globalPermissions.value['Networks.UpdateSwitch'])
+    targetDeviceInitialFunc(globalPermissions.value?.['Networks.UpdateSwitch'])
   )
 )
 const mtuFromSwitch = ref<number>(1500)
@@ -385,7 +387,8 @@ watch(
         : (targetDevice.value.selected = '0')
       newCT === '1' && (targetDevice.value.selected = '1')
       newCT === '2' &&
-        (globalPermissions.value['Networks.UpdateSwitch']
+        (globalPermissions.value === undefined ||
+        globalPermissions.value?.['Networks.UpdateSwitch']
           ? (targetDevice.value.selected = '2')
           : (targetDevice.value.selected = '3'))
     }
@@ -515,7 +518,7 @@ const reset = (): void => {
   wizard.reset()
   connectionTypeLocal.value = '0'
   targetDevice.value = useDeepCopy(
-    targetDeviceInitialFunc(globalPermissions.value['Networks.UpdateSwitch'])
+    targetDeviceInitialFunc(globalPermissions.value?.['Networks.UpdateSwitch'])
   )
   connectionSettings.value = useDeepCopy(connectionSettingsInitial)
   portProperties.value = useDeepCopy(portPropertiesInitial)

package/components/common/wizards/network/add/lib/config/initialData.ts

@@ -25,7 +25,8 @@ export const servicesInitial: UI_I_Services = {
 export const targetDeviceInitialFunc = (
   updateSwitchPermission: boolean
 ): UI_I_TargetDevice => ({
-  selected: updateSwitchPermission ? '1' : '3',
+  selected:
+    updateSwitchPermission === undefined || updateSwitchPermission ? '1' : '3',
   network: '',
   switch: '',
   standardSwitch: '',

package/package.json

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

package/plugins/time.ts

@@ -1,58 +1,58 @@
-import { defineNuxtPlugin } from '#app'
-import type { UI_T_LangValue } from '~/lib/models/types'
-export default defineNuxtPlugin(() => {
-  const time = function (): any {
-    const self: any = {}
-    self.millisecondsToHour = function (ms: number): number {
-      return ~~(ms / 1000 / 60 / 60 / 24)
-    }
-    self.formatTime = (
-      seconds: number,
-      lang: UI_T_LangValue = 'ru_RU'
-    ): string => {
-      const units = {
-        en_US: { s: 's', m: 'm', h: 'h' },
-        ru_RU: { s: 'с', m: 'м', h: 'ч' },
-        hy_AM: { s: 'վ', m: 'ր', h: 'ժ' },
-        be_BY: { s: 'с', m: 'хв', h: 'г' },
-        kk_KZ: { s: 'сек', m: 'мин', h: 'сағ' },
-        zh_CHS: { s: '秒', m: '分', h: '时' },
-        BROWSER: { s: 's', m: 'm', h: 'h' },
-      }
-
-      const unit = units[lang] || units.en_US
-
-      if (seconds < 60) {
-        return `${seconds}${unit.s}`
-      }
-
-      const hours = Math.floor(seconds / 3600)
-      const minutes = Math.floor((seconds % 3600) / 60)
-      const secs = seconds % 60
-
-      let result = ''
-
-      if (hours > 0) {
-        result += `${hours}${unit.h} `
-      }
-
-      if (minutes > 0) {
-        result += `${minutes}${unit.m} `
-      }
-
-      if (secs > 0) {
-        result += `${secs}${unit.s}`
-      }
-
-      return result.trim()
-    }
-
-    return self
-  }.call({})
-
-  return {
-    provide: {
-      time,
-    },
-  }
-})
+import { defineNuxtPlugin } from '#app'
+import type { UI_T_LangValue } from '~/lib/models/types'
+export default defineNuxtPlugin(() => {
+  const time = function (): any {
+    const self: any = {}
+    self.millisecondsToHour = function (ms: number): number {
+      return ~~(ms / 1000 / 60 / 60 / 24)
+    }
+    self.formatTime = (
+      seconds: number,
+      lang: UI_T_LangValue = 'ru_RU'
+    ): string => {
+      const units = {
+        en_US: { s: 's', m: 'm', h: 'h' },
+        ru_RU: { s: 'с', m: 'м', h: 'ч' },
+        hy_AM: { s: 'վ', m: 'ր', h: 'ժ' },
+        be_BY: { s: 'с', m: 'хв', h: 'г' },
+        kk_KZ: { s: 'сек', m: 'мин', h: 'сағ' },
+        zh_CHS: { s: '秒', m: '分', h: '时' },
+        BROWSER: { s: 's', m: 'm', h: 'h' },
+      }
+
+      const unit = units[lang] || units.en_US
+
+      if (seconds < 60) {
+        return `${seconds}${unit.s}`
+      }
+
+      const hours = Math.floor(seconds / 3600)
+      const minutes = Math.floor((seconds % 3600) / 60)
+      const secs = seconds % 60
+
+      let result = ''
+
+      if (hours > 0) {
+        result += `${hours}${unit.h} `
+      }
+
+      if (minutes > 0) {
+        result += `${minutes}${unit.m} `
+      }
+
+      if (secs > 0) {
+        result += `${secs}${unit.s}`
+      }
+
+      return result.trim()
+    }
+
+    return self
+  }.call({})
+
+  return {
+    provide: {
+      time,
+    },
+  }
+})