bfg-common 1.5.591 → 1.5.592

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

@@ -1,277 +1,257 @@
-<template>
-  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-new
-    v-if="isNewView"
-    v-model:selected-location="networkValue"
-    v-model:adapter-type="model"
-    v-model:mac-address="mac"
-    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="networkValue"
-    v-model:adapter-type="model"
-    v-model:mac-address="mac"
-    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_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'
-import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
-
-const network = defineModel<UI_I_CreateVmData['network_devices'][0]['network']>(
-  'network',
-  { required: true }
-)
-
-const mac = defineModel<UI_I_CreateVmData['network_devices'][0]['mac']>('mac', {
-  required: true,
-})
-const model = defineModel<UI_I_CreateVmData['network_devices'][0]['model']>(
-  'model',
-  {
-    required: true,
-  }
-)
-
-const props = withDefaults(
-  defineProps<{
-    project: UI_T_Project
-    index: number
-    type: UI_T_NetworkType
-    networksTable: UI_I_NetworkTableItem[]
-    errorValidationFields: UI_I_ErrorValidationField[]
-    isEdit: boolean
-    networkValueProp: 'network' | 'net_bridge'
-    state?: string | number
-  }>(),
-  {
-    state: undefined,
-  }
-)
-const emits = defineEmits<{
-  (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 networkValue = defineModel<
-    UI_I_CreateVmData['network_devices'][0][props.networkValueProp]
->('networkValue', { required: true })
-watch(networkValue, (newValue) => {
-  const selectedOption = locationOptions.value.find(
-      (option) => option.value === newValue
-  )
-  if (selectedOption) {
-    network.value = selectedOption.text
-  }
-})
-
-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 && model.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 locationOptions = ref<UI_I_OptionItem[]>([])
-
-if (networkValue.value) {
-  locationOptions.value = [
-    { text: network.value, value: networkValue.value },
-    { text: `${localization.value.common.browse}...`, value: '' },
-  ]
-}
-
-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 }
-)
-
-watch(
-  () => props.networksTable,
-  (newValue) => {
-    if (!newValue.length && props.type !== 'new') return
-
-    if (!newValue.length) {
-      locationOptions.value = [
-        {
-          text: localization.value.vmWizard.noAvailableNetworks,
-          value: 'noAvailableNetworks',
-        },
-      ]
-      networkValue.value = 'noAvailableNetworks'
-      newNetworkInvalid.value = true
-      return
-    }
-    newNetworkInvalid.value = false
-
-    const isExistValue = newValue.some(
-      (networkLocal) => networkLocal[props.networkValueProp] === networkValue.value
-    )
-
-    if (props.type === 'edit' || isExistValue) return
-
-    selectedLocationOld.value = newValue[0][props.networkValueProp] || ''
-    networkValue.value = newValue[0][props.networkValueProp] || ''
-
-    locationOptions.value = [
-      { text: newValue[0].name, value: newValue[0][props.networkValueProp] },
-      { text: `${localization.value.common.browse}...`, value: '' },
-    ]
-  },
-  { immediate: true, deep: true }
-)
-
-const locationModalIsShow = ref<boolean>(false)
-const onHideLocationModal = (): void => {
-  locationModalIsShow.value = false
-  networkValue.value = selectedLocationOld.value
-}
-const changeLocation = (event: UI_I_HTMLSelectElement): void => {
-  const value = event.target.value
-  if (value === '') {
-    locationModalIsShow.value = true
-    return
-  }
-
-  selectedLocationOld.value = value
-  networkValue.value = value
-}
-const onSelectLocation = (networkLocal: UI_I_NetworkTableItem): void => {
-  locationModalIsShow.value = false
-
-  selectedLocationOld.value = networkLocal[props.networkValueProp]
-  networkValue.value = networkLocal[props.networkValueProp]
-
-  const hasNetwork = locationOptions.value.some(
-    (option) => option.value === networkLocal[props.networkValueProp]
-  )
-  if (hasNetwork) {
-    return
-  }
-
-  locationOptions.value = [
-    ...locationOptions.value.slice(0, -1),
-    { text: networkLocal.name, value: networkLocal[props.networkValueProp] },
-    locationOptions.value[locationOptions.value.length - 1],
-  ]
-}
-const macAddressType = ref<string>('automatic')
-
-watch(
-  isRunning,
-  (newValue) => {
-    if (newValue && props.type === 'new') {
-      model.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>
+  <component
+    :is="currentComponent"
+    v-model:selected-location="networkValue"
+    v-model:adapter-type="model"
+    v-model:mac-address="mac"
+    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_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'
+import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
+
+const network = defineModel<UI_I_CreateVmData['network_devices'][0]['network']>(
+  'network',
+  { required: true }
+)
+
+const mac = defineModel<UI_I_CreateVmData['network_devices'][0]['mac']>('mac', {
+  required: true,
+})
+const model = defineModel<UI_I_CreateVmData['network_devices'][0]['model']>(
+  'model',
+  {
+    required: true,
+  }
+)
+
+const props = withDefaults(
+  defineProps<{
+    project: UI_T_Project
+    index: number
+    type: UI_T_NetworkType
+    networksTable: UI_I_NetworkTableItem[]
+    errorValidationFields: UI_I_ErrorValidationField[]
+    isEdit: boolean
+    networkValueProp: 'network' | 'net_bridge'
+    state?: string | number
+  }>(),
+  {
+    state: undefined,
+  }
+)
+const emits = defineEmits<{
+  (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 networkValue = defineModel<
+  UI_I_CreateVmData['network_devices'][0][props.networkValueProp]
+>('networkValue', { required: true })
+watch(networkValue, (newValue) => {
+  const selectedOption = locationOptions.value.find(
+    (option) => option.value === newValue
+  )
+  if (selectedOption) {
+    network.value = selectedOption.text
+  }
+})
+
+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 isRunning = computed<boolean>(() => {
+  return props.state === 2
+})
+
+const isRemovable = computed<boolean>(() => {
+  return (
+    !props.isEdit ||
+    !isRunning.value ||
+    (isRunning.value && model.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 locationOptions = ref<UI_I_OptionItem[]>([])
+
+if (networkValue.value) {
+  locationOptions.value = [
+    { text: network.value, value: networkValue.value },
+    { text: `${localization.value.common.browse}...`, value: '' },
+  ]
+}
+
+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 }
+)
+
+watch(
+  () => props.networksTable,
+  (newValue) => {
+    if (!newValue.length && props.type !== 'new') return
+
+    if (!newValue.length) {
+      locationOptions.value = [
+        {
+          text: localization.value.vmWizard.noAvailableNetworks,
+          value: 'noAvailableNetworks',
+        },
+      ]
+      networkValue.value = 'noAvailableNetworks'
+      newNetworkInvalid.value = true
+      return
+    }
+    newNetworkInvalid.value = false
+
+    const isExistValue = newValue.some(
+      (networkLocal) =>
+        networkLocal[props.networkValueProp] === networkValue.value
+    )
+
+    if (props.type === 'edit' || isExistValue) return
+
+    selectedLocationOld.value = newValue[0][props.networkValueProp] || ''
+    networkValue.value = newValue[0][props.networkValueProp] || ''
+
+    locationOptions.value = [
+      { text: newValue[0].name, value: newValue[0][props.networkValueProp] },
+      { text: `${localization.value.common.browse}...`, value: '' },
+    ]
+  },
+  { immediate: true, deep: true }
+)
+
+const locationModalIsShow = ref<boolean>(false)
+const onHideLocationModal = (): void => {
+  locationModalIsShow.value = false
+  networkValue.value = selectedLocationOld.value
+}
+const changeLocation = (event: UI_I_HTMLSelectElement): void => {
+  const value = event.target.value
+  if (value === '') {
+    locationModalIsShow.value = true
+    return
+  }
+
+  selectedLocationOld.value = value
+  networkValue.value = value
+}
+const onSelectLocation = (networkLocal: UI_I_NetworkTableItem): void => {
+  locationModalIsShow.value = false
+
+  selectedLocationOld.value = networkLocal[props.networkValueProp]
+  networkValue.value = networkLocal[props.networkValueProp]
+
+  const hasNetwork = locationOptions.value.some(
+    (option) => option.value === networkLocal[props.networkValueProp]
+  )
+  if (hasNetwork) {
+    return
+  }
+
+  locationOptions.value = [
+    ...locationOptions.value.slice(0, -1),
+    { text: networkLocal.name, value: networkLocal[props.networkValueProp] },
+    locationOptions.value[locationOptions.value.length - 1],
+  ]
+}
+const macAddressType = ref<string>('automatic')
+
+watch(
+  isRunning,
+  (newValue) => {
+    if (newValue && props.type === 'new') {
+      model.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>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/adapterType/AdapterType.vue

@@ -1,60 +1,56 @@
-<template>
-  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-adapter-type-new
-    v-if="isNewView"
-    v-model:adapter-type="adapterType"
-    :index="props.index"
-    :disabled="props.disabled"
-    :error-text="apiError"
-    :adapter-type-options="adapterTypeOptions"
-    @remove-error="onRemoveValidationError"
-  />
-  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-adapter-type-old
-    v-else
-    v-model:adapter-type="adapterType"
-    :index="props.index"
-    :disabled="props.disabled"
-    :error-text="apiError"
-    :adapter-type-options="adapterTypeOptions"
-    @remove-error="onRemoveValidationError"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import { adapterTypeOptionsConfig } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/adapterType/lib/config/options'
-
-const adapterType = defineModel<string>('adapterType')
-
-const props = defineProps<{
-  index: number
-  disabled: boolean
-  errorValidationFields: UI_I_ErrorValidationField[]
-}>()
-const emits = defineEmits<{
-  (event: 'remove-error-by-title', value: string): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const adapterTypeOptions = ref<UI_I_OptionItem[]>(adapterTypeOptionsConfig)
-
-const typeError = computed<string>(
-  () => `network_devices[${props.index}].model`
-)
-
-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></style>
+<template>
+  <component
+    :is="currentComponent"
+    v-model:adapter-type="adapterType"
+    :index="props.index"
+    :disabled="props.disabled"
+    :error-text="apiError"
+    :adapter-type-options="adapterTypeOptions"
+    @remove-error="onRemoveValidationError"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { adapterTypeOptionsConfig } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/adapterType/lib/config/options'
+
+const adapterType = defineModel<string>('adapterType')
+
+const props = defineProps<{
+  index: number
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove-error-by-title', value: string): 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 adapterTypeOptions = ref<UI_I_OptionItem[]>(adapterTypeOptionsConfig)
+
+const typeError = computed<string>(
+  () => `network_devices[${props.index}].model`
+)
+
+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></style>