bfg-common 1.5.285 → 1.5.287

package/components/common/backup/storage/actions/add/New.vue

@@ -28,7 +28,6 @@
                   :help-text="localization.common.datastoreTypeHelpDesc"
                   dropdown-width="320px"
                   dropdown-left
-                  dropdown-top
                   class="ml-2"
               />
             </div>

package/components/common/backup/storage/actions/add/steps/hostAccessibility/table/new/New.vue

@@ -9,6 +9,7 @@
       :total-items="props.totalItems"
       :texts="texts"
       :default-layout="false"
+      :skeleton="tableSkeleton"
       class="accessibility-host-table"
       size="sm"
       @select-row="onSelectRow"
@@ -31,6 +32,7 @@ import type {
   UI_I_DataTableHeader,
   UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {UI_I_DataTableSkeleton} from "~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces";
 import type { UI_I_CompatibleHostsTableItem } from '~/components/common/backup/storage/actions/add/steps/hostAccessibility/table/lib/models/interfaces'
 import {
   getBodyDataFunc,
@@ -63,6 +65,10 @@ const texts = computed<UI_I_TableTexts>(() => ({
   filter: localization.value.common.filter,
 }))
 
+const tableSkeleton = ref<UI_I_DataTableSkeleton>({
+  withoutPagination: true,
+})
+
 const data = computed<UI_I_DataTable>(() => ({
   id: 'accessibility-host-table',
   header: hostHeadItems.value,

package/components/common/backup/storage/actions/add/steps/hostAccessibility/table/new/lib/config/compatibleTable.ts

@@ -45,7 +45,8 @@ export const options: UI_I_DataTableOptions = {
   isResizable: true,
   showSelectedRows: true,
   showColumnManager: false,
-  inBlock: true
+  inBlock: true,
+  inModal: true
 }
 
 export const getBodyDataFunc = (

package/components/common/browse/BrowseNew.vue

@@ -13,111 +13,117 @@
   >
     <template #content>
       <div class="browse-container">
-        <common-browse-blocks-container
-          type="horizontal"
-          :blocks-width="props.blocksWidth"
-          @change-widths="onChangeWidths"
-        >
-          <template #firstBlock>
-            <common-browse-blocks-title-new
-              :width="props.blocksWidth[0]"
-              :title="localization.common.datastores"
-              :sorting="props.firstBlockSorting"
-              @sort="emits('sort-first')"
-            >
-              <template #content>
-                <div class="first-block-content">
-                  <ui-tree
-                    :nodes="props.nodesLocalWithLoading"
-                    @toggle-node="onShowNodes"
-                    @select-node="onSelectNode"
-                  >
-                    <template #content="{ node }">
-                      <div
-                        :class="['browse-tree-item', { active: node.isActive }]"
-                      >
-                        <span :class="node.iconClassName"></span>
-                        <span class="text-ellipsis datastore-node-name">{{
-                          node.name
-                        }}</span>
-                      </div>
-                    </template>
-                  </ui-tree>
-                </div>
-              </template>
-            </common-browse-blocks-title-new>
-          </template>
-          <template #secondBlock>
-            <common-browse-blocks-title-new
-              :width="props.blocksWidth[1]"
-              :title="localization.common.contents"
-              :sorting="props.secondBlockSorting"
-              position="second-block"
-              @sort="emits('sort-second')"
-            >
-              <template #content>
-                <common-browse-blocks-contents-files
-                  :selected-folder-files="props.filesLocal"
-                  :selected-file="props.selectedFile"
-                  :browse-loading="props.browseLoading"
-                  @select-file="onSelectFile"
-                />
-              </template>
-            </common-browse-blocks-title-new>
-          </template>
-          <template #thirdBlock>
-            <common-browse-blocks-title-new
-              :width="props.blocksWidth[2]"
-              :title="localization.common.information"
-              position="third-block"
-            >
-              <template #content>
-                <div v-if="props.info" class="new-view-info">
-                  <div class="new-view-info_prop">
-                    <template v-for="item in props.info" :key="item.title">
-                      <span class="new-view-info_prop-item">
-                        {{ item.title }}:
-                      </span>
-                    </template>
+        <div class="container-columns-block">
+          <common-browse-blocks-container
+            type="horizontal"
+            :blocks-width="props.blocksWidth"
+            @change-widths="onChangeWidths"
+          >
+            <template #firstBlock>
+              <common-browse-blocks-title-new
+                :width="props.blocksWidth[0]"
+                :title="localization.common.datastores"
+                :sorting="props.firstBlockSorting"
+                @sort="emits('sort-first')"
+              >
+                <template #content>
+                  <div class="first-block-content">
+                    <ui-tree
+                      :nodes="props.nodesLocalWithLoading"
+                      @toggle-node="onShowNodes"
+                      @select-node="onSelectNode"
+                    >
+                      <template #content="{ node }">
+                        <div
+                          :class="[
+                            'browse-tree-item',
+                            { active: node.isActive },
+                          ]"
+                        >
+                          <span :class="node.iconClassName"></span>
+                          <span class="text-ellipsis datastore-node-name">{{
+                            node.name
+                          }}</span>
+                        </div>
+                      </template>
+                    </ui-tree>
                   </div>
-                  <div class="text-ellipsis">
-                    <div v-for="item in props.info" :key="item.title">
-                      <common-browse-blocks-info-text
-                        v-if="item.type === 'text'"
-                        :title="item.title"
-                        :value="item.value"
-                      />
-                      <common-browse-blocks-info-size
-                        v-if="item.type === 'size'"
-                        :title="item.title"
-                        :value="item.value"
-                      />
-                      <common-browse-blocks-info-date
-                        v-if="item.type === 'date'"
-                        :title="item.title"
-                        :value="item.value"
-                      />
+                </template>
+              </common-browse-blocks-title-new>
+            </template>
+            <template #secondBlock>
+              <common-browse-blocks-title-new
+                :width="props.blocksWidth[1]"
+                :title="localization.common.contents"
+                :sorting="props.secondBlockSorting"
+                position="second-block"
+                @sort="emits('sort-second')"
+              >
+                <template #content>
+                  <common-browse-blocks-contents-files
+                    :selected-folder-files="props.filesLocal"
+                    :selected-file="props.selectedFile"
+                    :browse-loading="props.browseLoading"
+                    @select-file="onSelectFile"
+                  />
+                </template>
+              </common-browse-blocks-title-new>
+            </template>
+            <template #thirdBlock>
+              <common-browse-blocks-title-new
+                :width="props.blocksWidth[2]"
+                :title="localization.common.information"
+                position="third-block"
+              >
+                <template #content>
+                  <div v-if="props.info" class="new-view-info">
+                    <div class="new-view-info_prop">
+                      <template v-for="item in props.info" :key="item.title">
+                        <span class="new-view-info_prop-item">
+                          {{ item.title }}:
+                        </span>
+                      </template>
                     </div>
-                  </div>
-                </div>
-                <div v-else>
-                  <div class="grid items-center empty-information">
-                    <div class="grid gap-3 mr-4 labels-block">
-                      <span>{{ localization.common.name }}:</span>
-                      <span>{{ localization.common.available }}:</span>
-                      <span>{{ localization.common.modified }}:</span>
+                    <div class="text-ellipsis">
+                      <div v-for="item in props.info" :key="item.title">
+                        <common-browse-blocks-info-text
+                          v-if="item.type === 'text'"
+                          :title="item.title"
+                          :value="item.value"
+                        />
+                        <common-browse-blocks-info-size
+                          v-if="item.type === 'size'"
+                          :title="item.title"
+                          :value="item.value"
+                        />
+                        <common-browse-blocks-info-date
+                          v-if="item.type === 'date'"
+                          :title="item.title"
+                          :value="item.value"
+                        />
+                      </div>
                     </div>
-                    <div class="grid gap-3 values-block">
-                      <span>--</span>
-                      <span>--</span>
-                      <span>--</span>
+                  </div>
+                  <div v-else>
+                    <div class="grid items-center empty-information">
+                      <div class="grid gap-3 mr-4 labels-block">
+                        <span>{{ localization.common.name }}:</span>
+                        <span>{{ localization.common.available }}:</span>
+                        <span>{{ localization.common.modified }}:</span>
+                      </div>
+                      <div class="grid gap-3 values-block">
+                        <span>--</span>
+                        <span>--</span>
+                        <span>--</span>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </template>
-            </common-browse-blocks-title-new>
-          </template>
-        </common-browse-blocks-container>
+                </template>
+              </common-browse-blocks-title-new>
+            </template>
+          </common-browse-blocks-container>
+          <div class="opacity-block"></div>
+        </div>
         <div v-if="props.fileTypes" class="flex items-center mt-3">
           <span class="file-type-label mr-3"
             >{{ localization.common.fileType }}:</span
@@ -234,7 +240,24 @@ const selectedFileTypeLocal = computed<any>({
 }
 
 .browse-container {
-  padding: 8px 32px 0 32px;
+  margin-top: 8px;
+  padding: 0 32px 0 32px;
+  height: calc(100vh - 308px);
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow-y: hidden;
+
+  .container-columns-block {
+    overflow-y: hidden;
+    height: 100%;
+
+    .opacity-block {
+      height: 16px;
+      top: -16px;
+      position: relative;
+      background: linear-gradient(rgba(250, 250, 250, 0), var(--modal-bg));
+    }
+  }
 }
 
 .browse-tree-item {

package/components/common/browse/blocks/Container.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="containerBlock"
     :class="[
       `title-block__${props.type}-container`,
       {
@@ -9,6 +10,7 @@
   >
     <slot name="firstBlock"></slot>
     <div
+      ref="moveSeperator"
       :class="[
         'move-separator',
         {
@@ -18,13 +20,14 @@
         },
       ]"
       :data-id="`${props.testId}-first`"
-      :style="leftPosition"
+      :style="seperatorStyles"
       @mousedown="onMouseDown($event, 'first')"
     >
-      <div></div>
+      <div :style="moveSeperatorBeforeStyles"></div>
     </div>
     <slot name="secondBlock"></slot>
     <div
+      ref="secondMoveSeperator"
       :class="[
         'move-separator',
         {
@@ -34,16 +37,17 @@
         },
       ]"
       :data-id="`${props.testId}-second`"
-      :style="rightPosition"
+      :style="secondSeperatorStyles"
       @mousedown="onMouseDown($event, 'second')"
     >
-      <div></div>
+      <div :style="secondMoveSeperatorBeforeStyles"></div>
     </div>
     <slot name="thirdBlock"></slot>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
 import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
 
 const props = withDefaults(
@@ -66,14 +70,46 @@ const sectionSelectedName = ref<string>('')
 
 const positionOnDown = ref<number>(0)
 
+const containerBlock = ref<HTMLElement | null>(null)
+const { height: heightContainerBlock } = useElementSize(containerBlock)
+
+const moveSeperator = ref<HTMLElement | null>(null)
+const { height: heightMoveSeperator } = useElementSize(moveSeperator)
+const moveSeperatorBeforeStyles = ref<any>({})
+watch(
+  heightMoveSeperator,
+  (newValue) => {
+    if (!newValue) return
+
+    moveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
+  },
+  { immediate: true, deep: true }
+)
+
+const secondMoveSeperator = ref<HTMLElement | null>(null)
+const { height: heightSecondMoveSeperator } =
+  useElementSize(secondMoveSeperator)
+const secondMoveSeperatorBeforeStyles = ref<any>({})
+watch(
+  heightSecondMoveSeperator,
+  (newValue) => {
+    if (!newValue) return
+
+    secondMoveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
+  },
+  { immediate: true, deep: true }
+)
+
 const translation1 = computed<number>(() => (isNewView.value ? 31 : 28))
 const translation2 = computed<number>(() => (isNewView.value ? 47 : 28))
 
-const leftPosition = computed(() => ({
+const seperatorStyles = computed(() => ({
   left: `${props.blocksWidth[0] + translation1.value}px`,
+  height: `${heightContainerBlock.value}px`,
 }))
-const rightPosition = computed(() => ({
+const secondSeperatorStyles = computed(() => ({
   right: `${props.blocksWidth[2] + translation2.value}px`,
+  height: `${heightContainerBlock.value}px`,
 }))
 
 const emits = defineEmits<{
@@ -141,13 +177,14 @@ onUnmounted(() => {
 
 .title-block__horizontal-container.title-block__new-view {
   gap: 0;
+  height: inherit;
 }
 .move-separator {
   position: absolute;
   width: 3px;
-  height: 400px;
+  height: inherit;
   background-color: var(--modal-bg-color);
-  cursor: e-resize;
+  cursor: col-resize;
   z-index: var(--z-fixed);
 
   &-new-view {
@@ -172,7 +209,6 @@ onUnmounted(() => {
         background-color: var(--select-file-sprt-handler-color);
         position: absolute;
         left: 0.5px;
-        top: 192px;
         border-radius: 2px;
       }
     }

package/components/common/browse/blocks/TitleNew.vue

@@ -61,7 +61,7 @@ const blockTitleWidth = computed<any>(() => ({
 <style scoped lang="scss">
 .title-block {
   width: 100%;
-  min-height: 400px;
+  min-height: 100%;
   position: relative;
 
   &__container {
@@ -70,7 +70,7 @@ const blockTitleWidth = computed<any>(() => ({
     left: 0;
     display: flex;
     flex-direction: column;
-    height: 400px;
+    height: 100%;
 
     &.title-block__container-first-block {
       padding-right: 12px;

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/LocationNew.vue

@@ -24,6 +24,7 @@
       :datastore="props.datastore"
       :is-datastore-loading="props.isDatastoreLoading"
       :get-datastore-table-func="props.getDatastoreTableFunc"
+      is-in-wizard
       @change-storage="emits('change-storage', $event)"
       @hide="emits('hide-storage-modal')"
       @submit="emits('submit-storage-modal')"

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/StorageModal.vue

@@ -6,6 +6,7 @@
     :datastore="props.datastore"
     :is-datastore-loading="props.isDatastoreLoading"
     :get-datastore-table-func="props.getDatastoreTableFunc"
+    :is-in-wizard="props.isInWizard"
     @change-storage="emits('change-storage', $event)"
     @submit="emits('submit')"
     @hide="emits('hide')"
@@ -33,6 +34,7 @@ const props = defineProps<{
   datastore: UI_I_DatastoreTableItem[]
   isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  isInWizard?: boolean
 }>()
 
 const emits = defineEmits<{
@@ -43,7 +45,6 @@ const emits = defineEmits<{
 
 const { $store }: any = useNuxtApp()
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 </script>
 
 <style scoped lang="scss">

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/StorageModalNew.vue

@@ -28,6 +28,7 @@
           :datastore="props.datastore"
           :is-datastore-loading="props.isDatastoreLoading"
           :get-datastore-table-func="props.getDatastoreTableFunc"
+          :is-in-wizard="props.isInWizard"
           hide-compatibility
           hide-alert
           @submit="emits('change-storage', $event)"
@@ -58,6 +59,7 @@ const props = defineProps<{
   datastore: UI_I_DatastoreTableItem[]
   isDatastoreLoading: boolean
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  isInWizard?: boolean
 }>()
 
 const emits = defineEmits<{

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/New.vue

@@ -73,6 +73,18 @@ const modalTexts = ref<UI_I_ModalTexts>({
 </script>
 
 <style scoped lang="scss">
+:root.dark-theme {
+  .network-select-dialog-content {
+    :deep(.column-manager-button) {
+      &:hover {
+        background: #b8bcc10a;
+      }
+      &.active:hover {
+        background-color: #2785b614;
+      }
+    }
+  }
+}
 .network-select-dialog-content {
   margin: 0 32px;
 }

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/table/Table.vue

@@ -14,7 +14,7 @@
       <span class="flex-align-center">
         <span :class="['icon', item.data.icon]" />
 
-        <span :data-id="item.data.testId">
+        <span class="network-name" :data-id="item.data.testId">
           {{ item.text }}
         </span>
       </span>
@@ -80,4 +80,7 @@ const onSelect = (value: UI_I_DataTableBody[]): void => {
 .icon {
   margin-right: 4px;
 }
+.network-name {
+  font-size: 12px;
+}
 </style>

package/components/common/vm/actions/common/select/storage/Storage.vue

@@ -9,6 +9,7 @@
     :selected-storage="selectedStorage"
     :hide-compatibility="props.hideCompatibility"
     :hide-alert="props.hideAlert"
+    :is-in-wizard="props.isInWizard"
     @remove-error="onRemoveValidationErrors"
     @change-storage="changeStorage"
   />
@@ -42,6 +43,7 @@ const props = defineProps<{
   storage?: UI_I_DatastoreTableItem
   hideCompatibility?: boolean
   hideAlert?: boolean
+  isInWizard?: boolean
 }>()
 const emits = defineEmits<{
   (event: 'submit', value: UI_I_DatastoreTableItem): void

package/components/common/vm/actions/common/select/storage/new/New.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="select-storage">
+  <div :class="['select-storage', { 'in-wizard': isInWizard }]">
     <Teleport v-if="!props.hideAlert" to="#storage-alert-wrapper">
       <ui-alert
         v-show="props.errors.length"
@@ -24,7 +24,7 @@
         size="sm"
         @select-row="onSelectRow"
       >
-        <template #insteadOfTitleActions
+        <template v-if="!props.isInWizard" #insteadOfTitleActions
           ><h3 class="storage-count">
             {{ storageCount }}
           </h3></template
@@ -95,6 +95,7 @@ const props = defineProps<{
   selectedStorage: UI_I_DatastoreTableItem | null
   hideCompatibility?: boolean
   hideAlert?: boolean
+  isInWizard?: boolean
 }>()
 const emits = defineEmits<{
   (event: 'remove-error'): void
@@ -168,6 +169,20 @@ const onSelectRow = (selectedData: UI_I_DataTable): void => {
 }
 </style>
 <style scoped lang="scss">
+:root.dark-theme {
+  .select-storage {
+    &.in-wizard {
+      :deep(.column-manager-button) {
+        &:hover {
+          background: #b8bcc10a;
+        }
+        &.active:hover {
+          background-color: #2785b614;
+        }
+      }
+    }
+  }
+}
 .select-storage {
   padding-top: 12px;
   padding-bottom: 16px;
@@ -196,15 +211,18 @@ const onSelectRow = (selectedData: UI_I_DataTable): void => {
     }
   }
 
-  :deep(.bottom-grid-content) {
-    border: 1px solid var(--select-storage-border-color);
-    border-radius: 8px;
-    padding: 12px;
-    background-color: var(--select-storage-bg-color);
-  }
-  :deep(.select-row-item) {
-    background-color: var(--select-storage-bg-color);
+  &:not(.in-wizard) {
+    :deep(.bottom-grid-content) {
+      border: 1px solid var(--select-storage-border-color);
+      border-radius: 8px;
+      padding: 12px;
+      background-color: var(--select-storage-bg-color);
+    }
+    :deep(.select-row-item) {
+      background-color: var(--select-storage-bg-color);
+    }
   }
+
   :deep(.table-title-actions-container) {
     justify-content: flex-start;
   }

package/components/common/wizards/datastore/add/New.vue

@@ -28,7 +28,6 @@
                   :title="localization.common.information"
                   dropdown-width="320px"
                   dropdown-left
-                  dropdown-top
               />
             </div>
           </div>
@@ -66,6 +65,7 @@
             v-if="selectedStep.id === dynamicSteps.nameAndDevice"
             v-model="formModelLocal"
             :project="props.project"
+            :selected-node="props.selectedNode"
             :messages-fields="selectedStep.fields"
             :hosts="props.nfsHosts"
             :host-id="props.hostId"

package/components/common/wizards/datastore/add/lib/validations.ts

@@ -58,7 +58,7 @@ export const checkDatastoreNameAsync = async (
 
   if (!labelValidation.isValid) {
     stepHasError = wizard.setValidation(stepId, fieldName, {
-      fieldMessage: labelValidation.message,
+      fieldMessage: localization.common.fieldRequired,
       alertMessage: form.name ? labelValidation.message : '',
     })
   } else if (wizard.hasMessage(stepId, fieldName)) {
@@ -90,7 +90,11 @@ export const checkSelectedLunDiskSync = (
         : localization.common.selectDiskToContinueAlert,
     })
   } else if (wizard.hasMessage(dynamicSteps.nameAndDevice, 'lunDisk')) {
-    value = wizard.removeValidation(dynamicSteps.nameAndDevice, 'lunDisk', value)
+    value = wizard.removeValidation(
+      dynamicSteps.nameAndDevice,
+      'lunDisk',
+      value
+    )
   }
 
   return {
@@ -170,12 +174,22 @@ export const checkHostsAccessibilitySync = (
   let stepHasError = false
 
   if (!hosts.length) {
-    stepHasError = wizard.setValidation(dynamicSteps.hostAccessibility, 'hostsAccessibility', {
-      fieldMessage: '',
-      alertMessage: localization.common.selectLeastEntityContinue,
-    })
-  } else if (wizard.hasMessage(dynamicSteps.hostAccessibility, 'hostsAccessibility')) {
-    value = wizard.removeValidation(dynamicSteps.hostAccessibility, 'hostsAccessibility', value)
+    stepHasError = wizard.setValidation(
+      dynamicSteps.hostAccessibility,
+      'hostsAccessibility',
+      {
+        fieldMessage: '',
+        alertMessage: localization.common.selectLeastEntityContinue,
+      }
+    )
+  } else if (
+    wizard.hasMessage(dynamicSteps.hostAccessibility, 'hostsAccessibility')
+  ) {
+    value = wizard.removeValidation(
+      dynamicSteps.hostAccessibility,
+      'hostsAccessibility',
+      value
+    )
   }
 
   return {

package/components/common/wizards/datastore/add/steps/hostAccessibility/table/new/New.vue

@@ -9,6 +9,7 @@
       :total-items="props.totalItems"
       :texts="texts"
       :default-layout="false"
+      :skeleton="tableSkeleton"
       class="accessibility-host-table"
       size="sm"
       @select-row="onSelectRow"
@@ -31,6 +32,7 @@ import type {
   UI_I_DataTableHeader,
   UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {UI_I_DataTableSkeleton} from "~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces";
 import {
   getBodyDataFunc,
   getHeaderDataFunc,
@@ -63,6 +65,10 @@ const texts = computed<UI_I_TableTexts>(() => ({
   filter: localization.value.common.filter,
 }))
 
+const tableSkeleton = ref<UI_I_DataTableSkeleton>({
+  withoutPagination: true,
+})
+
 const data = computed<UI_I_DataTable>(() => ({
   id: 'accessibility-host-table',
   header: hostHeadItems.value,
@@ -94,6 +100,8 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
 
 <style lang="scss" scoped>
 .host-accessibility-table {
+  margin-bottom: 10px;
+
   :deep(.bottom-grid-content) {
     border: 1px solid var(--select-storage-border-color);
     border-radius: 8px;

package/components/common/wizards/datastore/add/steps/hostAccessibility/table/new/lib/config/compatibleTable.ts

@@ -45,6 +45,7 @@ export const options: UI_I_DataTableOptions = {
   isResizable: true,
   showSelectedRows: true,
   showColumnManager: true,
+  inModal: true
 }
 
 export const getBodyDataFunc = (

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/Table.vue

@@ -33,7 +33,9 @@ import type {
   UI_I_CreateStorageLunDisks,
 } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/table/lib/models/interfaces'
 
-const modelLunDiskLocal = defineModel<UI_I_CreateStorageLunDiskItem[]>({ required: true })
+const modelLunDiskLocal = defineModel<UI_I_CreateStorageLunDiskItem[]>({
+  required: true,
+})
 const props = defineProps<{
   lunDisksData: UI_I_CreateStorageLunDisks
   loading: boolean
@@ -66,9 +68,10 @@ const onMainFiltering = (data: string): void => {
   sendFilter(data)
 }
 const onSelectLunDisk = (event: number[]): void => {
-  modelLunDiskLocal.value = props.lunDisksData?.items?.filter(
-    (_: never, key: number) => event.includes(key)
-  )
+  modelLunDiskLocal.value =
+    props.lunDisksData?.items?.filter((_: never, key: number) =>
+      event.includes(key)
+    ) || []
 }
 </script>
 

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/new/New.vue

@@ -9,6 +9,7 @@
       :total-items="props.totalItems"
       :texts="texts"
       :default-layout="false"
+      :skeleton="tableSkeleton"
       class="device-table"
       size="sm"
       @select-row="onSelectRow"
@@ -46,6 +47,7 @@ import type {
   UI_I_DataTableBody,
   UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {UI_I_DataTableSkeleton} from "~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces";
 import {
   options,
   getHeaderDataFunc,
@@ -84,6 +86,10 @@ const texts = computed<UI_I_TableTexts>(() => ({
   filter: localization.value.common.filter,
 }))
 
+const tableSkeleton = ref<UI_I_DataTableSkeleton>({
+  withoutPagination: true
+})
+
 const data = computed<UI_I_DataTable>(() => ({
   id: 'device-selection-table',
   header: deviceHeadItems.value,

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/new/lib/config/lunDiskTable.ts

@@ -112,12 +112,13 @@ export const options: UI_I_DataTableOptions = {
   isResizable: true,
   showSelectedRows: true,
   showColumnManager: true,
+  inModal: true,
   // perPageOptions: [{ text: '10', value: 100, default: true }],
   // isFocusable: false,
   // showPaginationOnTop: false,
   // showSearch: false,
   // withActions: false,
-  inBlock: true,
+  inBlock: true
   // showExport: false,
   // withCollapse: false,
 }

package/package.json

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