bfg-common 1.1.63 → 1.1.64

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

@@ -1,642 +1,641 @@
-<template>
-  <div class="virtual-hardware">
-    <div class="clr-row clr-justify-content-end">
-      <atoms-dropdown-tree
-        :title="localization.addNewDevice"
-        :items="dropdownItems"
-        @select="onAddDevice"
-      />
-    </div>
-
-    <div class="clr-component">
-      <div class="stack-view">
-        <common-vm-actions-add-customize-hardware-virtual-hardware-cpu
-          :max-cpus="props.maxCpus"
-          :cpu-models="props.cpuModels"
-          :cpu="props.cpu"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          :error-validation-fields="props.errorValidationFields"
-          :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-          @send-data="onSendDataCpuMethod"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-          @invalid="cpuInvalid = $event"
-        />
-        <common-vm-actions-add-customize-hardware-virtual-hardware-memory
-          :max-memory="props.maxMemory"
-          :is-edit="props.isEdit"
-          :memory="props.memory"
-          :state="props.state"
-          :error-validation-fields="props.errorValidationFields"
-          @send-data="onSendDataMemoryMethod"
-          @invalid="memoryInvalid = $event"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk
-          v-for="(item, key) in hardDisks"
-          :key="hardDisksIndex[key]"
-          :index="hardDisksIndex[key]"
-          :type="hardDisksType[key]"
-          :storage="props.storage"
-          :hard-disk="item"
-          :error-validation-fields="props.errorValidationFields"
-          :get-datastore-table-func="props.getDatastoreTableFunc"
-          :datastore="props.datastore"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          @remove="onRemoveHardDisk(hardDisksIndex[key], item)"
-          @roll-back="onRollBackHardDisk(hardDisksIndex[key])"
-          @send-data="onSendDataNewHardDiskMethod($event, hardDisksIndex[key])"
-          @invalid="onSetInvalidHardDisk($event, hardDisksIndex[key])"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-        <common-vm-actions-add-customize-hardware-virtual-hardware-new-network
-          v-for="(item, key) in networks"
-          :key="networksIndex[key]"
-          :index="networksIndex[key]"
-          :type="networksType[key]"
-          :network="item"
-          :networks-table="props.networksTable"
-          :error-validation-fields="props.errorValidationFields"
-          @remove="onRemoveNetwork(networksIndex[key])"
-          @send-data="sendDataNewNetworkMethod($event, networksIndex[key])"
-          @invalid="onSetInvalidNetwork($event, networksIndex[key])"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-          @get-networks-table="emits('get-networks-table', $event)"
-        />
-        <common-vm-actions-add-customize-hardware-virtual-hardware-cd-dvd-drive
-          v-for="(item, key) in cdDvdDrives"
-          :key="cdDvdDrivesIndex[key]"
-          :index="cdDvdDrivesIndex[key]"
-          :hard-disks-count="hardDisks.length"
-          :type="cdDvdDrivesType[key]"
-          :cd-dvd-drive="item"
-          :nodes="props.nodes"
-          :files="props.files"
-          :error-validation-fields="props.errorValidationFields"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-          @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="onRemoveCdDvdDrive(cdDvdDrivesIndex[key], item)"
-          @roll-back="onRollBackCdDvdDrive(cdDvdDrivesIndex[key])"
-          @send-data="
-            sendDataNewCdDvdDriveMethod($event, cdDvdDrivesIndex[key])
-          "
-        />
-        <common-vm-actions-add-customize-hardware-virtual-hardware-new-usb-controller
-          :usb-controller="props.usbController"
-          :is-edit="props.isEdit"
-          @send-data="onSendDataNewUsbControllerMethod"
-        />
-        <template v-if="props.passthroughDevices">
-          <common-vm-actions-add-customize-hardware-virtual-hardware-new-pci-device
-            v-for="(item, key) in pciDevices"
-            :key="pciDevicesIndex[key]"
-            :index="pciDevicesIndex[key]"
-            :pci-device="item"
-            :error-validation-fields="props.errorValidationFields"
-            :passthrough-devices="props.passthroughDevices"
-            :type="pciDevicesType[key]"
-            @remove="onRemovePciDevice(pciDevicesIndex[key])"
-            @send-data="
-              onSendDataPciDevicesMethod($event, pciDevicesIndex[key])
-            "
-            @invalid="onSetInvalidPciDevice($event, pciDevicesIndex[key])"
-            @remove-error-by-title="emits('remove-error-by-title', $event)"
-          />
-        </template>
-        <common-vm-actions-add-customize-hardware-virtual-hardware-video-card
-          :is-edit="props.isEdit"
-          :video-card="props.videoCard"
-          :error-validation-fields="props.errorValidationFields"
-          @send-data="onSendDataVideoCardMethod"
-          @invalid="videoCardInvalid = $event"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-        <common-vm-actions-add-customize-hardware-virtual-hardware-other />
-      </div>
-    </div>
-
-    <Teleport to="body">
-      <common-vm-actions-add-customize-hardware-virtual-hardware-browse-view
-        v-if="isShowFileModal"
-        :show="isShowFileModal"
-        :nodes="props.nodes"
-        :files="props.files"
-        @submit="onAddExistHardDisk"
-        @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)"
-        @hide="isShowFileModal = false"
-      />
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
-import { UI_I_NetworkTableItem } from '~/models/store/network/interfaces'
-import { UI_I_TablePayload } from '~/models/store/interfaces'
-import { UI_I_FolderOrFileTreePayload } from '~/models/store/storage/interfaces'
-import { UI_I_FileTreeNode } from '~/components/models/interfaces'
-import {
-  UI_I_SendDataCpu,
-  UI_I_SendDataMemory,
-  UI_I_SendDataNewHardDisk,
-  UI_I_SendDataNewNetwork,
-  UI_I_SendDataVideoCard,
-  UI_I_InvalidKeys,
-  UI_I_SendDataVirtualHardware,
-  UI_I_SendDataNewCdDvdDrive,
-  UI_I_HardDisk,
-  UI_I_PciDevice,
-  UI_I_SendDataNewPciDevice,
-} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
-import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
-import {
-  UI_T_HardDiskType,
-  UI_T_NetworkType,
-  UI_T_CdDvdType,
-} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/types'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-import {
-  UI_I_DropdownTreeItem,
-  UI_I_DropdownTreeItemChild,
-} from '~/components/atoms/dropdown/tree/models/interfaces'
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_ConfigurePciDevicesTable } from '~/models/store/host/interfaces'
-import {
-  API_UI_I_VmEditCpu,
-  API_UI_I_VmEditMemory,
-} from '~/models/store/vm/interfaces'
-import { dropdownItemsFunc } from './config/dropdownItems'
-
-const props = defineProps<{
-  storage: UI_I_DatastoreTableItem | null
-  cpuModels: UI_I_OptionItem[]
-  vmName: string
-  maxCpus: number
-  maxMemory: number
-  isEdit: boolean
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  networksTable: UI_I_NetworkTableItem[]
-  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
-  datastore: UI_I_DatastoreTableItem[]
-  state?: string
-  cpu?: API_UI_I_VmEditCpu
-  memory?: API_UI_I_VmEditMemory
-  vmCpuHelpTextSecond?: string
-  hardDisks?: UI_I_SendDataNewHardDisk[] | null
-  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
-  networks?: UI_I_SendDataNewNetwork[] | null
-  videoCard?: UI_I_SendDataVideoCard
-  usbController?: string
-  pciDevices?: UI_I_PciDevice[]
-  passthroughDevices?: UI_I_ConfigurePciDevicesTable | null
-}>()
-const emits = defineEmits<{
-  (event: 'send-data', value: UI_I_SendDataVirtualHardware): void
-  (event: 'invalid', value: string[]): 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 localization = computed<UI_I_Localization>(() => useLocal())
-const { $binary } = useNuxtApp()
-
-const dropdownItems = computed<UI_I_DropdownTreeItem[]>(() =>
-  dropdownItemsFunc(localization.value)
-)
-
-const hardDisksIndex = ref<number[]>([0])
-const hardDisksType = ref<UI_T_HardDiskType[]>(['new'])
-const hardDisks = ref<UI_I_SendDataNewHardDisk[]>([
-  {
-    create: true,
-    size: 90,
-    source: '',
-  },
-])
-watch(
-  () => props.hardDisks,
-  (newValue) => {
-    if (!props.isEdit || !newValue) return
-
-    const count = newValue?.length || 0
-    hardDisksIndex.value = [...Array(count).keys()]
-    hardDisksType.value = Array(count).fill('edit')
-    hardDisks.value = newValue
-  },
-  { immediate: true }
-)
-
-const addHardDisk = (
-  create = true,
-  size = 90,
-  source = '',
-  type: UI_T_HardDiskType = 'new'
-): void => {
-  const newIndex = (hardDisksIndex.value.at(-1) ?? -1) + 1
-  hardDisksIndex.value.push(newIndex)
-  hardDisksType.value.push(type)
-
-  hardDisks.value.push({ create, size, source, attach: true })
-  sendData()
-}
-const onAddExistHardDisk = (hardDisk: UI_I_HardDisk): void => {
-  addHardDisk(false, $binary.bToGb(hardDisk.size), hardDisk.path, 'exist')
-}
-const onRemoveHardDisk = (
-  index: number,
-  hardDisk: UI_I_SendDataNewHardDisk
-): void => {
-  const removeIndex = hardDisksIndex.value.indexOf(index)
-
-  if (!hardDisk.create && !hardDisk.attach) {
-    hardDisksType.value = hardDisksType.value.map((item, key) => {
-      if (key === removeIndex) return 'removed'
-      return item
-    })
-    sendData()
-    return
-  }
-
-  hardDisksIndex.value = hardDisksIndex.value.filter((item) => item !== index)
-  hardDisksType.value = hardDisksType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-
-  hardDisks.value = hardDisks.value.filter((_hardDisk, key: number) => {
-    return removeIndex !== key
-  })
-
-  delete newHardDiskInvalidKeys.value[index]
-  delete sendDataNewHardDisk.value[index]
-  sendData()
-}
-const onRollBackHardDisk = (index: number): void => {
-  const removeIndex = hardDisksIndex.value.indexOf(index)
-  hardDisksType.value = hardDisksType.value.map((item, key) => {
-    if (key === removeIndex) return 'edit'
-    return item
-  })
-}
-
-const defaultNetwork = {
-  network: '',
-  net_bridge: '',
-  mac: '',
-  target: '',
-  model: '',
-  boot_order: -1,
-}
-const networks = ref<UI_I_SendDataNewNetwork[]>([useDeepCopy(defaultNetwork)])
-const networksType = ref<UI_T_NetworkType[]>(['new'])
-const networksIndex = ref<number[]>([0])
-watch(
-  () => props.networks,
-  (newValue) => {
-    if (!props.isEdit || !newValue) return
-
-    // networks.value = newValue
-    // networksType.value = Array(newValue.length).fill('edit')
-    const count = newValue?.length || 0
-    networksIndex.value = [...Array(count).keys()]
-    networksType.value = Array(count).fill('edit')
-    networks.value = newValue
-  },
-  { immediate: true }
-)
-const addNetwork = (): void => {
-  const index = (networksIndex.value.at(-1) || 0) + 1
-  networksIndex.value.push(index)
-  networksType.value.push('new')
-
-  networks.value.push(useDeepCopy(defaultNetwork))
-}
-const onRemoveNetwork = (index: number): void => {
-  const removeIndex = networksIndex.value.indexOf(index)
-  networksIndex.value = networksIndex.value.filter((item) => item !== index)
-  networksType.value = networksType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-  networks.value = networks.value.filter(
-    (_network, key: number) => removeIndex !== key
-  )
-
-  delete newNetworkInvalidKeys.value[index]
-  delete sendDataNewNetwork.value[index]
-  sendData()
-}
-
-const defaultCdDvdDriver: UI_I_SendDataNewCdDvdDrive = {
-  create: false,
-  attach: false,
-  source: '',
-  bus: '',
-  device_type: 'cdrom',
-  boot_order: -1,
-}
-const cdDvdDrives = ref<UI_I_SendDataNewCdDvdDrive[]>([
-  useDeepCopy(defaultCdDvdDriver),
-])
-const cdDvdDrivesIndex = ref<number[]>([0])
-const cdDvdDrivesType = ref<UI_T_CdDvdType[]>(['new'])
-watch(
-  () => props.cdDvdDrives,
-  (newValue) => {
-    if (!props.isEdit || !newValue) return
-
-    // cdDvdDrives.value = newValue
-    // cdDvdDrivesType.value = Array(newValue.length).fill('edit')
-    const count = newValue?.length || 0
-    cdDvdDrivesIndex.value = [...Array(count).keys()]
-    cdDvdDrivesType.value = Array(count).fill('edit')
-    cdDvdDrives.value = newValue
-  },
-  { immediate: true }
-)
-const addCdDvdDrive = (): void => {
-  const value = (cdDvdDrivesIndex.value.at(-1) || 0) + 1
-  cdDvdDrivesIndex.value.push(value)
-  cdDvdDrivesType.value.push('new')
-  cdDvdDrives.value.push({
-    ...useDeepCopy(defaultCdDvdDriver),
-    create: true,
-    attach: true,
-  })
-}
-const onRemoveCdDvdDrive = (
-  index: number,
-  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
-): void => {
-  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
-
-  if (!cdDvdDrive.create && !cdDvdDrive.attach) {
-    cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
-      if (key === removeIndex) return 'removed'
-      return item
-    })
-    sendData()
-    return
-  }
-
-  cdDvdDrivesIndex.value = cdDvdDrivesIndex.value.filter(
-    (cdDvdDrive) => cdDvdDrive !== index
-  )
-  cdDvdDrivesType.value = cdDvdDrivesType.value.filter(
-    (_item, key) => key !== index
-  )
-  cdDvdDrives.value = cdDvdDrives.value.filter(
-    (_cdDvdDrive, key: number) => removeIndex !== key
-  )
-
-  delete sendDataNewCdDvdDrive.value[index]
-  sendData()
-}
-const onRollBackCdDvdDrive = (index: number): void => {
-  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
-  cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
-    if (key === removeIndex) return 'edit'
-    return item
-  })
-}
-
-const defaultPciDevice: UI_I_PciDevice = {
-  id: '',
-  vendor_name: '',
-  class_name: 'cdrom',
-  device_name: 'cdrom',
-}
-const pciDevicesIndex = ref<number[]>([0])
-const pciDevicesType = ref<('new' | 'edit')[]>(['new'])
-const pciDevices = ref<UI_I_PciDevice[]>([])
-watch(
-  () => props.pciDevices,
-  (newValue) => {
-    if (!props.isEdit) return
-
-    const count = newValue?.length || 0
-    pciDevicesIndex.value = [...Array(count).keys()]
-    pciDevicesType.value = Array(count).fill('edit')
-    pciDevices.value = newValue || []
-  },
-  { immediate: true }
-)
-
-const addPciDevice = (): void => {
-  const newIndex = (pciDevicesIndex.value.at(-1) ?? -1) + 1
-  pciDevicesIndex.value.push(newIndex)
-  pciDevicesType.value.push('new')
-
-  pciDevices.value.push(useDeepCopy(defaultPciDevice))
-}
-const onRemovePciDevice = (index: number): void => {
-  const removeIndex = pciDevicesIndex.value.indexOf(index)
-  pciDevicesIndex.value = pciDevicesIndex.value.filter((item) => item !== index)
-  pciDevicesType.value = pciDevicesType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-
-  pciDevices.value = pciDevices.value.filter((_pciDevice, key: number) => {
-    return removeIndex !== key
-  })
-
-  delete newPciDeviceInvalidKeys.value[index]
-  delete sendDataNewPciDevices.value[index]
-  sendData()
-}
-
-const isShowFileModal = ref<boolean>(false)
-const onAddDevice = (item: UI_I_DropdownTreeItemChild): void => {
-  switch (item.value) {
-    case 1:
-      addHardDisk()
-      break
-    case 2:
-      isShowFileModal.value = true
-      break
-    case 5:
-      addCdDvdDrive()
-      break
-    case 10:
-      addPciDevice()
-      break
-    case 14:
-      addNetwork()
-      break
-  }
-}
-
-const cpuInvalid = ref<boolean>(false)
-const sendDataCpu = ref<UI_I_SendDataCpu | null>(null)
-const onSendDataCpuMethod = (data: UI_I_SendDataCpu): void => {
-  sendDataCpu.value = data
-  sendData()
-}
-const sendDataMemory = ref<UI_I_SendDataMemory | null>(null)
-const onSendDataMemoryMethod = (data: UI_I_SendDataMemory): void => {
-  sendDataMemory.value = data
-  sendData()
-}
-const sendDataNewHardDisk = ref<UI_I_SendDataNewHardDisk[]>([])
-const onSendDataNewHardDiskMethod = (
-  data: UI_I_SendDataNewHardDisk,
-  index: number
-): void => {
-  sendDataNewHardDisk.value[index] = data
-  sendData()
-}
-const sendDataNewNetwork = ref<UI_I_SendDataNewNetwork[]>([])
-const sendDataNewNetworkMethod = (
-  data: UI_I_SendDataNewNetwork,
-  index: number
-): void => {
-  sendDataNewNetwork.value[index] = data
-  sendData()
-}
-const sendDataNewCdDvdDrive = ref<UI_I_SendDataNewCdDvdDrive[]>([])
-const sendDataNewCdDvdDriveMethod = (
-  data: UI_I_SendDataNewCdDvdDrive,
-  index: number
-): void => {
-  sendDataNewCdDvdDrive.value[index] = data
-  sendData()
-}
-const sendDataNewUsbController = ref<string | null>(null)
-const onSendDataNewUsbControllerMethod = (data: string): void => {
-  sendDataNewUsbController.value = data
-  sendData()
-}
-const sendDataNewPciDevices = ref<UI_I_SendDataNewPciDevice[]>([])
-const onSendDataPciDevicesMethod = (
-  data: UI_I_SendDataNewPciDevice,
-  index: number
-): void => {
-  sendDataNewPciDevices.value[index] = data
-  sendData()
-}
-const sendDataVideoCard = ref<UI_I_SendDataVideoCard | null>(null)
-const onSendDataVideoCardMethod = (data: UI_I_SendDataVideoCard): void => {
-  sendDataVideoCard.value = data
-  sendData()
-}
-
-const sendData = (): void => {
-  const cpu = sendDataCpu.value
-  const memory = sendDataMemory.value
-  const hardDisks = sendDataNewHardDisk.value.flat(2)
-  const networks = sendDataNewNetwork.value.flat(2)
-  const cdDvdDrives = sendDataNewCdDvdDrive.value.flat(2)
-  const pciDevices = sendDataNewPciDevices.value.flat()
-  const usbController = sendDataNewUsbController.value
-  const videoCard = sendDataVideoCard.value
-
-  const sendData: UI_I_SendDataVirtualHardware = {
-    cpu,
-    memory,
-    usbController,
-    pciDevices,
-    networks,
-    hardDisks,
-    cdDvdDrives,
-    videoCard,
-  }
-  emits('send-data', sendData)
-}
-
-const onSetInvalidHardDisk = (invalid: boolean, index: number): void => {
-  newHardDiskInvalidKeys.value[index] = invalid
-}
-
-const onSetInvalidNetwork = (invalid: boolean, key: number): void => {
-  newNetworkInvalidKeys.value[key] = invalid
-}
-
-const onSetInvalidPciDevice = (invalid: boolean, key: number): void => {
-  newPciDeviceInvalidKeys.value[key] = invalid
-}
-
-const memoryInvalid = ref<boolean>(false)
-const videoCardInvalid = ref<boolean>(false)
-const newHardDiskInvalidKeys = ref<UI_I_InvalidKeys>({})
-const newNetworkInvalidKeys = ref<UI_I_InvalidKeys>({})
-const newPciDeviceInvalidKeys = ref<UI_I_InvalidKeys>({})
-
-watch(
-  [
-    cpuInvalid,
-    memoryInvalid,
-    newHardDiskInvalidKeys,
-    newNetworkInvalidKeys,
-    newPciDeviceInvalidKeys,
-    videoCardInvalid,
-  ],
-  () => {
-    const cpu = cpuInvalid.value ? localization.value.cpu : ''
-    const memory = memoryInvalid.value ? localization.value.memory : ''
-    const videoCard = videoCardInvalid.value ? localization.value.videoCard : ''
-    let newHardDisk = ''
-    Object.keys(newHardDiskInvalidKeys.value).forEach((key) => {
-      if (!newHardDiskInvalidKeys.value[+key]) {
-        return
-      }
-
-      newHardDisk +=
-        (newHardDisk ? ', ' : '') +
-        localization.value.newHardDisk +
-        ' ' +
-        (+key + 1)
-    })
-    let newNetwork = ''
-    Object.keys(newNetworkInvalidKeys.value).forEach((key) => {
-      if (!newNetworkInvalidKeys.value[+key]) {
-        return
-      }
-
-      newNetwork +=
-        (newNetwork ? ', ' : '') +
-        localization.value.newNetwork +
-        ' ' +
-        (+key + 1)
-    })
-    // let pciDevice = ''
-    // Object.keys(newPciDeviceInvalidKeys.value).forEach((key) => {
-    //   if (!newPciDeviceInvalidKeys.value[+key]) {
-    //     return
-    //   }
-    //
-    //   pciDevice +=
-    //     (pciDevice ? ', ' : '') +
-    //     localization.value.pciDevice +
-    //     ' ' +
-    //     (+key + 1)
-    // })
-
-    emits('invalid', [cpu, memory, newHardDisk, newNetwork, videoCard])
-  },
-  { deep: true }
-)
-
-emits('get-pci-devices')
-</script>
-
-<style scoped lang="scss">
-.virtual-hardware {
-  .content-dropdown {
-    width: 200px;
-  }
-}
-</style>
+<template>
+  <div class="virtual-hardware">
+    <div class="clr-row clr-justify-content-end">
+      <atoms-dropdown-tree
+        :title="localization.addNewDevice"
+        :items="dropdownItems"
+        @select="onAddDevice"
+      />
+    </div>
+
+    <div class="clr-component">
+      <div class="stack-view">
+        <common-vm-actions-add-customize-hardware-virtual-hardware-cpu
+          :max-cpus="props.maxCpus"
+          :cpu-models="props.cpuModels"
+          :cpu="props.cpu"
+          :is-edit="props.isEdit"
+          :state="props.state"
+          :error-validation-fields="props.errorValidationFields"
+          :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+          @send-data="onSendDataCpuMethod"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+          @invalid="cpuInvalid = $event"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-memory
+          :max-memory="props.maxMemory"
+          :is-edit="props.isEdit"
+          :memory="props.memory"
+          :state="props.state"
+          :error-validation-fields="props.errorValidationFields"
+          @send-data="onSendDataMemoryMethod"
+          @invalid="memoryInvalid = $event"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-hard-disk
+          v-for="(item, key) in hardDisks"
+          :key="hardDisksIndex[key]"
+          :index="hardDisksIndex[key]"
+          :type="hardDisksType[key]"
+          :storage="props.storage"
+          :hard-disk="item"
+          :error-validation-fields="props.errorValidationFields"
+          :get-datastore-table-func="props.getDatastoreTableFunc"
+          :datastore="props.datastore"
+          :is-edit="props.isEdit"
+          :state="props.state"
+          @remove="onRemoveHardDisk(hardDisksIndex[key], item)"
+          @roll-back="onRollBackHardDisk(hardDisksIndex[key])"
+          @send-data="onSendDataNewHardDiskMethod($event, hardDisksIndex[key])"
+          @invalid="onSetInvalidHardDisk($event, hardDisksIndex[key])"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-network
+          v-for="(item, key) in networks"
+          :key="networksIndex[key]"
+          :index="networksIndex[key]"
+          :type="networksType[key]"
+          :network="item"
+          :networks-table="props.networksTable"
+          :error-validation-fields="props.errorValidationFields"
+          @remove="onRemoveNetwork(networksIndex[key])"
+          @send-data="sendDataNewNetworkMethod($event, networksIndex[key])"
+          @invalid="onSetInvalidNetwork($event, networksIndex[key])"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+          @get-networks-table="emits('get-networks-table', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-cd-dvd-drive
+          v-for="(item, key) in cdDvdDrives"
+          :key="cdDvdDrivesIndex[key]"
+          :index="cdDvdDrivesIndex[key]"
+          :hard-disks-count="hardDisks.length"
+          :type="cdDvdDrivesType[key]"
+          :cd-dvd-drive="item"
+          :nodes="props.nodes"
+          :files="props.files"
+          :error-validation-fields="props.errorValidationFields"
+          :is-edit="props.isEdit"
+          :state="props.state"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+          @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="onRemoveCdDvdDrive(cdDvdDrivesIndex[key], item)"
+          @roll-back="onRollBackCdDvdDrive(cdDvdDrivesIndex[key])"
+          @send-data="
+            sendDataNewCdDvdDriveMethod($event, cdDvdDrivesIndex[key])
+          "
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-usb-controller
+          :usb-controller="props.usbController"
+          :is-edit="props.isEdit"
+          @send-data="onSendDataNewUsbControllerMethod"
+        />
+        <template v-if="props.passthroughDevices">
+          <common-vm-actions-add-customize-hardware-virtual-hardware-new-pci-device
+            v-for="(item, key) in pciDevices"
+            :key="pciDevicesIndex[key]"
+            :index="pciDevicesIndex[key]"
+            :pci-device="item"
+            :error-validation-fields="props.errorValidationFields"
+            :passthrough-devices="props.passthroughDevices"
+            :type="pciDevicesType[key]"
+            @remove="onRemovePciDevice(pciDevicesIndex[key])"
+            @send-data="
+              onSendDataPciDevicesMethod($event, pciDevicesIndex[key])
+            "
+            @invalid="onSetInvalidPciDevice($event, pciDevicesIndex[key])"
+            @remove-error-by-title="emits('remove-error-by-title', $event)"
+          />
+        </template>
+        <common-vm-actions-add-customize-hardware-virtual-hardware-video-card
+          :is-edit="props.isEdit"
+          :video-card="props.videoCard"
+          :error-validation-fields="props.errorValidationFields"
+          @send-data="onSendDataVideoCardMethod"
+          @invalid="videoCardInvalid = $event"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-other />
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <common-vm-actions-add-customize-hardware-virtual-hardware-browse-view
+        v-if="isShowFileModal"
+        :show="isShowFileModal"
+        :nodes="props.nodes"
+        :files="props.files"
+        @submit="onAddExistHardDisk"
+        @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)"
+        @hide="isShowFileModal = false"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
+import { UI_I_NetworkTableItem } from '~/models/store/network/interfaces'
+import { UI_I_TablePayload } from '~/models/store/interfaces'
+import { UI_I_FolderOrFileTreePayload } from '~/models/store/storage/interfaces'
+import { UI_I_FileTreeNode } from '~/components/models/interfaces'
+import {
+  UI_I_SendDataCpu,
+  UI_I_SendDataMemory,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+  UI_I_SendDataVideoCard,
+  UI_I_InvalidKeys,
+  UI_I_SendDataVirtualHardware,
+  UI_I_SendDataNewCdDvdDrive,
+  UI_I_HardDisk,
+  UI_I_PciDevice,
+  UI_I_SendDataNewPciDevice,
+} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import {
+  UI_T_HardDiskType,
+  UI_T_NetworkType,
+  UI_T_CdDvdType,
+} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/types'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import {
+  UI_I_DropdownTreeItem,
+  UI_I_DropdownTreeItemChild,
+} from '~/components/atoms/dropdown/tree/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_ConfigurePciDevicesTable } from '~/models/store/host/interfaces'
+import {
+  API_UI_I_VmEditCpu,
+  API_UI_I_VmEditMemory,
+} from '~/models/store/vm/interfaces'
+import { dropdownItemsFunc } from './config/dropdownItems'
+
+const props = defineProps<{
+  storage: UI_I_DatastoreTableItem | null
+  cpuModels: UI_I_OptionItem[]
+  vmName: string
+  maxCpus: number
+  maxMemory: number
+  isEdit: boolean
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  networksTable: UI_I_NetworkTableItem[]
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  state?: string
+  cpu?: API_UI_I_VmEditCpu
+  memory?: API_UI_I_VmEditMemory
+  vmCpuHelpTextSecond?: string
+  hardDisks?: UI_I_SendDataNewHardDisk[] | null
+  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+  networks?: UI_I_SendDataNewNetwork[] | null
+  videoCard?: UI_I_SendDataVideoCard
+  usbController?: string
+  pciDevices?: UI_I_PciDevice[]
+  passthroughDevices?: UI_I_ConfigurePciDevicesTable | null
+}>()
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataVirtualHardware): void
+  (event: 'invalid', value: string[]): 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 localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary } = useNuxtApp()
+
+const dropdownItems = computed<UI_I_DropdownTreeItem[]>(() =>
+  dropdownItemsFunc(localization.value)
+)
+
+const hardDisksIndex = ref<number[]>([0])
+const hardDisksType = ref<UI_T_HardDiskType[]>(['new'])
+const hardDisks = ref<UI_I_SendDataNewHardDisk[]>([
+  {
+    create: true,
+    size: 90,
+    source: '',
+  },
+])
+watch(
+  () => props.hardDisks,
+  (newValue) => {
+    if (!props.isEdit || !newValue) return
+
+    const count = newValue?.length || 0
+    hardDisksIndex.value = [...Array(count).keys()]
+    hardDisksType.value = Array(count).fill('edit')
+    hardDisks.value = newValue
+  },
+  { immediate: true }
+)
+
+const addHardDisk = (
+  create = true,
+  size = 90,
+  source = '',
+  type: UI_T_HardDiskType = 'new'
+): void => {
+  const newIndex = (hardDisksIndex.value.at(-1) ?? -1) + 1
+  hardDisksIndex.value.push(newIndex)
+  hardDisksType.value.push(type)
+
+  hardDisks.value.push({ create, size, source, attach: true })
+  sendData()
+}
+const onAddExistHardDisk = (hardDisk: UI_I_HardDisk): void => {
+  addHardDisk(false, $binary.bToGb(hardDisk.size), hardDisk.path, 'exist')
+}
+const onRemoveHardDisk = (
+  index: number,
+  hardDisk: UI_I_SendDataNewHardDisk
+): void => {
+  const removeIndex = hardDisksIndex.value.indexOf(index)
+
+  if (!hardDisk.create && !hardDisk.attach) {
+    hardDisksType.value = hardDisksType.value.map((item, key) => {
+      if (key === removeIndex) return 'removed'
+      return item
+    })
+    sendData()
+    return
+  }
+
+  hardDisksIndex.value = hardDisksIndex.value.filter((item) => item !== index)
+  hardDisksType.value = hardDisksType.value.filter(
+    (_item, key) => key !== removeIndex
+  )
+
+  hardDisks.value = hardDisks.value.filter((_hardDisk, key: number) => {
+    return removeIndex !== key
+  })
+
+  delete newHardDiskInvalidKeys.value[index]
+  delete sendDataNewHardDisk.value[index]
+  sendData()
+}
+const onRollBackHardDisk = (index: number): void => {
+  const removeIndex = hardDisksIndex.value.indexOf(index)
+  hardDisksType.value = hardDisksType.value.map((item, key) => {
+    if (key === removeIndex) return 'edit'
+    return item
+  })
+}
+
+const defaultNetwork = {
+  network: '',
+  net_bridge: '',
+  mac: '',
+  target: '',
+  model: '',
+  boot_order: -1,
+}
+const networks = ref<UI_I_SendDataNewNetwork[]>([useDeepCopy(defaultNetwork)])
+const networksType = ref<UI_T_NetworkType[]>(['new'])
+const networksIndex = ref<number[]>([0])
+watch(
+  () => props.networks,
+  (newValue) => {
+    if (!props.isEdit || !newValue) return
+
+    // networks.value = newValue
+    // networksType.value = Array(newValue.length).fill('edit')
+    const count = newValue?.length || 0
+    networksIndex.value = [...Array(count).keys()]
+    networksType.value = Array(count).fill('edit')
+    networks.value = newValue
+  },
+  { immediate: true }
+)
+const addNetwork = (): void => {
+  const index = (networksIndex.value.at(-1) || 0) + 1
+  networksIndex.value.push(index)
+  networksType.value.push('new')
+
+  networks.value.push(useDeepCopy(defaultNetwork))
+}
+const onRemoveNetwork = (index: number): void => {
+  const removeIndex = networksIndex.value.indexOf(index)
+  networksIndex.value = networksIndex.value.filter((item) => item !== index)
+  networksType.value = networksType.value.filter(
+    (_item, key) => key !== removeIndex
+  )
+  networks.value = networks.value.filter(
+    (_network, key: number) => removeIndex !== key
+  )
+
+  delete newNetworkInvalidKeys.value[index]
+  delete sendDataNewNetwork.value[index]
+  sendData()
+}
+
+const defaultCdDvdDriver: UI_I_SendDataNewCdDvdDrive = {
+  create: false,
+  attach: false,
+  source: '',
+  bus: '',
+  device_type: 'cdrom',
+  boot_order: -1,
+}
+const cdDvdDrives = ref<UI_I_SendDataNewCdDvdDrive[]>([
+  useDeepCopy(defaultCdDvdDriver),
+])
+const cdDvdDrivesIndex = ref<number[]>([0])
+const cdDvdDrivesType = ref<UI_T_CdDvdType[]>(['new'])
+watch(
+  () => props.cdDvdDrives,
+  (newValue) => {
+    if (!props.isEdit || !newValue) return
+
+    // cdDvdDrives.value = newValue
+    // cdDvdDrivesType.value = Array(newValue.length).fill('edit')
+    const count = newValue?.length || 0
+    cdDvdDrivesIndex.value = [...Array(count).keys()]
+    cdDvdDrivesType.value = Array(count).fill('edit')
+    cdDvdDrives.value = newValue
+  },
+  { immediate: true }
+)
+const addCdDvdDrive = (): void => {
+  const value = (cdDvdDrivesIndex.value.at(-1) || 0) + 1
+  cdDvdDrivesIndex.value.push(value)
+  cdDvdDrivesType.value.push('new')
+  cdDvdDrives.value.push({
+    ...useDeepCopy(defaultCdDvdDriver),
+    attach: true,
+  })
+}
+const onRemoveCdDvdDrive = (
+  index: number,
+  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
+): void => {
+  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
+
+  if (!cdDvdDrive.create && !cdDvdDrive.attach) {
+    cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
+      if (key === removeIndex) return 'removed'
+      return item
+    })
+    sendData()
+    return
+  }
+
+  cdDvdDrivesIndex.value = cdDvdDrivesIndex.value.filter(
+    (cdDvdDrive) => cdDvdDrive !== index
+  )
+  cdDvdDrivesType.value = cdDvdDrivesType.value.filter(
+    (_item, key) => key !== index
+  )
+  cdDvdDrives.value = cdDvdDrives.value.filter(
+    (_cdDvdDrive, key: number) => removeIndex !== key
+  )
+
+  delete sendDataNewCdDvdDrive.value[index]
+  sendData()
+}
+const onRollBackCdDvdDrive = (index: number): void => {
+  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
+  cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
+    if (key === removeIndex) return 'edit'
+    return item
+  })
+}
+
+const defaultPciDevice: UI_I_PciDevice = {
+  id: '',
+  vendor_name: '',
+  class_name: 'cdrom',
+  device_name: 'cdrom',
+}
+const pciDevicesIndex = ref<number[]>([0])
+const pciDevicesType = ref<('new' | 'edit')[]>(['new'])
+const pciDevices = ref<UI_I_PciDevice[]>([])
+watch(
+  () => props.pciDevices,
+  (newValue) => {
+    if (!props.isEdit) return
+
+    const count = newValue?.length || 0
+    pciDevicesIndex.value = [...Array(count).keys()]
+    pciDevicesType.value = Array(count).fill('edit')
+    pciDevices.value = newValue || []
+  },
+  { immediate: true }
+)
+
+const addPciDevice = (): void => {
+  const newIndex = (pciDevicesIndex.value.at(-1) ?? -1) + 1
+  pciDevicesIndex.value.push(newIndex)
+  pciDevicesType.value.push('new')
+
+  pciDevices.value.push(useDeepCopy(defaultPciDevice))
+}
+const onRemovePciDevice = (index: number): void => {
+  const removeIndex = pciDevicesIndex.value.indexOf(index)
+  pciDevicesIndex.value = pciDevicesIndex.value.filter((item) => item !== index)
+  pciDevicesType.value = pciDevicesType.value.filter(
+    (_item, key) => key !== removeIndex
+  )
+
+  pciDevices.value = pciDevices.value.filter((_pciDevice, key: number) => {
+    return removeIndex !== key
+  })
+
+  delete newPciDeviceInvalidKeys.value[index]
+  delete sendDataNewPciDevices.value[index]
+  sendData()
+}
+
+const isShowFileModal = ref<boolean>(false)
+const onAddDevice = (item: UI_I_DropdownTreeItemChild): void => {
+  switch (item.value) {
+    case 1:
+      addHardDisk()
+      break
+    case 2:
+      isShowFileModal.value = true
+      break
+    case 5:
+      addCdDvdDrive()
+      break
+    case 10:
+      addPciDevice()
+      break
+    case 14:
+      addNetwork()
+      break
+  }
+}
+
+const cpuInvalid = ref<boolean>(false)
+const sendDataCpu = ref<UI_I_SendDataCpu | null>(null)
+const onSendDataCpuMethod = (data: UI_I_SendDataCpu): void => {
+  sendDataCpu.value = data
+  sendData()
+}
+const sendDataMemory = ref<UI_I_SendDataMemory | null>(null)
+const onSendDataMemoryMethod = (data: UI_I_SendDataMemory): void => {
+  sendDataMemory.value = data
+  sendData()
+}
+const sendDataNewHardDisk = ref<UI_I_SendDataNewHardDisk[]>([])
+const onSendDataNewHardDiskMethod = (
+  data: UI_I_SendDataNewHardDisk,
+  index: number
+): void => {
+  sendDataNewHardDisk.value[index] = data
+  sendData()
+}
+const sendDataNewNetwork = ref<UI_I_SendDataNewNetwork[]>([])
+const sendDataNewNetworkMethod = (
+  data: UI_I_SendDataNewNetwork,
+  index: number
+): void => {
+  sendDataNewNetwork.value[index] = data
+  sendData()
+}
+const sendDataNewCdDvdDrive = ref<UI_I_SendDataNewCdDvdDrive[]>([])
+const sendDataNewCdDvdDriveMethod = (
+  data: UI_I_SendDataNewCdDvdDrive,
+  index: number
+): void => {
+  sendDataNewCdDvdDrive.value[index] = data
+  sendData()
+}
+const sendDataNewUsbController = ref<string | null>(null)
+const onSendDataNewUsbControllerMethod = (data: string): void => {
+  sendDataNewUsbController.value = data
+  sendData()
+}
+const sendDataNewPciDevices = ref<UI_I_SendDataNewPciDevice[]>([])
+const onSendDataPciDevicesMethod = (
+  data: UI_I_SendDataNewPciDevice,
+  index: number
+): void => {
+  sendDataNewPciDevices.value[index] = data
+  sendData()
+}
+const sendDataVideoCard = ref<UI_I_SendDataVideoCard | null>(null)
+const onSendDataVideoCardMethod = (data: UI_I_SendDataVideoCard): void => {
+  sendDataVideoCard.value = data
+  sendData()
+}
+
+const sendData = (): void => {
+  const cpu = sendDataCpu.value
+  const memory = sendDataMemory.value
+  const hardDisks = sendDataNewHardDisk.value.flat(2)
+  const networks = sendDataNewNetwork.value.flat(2)
+  const cdDvdDrives = sendDataNewCdDvdDrive.value.flat(2)
+  const pciDevices = sendDataNewPciDevices.value.flat()
+  const usbController = sendDataNewUsbController.value
+  const videoCard = sendDataVideoCard.value
+
+  const sendData: UI_I_SendDataVirtualHardware = {
+    cpu,
+    memory,
+    usbController,
+    pciDevices,
+    networks,
+    hardDisks,
+    cdDvdDrives,
+    videoCard,
+  }
+  emits('send-data', sendData)
+}
+
+const onSetInvalidHardDisk = (invalid: boolean, index: number): void => {
+  newHardDiskInvalidKeys.value[index] = invalid
+}
+
+const onSetInvalidNetwork = (invalid: boolean, key: number): void => {
+  newNetworkInvalidKeys.value[key] = invalid
+}
+
+const onSetInvalidPciDevice = (invalid: boolean, key: number): void => {
+  newPciDeviceInvalidKeys.value[key] = invalid
+}
+
+const memoryInvalid = ref<boolean>(false)
+const videoCardInvalid = ref<boolean>(false)
+const newHardDiskInvalidKeys = ref<UI_I_InvalidKeys>({})
+const newNetworkInvalidKeys = ref<UI_I_InvalidKeys>({})
+const newPciDeviceInvalidKeys = ref<UI_I_InvalidKeys>({})
+
+watch(
+  [
+    cpuInvalid,
+    memoryInvalid,
+    newHardDiskInvalidKeys,
+    newNetworkInvalidKeys,
+    newPciDeviceInvalidKeys,
+    videoCardInvalid,
+  ],
+  () => {
+    const cpu = cpuInvalid.value ? localization.value.cpu : ''
+    const memory = memoryInvalid.value ? localization.value.memory : ''
+    const videoCard = videoCardInvalid.value ? localization.value.videoCard : ''
+    let newHardDisk = ''
+    Object.keys(newHardDiskInvalidKeys.value).forEach((key) => {
+      if (!newHardDiskInvalidKeys.value[+key]) {
+        return
+      }
+
+      newHardDisk +=
+        (newHardDisk ? ', ' : '') +
+        localization.value.newHardDisk +
+        ' ' +
+        (+key + 1)
+    })
+    let newNetwork = ''
+    Object.keys(newNetworkInvalidKeys.value).forEach((key) => {
+      if (!newNetworkInvalidKeys.value[+key]) {
+        return
+      }
+
+      newNetwork +=
+        (newNetwork ? ', ' : '') +
+        localization.value.newNetwork +
+        ' ' +
+        (+key + 1)
+    })
+    // let pciDevice = ''
+    // Object.keys(newPciDeviceInvalidKeys.value).forEach((key) => {
+    //   if (!newPciDeviceInvalidKeys.value[+key]) {
+    //     return
+    //   }
+    //
+    //   pciDevice +=
+    //     (pciDevice ? ', ' : '') +
+    //     localization.value.pciDevice +
+    //     ' ' +
+    //     (+key + 1)
+    // })
+
+    emits('invalid', [cpu, memory, newHardDisk, newNetwork, videoCard])
+  },
+  { deep: true }
+)
+
+emits('get-pci-devices')
+</script>
+
+<style scoped lang="scss">
+.virtual-hardware {
+  .content-dropdown {
+    width: 200px;
+  }
+}
+</style>