bfg-common 1.4.550 → 1.4.552

package/components/common/browse/Browse.vue

@@ -13,6 +13,7 @@
     :test-id="props.testId"
     :file-types="props.fileTypes"
     :info="props.info"
+    :files-loading="props.filesLoading"
     @change-widths="onChangeWidths"
     @sort-first="onSortFirstBlock"
     @sort-second="onSortSecondBlock"
@@ -36,6 +37,7 @@
     :test-id="props.testId"
     :file-types="props.fileTypes"
     :info="props.info"
+    :files-loading="props.filesLoading"
     @change-widths="onChangeWidths"
     @sort-first="onSortFirstBlock"
     @sort-second="onSortSecondBlock"
@@ -60,6 +62,7 @@ const props = defineProps<{
   files: any[]
   info: UI_I_FileInfo[] | null
   selectedFile: any | null
+  filesLoading: boolean
   fileTypes?: UI_I_OptionItem[]
   selectedFileType?: any
   testId?: string

package/components/common/browse/BrowseNew.vue

@@ -57,6 +57,7 @@
                 <common-browse-blocks-contents-files
                   :selected-folder-files="props.filesLocal"
                   :selected-file="props.selectedFile"
+                  :files-loading="props.filesLoading"
                   @select-file="onSelectFile"
                 />
               </template>
@@ -139,6 +140,7 @@ const props = defineProps<{
   secondBlockSorting: [boolean, boolean]
   nodesLocalWithLoading: any[]
   filesLocal: any[]
+  filesLoading: boolean
   selectedFileType?: any
   testId?: string
   fileTypes?: UI_I_OptionItem[]

package/components/common/browse/BrowseOld.vue

@@ -58,6 +58,7 @@
               <common-browse-blocks-contents-files
                 :selected-folder-files="props.filesLocal"
                 :selected-file="props.selectedFile"
+                :files-loading="props.filesLoading"
                 @select-file="onSelectFile"
               />
             </template>
@@ -127,6 +128,7 @@ const props = defineProps<{
   secondBlockSorting: [boolean, boolean]
   nodesLocal: any[]
   filesLocal: any[]
+  filesLoading: boolean
   selectedFileType?: any
   testId?: string
   fileTypes?: UI_I_OptionItem[]

package/components/common/browse/blocks/contents/Files.vue

@@ -1,124 +1,35 @@
-<template>
-  <ul
-    :class="[
-      'file-view__container',
-      {
-        'file-view_new__container': isNewView,
-      },
-    ]"
-  >
-    <template v-for="file in props.selectedFolderFiles" :key="file.name">
-      <li
-        :data-id="file.testId"
-        :class="[
-          'file-view',
-          isNewView
-            ? { active: file.name === props.selectedFile?.name }
-            : { selected: file.name === props.selectedFile?.name },
-        ]"
-        @click="onSelectFile(file)"
-      >
-        <span class="file-view__icon" :class="file.iconClassName"></span>
-        <span class="file-view__text">{{ file.name }}</span>
-      </li>
-    </template>
-  </ul>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  selectedFolderFiles: any[]
-  selectedFile: any
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-file', file: any): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const onSelectFile = (file: any): void => {
-  emits('select-file', file)
-}
-</script>
-
-<style scoped lang="scss">
-.file-view {
-  &__container {
-    list-style-position: inside;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-
-    &:not(.file-view_new__container) {
-      li {
-        line-height: 20px;
-        padding: 2px;
-        border-bottom: 1px solid #eee;
-        cursor: pointer;
-
-        &:hover {
-          background-color: #c6e7ff;
-          line-height: 20px;
-          padding: 2px;
-          border-bottom: 1px solid #eee;
-          cursor: pointer;
-        }
-        &.selected {
-          background-color: #a3d7ff;
-        }
-        span {
-          line-height: 20px;
-        }
-        span:first-of-type {
-          width: 16px;
-          height: 16px;
-          line-height: 20px;
-        }
-        &__text {
-          color: var(--global-font-color9);
-        }
-      }
-    }
-  }
-
-  &_new__container {
-    li {
-      display: flex;
-      align-items: center;
-
-      padding: 4px 8px;
-      cursor: pointer;
-      border-radius: 4px;
-      height: 26px;
-      margin-bottom: 2px;
-
-      color: var(--select-file-text-color);
-
-      &:hover {
-        background-color: var(--select-file-hover-bg);
-      }
-      &.active {
-        background-color: var(--select-file-selected-bg);
-        color: var(--select-file-selected-text-color);
-      }
-      span {
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 14.52px;
-
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      span:first-of-type {
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <common-browse-blocks-contents-files-new
+    v-if="isNewView"
+    :selected-folder-files="props.selectedFolderFiles"
+    :selected-file="props.selectedFile"
+    :files-loading="props.filesLoading"
+    @select-file="emits('select-file', $events)"
+  />
+  <common-browse-blocks-contents-files-old
+    v-else
+    :selected-folder-files="props.selectedFolderFiles"
+    :selected-file="props.selectedFile"
+    :files-loading="props.filesLoading"
+    @select-file="emits('select-file', $events)"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  selectedFolderFiles: any[]
+  selectedFile: any
+  filesLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-file', file: any): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped lang="scss">
+</style>

package/components/common/browse/blocks/contents/FilesOld.vue

@@ -0,0 +1,70 @@
+<template>
+  <ul class="file-view__container">
+    <template v-for="file in props.selectedFolderFiles" :key="file.name">
+      <li
+        :data-id="file.testId"
+        :class="[
+          'file-view',
+          { selected: file.name === props.selectedFile?.name },
+        ]"
+        @click="emits('select-file', file)"
+      >
+        <span class="file-view__icon" :class="file.iconClassName"></span>
+        <span class="file-view__text">{{ file.name }}</span>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  selectedFolderFiles: any[]
+  selectedFile: any
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-file', file: any): void
+}>()
+
+const { $store }: any = useNuxtApp()
+</script>
+
+<style scoped lang="scss">
+.file-view {
+  &__container {
+    list-style-position: inside;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      line-height: 20px;
+      padding: 2px;
+      border-bottom: 1px solid #eee;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #c6e7ff;
+        line-height: 20px;
+        padding: 2px;
+        border-bottom: 1px solid #eee;
+        cursor: pointer;
+      }
+      &.selected {
+        background-color: #a3d7ff;
+      }
+      span {
+        line-height: 20px;
+      }
+      span:first-of-type {
+        width: 16px;
+        height: 16px;
+        line-height: 20px;
+      }
+      &__text {
+        color: var(--global-font-color9);
+      }
+    }
+  }
+}
+</style>

package/components/common/browse/blocks/contents/new/New.vue

@@ -0,0 +1,95 @@
+<template>
+  <ul
+    v-if="props.selectedFolderFiles.length || props.filesLoading"
+    class="file-view__container"
+  >
+    <template v-for="file in props.selectedFolderFiles" :key="file.name">
+      <li
+        :data-id="file.testId"
+        :class="[
+          'file-view',
+          { active: file.name === props.selectedFile?.name },
+        ]"
+        @click="emits('select-file', file)"
+      >
+        <span class="file-view__icon" :class="file.iconClassName"></span>
+        <span class="file-view__text">{{ file.name }}</span>
+      </li>
+    </template>
+    <common-browse-blocks-contents-files-new-skeleton v-if="props.filesLoading" />
+  </ul>
+
+  <div v-else class="not-found-wrap">
+    <ui-not-found :text="localization.common.noItemsFound" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  selectedFolderFiles: any[]
+  selectedFile: any
+  filesLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-file', file: any): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.file-view {
+  &__container {
+    list-style-position: inside;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 4px;
+    height: 26px;
+    margin-bottom: 2px;
+
+    color: var(--select-file-text-color);
+
+    &:hover {
+      background-color: var(--select-file-hover-bg);
+    }
+    &.active {
+      background-color: var(--select-file-selected-bg);
+      color: var(--select-file-selected-text-color);
+    }
+    span {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 14.52px;
+
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    span:first-of-type {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+  }
+}
+.not-found-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+</style>

package/components/common/browse/blocks/contents/new/Skeleton.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="skeleton-wrap">
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  display: grid;
+  grid-gap: 12px;
+}
+</style>

package/components/common/vm/actions/add/Add.vue

@@ -94,6 +94,7 @@
             :datastore="props.datastore"
             :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
             :passthrough-devices="props.passthroughDevices"
+            :files-loading="props.filesLoading"
             @change-boot-order="onChangeBootOrder"
             @send-data="onChangeCustomizeHardware"
             @get-storage="emits('get-storage', $event)"
@@ -200,6 +201,7 @@ const props = defineProps<{
   >
   passthroughDevices: UI_I_PciDevice[]
   vmNameInWizard: string
+  filesLoading: boolean
   capabilities?: UI_I_Capabilities
   dataCenter?: UI_I_TreeNode // для сферы
   computeResource?: UI_I_TreeNode // для сферы

package/components/common/vm/actions/clone/Clone.vue

@@ -75,6 +75,7 @@
             :datastore="props.datastore"
             :project="props.project"
             is-clone
+            :files-loading="props.filesLoading"
             @change-boot-order="onChangeBootOrder"
             @send-data="onChangeCustomizeHardware"
             @get-storage="emits('get-storage', $event)"
@@ -153,6 +154,7 @@ const props = defineProps<{
   validateSendDataFunc: any
   passthroughDevices: UI_I_ConfigurePciDevicesTable | null
   vmNameInWizard: string
+  filesLoading: boolean
   capabilities?: UI_I_Capabilities
   schedulerTask?: any // TODO  надо interface переместить глобално
   selectedVirtualMachine?: UI_I_Capabilities

package/components/common/vm/actions/common/customizeHardware/CustomizeHardware.vue

@@ -38,6 +38,7 @@
     :project="props.project"
     :nav-items="navItems"
     :errors="errors"
+    :files-loading="props.filesLoading"
     @change-boot-order="emits('change-boot-order', $event)"
     @send-data="emits('send-data', $event)"
     @next="emits('next')"
@@ -91,6 +92,7 @@
     :project="props.project"
     :nav-items="navItems"
     :errors="errors"
+    :files-loading="props.filesLoading"
     @change-boot-order="emits('change-boot-order', $event)"
     @send-data="emits('send-data', $event)"
     @next="emits('next')"
@@ -157,6 +159,7 @@ const props = defineProps<{
   nodes: UI_I_FileTreeNode[]
   files: UI_I_FileTreeNode[]
   networksTable: UI_I_NetworkTableItem[]
+  filesLoading: boolean
   cpu?: API_UI_I_VmEditCpu
   memory?: API_UI_I_VmEditMemory
   vmCpuHelpTextSecond?: string

package/components/common/vm/actions/common/customizeHardware/CustomizeHardwareNew.vue

@@ -43,6 +43,7 @@
         :passthrough-devices="props.passthroughDevices"
         :project="props.project"
         :guest-machine-type="guestMachineType"
+        :files-loading="props.filesLoading"
         @send-data="emits('send-data-virtual-hardware-method', $event)"
         @get-storage="emits('get-storage', $event)"
         @get-folders-or-files="emits('get-folders-or-files', $event)"
@@ -143,6 +144,7 @@ const props = defineProps<{
   networksForBootOptions: UI_I_SendDataNewNetwork[] | null
   hardDisksForBootOptions: UI_I_SendDataNewHardDisk[] | null
   cdDvdDrivesForBootOptions: UI_I_SendDataNewCdDvdDrive[] | null
+  filesLoading: boolean
   cpu?: API_UI_I_VmEditCpu
   state?: string | number
   isEdit?: boolean

package/components/common/vm/actions/common/customizeHardware/CustomizeHardwareOld.vue

@@ -37,6 +37,7 @@
         :passthrough-devices="props.passthroughDevices"
         :project="props.project"
         :guest-machine-type="guestMachineType"
+        :files-loading="props.filesLoading"
         @send-data="emits('send-data-virtual-hardware-method', $event)"
         @get-storage="emits('get-storage', $event)"
         @get-folders-or-files="emits('get-folders-or-files', $event)"
@@ -120,6 +121,7 @@ const props = defineProps<{
   networksForBootOptions: UI_I_SendDataNewNetwork[] | null
   hardDisksForBootOptions: UI_I_SendDataNewHardDisk[] | null
   cdDvdDrivesForBootOptions: UI_I_SendDataNewCdDvdDrive[] | null
+  filesLoading: boolean
   cpu?: API_UI_I_VmEditCpu
   state?: string | number
   isEdit?: boolean

package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardware.vue

@@ -38,6 +38,7 @@
     :guest-machine-type="guestMachineType"
     :passthrough-devices="passthroughDevices"
     :vm-cpu-help-text-second="vmCpuHelpTextSecond"
+    :files-loading="props.filesLoading"
     @add-device="onAddDevice"
     @get-storage="emits('get-storage', $event)"
     @remove-network="onRemoveNetwork"
@@ -104,6 +105,7 @@
     :guest-machine-type="guestMachineType"
     :passthrough-devices="passthroughDevices"
     :vm-cpu-help-text-second="vmCpuHelpTextSecond"
+    :files-loading="props.filesLoading"
     @add-device="onAddDevice"
     @get-storage="emits('get-storage', $event)"
     @remove-network="onRemoveNetwork"
@@ -184,6 +186,7 @@ const props = defineProps<{
   networksTable: UI_I_NetworkTableItem[]
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
   datastore: UI_I_DatastoreTableItem[]
+  filesLoading: UI_I_DatastoreTableItem[]
   state?: string | number
   cpu?: API_UI_I_VmEditCpu
   memory?: API_UI_I_VmEditMemory

package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardwareNew.vue

@@ -185,6 +185,7 @@
         show
         :nodes="props.nodes"
         :files="props.files"
+        :files-loading="props.filesLoading"
         @submit="emits('add-exist-hard-disk', $event)"
         @get-storage="emits('get-storage', $event)"
         @get-folders-or-files="emits('get-folders-or-files', $event)"
@@ -255,6 +256,7 @@ const props = defineProps<{
   cdDvdDrivesIndex: number[]
   errorValidationFields: UI_I_ErrorValidationField<string>[]
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  filesLoading: boolean
   cpu?: API_UI_I_VmEditCpu
   state?: string | number
   memory?: API_UI_I_VmEditMemory

package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardwareOld.vue

@@ -137,6 +137,7 @@
         show
         :nodes="props.nodes"
         :files="props.files"
+        :files-loading="props.filesLoading"
         @submit="emits('add-exist-hard-disk', $event)"
         @get-storage="emits('get-storage', $event)"
         @get-folders-or-files="emits('get-folders-or-files', $event)"
@@ -209,6 +210,7 @@ const props = defineProps<{
   cdDvdDrivesIndex: number[]
   errorValidationFields: UI_I_ErrorValidationField<string>[]
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  filesLoading: boolean
   cpu?: API_UI_I_VmEditCpu
   state?: string | number
   memory?: API_UI_I_VmEditMemory

package/components/common/vm/actions/common/customizeHardware/virtualHardware/browseView/BrowseView.vue

@@ -8,6 +8,7 @@
       :files="files"
       :info="selectedNodeInfo"
       :file-types="props.fileTypes"
+      :files-loading="props.filesLoading"
       @get-nodes="onGetCurrentDirNodes"
       @select-node="onSelectNode"
       @submit="onSubmit"
@@ -29,6 +30,7 @@ const props = defineProps<{
   show: boolean
   nodes: UI_I_FileTreeNode[]
   files: UI_I_FileTreeNode[]
+  filesLoading: boolean
   fileTypes?: UI_I_OptionItem[]
 }>()
 const emits = defineEmits<{

package/components/common/vm/actions/editSettings/EditSettings.vue

@@ -19,6 +19,7 @@
     :vm-name-old="props.vmSettings?.name"
     :passthrough-devices="props.passthroughDevices"
     :get-datastore-table-func="props.getDatastoreTableFunc"
+    :files-loading="props.filesLoading"
     @hide="emits('hide')"
     @validate="validateSendData"
     @update-vm="emits('update-vm')"
@@ -51,6 +52,7 @@
     :vm-name-old="props.vmSettings?.name"
     :passthrough-devices="props.passthroughDevices"
     :get-datastore-table-func="props.getDatastoreTableFunc"
+    :files-loading="props.filesLoading"
     @hide="emits('hide')"
     @validate="validateSendData"
     @update-vm="emits('update-vm')"
@@ -106,6 +108,7 @@ const props = defineProps<{
   vmId: string
   datastore: UI_I_DatastoreTableItem[]
   validateSendDataFunc: UI_T_EditVmFinishFunc
+  filesLoading: boolean
   getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
   state?: string | number
   passthroughDevices?: UI_I_PciDevice[]

package/components/common/vm/actions/editSettings/EditSettingsOld.vue

@@ -51,6 +51,7 @@
             :get-datastore-table-func="props.getDatastoreTableFunc"
             :datastore="props.datastore"
             is-edit
+            :files-loading="props.filesLoading"
             @get-storage="emits('get-storage', $event)"
             @get-folders-or-files="emits('get-folders-or-files', $event)"
             @get-active-device-child="emits('get-active-device-child', $event)"
@@ -109,6 +110,7 @@ const props = defineProps<{
   virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
   virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
   virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
+  filesLoading: boolean
   state?: string | number
   vmNameOld?: string
   passthroughDevices?: UI_I_PciDevice[]

package/components/common/vm/actions/editSettings/new/New.vue

@@ -53,6 +53,7 @@
             :get-datastore-table-func="props.getDatastoreTableFunc"
             :datastore="props.datastore"
             is-edit
+            :files-loading="props.filesLoading"
             @get-storage="emits('get-storage', $event)"
             @get-folders-or-files="emits('get-folders-or-files', $event)"
             @get-active-device-child="emits('get-active-device-child', $event)"
@@ -115,6 +116,7 @@ const props = defineProps<{
   virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
   virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
   virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
+  filesLoading: boolean
   state?: string | number
   vmNameOld?: string
   passthroughDevices?: UI_I_PciDevice[]

package/components/common/vm/actions/editSettings/new/Skeleton.vue

@@ -70,7 +70,7 @@
       display: flex;
       align-items: center;
       padding: 8px 12px;
-      background: #e9ebed66;
+      background: var(--stack-block-bg-color);
       border-radius: 6px;
 
       .stack-label,

package/package.json

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