bfg-common 1.1.99 → 1.1.101

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

@@ -1,288 +1,288 @@
-<template>
-  <div class="hardware-network">
-    <atoms-stack-block
-      :has-children="true"
-      :removable="isRemovable"
-      @remove="removeNetwork"
-    >
-      <template #stackBlockKey>
-        <div class="vm-wizard-toggle-block-network flex-align-center">
-          <span>{{ label }}</span>
-          <atoms-the-icon
-            v-show="newNetworkInvalid"
-            width="24px"
-            height="24px"
-            class="is-error tooltip-trigger"
-            name="info"
-          />
-        </div>
-      </template>
-      <template #stackBlockContent>
-        <div class="flex-align-center flex-space-between">
-          <atoms-tooltip-error
-            :has-error="!!apiError"
-            :selector="`.vm-wizard-network-field-${props.index}`"
-            @remove="onRemoveValidationError"
-          >
-            <template #elem>
-              <div class="select">
-                <select
-                  :id="`vm-wizard-network-field-${props.index}`"
-                  v-model="selectedLocation"
-                  :class="`vm-wizard-network-field-${props.index} input-text-color`"
-                  :disabled="props.type === 'edit' && state !== 1"
-                  @click.stop
-                  @change="changeLocation"
-                >
-                  <option
-                    v-for="(item, key) in locationOptions"
-                    :key="key"
-                    :value="item.value"
-                  >
-                    {{ item.text }}
-                  </option>
-                </select>
-              </div>
-            </template>
-            <template #content>{{ apiError }}</template>
-          </atoms-tooltip-error>
-        </div>
-      </template>
-      <template #stackChildren>
-        <common-vm-actions-add-customize-hardware-virtual-hardware-new-network-adapter-type
-          v-model:adapter-type="adapterType"
-          :index="props.index"
-          :disabled="props.type === 'edit' || isRunning"
-          :error-validation-fields="props.errorValidationFields"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-        <common-vm-actions-add-customize-hardware-virtual-hardware-new-network-mac-address
-          v-model:mac-address="macAddress"
-          v-model:mac-address-type="macAddressType"
-          :index="props.index"
-          :disabled="props.type === 'edit'"
-          :error-validation-fields="props.errorValidationFields"
-          @invalid="newNetworkInvalid = $event"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-      </template>
-    </atoms-stack-block>
-
-    <common-vm-actions-add-customize-hardware-virtual-hardware-new-network-location
-      :location-modal-is-show="locationModalIsShow"
-      :networks-table="networksTable"
-      @hide="onHideLocationModal"
-      @select="onSelectLocation"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_TablePayload } from '~/models/store/interfaces'
-import { UI_I_NetworkTableItem } from '~/models/store/network/interfaces'
-import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
-import { UI_I_SendDataNewNetwork } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
-import { UI_T_NetworkType } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/types'
-import { UI_I_Localization, UI_I_HTMLSelectElement } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = defineProps<{
-  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 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.networkAdapter} ${props.index + 1}`
-
-  return `${localization.value.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()
-watch(
-  () => props.networksTable,
-  (networks) => {
-    if (!networks.length || props.type === 'edit') return
-
-    selectedLocationOld.value = networks[0].net_bridge
-    selectedLocation.value = networks[0].net_bridge
-
-    locationOptions.value = [
-      { text: networks[0].name, value: networks[0].net_bridge },
-      { text: `${localization.value.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.net_bridge
-  selectedLocation.value = network.net_bridge
-
-  const hasNetwork = locationOptions.value.some(
-    (option) => option.value === network.net_bridge
-  )
-  if (hasNetwork) {
-    return
-  }
-
-  locationOptions.value = [
-    ...locationOptions.value.slice(0, -1),
-    { text: network.name, value: network.net_bridge },
-    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: 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.net_bridge },
-      { text: `${localization.value.browse}...`, value: '' },
-    ]
-    selectedLocation.value = newValue.net_bridge
-
-    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">
-#network-connect {
-  margin-right: 4px;
-}
-</style>
+<template>
+  <div class="hardware-network">
+    <atoms-stack-block
+      :has-children="true"
+      :removable="isRemovable"
+      @remove="removeNetwork"
+    >
+      <template #stackBlockKey>
+        <div class="vm-wizard-toggle-block-network flex-align-center">
+          <span>{{ label }}</span>
+          <atoms-the-icon
+            v-show="newNetworkInvalid"
+            width="24px"
+            height="24px"
+            class="is-error tooltip-trigger"
+            name="info"
+          />
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center flex-space-between">
+          <atoms-tooltip-error
+            :has-error="!!apiError"
+            :selector="`.vm-wizard-network-field-${props.index}`"
+            @remove="onRemoveValidationError"
+          >
+            <template #elem>
+              <div class="select">
+                <select
+                  :id="`vm-wizard-network-field-${props.index}`"
+                  v-model="selectedLocation"
+                  :class="`vm-wizard-network-field-${props.index} input-text-color`"
+                  :disabled="props.type === 'edit' && state !== 1"
+                  @click.stop
+                  @change="changeLocation"
+                >
+                  <option
+                    v-for="(item, key) in locationOptions"
+                    :key="key"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </template>
+            <template #content>{{ apiError }}</template>
+          </atoms-tooltip-error>
+        </div>
+      </template>
+      <template #stackChildren>
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-network-adapter-type
+          v-model:adapter-type="adapterType"
+          :index="props.index"
+          :disabled="props.type === 'edit' || isRunning"
+          :error-validation-fields="props.errorValidationFields"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-add-customize-hardware-virtual-hardware-new-network-mac-address
+          v-model:mac-address="macAddress"
+          v-model:mac-address-type="macAddressType"
+          :index="props.index"
+          :disabled="props.type === 'edit'"
+          :error-validation-fields="props.errorValidationFields"
+          @invalid="newNetworkInvalid = $event"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+      </template>
+    </atoms-stack-block>
+
+    <common-vm-actions-add-customize-hardware-virtual-hardware-new-network-location
+      :location-modal-is-show="locationModalIsShow"
+      :networks-table="networksTable"
+      @hide="onHideLocationModal"
+      @select="onSelectLocation"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_TablePayload } from '~/models/store/interfaces'
+import { UI_I_NetworkTableItem } from '~/models/store/network/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_SendDataNewNetwork } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
+import { UI_T_NetworkType } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/types'
+import { UI_I_Localization, UI_I_HTMLSelectElement } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = defineProps<{
+  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 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.networkAdapter} ${props.index + 1}`
+
+  return `${localization.value.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()
+watch(
+  () => props.networksTable,
+  (networks) => {
+    if (!networks.length || props.type === 'edit') return
+
+    selectedLocationOld.value = networks[0].net_bridge
+    selectedLocation.value = networks[0].net_bridge
+
+    locationOptions.value = [
+      { text: networks[0].name, value: networks[0].net_bridge },
+      { text: `${localization.value.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.net_bridge
+  selectedLocation.value = network.net_bridge
+
+  const hasNetwork = locationOptions.value.some(
+    (option) => option.value === network.net_bridge
+  )
+  if (hasNetwork) {
+    return
+  }
+
+  locationOptions.value = [
+    ...locationOptions.value.slice(0, -1),
+    { text: network.name, value: network.net_bridge },
+    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: 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.net_bridge },
+      { text: `${localization.value.browse}...`, value: '' },
+    ]
+    selectedLocation.value = newValue.net_bridge
+
+    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">
+#network-connect {
+  margin-right: 4px;
+}
+</style>