bfg-common 1.5.591 → 1.5.592

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

@@ -1,241 +1,205 @@
-<template>
-  <common-vm-actions-common-customize-hardware-new
-    v-if="isNewView"
-    v-model="model"
-    v-model:selected-nav-item="selectedNavItemLocal"
-    v-model:virtual-hardware-invalid="virtualHardwareInvalid"
-    v-model:vm-options-invalid="vmOptionsInvalid"
-    :error-validation-fields="props.errorValidationFields"
-    :storage="props.storage"
-    :cpu-models="props.cpuModels"
-    :max-memory="props.maxMemory"
-    :nodes="props.nodes"
-    :files="props.files"
-    :networks-table="props.networksTable"
-    :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-    :get-datastore-table-func="props.getDatastoreTableFunc"
-    :datastore="props.datastore"
-    :is-datastore-loading="props.isDatastoreLoading"
-    :hard-disks="props.hardDisks"
-    :cd-dvd-drives="props.cdDvdDrives"
-    :video-card="props.videoCard"
-    :pci-devices="props.pciDevices"
-    :is-edit="props.isEdit"
-    :is-clone="props.isClone"
-    :state="props.state"
-    :passthrough-devices="props.passthroughDevices"
-    :mediated-devices="props.mediatedDevices"
-    :project="props.project"
-    :nav-items="navItems"
-    :errors="errors"
-    :compute-resource="props.computeResource"
-    :compatibility-info="props.compatibilityInfo"
-    :is-vmt="props.isVmt"
-    @next="emits('next')"
-    @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)"
-    @show-datastore-child="emits('show-datastore-child', $event)"
-    @remove-error-by-title="emits('remove-error-by-title', $event)"
-    @get-networks-table="emits('get-networks-table', $event)"
-    @get-pci-devices="emits('get-pci-devices')"
-    @remove-validation-errors="onRemoveValidationErrors"
-  />
-  <common-vm-actions-common-customize-hardware-old
-    v-else
-    v-model="model"
-    v-model:selected-nav-item="selectedNavItemLocal"
-    v-model:virtual-hardware-invalid="virtualHardwareInvalid"
-    v-model:vm-options-invalid="vmOptionsInvalid"
-    :error-validation-fields="props.errorValidationFields"
-    :storage="props.storage"
-    :cpu-models="props.cpuModels"
-    :max-memory="props.maxMemory"
-    :nodes="props.nodes"
-    :files="props.files"
-    :networks-table="props.networksTable"
-    :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-    :get-datastore-table-func="props.getDatastoreTableFunc"
-    :datastore="props.datastore"
-    :is-datastore-loading="props.isDatastoreLoading"
-    :hard-disks="props.hardDisks"
-    :cd-dvd-drives="props.cdDvdDrives"
-    :video-card="props.videoCard"
-    :pci-devices="props.pciDevices"
-    :is-edit="props.isEdit"
-    :is-clone="props.isClone"
-    :state="props.state"
-    :passthrough-devices="props.passthroughDevices"
-    :mediated-devices="props.mediatedDevices"
-    :project="props.project"
-    :nav-items="navItems"
-    :errors="errors"
-    :compute-resource="props.computeResource"
-    :is-vmt="props.isVmt"
-    @next="emits('next')"
-    @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)"
-    @show-datastore-child="emits('show-datastore-child', $event)"
-    @remove-error-by-title="emits('remove-error-by-title', $event)"
-    @get-networks-table="emits('get-networks-table', $event)"
-    @get-pci-devices="emits('get-pci-devices')"
-    @remove-validation-errors="onRemoveValidationErrors"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
-import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
-import type {
-  UI_I_SendDataNewPciDevice,
-  UI_I_SendDataNewCdDvdDrive,
-  UI_I_SendDataNewHardDisk,
-  UI_I_SendDataNewNetwork,
-  UI_I_SendDataVideoCard,
-} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
-import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
-import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type {
-  UI_I_MediatedDevice,
-  UI_I_PciDevice,
-} from '~/lib/models/store/vm/interfaces'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
-import { navItemsFunc } from '~/components/common/vm/actions/common/customizeHardware/lib/config/navItems'
-
-const model = defineModel<UI_I_CreateVmData>({ required: true })
-const props = withDefaults(
-  defineProps<{
-    errorValidationFields: UI_I_ErrorValidationField[]
-    storage: UI_I_DatastoreTableItem | null
-    cpuModels: UI_I_OptionItem[]
-    // hardDisksForBootOptions: UI_I_SendDataNewHardDisk[] | null // TODO remove everywhere
-    // cdDvdDrivesForBootOptions: UI_I_SendDataNewCdDvdDrive[] | null // TODO remove everywhere
-    // networksForBootOptions: UI_I_SendDataNewNetwork[] | null // TODO remove everywhere
-    customizeHardwareSubmit: null | Function
-    maxMemory: number
-    selectedNavItem: UI_T_SelectedNavItem
-    nodes: UI_I_FileTreeNode[]
-    files: UI_I_FileTreeNode[]
-    networksTable: UI_I_NetworkTableItem[]
-    datastore: UI_I_DatastoreTableItem[]
-    isDatastoreLoading: boolean
-    // cpu?: API_UI_I_VmEditCpu // TODO remove everywhere
-    // memory?: API_UI_I_VmEditMemory // TODO remove everywhere
-    vmCpuHelpTextSecond?: string
-    getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
-    hardDisks?: UI_I_SendDataNewHardDisk[] | null
-    cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
-    // networks?: UI_I_SendDataNewNetwork[] | null // TODO remove everywhere
-    videoCard?: UI_I_SendDataVideoCard
-    pciDevices?: UI_I_SendDataNewPciDevice[]
-    // usbController?: string // TODO remove everywhere
-    // options?: UI_I_SendDataVmoptions // TODO remove everywhere
-    isEdit?: boolean
-    isClone?: boolean
-    state?: string | number
-    passthroughDevices?: UI_I_PciDevice[]
-    mediatedDevices?: UI_I_MediatedDevice[]
-    project?: UI_T_Project
-    computeResource?: UI_I_TreeNode | null
-    compatibilityInfo?: string
-    isVmt?: boolean
-  }>(),
-  {
-    vmCpuHelpTextSecond: undefined,
-    getDatastoreTableFunc: undefined,
-    hardDisks: undefined,
-    cdDvdDrives: undefined,
-    networks: undefined,
-    videoCard: undefined,
-    pciDevices: undefined,
-    isEdit: false,
-    isClone: false,
-    state: undefined,
-    passthroughDevices: undefined,
-    mediatedDevices: undefined,
-    project: undefined,
-    computeResource: undefined,
-    compatibilityInfo: undefined,
-    isVmt: undefined,
-  }
-)
-const emits = defineEmits<{
-  // (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void // TODO remove everywhere
-  // (event: 'send-data', value: UI_I_SendDataCustomizeHardware): void // TODO remove everywhere
-  (event: 'next'): void
-  (event: 'get-storage', value: UI_I_TablePayload): void
-  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
-  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
-  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
-  (event: 'remove-error-by-title', value: string): void
-  (event: 'get-networks-table', value: UI_I_TablePayload): void
-  (event: 'get-pci-devices'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const navItems = computed<UI_I_CollapseNavItem[]>(() =>
-  navItemsFunc(localization.value)
-)
-const selectedNavItemLocal = ref<number>(0)
-watch(
-  () => props.selectedNavItem,
-  (newValue) => {
-    selectedNavItemLocal.value = newValue
-  }
-)
-
-watch(
-  () => props.customizeHardwareSubmit,
-  (newValue) => {
-    newValue && submit(newValue)
-  }
-)
-const virtualHardwareInvalid = ref<string[]>([])
-const vmOptionsInvalid = ref<string[]>([])
-const submit = (cb: Function): void => {
-  const invalidDevices = [
-    ...virtualHardwareInvalid.value,
-    ...vmOptionsInvalid.value,
-  ]
-    .filter((item: string) => !!item)
-    .join(', ')
-
-  if (invalidDevices) {
-    showValidationErrors([
-      localization.value.common.thereErrorsFollowingFields.replace(
-        '{0}',
-        invalidDevices
-      ),
-    ])
-    cb(false)
-    return
-  }
-  onRemoveValidationErrors()
-
-  // emits('next')
-  cb(true)
-}
-
-const errors = ref<string[]>([])
-const showValidationErrors = (arr: string[]): void => {
-  errors.value = arr
-}
-const onRemoveValidationErrors = (): void => {
-  errors.value = []
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <component
+    :is="currentComponent"
+    v-model="model"
+    v-model:selected-nav-item="selectedNavItemLocal"
+    v-model:virtual-hardware-invalid="virtualHardwareInvalid"
+    v-model:vm-options-invalid="vmOptionsInvalid"
+    :error-validation-fields="props.errorValidationFields"
+    :storage="props.storage"
+    :cpu-models="props.cpuModels"
+    :max-memory="props.maxMemory"
+    :nodes="props.nodes"
+    :files="props.files"
+    :networks-table="props.networksTable"
+    :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+    :get-datastore-table-func="props.getDatastoreTableFunc"
+    :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
+    :hard-disks="props.hardDisks"
+    :cd-dvd-drives="props.cdDvdDrives"
+    :video-card="props.videoCard"
+    :pci-devices="props.pciDevices"
+    :is-edit="props.isEdit"
+    :is-clone="props.isClone"
+    :state="props.state"
+    :passthrough-devices="props.passthroughDevices"
+    :mediated-devices="props.mediatedDevices"
+    :project="props.project"
+    :nav-items="navItems"
+    :errors="errors"
+    :compute-resource="props.computeResource"
+    :compatibility-info="props.compatibilityInfo"
+    :is-vmt="props.isVmt"
+    @next="emits('next')"
+    @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)"
+    @show-datastore-child="emits('show-datastore-child', $event)"
+    @remove-error-by-title="emits('remove-error-by-title', $event)"
+    @get-networks-table="emits('get-networks-table', $event)"
+    @get-pci-devices="emits('get-pci-devices')"
+    @remove-validation-errors="onRemoveValidationErrors"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
+import type {
+  UI_I_SendDataNewPciDevice,
+  UI_I_SendDataNewCdDvdDrive,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+  UI_I_SendDataVideoCard,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
+import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type {
+  UI_I_MediatedDevice,
+  UI_I_PciDevice,
+} from '~/lib/models/store/vm/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
+import { navItemsFunc } from '~/components/common/vm/actions/common/customizeHardware/lib/config/navItems'
+
+const model = defineModel<UI_I_CreateVmData>({ required: true })
+const props = withDefaults(
+  defineProps<{
+    errorValidationFields: UI_I_ErrorValidationField[]
+    storage: UI_I_DatastoreTableItem | null
+    cpuModels: UI_I_OptionItem[]
+    // hardDisksForBootOptions: UI_I_SendDataNewHardDisk[] | null // TODO remove everywhere
+    // cdDvdDrivesForBootOptions: UI_I_SendDataNewCdDvdDrive[] | null // TODO remove everywhere
+    // networksForBootOptions: UI_I_SendDataNewNetwork[] | null // TODO remove everywhere
+    customizeHardwareSubmit: null | Function
+    maxMemory: number
+    selectedNavItem: UI_T_SelectedNavItem
+    nodes: UI_I_FileTreeNode[]
+    files: UI_I_FileTreeNode[]
+    networksTable: UI_I_NetworkTableItem[]
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    // cpu?: API_UI_I_VmEditCpu // TODO remove everywhere
+    // memory?: API_UI_I_VmEditMemory // TODO remove everywhere
+    vmCpuHelpTextSecond?: string
+    getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
+    hardDisks?: UI_I_SendDataNewHardDisk[] | null
+    cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+    // networks?: UI_I_SendDataNewNetwork[] | null // TODO remove everywhere
+    videoCard?: UI_I_SendDataVideoCard
+    pciDevices?: UI_I_SendDataNewPciDevice[]
+    // usbController?: string // TODO remove everywhere
+    // options?: UI_I_SendDataVmoptions // TODO remove everywhere
+    isEdit?: boolean
+    isClone?: boolean
+    state?: string | number
+    passthroughDevices?: UI_I_PciDevice[]
+    mediatedDevices?: UI_I_MediatedDevice[]
+    project?: UI_T_Project
+    computeResource?: UI_I_TreeNode | null
+    compatibilityInfo?: string
+    isVmt?: boolean
+  }>(),
+  {
+    vmCpuHelpTextSecond: undefined,
+    getDatastoreTableFunc: undefined,
+    hardDisks: undefined,
+    cdDvdDrives: undefined,
+    networks: undefined,
+    videoCard: undefined,
+    pciDevices: undefined,
+    isEdit: false,
+    isClone: false,
+    state: undefined,
+    passthroughDevices: undefined,
+    mediatedDevices: undefined,
+    project: undefined,
+    computeResource: undefined,
+    compatibilityInfo: undefined,
+    isVmt: undefined,
+  }
+)
+const emits = defineEmits<{
+  // (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void // TODO remove everywhere
+  // (event: 'send-data', value: UI_I_SendDataCustomizeHardware): void // TODO remove everywhere
+  (event: 'next'): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'get-pci-devices'): void
+}>()
+
+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 localization = computed<UI_I_Localization>(() => useLocal())
+
+const navItems = computed<UI_I_CollapseNavItem[]>(() =>
+  navItemsFunc(localization.value)
+)
+const selectedNavItemLocal = ref<number>(0)
+watch(
+  () => props.selectedNavItem,
+  (newValue) => {
+    selectedNavItemLocal.value = newValue
+  }
+)
+
+watch(
+  () => props.customizeHardwareSubmit,
+  (newValue) => {
+    newValue && submit(newValue)
+  }
+)
+const virtualHardwareInvalid = ref<string[]>([])
+const vmOptionsInvalid = ref<string[]>([])
+const submit = (cb: Function): void => {
+  const invalidDevices = [
+    ...virtualHardwareInvalid.value,
+    ...vmOptionsInvalid.value,
+  ]
+    .filter((item: string) => !!item)
+    .join(', ')
+
+  if (invalidDevices) {
+    showValidationErrors([
+      localization.value.common.thereErrorsFollowingFields.replace(
+        '{0}',
+        invalidDevices
+      ),
+    ])
+    cb(false)
+    return
+  }
+  onRemoveValidationErrors()
+
+  // emits('next')
+  cb(true)
+}
+
+const errors = ref<string[]>([])
+const showValidationErrors = (arr: string[]): void => {
+  errors.value = arr
+}
+const onRemoveValidationErrors = (): void => {
+  errors.value = []
+}
+</script>
+
+<style scoped lang="scss"></style>