bfg-common 1.5.580 → 1.5.581

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

@@ -4,153 +4,171 @@
     :boot-list="bootList"
     :is-disabled="props.isDisabled"
     @change-order="onChangeOrder"
-    @update:boot-list="onBootListUpdate"
   />
   <common-vm-actions-common-customize-hardware-vmoptions-boot-options-order-old
     v-else
     :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_SendDataNewCdDvdDrive,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/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<{
+  hardDisks: UI_I_SendDataNewHardDisk[] | null
+  cdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
+  networks: UI_I_SendDataNewNetwork[] | null
   isDisabled: boolean
 }>()
+const emits = defineEmits<{
+  (
+    event: 'change',
+    value: [
+      UI_I_SendDataNewHardDisk[],
+      UI_I_SendDataNewCdDvdDrive[],
+      UI_I_SendDataNewNetwork[]
+    ]
+  ): void
+}>()
 
 const { $store }: any = useNuxtApp()
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 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 при изменении модели
+const hardDisksAndNetworks = computed<
+  [
+    UI_I_SendDataNewHardDisk[] | null,
+    UI_I_SendDataNewCdDvdDrive[] | null,
+    UI_I_SendDataNewNetwork[] | null
+  ]
+>(() => [props.hardDisks, props.cdDvdDrives, props.networks])
 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)
+  (
+    newValue: [
+      UI_I_SendDataNewHardDisk[] | null,
+      UI_I_SendDataNewCdDvdDrive[] | null,
+      UI_I_SendDataNewNetwork[] | null
+    ]
+  ) => {
+    const hardDisks: UI_I_BootItem[] =
+      newValue[0]?.map((item, index) => {
+        const order = item.boot_order || 0
+        return {
+          order,
+          isChecked: !!order,
+          text: `disk${index}`,
+          iconClassName: 'icon-disk',
+          type: 'disk',
+          name: item.source + index,
+          testId: `select-disk-value-${index + 1}`,
+        }
+      }) || []
+    const cdDvdDrives: UI_I_BootItem[] =
+      newValue[1]?.map((item, index) => {
+        const order = item.boot_order || 0
+        return {
+          order,
+          isChecked: !!order,
+          text: `cdrom${index}`,
+          iconClassName: 'icon-disk',
+          type: 'cdDvd',
+          name: item.source + index,
+          testId: `select-cd-dvd-value-${index + 1}`,
+        }
+      }) || []
+    const networks: UI_I_BootItem[] =
+      newValue[2]?.map((item, index) => {
+        const order = item.boot_order || 0
+        return {
+          order,
+          isChecked: !!order,
+          text: item.mac || 'undefined',
+          iconClassName: 'vsphere-icon-network',
+          type: 'nic',
+          name: item.network + index,
+          testId: `select-nic-value-${index + 1}`,
+        }
+      }) || []
+
+    bootList.value = [...hardDisks, ...cdDvdDrives, ...networks].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
-  })
+  let order = -1
+  bootList.value = bootList.value
+    .map((item) => {
+      if (item === event.target) {
+        item.order = event.toPosition
+        return item
+      }
 
-  bootList.value = updatedList
-  updateModelFromBootList(updatedList)
-}
+      item.order = order + 1 === event.toPosition ? (order += 2) : order++
 
-// Обработчик обновления bootList (при изменении чекбоксов)
-const onBootListUpdate = (updatedBootList: UI_I_BootItem[]): void => {
-  bootList.value = updatedBootList
-  updateModelFromBootList(updatedBootList)
+      return item
+    })
+    .sort((a, b) => a.order - b.order)
 }
 
-// Функция для обновления модели на основе 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++
+watch(
+  bootList,
+  (newValue) => {
+    const networks: UI_I_SendDataNewNetwork[] = []
+    const hardDisks: UI_I_SendDataNewHardDisk[] = []
+    const cdDvdDrives: UI_I_SendDataNewCdDvdDrive[] = []
+    let index = 0
+    newValue.forEach((boot) => {
+      if (boot.type === 'nic') {
+        const network = props.networks?.find(
+          (network, index2) => network.network + index2 === boot.name
+        )
+        if (network) {
+          networks.push({
+            ...network,
+            boot_order: boot.isChecked ? ++index : 0,
+          })
+        }
+      } else if (boot.type === 'disk') {
+        const hardDisk = props.hardDisks?.find(
+          (hardDisk, index2) => hardDisk.source + index2 === boot.name
+        )
+        if (hardDisk) {
+          hardDisks.push({
+            ...hardDisk,
+            boot_order: boot.isChecked ? ++index : 0,
+          })
+        }
+      } else {
+        const cdDvdDrive = props.cdDvdDrives?.find(
+          (cdDvdDrive, index2) => cdDvdDrive.source + index2 === boot.name
+        )
+        if (cdDvdDrive) {
+          cdDvdDrives.push({
+            ...cdDvdDrive,
+            boot_order: boot.isChecked ? ++index : 0,
+          })
+        }
       }
-    }
-  })
-}
+    })
+
+    emits('change', [hardDisks, cdDvdDrives, networks])
+  },
+  { deep: true, immediate: true }
+)
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+</style>

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

@@ -1,34 +1,33 @@
 <template>
   <ui-stack-block
-    :has-children="false"
-    test-id="boot-options-order-stack-block"
+      :has-children="false"
+      test-id="boot-options-order-stack-block"
   >
     <template #stackBlockKey>
       {{ localization.common.bootOrder }}
     </template>
     <template #stackBlockContent>
       <ui-drag-drop-list
-        :items="localBootList"
+        :items="props.bootList"
         :disabled="props.isDisabled"
         grab-item-key="text"
         @drop="emits('change-order', $event)"
         @grab="onGrab"
       >
         <template
-          v-for="(item, index) in localBootList"
+          v-for="(item, index) in props.bootList"
           :key="index"
           #[`leftSide${index}`]
         >
           <ui-checkbox
-            :model-value="item.isChecked"
+            v-model="item.isChecked"
             :test-id="item.testId"
             :disabled="props.isDisabled"
             size="md"
-            @update:model-value="onCheckboxChange(index, $event)"
           />
         </template>
         <template
-          v-for="(item, index) in localBootList"
+          v-for="(item, index) in props.bootList"
           :key="props.bootList.length + index"
           #[`rightSide${index}`]
         >
@@ -54,48 +53,14 @@ const props = defineProps<{
   bootList: UI_I_BootItem[]
   isDisabled: boolean
 }>()
-
 const emits = defineEmits<{
   (event: 'change-order', value: UI_I_DropEvent): void
-  (event: 'update:boot-list', value: UI_I_BootItem[]): void
 }>()
 
 const grabedItem = ref<any>(null)
-const localBootList = ref<UI_I_BootItem[]>([])
-
-// Синхронизируем с props
-watch(
-  () => props.bootList,
-  (newBootList) => {
-    localBootList.value = newBootList.map((item) => ({ ...item }))
-  },
-  { deep: true, immediate: true }
-)
-
 const onGrab = (item: any): void => {
   grabedItem.value = item
 }
-
-// Обработчик изменения чекбокса
-const onCheckboxChange = (index: number, isChecked: boolean): void => {
-  localBootList.value[index].isChecked = isChecked
-
-  // Сохраняем порядок при изменении чекбокса
-  let currentOrder = 1
-  localBootList.value.forEach((item) => {
-    if (item.isChecked) {
-      item.order = currentOrder++
-    } else {
-      item.order = 0
-    }
-  })
-
-  // Сортируем список
-  localBootList.value.sort((a, b) => a.order - b.order)
-
-  // Отправляем обновленный список родителю
-  emits('update:boot-list', localBootList.value)
-}
 </script>
 
 <style scoped lang="scss">

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

@@ -1,36 +1,34 @@
 <template>
   <div class="boot-orders">
     <atoms-stack-block
-      :has-children="false"
-      test-id="boot-options-order-stack-block"
+        :has-children="false"
+        test-id="boot-options-order-stack-block"
     >
       <template #stackBlockKey>
         {{ localization.common.bootOrder }}
       </template>
       <template #stackBlockContent>
         <atoms-list-drag-drop-list
-          :items="localBootList"
+          :items="props.bootList"
           :disabled="props.isDisabled"
           grab-item-key="text"
           @drop="emits('change-order', $event)"
         >
           <template
-            v-for="(item, index) in localBootList"
+            v-for="(item, index) in props.bootList"
             :key="index"
             #[`leftSide${index}`]
           >
             <input
               :id="`boot-order-${index}`"
-              :key="item.name"
-              :checked="item.isChecked"
+              v-model="item.isChecked"
               :data-id="item.testId"
               :disabled="props.isDisabled"
               type="checkbox"
-              @change="onCheckboxChange(index, $event)"
             />
           </template>
           <template
-            v-for="(item, index) in localBootList"
+            v-for="(item, index) in props.bootList"
             :key="props.bootList.length + index"
             #[`rightSide${index}`]
           >
@@ -54,45 +52,9 @@ const props = defineProps<{
   bootList: UI_I_BootItem[]
   isDisabled: boolean
 }>()
-
 const emits = defineEmits<{
   (event: 'change-order', value: UI_I_DropEvent): void
-  (event: 'update:boot-list', value: UI_I_BootItem[]): void
 }>()
-
-// Локальная копия для реактивных изменений
-const localBootList = ref<UI_I_BootItem[]>([])
-
-// Синхронизируем с props
-watch(
-  () => props.bootList,
-  (newBootList) => {
-    localBootList.value = newBootList.map((item) => ({ ...item }))
-  },
-  { deep: true, immediate: true }
-)
-
-// Обработчик изменения чекбокса
-const onCheckboxChange = (index: number, event: Event): void => {
-  const target = event.target as HTMLInputElement
-  localBootList.value[index].isChecked = target.checked
-
-  // Сохраняем порядок при изменении чекбокса
-  let currentOrder = 1
-  localBootList.value.forEach((item) => {
-    if (item.isChecked) {
-      item.order = currentOrder++
-    } else {
-      item.order = 0
-    }
-  })
-
-  // Сортируем список
-  localBootList.value.sort((a, b) => a.order - b.order)
-
-  // Отправляем обновленный список родителю
-  emits('update:boot-list', localBootList.value)
-}
 </script>
 
 <style scoped lang="scss">

package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptions.vue

@@ -1,7 +1,10 @@
 <template>
   <common-vm-actions-common-customize-hardware-vmoptions-general-options-new
     v-if="isNewView"
-    v-model="model"
+    v-model:vm-name="vmName"
+    v-model:guest-machine-type="guestMachineType"
+    v-model:guest-os-family="guestOsFamily"
+    v-model:guest-os-version="guestOsVersion"
     v-model:block-is-open="blockIsOpen"
     :name-label="nameLabel"
     :is-disabled="isDisabled"
@@ -12,7 +15,10 @@
   />
   <common-vm-actions-common-customize-hardware-vmoptions-general-options-old
     v-else
-    v-model="model"
+    v-model:vm-name="vmName"
+    v-model:guest-machine-type="guestMachineType"
+    v-model:guest-os-family="guestOsFamily"
+    v-model:guest-os-version="guestOsVersion"
     v-model:block-is-open="blockIsOpen"
     :name-label="nameLabel"
     :is-disabled="isDisabled"
@@ -26,10 +32,19 @@
 <script setup lang="ts">
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
 import { capabilities } from '~/components/common/vm/actions/common/lib/config/capabilities'
 
-const model = defineModel<UI_I_CreateVmData>({ required: true })
+const vmName = defineModel<string>('vmName', { required: true })
+const guestMachineType = defineModel<UI_I_OptionItem | null>(
+  'guestMachineType',
+  { required: true }
+)
+const guestOsFamily = defineModel<UI_I_OptionItem | null>('guestOsFamily', {
+  required: true,
+})
+const guestOsVersion = defineModel<UI_I_OptionItem | null>('guestOsVersion', {
+  required: true,
+})
 
 const props = withDefaults(
   defineProps<{
@@ -56,18 +71,18 @@ const machineTypeOptions = ref<UI_I_OptionItem[]>(
 
 const osOptions = ref<UI_I_OptionItem[]>(capabilities.value.guestOsFamilies)
 const onChangeOS = (): void => {
-  model.value.guest_os_version = versionsOptions.value[0].value
+  guestOsVersion.value = versionsOptions.value[0]
 }
 
 const versionsOptions = computed<UI_I_OptionItem[]>(() => {
-  if (!model.value.guest_os_family) return []
+  if (!guestOsFamily.value) return []
 
-  return capabilities.value.guestOsVersions[model.value.guest_os_family.value] || []
+  return capabilities.value.guestOsVersions[guestOsFamily.value.value] || []
 })
 watch(
   versionsOptions,
   () => {
-    model.value.guest_os_version = versionsOptions.value[0].value
+    guestOsVersion.value = versionsOptions.value[0]
   }
   // { immediate: true }
 )

package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptionsNew.vue

@@ -19,13 +19,13 @@
     <template #stackBlockContent>
       <div v-show="!blockIsOpen" class="vm-name-wrap">
         <span class="vsphere-icon-vm"></span>
-        <span data-id="header-vm-name">{{ model.name || '--' }}</span>
+        <span data-id="header-vm-name">{{ vmName || '--' }}</span>
       </div>
     </template>
     <template #stackChildren>
       <ui-stack-block
-        :has-children="false"
-        test-id="general-options-vm-name-stack-block"
+          :has-children="false"
+          test-id="general-options-vm-name-stack-block"
       >
         <template #stackBlockKey>
           {{ props.nameLabel }}
@@ -33,30 +33,30 @@
         <template #stackBlockContent>
           <div class="vm-name-wrap">
             <span class="vsphere-icon-vm"></span>
-            <span data-id="new-vm-name">{{ model.name || '--' }}</span>
+            <span data-id="new-vm-name">{{ vmName || '--' }}</span>
           </div>
-          <!--            <span v-if="!props.isEdit">{{ model.name }}</span>-->
+          <!--            <span v-if="!props.isEdit">{{ vmName }}</span>-->
           <!--            <input-->
           <!--              v-else-->
           <!--              id="general-option-vm-name"-->
-          <!--              v-models="model.name"-->
+          <!--              v-models="vmName"-->
           <!--              type="text"-->
           <!--            />-->
         </template>
       </ui-stack-block>
 
       <ui-stack-block
-        :has-children="false"
-        test-id="general-options-machine-type-stack-block"
+          :has-children="false"
+          test-id="general-options-machine-type-stack-block"
       >
         <template #stackBlockKey>
           <span class="mt-2">{{ localization.common.machineType }}</span>
         </template>
         <template #stackBlockContent>
           <ui-select
-            v-if="model.machine_type"
+            v-if="guestMachineType"
             id="guest-machine-type-select"
-            v-model="model.machine_type"
+            v-model="guestMachineType"
             :items="props.machineTypeOptions"
             :disabled="props.isDisabled"
             width="auto"
@@ -68,17 +68,17 @@
       </ui-stack-block>
 
       <ui-stack-block
-        :has-children="false"
-        test-id="general-options-guest-os-family-stack-block"
+          :has-children="false"
+          test-id="general-options-guest-os-family-stack-block"
       >
         <template #stackBlockKey>
           <span class="mt-2">{{ localization.common.guestOsFamily }}</span>
         </template>
         <template #stackBlockContent>
           <ui-select
-            v-if="model.guest_os_family"
+            v-if="guestOsFamily"
             id="guest-os-family-select"
-            v-model="model.guest_os_family"
+            v-model="guestOsFamily"
             :items="props.osOptions"
             :disabled="props.isDisabled"
             width="auto"
@@ -91,17 +91,17 @@
       </ui-stack-block>
 
       <ui-stack-block
-        :has-children="false"
-        test-id="general-options-guest-os-version-stack-block"
+          :has-children="false"
+          test-id="general-options-guest-os-version-stack-block"
       >
         <template #stackBlockKey>
           <span class="mt-2">{{ localization.common.guestOsVersion }}</span>
         </template>
         <template #stackBlockContent>
           <ui-select
-            v-if="model.guest_os_version"
+            v-if="guestOsVersion"
             id="guest-os-version-select"
-            v-model="model.guest_os_version"
+            v-model="guestOsVersion"
             :items="props.versionsOptions"
             :disabled="props.isDisabled"
             width="auto"
@@ -118,11 +118,21 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
-
-const model = defineModel<UI_I_CreateVmData>({ required: true })
 
 const blockIsOpen = defineModel<boolean>('blockIsOpen', { required: true })
+const vmName = defineModel<string>('vmName', { required: true })
+const guestMachineType = defineModel<UI_I_OptionItem | null>(
+  'guestMachineType',
+  {
+    required: true,
+  }
+)
+const guestOsFamily = defineModel<UI_I_OptionItem | null>('guestOsFamily', {
+  required: true,
+})
+const guestOsVersion = defineModel<UI_I_OptionItem | null>('guestOsVersion', {
+  required: true,
+})
 
 const props = defineProps<{
   isDisabled: boolean