bfg-common 1.5.635 → 1.5.636

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue

@@ -1,154 +1,156 @@
-<template>
-  <component
-    :is="currentComponent"
-    :boot-list="bootList"
-    :is-disabled="props.isDisabled"
-    @change-order="onChangeOrder"
-    @update:boot-list="onBootListUpdate"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_BootItem } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/lib/models/interfaces'
-import type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
-import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
-
-const model = defineModel<UI_I_CreateVmData>({ required: true })
-
-const props = defineProps<{
-  isDisabled: boolean
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-const bootList = ref<UI_I_BootItem[]>([])
-
-// Используем computed для автоматического обновления bootList при изменении модели
-const hardDisksAndNetworks = computed(() => [
-  model.value.disk_devices?.filter((disk) => disk.device_type !== 'cdrom') ||
-    [],
-  model.value.disk_devices?.filter((disk) => disk.device_type === 'cdrom') ||
-    [],
-  model.value.network_devices || [],
-])
-
-// Watcher для обновления bootList при изменении модели
-watch(
-  hardDisksAndNetworks,
-  ([hardDisks, cdDvdDrives, networks]) => {
-    const hardDiskItems: UI_I_BootItem[] = hardDisks.map((item, index) => {
-      const order = item.boot_order || 0
-      return {
-        order,
-        isChecked: !!order,
-        text: `disk${index}`,
-        iconClassName: 'icon-disk',
-        type: 'disk' as const,
-        name: `${item.source}_${index}`,
-        testId: `select-disk-value-${index + 1}`,
-      }
-    })
-
-    const cdDvdDriveItems: UI_I_BootItem[] = cdDvdDrives.map((item, index) => {
-      const order = item.boot_order || 0
-      return {
-        order,
-        isChecked: !!order,
-        text: `cdrom${index}`,
-        iconClassName: 'icon-disk',
-        type: 'cdDvd' as const,
-        name: `${item.source}_${hardDisks.length + index}`,
-        testId: `select-cd-dvd-value-${index + 1}`,
-      }
-    })
-
-    const networkItems: UI_I_BootItem[] = networks.map((item, index) => {
-      const order = item.boot_order || 0
-      return {
-        order,
-        isChecked: !!order,
-        text: item.mac || 'undefined',
-        iconClassName: 'vsphere-icon-network',
-        type: 'nic' as const,
-        name: `${item.network}_${index}`,
-        testId: `select-nic-value-${index + 1}`,
-      }
-    })
-
-    bootList.value = [...hardDiskItems, ...cdDvdDriveItems, ...networkItems]
-      .filter((item) => item.order >= 0)
-      .sort((a, b) => a.order - b.order)
-  },
-  { deep: true, immediate: true }
-)
-
-// Обработчик изменения порядка через drag & drop
-const onChangeOrder = (event: UI_I_DropEvent): void => {
-  const updatedList = [...bootList.value]
-  const movedItem = updatedList.find((item) => item.name === event.target.name)
-
-  if (!movedItem) return
-
-  // Удаляем элемент из текущей позиции
-  const fromIndex = updatedList.indexOf(movedItem)
-  updatedList.splice(fromIndex, 1)
-
-  // Вставляем элемент в новую позицию
-  updatedList.splice(event.toPosition, 0, movedItem)
-
-  // Обновляем порядок всех элементов
-  updatedList.forEach((item, index) => {
-    item.order = index + 1
-  })
-
-  bootList.value = updatedList
-  updateModelFromBootList(updatedList)
-}
-
-// Обработчик обновления bootList (при изменении чекбоксов)
-const onBootListUpdate = (updatedBootList: UI_I_BootItem[]): void => {
-  bootList.value = updatedBootList
-  updateModelFromBootList(updatedBootList)
-}
-
-// Функция для обновления модели на основе bootList
-const updateModelFromBootList = (bootItems: UI_I_BootItem[]): void => {
-  // Сначала сбрасываем все boot_order
-  model.value.disk_devices?.forEach((disk) => {
-    disk.boot_order = 0
-  })
-  model.value.network_devices?.forEach((network) => {
-    network.boot_order = 0
-  })
-
-  // Затем устанавливаем boot_order только для выбранных элементов
-  let currentOrder = 1
-  bootItems.forEach((bootItem) => {
-    if (!bootItem.isChecked) return
-
-    if (bootItem.type === 'nic') {
-      const [networkName, indexStr] = bootItem.name.split('_')
-      const index = parseInt(indexStr, 10)
-      const network = model.value.network_devices?.[index]
-      if (network && network.network === networkName) {
-        network.boot_order = currentOrder++
-      }
-    } else {
-      const [source, indexStr] = bootItem.name.split('_')
-      const index = parseInt(indexStr, 10)
-      const disk = model.value.disk_devices?.[index]
-      if (disk && disk.source === source) {
-        disk.boot_order = currentOrder++
-      }
-    }
-  })
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div>
+    <component
+      :is="currentComponent"
+      :boot-list="bootList"
+      :is-disabled="props.isDisabled"
+      @change-order="onChangeOrder"
+      @update-boot-list="onBootListUpdate"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_BootItem } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/lib/models/interfaces'
+import type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
+import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateVmData>({ required: true })
+
+const props = defineProps<{
+  isDisabled: boolean
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const bootList = ref<UI_I_BootItem[]>([])
+
+// Используем computed для автоматического обновления bootList при изменении модели
+const hardDisksAndNetworks = computed(() => [
+  model.value.disk_devices?.filter((disk) => disk.device_type !== 'cdrom') ||
+    [],
+  model.value.disk_devices?.filter((disk) => disk.device_type === 'cdrom') ||
+    [],
+  model.value.network_devices || [],
+])
+
+// Watcher для обновления bootList при изменении модели
+watch(
+  hardDisksAndNetworks,
+  ([hardDisks, cdDvdDrives, networks]) => {
+    const hardDiskItems: UI_I_BootItem[] = hardDisks.map((item, index) => {
+      const order = item.boot_order || 0
+      return {
+        order,
+        isChecked: !!order,
+        text: `disk${index}`,
+        iconClassName: 'icon-disk',
+        type: 'disk' as const,
+        name: `${item.source}_${index}`,
+        testId: `select-disk-value-${index + 1}`,
+      }
+    })
+
+    const cdDvdDriveItems: UI_I_BootItem[] = cdDvdDrives.map((item, index) => {
+      const order = item.boot_order || 0
+      return {
+        order,
+        isChecked: !!order,
+        text: `cdrom${index}`,
+        iconClassName: 'icon-disk',
+        type: 'cdDvd' as const,
+        name: `${item.source}_${hardDisks.length + index}`,
+        testId: `select-cd-dvd-value-${index + 1}`,
+      }
+    })
+
+    const networkItems: UI_I_BootItem[] = networks.map((item, index) => {
+      const order = item.boot_order || 0
+      return {
+        order,
+        isChecked: !!order,
+        text: item.mac || 'undefined',
+        iconClassName: 'vsphere-icon-network',
+        type: 'nic' as const,
+        name: `${item.network}_${index}`,
+        testId: `select-nic-value-${index + 1}`,
+      }
+    })
+
+    bootList.value = [...hardDiskItems, ...cdDvdDriveItems, ...networkItems]
+      .filter((item) => item.order >= 0)
+      .sort((a, b) => a.order - b.order)
+  },
+  { deep: true, immediate: true }
+)
+
+// Обработчик изменения порядка через drag & drop
+const onChangeOrder = (event: UI_I_DropEvent): void => {
+  const updatedList = [...bootList.value]
+  const movedItem = updatedList.find((item) => item.name === event.target.name)
+
+  if (!movedItem) return
+
+  // Удаляем элемент из текущей позиции
+  const fromIndex = updatedList.indexOf(movedItem)
+  updatedList.splice(fromIndex, 1)
+
+  // Вставляем элемент в новую позицию
+  updatedList.splice(event.toPosition, 0, movedItem)
+
+  // Обновляем порядок всех элементов
+  updatedList.forEach((item, index) => {
+    item.order = index + 1
+  })
+
+  bootList.value = updatedList
+  updateModelFromBootList(updatedList)
+}
+
+// Обработчик обновления bootList (при изменении чекбоксов)
+const onBootListUpdate = (updatedBootList: UI_I_BootItem[]): void => {
+  bootList.value = updatedBootList
+  updateModelFromBootList(updatedBootList)
+}
+
+// Функция для обновления модели на основе bootList
+const updateModelFromBootList = (bootItems: UI_I_BootItem[]): void => {
+  // Сначала сбрасываем все boot_order
+  model.value.disk_devices?.forEach((disk) => {
+    disk.boot_order = 0
+  })
+  model.value.network_devices?.forEach((network) => {
+    network.boot_order = 0
+  })
+
+  // Затем устанавливаем boot_order только для выбранных элементов
+  let currentOrder = 1
+  bootItems.forEach((bootItem) => {
+    if (!bootItem.isChecked) return
+
+    if (bootItem.type === 'nic') {
+      const [networkName, indexStr] = bootItem.name.split('_')
+      const index = parseInt(indexStr, 10)
+      const network = model.value.network_devices?.[index]
+      if (network && network.network === networkName) {
+        network.boot_order = currentOrder++
+      }
+    } else {
+      const [source, indexStr] = bootItem.name.split('_')
+      const index = parseInt(indexStr, 10)
+      const disk = model.value.disk_devices?.[index]
+      if (disk && disk.source+'' === source) {
+        disk.boot_order = currentOrder++
+      }
+    }
+  })
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/common/select/compatibility/Old.vue

@@ -1,107 +1,107 @@
-<template>
-  <div class="select-compatibility">
-    <p class="select-compatibility-block">
-      {{ props.description }}
-    </p>
-    <div class="select-compatibility-block version-select-wrap">
-      <label for="version-select"
-      >{{ localization.common.compatibleWith }}:</label
-      >
-
-      <atoms-tooltip-error
-          :has-error="!!props.apiError"
-          selector="#vm-wizard-version-select"
-          @remove="emits('remove-validation-error')"
-      >
-        <template #elem>
-          <select
-              id="vm-wizard-version-select"
-              v-model="selectedVersion"
-              data-id="vm-wizard-version-select"
-          >
-            <option v-for="(item, key) in props.versions" :key="key" :value="item">
-              {{ item.text }}
-            </option>
-          </select>
-        </template>
-        <template #content>{{ props.apiError }}</template>
-      </atoms-tooltip-error>
-      <!--      <div id="version-select-help-icon" class="flex-align-center relative">-->
-      <!--        <atoms-the-icon-->
-      <!--          fill="#0072a3"-->
-      <!--          width="24px"-->
-      <!--          height="24px"-->
-      <!--          name="info-circle"-->
-      <!--          @click="isShowHelp = !isShowHelp"-->
-      <!--        />-->
-      <!--        <atoms-tooltip-signpost-->
-      <!--          v-if="isShowHelp"-->
-      <!--          elem-id="version-select-help-icon"-->
-      <!--          @hide="isShowHelp = false"-->
-      <!--        >-->
-      <!--          <h3 class="help-title">{{ localization.common.help }}</h3>-->
-
-      <!--          <p>-->
-      <!--            {{-->
-      <!--              localization.common.eachVirtualMachineCompatibilitySettingIncludesHardwareAvailableVirtualMachine-->
-      <!--            }}-->
-      <!--          </p>-->
-
-      <!--          <a id="more-information-link" class="pointer">{{-->
-      <!--            localization.common.moreInformation-->
-      <!--          }}</a>-->
-      <!--        </atoms-tooltip-signpost>-->
-      <!--      </div>-->
-    </div>
-    <p class="select-compatibility-block">
-      {{ props.versionDescription }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const selectedVersion = defineModel<UI_I_OptionItem | null>('selectedVersion', {required: true})
-
-const props = defineProps<{
-  versions: UI_I_OptionItem[]
-  description: string
-  versionDescription: string
-  apiError: string
-}>()
-const emits = defineEmits<{
-  (event: 'remove-validation-error'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-</script>
-
-<style scoped lang="scss">
-.select-compatibility-block {
-  margin-top: 12px;
-  font-size: 13px;
-
-  &.version-select-wrap {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-
-    //#version-select-help-icon {
-    //  .help-title {
-    //    font-size: 22px;
-    //  }
-    //
-    //  p {
-    //    width: 200px;
-    //  }
-    //
-    //  a {
-    //    color: #0072a3;
-    //  }
-    //}
-  }
-}
-</style>
+<template>
+  <div class="select-compatibility">
+    <p class="select-compatibility-block">
+      {{ props.description }}
+    </p>
+    <div class="select-compatibility-block version-select-wrap">
+      <label for="version-select"
+      >{{ localization.common.compatibleWith }}:</label
+      >
+
+      <atoms-tooltip-error
+          :has-error="!!props.apiError"
+          selector="#vm-wizard-version-select"
+          @remove="emits('remove-validation-error')"
+      >
+        <template #elem>
+          <select
+              id="vm-wizard-version-select"
+              v-model="selectedVersion"
+              data-id="vm-wizard-version-select"
+          >
+            <option v-for="(item, key) in props.versions" :key="key" :value="item">
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ props.apiError }}</template>
+      </atoms-tooltip-error>
+      <!--      <div id="version-select-help-icon" class="flex-align-center relative">-->
+      <!--        <atoms-the-icon-->
+      <!--          fill="#0072a3"-->
+      <!--          width="24px"-->
+      <!--          height="24px"-->
+      <!--          name="info-circle"-->
+      <!--          @click="isShowHelp = !isShowHelp"-->
+      <!--        />-->
+      <!--        <atoms-tooltip-signpost-->
+      <!--          v-if="isShowHelp"-->
+      <!--          elem-id="version-select-help-icon"-->
+      <!--          @hide="isShowHelp = false"-->
+      <!--        >-->
+      <!--          <h3 class="help-title">{{ localization.common.help }}</h3>-->
+
+      <!--          <p>-->
+      <!--            {{-->
+      <!--              localization.common.eachVirtualMachineCompatibilitySettingIncludesHardwareAvailableVirtualMachine-->
+      <!--            }}-->
+      <!--          </p>-->
+
+      <!--          <a id="more-information-link" class="pointer">{{-->
+      <!--            localization.common.moreInformation-->
+      <!--          }}</a>-->
+      <!--        </atoms-tooltip-signpost>-->
+      <!--      </div>-->
+    </div>
+    <p class="select-compatibility-block">
+      {{ props.versionDescription }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const selectedVersion = defineModel<UI_I_OptionItem | null>('selectedVersion', {required: true})
+
+const props = defineProps<{
+  versions: UI_I_OptionItem[]
+  description: string
+  versionDescription: string
+  apiError: string
+}>()
+const emits = defineEmits<{
+  (event: 'remove-validation-error'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style scoped lang="scss">
+.select-compatibility-block {
+  margin-top: 12px;
+  font-size: 13px;
+
+  &.version-select-wrap {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    //#version-select-help-icon {
+    //  .help-title {
+    //    font-size: 22px;
+    //  }
+    //
+    //  p {
+    //    width: 200px;
+    //  }
+    //
+    //  a {
+    //    color: #0072a3;
+    //  }
+    //}
+  }
+}
+</style>

package/components/common/vm/actions/common/select/createType/lib/models/interfaces.ts

@@ -1,5 +1,5 @@
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-export interface UI_I_VmCreateTypeOption extends UI_I_OptionItem {
-  description: string
-}
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+export interface UI_I_VmCreateTypeOption extends UI_I_OptionItem {
+  description: string
+}