bfg-common 1.4.393 → 1.4.395

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

@@ -0,0 +1,124 @@
+<template>
+  <ui-stack-block
+    :has-children="true"
+    :removable="props.isRemovable"
+    :test-id="`network-stack-block-${props.index}`"
+    @remove="emits('remove')"
+  >
+    <template #stackBlockKey>
+      <div
+        :id="`vm-wizard-toggle-block-network-${props.index}`"
+        :data-id="`vm-wizard-toggle-block-network-${props.index}`"
+        class="vm-wizard-toggle-block-network flex-align-center"
+      >
+        <span class="title">{{ props.label }}</span>
+        <ui-icon
+          v-show="newNetworkInvalid"
+          width="18px"
+          height="18px"
+          name="error-outline"
+        />
+      </div>
+    </template>
+    <template #stackBlockContent>
+      <ui-select
+        :id="`vm-wizard-network-field-${props.index}`"
+        v-model="selectedLocation"
+        width="auto"
+        :items="props.locationOptions"
+        :disabled="props.type === 'edit' && props.state !== 1"
+        :test-id="`vm-wizard-network-field-${props.index}`"
+        :class="`vm-wizard-network-field-${props.index} network-select`"
+        :error-text="props.errorText"
+        @change="onChangeLocation"
+        @click.stop
+      />
+    </template>
+    <template #stackChildren>
+      <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-adapter-type
+        v-model:adapter-type="adapterType"
+        :index="props.index"
+        :disabled="props.type === 'edit' || props.isRunning"
+        :error-validation-fields="props.errorValidationFields"
+        @remove-error-by-title="emits('remove-error-by-title', $event)"
+      />
+      <common-vm-actions-common-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>
+  </ui-stack-block>
+
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-location
+    v-if="props.locationModalIsShow"
+    :location-modal-is-show="props.locationModalIsShow"
+    :networks-table="props.networksTable"
+    @hide="emits('hide-location-modal')"
+    @select="emits('select-location')"
+  />
+</template>
+
+<script setup lang="ts">
+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_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const selectedLocation = defineModel<string>('selected-location')
+const adapterType = defineModel<string>('adapter-type', { required: true })
+const macAddress = defineModel<string>('mac-address', { required: true })
+const macAddressType = defineModel<string>('mac-address-type', {
+  required: true,
+})
+const newNetworkInvalid = defineModel<boolean>('new-network-invalid', {
+  required: true,
+})
+
+const props = defineProps<{
+  index: number
+  type: UI_T_NetworkType
+  networksTable: UI_I_NetworkTableItem[]
+  errorValidationFields: UI_I_ErrorValidationField[]
+  isRemovable: boolean
+  label: string
+  errorText: string
+  typeError: string
+  locationOptions: UI_I_OptionItem[]
+  isRunning: boolean
+  locationModalIsShow: boolean
+  state?: string | number
+}>()
+
+const emits = defineEmits<{
+  (event: 'remove'): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'change-location', value: UI_I_HTMLSelectElement): void
+  (event: 'hide-location-modal'): void
+  (event: 'select-location'): void
+}>()
+
+const onChangeLocation = (data: UI_T_SelectedValue): void => {
+  emits('change-location', { target: { value: data } })
+}
+</script>
+
+<style scoped lang="scss">
+.title {
+  margin-right: 10px;
+}
+
+:deep(.network-select .ui-main-select-toggle) {
+  display: flex;
+  justify-content: space-between;
+  width: 196px;
+  background-color: #ffffff;
+}
+</style>

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

@@ -0,0 +1,131 @@
+<template>
+  <div class="hardware-network">
+    <atoms-stack-block
+      :has-children="true"
+      :removable="props.isRemovable"
+      :test-id="`network-stack-block-${props.index}`"
+      @remove="emits('remove')"
+    >
+      <template #stackBlockKey>
+        <div
+          :id="`vm-wizard-toggle-block-network-${props.index}`"
+          :data-id="`vm-wizard-toggle-block-network-${props.index}`"
+          class="vm-wizard-toggle-block-network flex-align-center"
+        >
+          <span>{{ props.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="!!props.errorText"
+            :selector="`.vm-wizard-network-field-${props.index}`"
+            @remove="emits('remove-error-by-title', props.typeError)"
+          >
+            <template #elem>
+              <div class="select">
+                <select
+                  :id="`vm-wizard-network-field-${props.index}`"
+                  v-model="selectedLocation"
+                  :data-id="`vm-wizard-network-field-${props.index}`"
+                  :class="`vm-wizard-network-field-${props.index} input-text-color`"
+                  :disabled="props.type === 'edit' && state !== 1"
+                  @click.stop
+                  @change="emits('change-location', $event)"
+                >
+                  <option
+                    v-for="(item, key) in props.locationOptions"
+                    :key="key"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </template>
+            <template #content>{{ props.errorText }}</template>
+          </atoms-tooltip-error>
+        </div>
+      </template>
+      <template #stackChildren>
+        <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-adapter-type
+          v-model:adapter-type="adapterType"
+          :index="props.index"
+          :disabled="props.type === 'edit' || props.isRunning"
+          :error-validation-fields="props.errorValidationFields"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-common-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-common-customize-hardware-virtual-hardware-new-network-location
+      v-if="props.locationModalIsShow"
+      :location-modal-is-show="props.locationModalIsShow"
+      :networks-table="props.networksTable"
+      @hide="emits('hide-location-modal')"
+      @select="emits('select-location')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+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_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const selectedLocation = defineModel<string>('selected-location')
+const adapterType = defineModel<string>('adapter-type', {required: true})
+const macAddress = defineModel<string>('mac-address', {required: true})
+const macAddressType = defineModel<string>('mac-address-type', {required: true})
+const newNetworkInvalid = defineModel<boolean>('new-network-invalid', {required: true})
+
+const props = defineProps<{
+  index: number
+  type: UI_T_NetworkType
+  networksTable: UI_I_NetworkTableItem[]
+  errorValidationFields: UI_I_ErrorValidationField[]
+  state?: string | number
+  isRemovable: boolean
+  label: string
+  errorText: string
+  typeError: string
+  locationOptions: UI_I_OptionItem[]
+  isRunning: boolean
+  locationModalIsShow: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'remove'): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'change-location', value: UI_I_HTMLSelectElement): void
+  (event: 'hide-location-modal'): void
+  (event: 'select-location'): void
+}>()
+
+</script>
+
+<style scoped lang="scss">
+#network-connect {
+  margin-right: 4px;
+}
+</style>

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

@@ -1,71 +1,44 @@
 <template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.adapterType }}
-      </template>
-      <template #stackBlockContent>
-        <atoms-tooltip-error
-          :has-error="!!apiError"
-          :selector="`.vm-wizard-network-model-field-${props.index}`"
-          @remove="onRemoveValidationError"
-        >
-          <template #elem>
-            <div class="select">
-              <select
-                :id="`vm-wizard-network-model-field-${props.index}`"
-                v-model="adapterTypeLocal"
-                :data-id="`vm-wizard-network-model-field-${props.index}`"
-                :class="`vm-wizard-network-model-field-${props.index}`"
-                :disabled="props.disabled"
-              >
-                <option
-                  v-for="(item, key) in adapterTypeOptions"
-                  :key="key"
-                  :value="item.value"
-                  :disabled="item.disabled"
-                >
-                  {{ item.text }}
-                </option>
-              </select>
-            </div>
-          </template>
-          <template #content>{{ apiError }}</template>
-        </atoms-tooltip-error>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <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_Localization } from '~/lib/models/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 localization = computed<UI_I_Localization>(() => useLocal())
+const adapterType = defineModel<string>('adapter-type')
 
 const props = defineProps<{
-  adapterType: string
   index: number
   disabled: boolean
   errorValidationFields: UI_I_ErrorValidationField[]
 }>()
 const emits = defineEmits<{
-  (event: 'update:adapter-type', value: string): void
   (event: 'remove-error-by-title', value: string): void
 }>()
 
-const adapterTypeOptions = ref<UI_I_OptionItem[]>(adapterTypeOptionsConfig)
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
-const adapterTypeLocal = computed<string>({
-  get() {
-    return props.adapterType
-  },
-  set(newValue) {
-    emits('update:adapter-type', newValue)
-  },
-})
+const adapterTypeOptions = ref<UI_I_OptionItem[]>(adapterTypeOptionsConfig)
 
 const typeError = computed<string>(
   () => `network_devices[${props.index}].model`

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

@@ -0,0 +1,49 @@
+<template>
+    <ui-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.adapterType }}
+      </template>
+      <template #stackBlockContent>
+        <ui-select
+          :id="`vm-wizard-network-model-field-${props.index}`"
+          v-model="adapterType"
+          width="auto"
+          :items="props.adapterTypeOptions"
+          :disabled="props.disabled"
+          :test-id="`vm-wizard-network-model-field-${props.index}`"
+          :class="`vm-wizard-network-model-field-${props.index} adapter-type-select`"
+          :error-text="props.errorText"
+          @click.stop
+        />
+      </template>
+    </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const adapterType = defineModel<string>('adapter-type')
+
+const props = defineProps<{
+  index: number
+  disabled: boolean
+  errorText: string
+  adapterTypeOptions: UI_I_OptionItem[]
+}>()
+// const emits = defineEmits<{
+//   (event: 'remove-error'): void
+// }>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style scoped>
+:deep(.adapter-type-select .ui-main-select-toggle) {
+  display: flex;
+  justify-content: space-between;
+  width: 196px;
+  background-color: #ffffff;
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.adapterType }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!props.errorText"
+          :selector="`.vm-wizard-network-model-field-${props.index}`"
+          @remove="emits('remove-error')"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                :id="`vm-wizard-network-model-field-${props.index}`"
+                v-model="adapterType"
+                :data-id="`vm-wizard-network-model-field-${props.index}`"
+                :class="`vm-wizard-network-model-field-${props.index}`"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in props.adapterTypeOptions"
+                  :key="key"
+                  :value="item.value"
+                  :disabled="item.disabled"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>{{ props.errorText }}</template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const adapterType = defineModel<string>('adapter-type')
+
+const props = defineProps<{
+  index: number
+  disabled: boolean
+  errorText: string
+  adapterTypeOptions: UI_I_OptionItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove-error'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/MacAddress.vue

@@ -1,114 +1,89 @@
 <template>
-  <div>
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.macAddress }}
-      </template>
-      <template #stackBlockContent>
-        <div class="flex-align-center">
-          <atoms-tooltip-error
-            :has-error="!!macAddressLocalAndApiErrorsTexts"
-            :selector="`.vm-wizard-network-mac-address-field-${props.index}`"
-            @remove="onRemoveValidationError"
-          >
-            <template #elem>
-              <input
-                :id="`vm-wizard-network-mac-address-field-${props.index}`"
-                type="text"
-                :value="props.macAddress"
-                :data-id="`vm-wizard-network-mac-address-field-${props.index}`"
-                :disabled="
-                  props.macAddressType === 'automatic' || props.disabled
-                "
-                :class="[
-                  `vm-wizard-network-mac-address-field-${props.index}`,
-                  { 'has-error': macAddressLocalErrorText },
-                ]"
-                @input="onChangeMacAddress"
-              />
-            </template>
-            <template #content>
-              {{ macAddressLocalAndApiErrorsTexts }}
-            </template>
-          </atoms-tooltip-error>
-
-          <div class="select">
-            <select
-              :id="`mac-address-select-${props.index}`"
-              :value="props.macAddressType"
-              :data-id="`mac-address-select-${props.index}`"
-              :disabled="props.disabled"
-              @change="onChangeMacAddressType"
-            >
-              <option
-                v-for="(item, key) in macAddressOptions"
-                :key="key"
-                :value="item.value"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-mac-address-new
+    v-if="isNewView"
+    v-model:mac-address="macAddress"
+    v-model:mac-address-type="macAddressType"
+    :index="index"
+    :disabled="disabled"
+    :error-text="macAddressLocalAndApiErrorsTexts"
+    :mac-address-local-error-text="macAddressLocalErrorText"
+    :mac-address-options="macAddressOptions"
+    @remove-error="onRemoveValidationError"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-mac-address-old
+    v-else
+    v-model:mac-address="macAddress"
+    v-model:mac-address-type="macAddressType"
+    :index="index"
+    :disabled="disabled"
+    :error-text="macAddressLocalAndApiErrorsTexts"
+    :mac-address-local-error-text="macAddressLocalErrorText"
+    :mac-address-options="macAddressOptions"
+    @remove-error="onRemoveValidationError"
+  />
 </template>
 
 <script setup lang="ts">
 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_ErrorValidationField } from '~/lib/models/store/interfaces'
 import { macAddressOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/lib/config/options'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const macAddress = defineModel<string>('mac-address', { required: true })
+const macAddressType = defineModel<string>('mac-address-type', {
+  required: true,
+})
 
 const props = defineProps<{
-  macAddressType: string
-  macAddress: string
   index: number
   disabled: boolean
   errorValidationFields: UI_I_ErrorValidationField[]
 }>()
 const emits = defineEmits<{
-  (event: 'update:mac-address', value: string): void
-  (event: 'update:mac-address-type', value: string): void
   (event: 'invalid', value: boolean): void
   (event: 'remove-error-by-title', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const macAddressOptions = ref<UI_I_OptionItem[]>(
   macAddressOptionsFunc(localization.value)
 )
 
-const onChangeMacAddressType = (event: UI_I_HTMLSelectElement): void => {
-  emits('update:mac-address-type', event.target.value)
-  emits(
-    'update:mac-address',
-    event.target.value === 'manual' ? '00:50:56:' : ''
-  )
-}
-const onChangeMacAddress = (event: Event): void => {
-  const target = event.target as HTMLInputElement
-  emits('update:mac-address', target.value)
-}
+watch(macAddressType, (newValue) => {
+  macAddress.value = newValue === 'manual' ? '00:50:56:' : ''
+})
+// const onChangeMacAddressType = (): void => {
+//   // emits('update:mac-address-type', event.target.value)
+//
+//   // emits(
+//   //   'update:mac-address',
+//   //   event.target.value === 'manual' ? '00:50:56:' : ''
+//   // )
+// }
+// const onChangeMacAddress = (event: Event): void => {
+//   const target = event.target as HTMLInputElement
+//   emits('update:mac-address', target.value)
+// }
 
 const macAddressLocalErrorText = computed<string>(() => {
   /* eslint-disable no-useless-escape */
   const isValidMacAddress =
     /^[0-9a-f]{1,2}([\.:-])(?:[0-9a-f]{1,2}\1){4}[0-9a-f]{1,2}$/.test(
-      props.macAddress
+      macAddress.value
     )
 
-  return props.macAddressType === 'manual' && !isValidMacAddress
+  return macAddressType.value === 'manual' && !isValidMacAddress
     ? localization.value.common.invalidMacAddress
     : ''
 })
-watch(macAddressLocalErrorText, (text) => {
-  emits('invalid', !!text.length)
+watch(macAddressLocalErrorText, (newValue) => {
+  emits('invalid', !!newValue.length)
 })
 
 const typeError = computed<string>(
@@ -141,8 +116,4 @@ const onRemoveValidationError = (): void => {
 }
 </script>
 
-<style scoped lang="scss">
-.has-error {
-  border: 1px solid #db2100;
-}
-</style>
+<style scoped lang="scss"></style>