bfg-common 1.4.598 → 1.4.600

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetwork.vue

@@ -1,272 +1,281 @@
-<template>
-  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-new
-    v-if="isNewView"
-    v-model:selected-location="selectedLocation"
-    v-model:adapter-type="adapterType"
-    v-model:mac-address="macAddress"
-    v-model:mac-address-type="macAddressType"
-    v-model:new-network-invalid="newNetworkInvalid"
-    :index="props.index"
-    :type="props.type"
-    :networks-table="props.networksTable"
-    :error-validation-fields="props.errorValidationFields"
-    :is-removable="isRemovable"
-    :label="label"
-    :error-text="apiError"
-    :type-error="typeError"
-    :location-options="locationOptions"
-    :is-running="isRunning"
-    :location-modal-is-show="locationModalIsShow"
-    :state="props.state"
-    @remove="emits('remove')"
-    @remove-error-by-title="onRemoveValidationError"
-    @change-location="changeLocation"
-    @hide-location-modal="onHideLocationModal"
-    @select-location="onSelectLocation"
-  />
-  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-old
-    v-else
-    v-model:selected-location="selectedLocation"
-    v-model:adapter-type="adapterType"
-    v-model:mac-address="macAddress"
-    v-model:mac-address-type="macAddressType"
-    v-model:new-network-invalid="newNetworkInvalid"
-    :index="props.index"
-    :type="props.type"
-    :networks-table="props.networksTable"
-    :error-validation-fields="props.errorValidationFields"
-    :is-removable="isRemovable"
-    :label="label"
-    :error-text="apiError"
-    :type-error="typeError"
-    :location-options="locationOptions"
-    :is-running="isRunning"
-    :location-modal-is-show="locationModalIsShow"
-    :state="props.state"
-    @remove="emits('remove')"
-    @remove-error-by-title="onRemoveValidationError"
-    @change-location="changeLocation"
-    @hide-location-modal="onHideLocationModal"
-    @select-location="onSelectLocation"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
-import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type { UI_I_SendDataNewNetwork } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
-import type { UI_T_NetworkType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
-import type {
-  UI_I_Localization,
-  UI_I_HTMLSelectElement,
-} from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const props = defineProps<{
-  project: UI_T_Project
-  index: number
-  type: UI_T_NetworkType
-  network: UI_I_SendDataNewNetwork
-  networksTable: UI_I_NetworkTableItem[]
-  errorValidationFields: UI_I_ErrorValidationField[]
-  isEdit: boolean
-  state?: string | number
-}>()
-const emits = defineEmits<{
-  (event: 'send-data', value: UI_I_SendDataNewNetwork): void
-  (event: 'invalid', value: boolean): void
-  (event: 'remove'): void
-  (event: 'remove-error-by-title', value: string): void
-  (event: 'get-networks-table', value: UI_I_TablePayload): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isRunning = computed<boolean>(() => {
-  return props.state === 2
-})
-
-const isRemovable = computed<boolean>(() => {
-  return (
-    !props.isEdit ||
-    !isRunning.value ||
-    (isRunning.value && adapterType.value === 'virtio')
-  )
-})
-
-const label = computed<string>(() => {
-  if (props.type === 'edit')
-    return `${localization.value.common.networkAdapter} ${props.index + 1}`
-
-  return `${localization.value.common.newNetwork} *`
-})
-
-// const removeNetwork = (): void => {
-//   emits('remove')
-// }
-
-const selectedLocationOld = ref<string>('')
-const selectedLocation = ref<string>('')
-const locationOptions = ref<UI_I_OptionItem[]>([])
-
-const getNetworks = (): void => {
-  // if (props.networksTable.length) return // Из-за этого кода был баг. Открыть визард вм -> создать сеть -> открыть визард вм и в списке сетей нету новой сети
-
-  const payload: UI_I_TablePayload = {
-    pagination: {
-      page: 1,
-      pageSize: 100,
-    },
-    schema: 'full',
-    type: 'network',
-    sortBy: null,
-  }
-  emits('get-networks-table', payload)
-}
-getNetworks()
-
-const valueProp: 'net_bridge' | 'id' =
-  props.project === 'procurator' ? 'net_bridge' : 'id'
-watch(
-  () => props.networksTable,
-  (newValue) => {
-    const isExistValue = newValue.some(
-      (network) => network[valueProp] === selectedLocation.value
-    )
-    if (!newValue.length || props.type === 'edit' || isExistValue) return
-
-    selectedLocationOld.value = newValue[0][valueProp]
-    selectedLocation.value = newValue[0][valueProp]
-
-    locationOptions.value = [
-      { text: newValue[0].name, value: newValue[0][valueProp] },
-      { text: `${localization.value.common.browse}...`, value: '' },
-    ]
-  },
-  { immediate: true }
-)
-
-const locationModalIsShow = ref<boolean>(false)
-const onHideLocationModal = (): void => {
-  locationModalIsShow.value = false
-  selectedLocation.value = selectedLocationOld.value
-}
-const changeLocation = (event: UI_I_HTMLSelectElement): void => {
-  const value = event.target.value
-  if (value === '') {
-    locationModalIsShow.value = true
-    return
-  }
-
-  selectedLocationOld.value = value
-  selectedLocation.value = value
-  // netBridge.value = value
-}
-const onSelectLocation = (network: UI_I_NetworkTableItem): void => {
-  locationModalIsShow.value = false
-
-  selectedLocationOld.value = network[valueProp]
-  selectedLocation.value = network[valueProp]
-
-  const hasNetwork = locationOptions.value.some(
-    (option) => option.value === network[valueProp]
-  )
-  if (hasNetwork) {
-    return
-  }
-
-  locationOptions.value = [
-    ...locationOptions.value.slice(0, -1),
-    { text: network.name, value: network[valueProp] },
-    locationOptions.value[locationOptions.value.length - 1],
-  ]
-}
-
-const adapterType = ref<string>('rtl8139')
-
-const target = ref<string>('')
-
-const macAddress = ref<string>('')
-const macAddressType = ref<string>('automatic')
-const newNetworkInvalid = ref<boolean>(false)
-watch(
-  newNetworkInvalid,
-  (newValue) => {
-    emits('invalid', newValue)
-  },
-  { immediate: true }
-)
-
-watch(
-  [selectedLocation, adapterType, macAddress, macAddressType, locationOptions],
-  () => {
-    const option = locationOptions.value.find(
-      (option) => option.value === selectedLocation.value
-    )
-    if (!option) return
-
-    emits('send-data', {
-      network: option.text,
-      net_bridge: props.project === 'procurator' ? option.value : '',
-      target: target.value,
-      model: adapterType.value,
-      mac: macAddress.value,
-      boot_order: props.network.boot_order,
-    })
-  },
-  { immediate: true }
-)
-
-// Добавляем данные для редактирования
-watch(
-  () => props.network,
-  (newValue) => {
-    if (props.type !== 'edit') return
-
-    locationOptions.value = [
-      { text: newValue.network, value: newValue[valueProp] },
-      { text: `${localization.value.common.browse}...`, value: '' },
-    ]
-    selectedLocation.value = newValue[valueProp]
-
-    adapterType.value = newValue.model
-    macAddress.value = newValue.mac
-    target.value = newValue.target
-  },
-  { immediate: true }
-)
-
-watch(
-  isRunning,
-  (newValue) => {
-    if (newValue && props.type === 'new') {
-      adapterType.value = 'virtio'
-    }
-  },
-  { immediate: true }
-)
-
-const typeError = computed<string>(
-  () => `network_devices[${props.index}].network`
-)
-
-const apiError = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === typeError.value
-    )?.error_message || ''
-  )
-})
-
-const onRemoveValidationError = (): void => {
-  emits('remove-error-by-title', typeError.value)
-}
-</script>
-
-<style scoped lang="scss">
-</style>
+<template>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-new
+    v-if="isNewView"
+    v-model:selected-location="selectedLocation"
+    v-model:adapter-type="adapterType"
+    v-model:mac-address="macAddress"
+    v-model:mac-address-type="macAddressType"
+    v-model:new-network-invalid="newNetworkInvalid"
+    :index="props.index"
+    :type="props.type"
+    :networks-table="props.networksTable"
+    :error-validation-fields="props.errorValidationFields"
+    :is-removable="isRemovable"
+    :label="label"
+    :error-text="apiError"
+    :type-error="typeError"
+    :location-options="locationOptions"
+    :is-running="isRunning"
+    :location-modal-is-show="locationModalIsShow"
+    :state="props.state"
+    @remove="emits('remove')"
+    @remove-error-by-title="onRemoveValidationError"
+    @change-location="changeLocation"
+    @hide-location-modal="onHideLocationModal"
+    @select-location="onSelectLocation"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-old
+    v-else
+    v-model:selected-location="selectedLocation"
+    v-model:adapter-type="adapterType"
+    v-model:mac-address="macAddress"
+    v-model:mac-address-type="macAddressType"
+    v-model:new-network-invalid="newNetworkInvalid"
+    :index="props.index"
+    :type="props.type"
+    :networks-table="props.networksTable"
+    :error-validation-fields="props.errorValidationFields"
+    :is-removable="isRemovable"
+    :label="label"
+    :error-text="apiError"
+    :type-error="typeError"
+    :location-options="locationOptions"
+    :is-running="isRunning"
+    :location-modal-is-show="locationModalIsShow"
+    :state="props.state"
+    @remove="emits('remove')"
+    @remove-error-by-title="onRemoveValidationError"
+    @change-location="changeLocation"
+    @hide-location-modal="onHideLocationModal"
+    @select-location="onSelectLocation"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_SendDataNewNetwork } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
+import type { UI_T_NetworkType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
+import type {
+  UI_I_Localization,
+  UI_I_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const props = defineProps<{
+  project: UI_T_Project
+  index: number
+  type: UI_T_NetworkType
+  network: UI_I_SendDataNewNetwork
+  networksTable: UI_I_NetworkTableItem[]
+  errorValidationFields: UI_I_ErrorValidationField[]
+  isEdit: boolean
+  state?: string | number
+}>()
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataNewNetwork): void
+  (event: 'invalid', value: boolean): void
+  (event: 'remove'): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isRunning = computed<boolean>(() => {
+  return props.state === 2
+})
+
+const isRemovable = computed<boolean>(() => {
+  return (
+    !props.isEdit ||
+    !isRunning.value ||
+    (isRunning.value && adapterType.value === 'virtio')
+  )
+})
+
+const label = computed<string>(() => {
+  if (props.type === 'edit')
+    return `${localization.value.common.networkAdapter} ${props.index + 1}`
+
+  return `${localization.value.common.newNetwork} *`
+})
+
+// const removeNetwork = (): void => {
+//   emits('remove')
+// }
+
+const selectedLocationOld = ref<string>('')
+const selectedLocation = ref<string>('')
+const locationOptions = ref<UI_I_OptionItem[]>([])
+
+const getNetworks = (): void => {
+  // if (props.networksTable.length) return // Из-за этого кода был баг. Открыть визард вм -> создать сеть -> открыть визард вм и в списке сетей нету новой сети
+
+  const payload: UI_I_TablePayload = {
+    pagination: {
+      page: 1,
+      pageSize: 100,
+    },
+    schema: 'full',
+    type: 'network',
+    sortBy: null,
+  }
+  emits('get-networks-table', payload)
+}
+getNetworks()
+
+const newNetworkInvalid = ref<boolean>(false)
+watch(
+  newNetworkInvalid,
+  (newValue) => {
+    emits('invalid', newValue)
+  },
+  { immediate: true }
+)
+
+const valueProp: 'net_bridge' | 'id' =
+  props.project === 'procurator' ? 'net_bridge' : 'id'
+watch(
+  () => props.networksTable,
+  (newValue) => {
+    const isExistValue = newValue.some(
+      (network) => network[valueProp] === selectedLocation.value
+    )
+    if (!newValue.length) {
+      locationOptions.value = [
+        { text: localization.value.vmWizard.noAvailableNetworks, value: '' },
+      ]
+      newNetworkInvalid.value = true
+      return
+    }
+    newNetworkInvalid.value = false
+
+    if (props.type === 'edit' || isExistValue) return
+
+    selectedLocationOld.value = newValue[0][valueProp]
+    selectedLocation.value = newValue[0][valueProp]
+
+    locationOptions.value = [
+      { text: newValue[0].name, value: newValue[0][valueProp] },
+      { text: `${localization.value.common.browse}...`, value: '' },
+    ]
+  },
+  { immediate: true }
+)
+
+const locationModalIsShow = ref<boolean>(false)
+const onHideLocationModal = (): void => {
+  locationModalIsShow.value = false
+  selectedLocation.value = selectedLocationOld.value
+}
+const changeLocation = (event: UI_I_HTMLSelectElement): void => {
+  const value = event.target.value
+  if (value === '') {
+    locationModalIsShow.value = true
+    return
+  }
+
+  selectedLocationOld.value = value
+  selectedLocation.value = value
+  // netBridge.value = value
+}
+const onSelectLocation = (network: UI_I_NetworkTableItem): void => {
+  locationModalIsShow.value = false
+
+  selectedLocationOld.value = network[valueProp]
+  selectedLocation.value = network[valueProp]
+
+  const hasNetwork = locationOptions.value.some(
+    (option) => option.value === network[valueProp]
+  )
+  if (hasNetwork) {
+    return
+  }
+
+  locationOptions.value = [
+    ...locationOptions.value.slice(0, -1),
+    { text: network.name, value: network[valueProp] },
+    locationOptions.value[locationOptions.value.length - 1],
+  ]
+}
+
+const adapterType = ref<string>('rtl8139')
+
+const target = ref<string>('')
+
+const macAddress = ref<string>('')
+const macAddressType = ref<string>('automatic')
+
+watch(
+  [selectedLocation, adapterType, macAddress, macAddressType, locationOptions],
+  () => {
+    const option = locationOptions.value.find(
+      (option) => option.value === selectedLocation.value
+    )
+    if (!option) return
+
+    emits('send-data', {
+      network: option.text,
+      net_bridge: props.project === 'procurator' ? option.value : '',
+      target: target.value,
+      model: adapterType.value,
+      mac: macAddress.value,
+      boot_order: props.network.boot_order,
+    })
+  },
+  { immediate: true }
+)
+
+// Добавляем данные для редактирования
+watch(
+  () => props.network,
+  (newValue) => {
+    if (props.type !== 'edit') return
+
+    locationOptions.value = [
+      { text: newValue.network, value: newValue[valueProp] },
+      { text: `${localization.value.common.browse}...`, value: '' },
+    ]
+    selectedLocation.value = newValue[valueProp]
+
+    adapterType.value = newValue.model
+    macAddress.value = newValue.mac
+    target.value = newValue.target
+  },
+  { immediate: true }
+)
+
+watch(
+  isRunning,
+  (newValue) => {
+    if (newValue && props.type === 'new') {
+      adapterType.value = 'virtio'
+    }
+  },
+  { immediate: true }
+)
+
+const typeError = computed<string>(
+  () => `network_devices[${props.index}].network`
+)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped lang="scss"></style>