bfg-common 1.4.393 → 1.4.395

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

@@ -0,0 +1,69 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.macAddress }}
+    </template>
+    <template #stackBlockContent>
+      <div class="mac-address-content">
+        <ui-input-with-tooltip
+          :id="`vm-wizard-network-mac-address-field-${props.index}`"
+          v-model="macAddress"
+          type="text"
+          size="sm"
+          :test-id="`vm-wizard-network-mac-address-field-${props.index}`"
+          :disabled="macAddressType === 'automatic' || props.disabled"
+          :class="`vm-wizard-network-mac-address-field-${props.index}`"
+          :error-text="props.errorText"
+        />
+
+        <ui-select
+          :id="`mac-address-select-${props.index}`"
+          v-model="macAddressType"
+          width="auto"
+          :items="props.macAddressOptions"
+          :disabled="props.disabled"
+          :test-id="`mac-address-select-${props.index}`"
+          :class="`vm-wizard-network-mac-address-type-field-${props.index}`"
+          @click.stop
+        />
+      </div>
+    </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 macAddress = defineModel<string>('mac-address', { required: true })
+const macAddressType = defineModel<string>('mac-address-type', {
+  required: true,
+})
+
+const props = defineProps<{
+  index: number
+  disabled: boolean
+  errorText: string
+  macAddressLocalErrorText: string
+  macAddressOptions: UI_I_OptionItem[]
+}>()
+// const emits = defineEmits<{
+//   (event: 'remove-error'): void
+// }>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.mac-address-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+:deep(.ui-main.ui-main-sm .ui-main-input) {
+  height: 26px;
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    new
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.macAddress }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!props.errorText"
+            :selector="`.vm-wizard-network-mac-address-field-${props.index}`"
+            @remove="emits('remove-error')"
+          >
+            <template #elem>
+              <input
+                :id="`vm-wizard-network-mac-address-field-${props.index}`"
+                v-model="macAddress"
+                type="text"
+                :data-id="`vm-wizard-network-mac-address-field-${props.index}`"
+                :disabled="macAddressType === 'automatic' || props.disabled"
+                :class="[
+                  `vm-wizard-network-mac-address-field-${props.index}`,
+                  { 'has-error': props.macAddressLocalErrorText },
+                ]"
+              />
+            </template>
+            <template #content>
+              {{ props.errorText }}
+            </template>
+          </atoms-tooltip-error>
+
+          <div class="select">
+            <select
+              :id="`mac-address-select-${props.index}`"
+              v-model="macAddressType"
+              :data-id="`mac-address-select-${props.index}`"
+              :disabled="props.disabled"
+            >
+              <option
+                v-for="(item, key) in props.macAddressOptions"
+                :key="key"
+                :value="item.value"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </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 macAddress = defineModel<string>('mac-address', { required: true })
+const macAddressType = defineModel<string>('mac-address-type', {
+  required: true,
+})
+
+const props = defineProps<{
+  index: number
+  disabled: boolean
+  errorText: string
+  macAddressLocalErrorText: string
+  macAddressOptions: UI_I_OptionItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove-error'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.has-error {
+  border: 1px solid #db2100;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIo.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
+import type {
   UI_I_ConfigureAllPciDevicesItem,
   UI_I_ConfigurePciDevicesTable,
 } from '~/lib/models/store/host/interfaces'

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newUsbController/NewUsbController.vue

@@ -1,44 +1,22 @@
 <template>
-  <div class="hardware-usb-controller">
-    <atoms-stack-block :has-children="false" test-id="usb-controller-stack-block">
-      <template #stackBlockKey>
-        <div
-          id="vm-wizard-toggle-block-usb-controller"
-          data-id="vm-wizard-toggle-block-usb-controller"
-          class="flex-align-center"
-        >
-          <span>{{ localization.common.newUsbController }}</span>
-        </div>
-      </template>
-      <template #stackBlockContent>
-        <div v-if="props.isEdit">
-          {{ selectedUsbControllerText }}
-        </div>
-        <div v-else class="select">
-          <select
-            id="usb-controller-select"
-            v-model="selectedUsbController"
-            data-id="usb-controller-select"
-            :disabled="props.isEdit"
-            @click.stop
-          >
-            <option
-              v-for="(item, key) in usbControllerOptions"
-              :key="key"
-              :value="item.value"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-usb-controller-new
+    v-if="isNewView"
+    v-model:selected-usb-controller="selectedUsbController"
+    :is-edit="props.isEdit"
+    :selected-usb-controller-text="selectedUsbControllerText"
+    :usb-controller-options="usbControllerOptions"
+    />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-usb-controller-old
+    v-else
+    v-model:selected-usb-controller="selectedUsbController"
+    :is-edit="props.isEdit"
+    :selected-usb-controller-text="selectedUsbControllerText"
+    :usb-controller-options="usbControllerOptions"
+  />
 </template>
 
 <script setup lang="ts">
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import { usbControllerOptionsConfig } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newUsbController/lib/config/options'
 
 const props = withDefaults(
@@ -55,7 +33,8 @@ const emits = defineEmits<{
   (event: 'send-data', value: string): void
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const usbControllerOptions = ref<UI_I_OptionItem[]>(usbControllerOptionsConfig)
 const selectedUsbController = ref<string>(props.usbController)
@@ -76,7 +55,4 @@ watch(
 </script>
 
 <style scoped lang="scss">
-#network-connect {
-  margin-right: 4px;
-}
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newUsbController/NewUsbControllerNew.vue

@@ -0,0 +1,53 @@
+<template>
+  <ui-stack-block
+    :has-children="true"
+    is-disabled
+    test-id="usb-controller-stack-block"
+  >
+    <template #stackBlockKey>
+      <div
+        id="vm-wizard-toggle-block-usb-controller"
+        data-id="vm-wizard-toggle-block-usb-controller"
+        class="flex-align-center"
+      >
+        <span>{{ localization.common.newUsbController }}</span>
+      </div>
+    </template>
+    <template #stackBlockContent>
+      <div v-if="props.isEdit">
+        {{ props.selectedUsbControllerText }}
+      </div>
+      <ui-select
+        v-else
+        id="usb-controller-select"
+        v-model="selectedUsbController"
+        width="auto"
+        :items="props.usbControllerOptions"
+        :disabled="props.isEdit"
+        test-id="usb-controller-select"
+        @click.stop
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const selectedUsbController = defineModel<string>('selected-usb-controller')
+
+const props = defineProps<{
+  isEdit: boolean
+  selectedUsbControllerText: string
+  usbControllerOptions: UI_I_OptionItem[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+#network-connect {
+  margin-right: 4px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newUsbController/NewUsbControllerOld.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="hardware-usb-controller">
+    <atoms-stack-block
+      :has-children="false"
+      test-id="usb-controller-stack-block"
+    >
+      <template #stackBlockKey>
+        <div
+          id="vm-wizard-toggle-block-usb-controller"
+          data-id="vm-wizard-toggle-block-usb-controller"
+          class="flex-align-center"
+        >
+          <span>{{ localization.common.newUsbController }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div v-if="props.isEdit">
+          {{ props.selectedUsbControllerText }}
+        </div>
+        <div v-else class="select">
+          <select
+            id="usb-controller-select"
+            v-model="selectedUsbController"
+            data-id="usb-controller-select"
+            :disabled="props.isEdit"
+            @click.stop
+          >
+            <option
+              v-for="(item, key) in props.usbControllerOptions"
+              :key="key"
+              :value="item.value"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const selectedUsbController = defineModel<string>('selected-usb-controller')
+
+const props = defineProps<{
+  isEdit: boolean
+  selectedUsbControllerText: string
+  usbControllerOptions: UI_I_OptionItem[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+#network-connect {
+  margin-right: 4px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/Other.vue

@@ -1,32 +1,16 @@
 <template>
-  <div class="hardware-other">
-    <atoms-stack-block :has-children="true" test-id="other-stack-block">
-      <template #stackBlockKey>
-        <div
-          id="vm-wizard-toggle-block-other"
-          data-id="vm-wizard-toggle-block-other"
-        >
-          <span>{{ localization.common.other }}</span>
-        </div>
-      </template>
-      <template #stackBlockContent>
-        <span>{{ localization.common.additionalHardware }}</span>
-      </template>
-      <template #stackChildren>
-        <common-vm-actions-common-customize-hardware-virtual-hardware-other-input-devices />
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-other-new
+    v-if="isNewView"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-other-old
+    v-else
+  />
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
 <style scoped lang="scss">
-#network-connect {
-  margin-right: 4px;
-}
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/OtherNew.vue

@@ -0,0 +1,27 @@
+<template>
+  <ui-stack-block :has-children="true" test-id="other-stack-block">
+    <template #stackBlockKey>
+      <div
+        id="vm-wizard-toggle-block-other"
+        data-id="vm-wizard-toggle-block-other"
+      >
+        <span>{{ localization.common.other }}</span>
+      </div>
+    </template>
+    <template #stackBlockContent>
+      <span>{{ localization.common.additionalHardware }} (2)</span>
+    </template>
+    <template #stackChildren>
+      <common-vm-actions-common-customize-hardware-virtual-hardware-other-input-devices />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/OtherOld.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="hardware-other">
+    <atoms-stack-block :has-children="true" test-id="other-stack-block">
+      <template #stackBlockKey>
+        <div
+          id="vm-wizard-toggle-block-other"
+          data-id="vm-wizard-toggle-block-other"
+        >
+          <span>{{ localization.common.other }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <span>{{ localization.common.additionalHardware }}</span>
+      </template>
+      <template #stackChildren>
+        <common-vm-actions-common-customize-hardware-virtual-hardware-other-input-devices />
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+#network-connect {
+  margin-right: 4px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/inputDevices/InputDevices.vue

@@ -0,0 +1,15 @@
+<template>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-other-input-devices-new
+    v-if="isNewView"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-other-input-devices-old
+    v-else
+  />
+</template>
+
+<script setup lang="ts">
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/inputDevices/InputDevicesNew.vue

@@ -0,0 +1,33 @@
+<template>
+    <ui-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.inputDevices }}
+      </template>
+      <template #stackBlockContent>
+        <div class="input-devices-content">
+          <p>{{ localization.common.keyboard }}</p>
+          <p class="dot-divider"></p>
+          <p>{{ localization.common.pointingDevice }}</p>
+        </div>
+      </template>
+    </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.input-devices-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .dot-divider::before {
+    content: "•";
+    color: var(--modal-subtitle-dot);
+  }
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/inputDevices/InputDevicesOld.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.inputDevices }}
+      </template>
+      <template #stackBlockContent>
+        <p>{{ localization.common.keyboard }}</p>
+        <p>{{ localization.common.pointingDevice }}</p>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/reservation/Reservation.vue

@@ -1,69 +1,30 @@
 <template>
-  <div>
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.reservation }}
-      </template>
-      <template #stackBlockContent>
-        <div class="flex-align-center">
-          <div class="tooltip-top-left combobox-container flex-align-center">
-            <atoms-tooltip-error
-              :has-error="!!reservationLocalAndApiErrorsTexts"
-              :selector="`#vm-wizard-${props.componentType}-reservation input`"
-              @remove="onRemoveValidationError"
-            >
-              <template #elem>
-                <atoms-combobox
-                  :id="`vm-wizard-${props.componentType}-reservation`"
-                  v-model="reservationLocal"
-                  :items="reservationOptions"
-                  :disabled="props.disabled"
-                  :test-id="`vm-wizard-${props.componentType}-reservation`"
-                  @click.stop
-                  @select="onSelectReservation"
-                />
-              </template>
-              <template #content>{{
-                reservationLocalAndApiErrorsTexts
-              }}</template>
-            </atoms-tooltip-error>
-          </div>
-          <div class="select">
-            <select
-              v-model="reservationTypeLocal"
-              :disabled="props.disabled"
-              :data-id="`reserve-type-select-${props.componentType}`"
-            >
-              <option
-                v-for="(item, key) in reservationTypeOptions"
-                :key="key"
-                :value="item.value"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </div>
-        </div>
-        <div
-          v-if="props.reserveGuestMemory !== undefined"
-          class="flex-align-center"
-        >
-          <input
-            id="reserve-guest-memory"
-            :value="props.reserveGuestMemory"
-            :data-id="`reserve-guest-memory-checkbox-${props.componentType}`"
-            type="checkbox"
-            disabled
-          />
-          <label
-            for="reserve-guest-memory"
-            :class="['label-text-normal all-memory', { 'div-disabled': true }]"
-            >{{ localization.common.reserveGuestMemory }}</label
-          >
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-reservation-new
+    v-if="isNewView"
+    v-model:reservation="reservationLocal"
+    v-model:reservation-type="reservationTypeLocal"
+    :component-type="props.componentType"
+    :error-description="reservationLocalAndApiErrorsTexts"
+    :reservation-options="reservationOptions"
+    :reservation-type-options="reservationTypeOptions"
+    :disabled="props.disabled"
+    :reserve-guest-memory="props.reserveGuestMemory"
+    @remove-validation-error="onRemoveValidationError"
+    @select-reservation="onSelectReservation"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-reservation-old
+    v-else
+    v-model:reservation="reservationLocal"
+    v-model:reservation-type="reservationTypeLocal"
+    :component-type="props.componentType"
+    :error-description="reservationLocalAndApiErrorsTexts"
+    :reservation-options="reservationOptions"
+    :reservation-type-options="reservationTypeOptions"
+    :disabled="props.disabled"
+    :reserve-guest-memory="props.reserveGuestMemory"
+    @remove-validation-error="onRemoveValidationError"
+    @select-reservation="onSelectReservation"
+  />
 </template>
 
 <script setup lang="ts">
@@ -75,8 +36,6 @@ import {
   reservationTypeOptionsFunc,
 } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/reservation/lib/config/options'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
 const props = withDefaults(
   defineProps<{
     reservation: string
@@ -100,7 +59,10 @@ const emits = defineEmits<{
   (event: 'remove-error-by-title', value: string): void
 }>()
 
-const { $binary } = useNuxtApp()
+const { $store, $binary }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
 
 const binaryKeys: [string, string] =
   props.type === 'mb' ? ['mb', 'gb'] : ['mhz', 'ghz']
@@ -231,7 +193,4 @@ const onRemoveValidationError = (): void => {
 </script>
 
 <style scoped>
-.all-memory {
-  margin-left: 7px;
-}
 </style>