bfg-common 1.4.393 → 1.4.395

package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/model/ModelOld.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.videoCardModel }}
+      </template>
+      <template #stackBlockContent>
+        <div class="select">
+          <select
+            id="vm-wizard-video-card-adapter-field"
+            v-model="videoCardModel"
+            data-id="vm-wizard-video-card-adapter-field-select"
+            :disabled="props.disabled"
+          >
+            <option
+              v-for="(item, key) in props.videoCardModelOptions"
+              :key="key"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </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 videoCardModel = defineModel<string>('video-card-model')
+
+const props = defineProps<{
+  disabled: boolean
+  videoCardModelOptions: UI_I_OptionItem[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/numberDisplays/NumberDisplays.vue

@@ -1,71 +1,45 @@
 <template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.numberDisplays }}
-      </template>
-      <template #stackBlockContent>
-        <atoms-tooltip-error
-          :has-error="!!apiError"
-          selector="#vm-wizard-video-card-display-field"
-          @remove="onRemoveValidationError"
-        >
-          <template #elem>
-            <div class="select">
-              <select
-                id="vm-wizard-video-card-display-field"
-                v-model="numberDisplaysLocal"
-                data-id="vm-wizard-video-card-display-field-select"
-                :disabled="disabled"
-              >
-                <option
-                  v-for="(item, key) in numberDisplaysOptions"
-                  :key="key"
-                  :value="item.value"
-                >
-                  {{ 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-video-card-number-displays-new
+    v-if="isNewView"
+    v-model:number-displays="numberDisplays"
+    :disabled="props.disabled"
+    :error-text="apiError"
+    :number-displays-options="numberDisplaysOptions"
+    @remove-error="onRemoveValidationError"
+    />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-video-card-number-displays-old
+    v-else
+    v-model:number-displays="numberDisplays"
+    :disabled="props.disabled"
+    :error-text="apiError"
+    :number-displays-options="numberDisplaysOptions"
+    @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 { numberDisplaysOptionsConfig } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/numberDisplays/lib/config/options'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const numberDisplays = defineModel<string>('number-displays', {required: true})
 
 const props = defineProps<{
-  numberDisplays: string
   disabled: boolean
   errorValidationFields: UI_I_ErrorValidationField[]
 }>()
+
 const emits = defineEmits<{
-  (event: 'update:number-displays', value: string): void
   (event: 'remove-error-by-title', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const numberDisplaysOptions = ref<UI_I_OptionItem[]>(
   numberDisplaysOptionsConfig
 )
 
-const numberDisplaysLocal = computed<string>({
-  get() {
-    return props.numberDisplays
-  },
-  set(newValue) {
-    emits('update:number-displays', newValue)
-  },
-})
-
 const typeError = 'video_card.displays'
 
 const apiError = computed<string>(() => {

package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/numberDisplays/NumberDisplaysNew.vue

@@ -0,0 +1,45 @@
+<template>
+    <ui-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.numberDisplays }}
+      </template>
+      <template #stackBlockContent>
+        <ui-select
+          id="vm-wizard-video-card-display-field"
+          v-model="numberDisplays"
+          width="auto"
+          :items="props.numberDisplaysOptions"
+          :disabled="props.disabled"
+          test-id="vm-wizard-video-card-display-field-select"
+          :error-text="props.errorText"
+          class="number-displays-select"
+          @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 numberDisplays = defineModel<string>('number-displays', {required: true})
+
+const props = defineProps<{
+  disabled: boolean
+  errorText: string
+  numberDisplaysOptions: UI_I_OptionItem[]
+}>()
+// const emits = defineEmits<{
+//   (event: 'remove-error'): void
+// }>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped>
+:deep(.number-displays-select .ui-main-select-toggle) {
+  background-color: #ffffff;
+  width: 108px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/numberDisplays/NumberDisplaysOld.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.numberDisplays }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!props.errorText"
+          selector="#vm-wizard-video-card-display-field"
+          @remove="emits('remove-error')"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                id="vm-wizard-video-card-display-field"
+                v-model="numberDisplays"
+                data-id="vm-wizard-video-card-display-field-select"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in props.numberDisplaysOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ 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 numberDisplays = defineModel<string>('number-displays', {required: true})
+
+const props = defineProps<{
+  disabled: boolean
+  errorText: string
+  numberDisplaysOptions: 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/videoCard/totalVideoMemory/TotalVideoMemory.vue

@@ -0,0 +1,105 @@
+<template>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-video-card-total-video-memory-new
+    v-if="isNewView"
+    v-model:total-video-memory="totalVideoMemoryLocal"
+    :disabled="props.disabled"
+    :error-text="totalVideoMemoryLocalAndApiErrorsTexts"
+    :total-video-memory-local-error-text="totalVideoMemoryLocalErrorText"
+    @remove-error="onRemoveValidationError"
+    />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-video-card-total-video-memory-new
+    v-else
+    v-model:total-video-memory="totalVideoMemoryLocal"
+    :disabled="props.disabled"
+    :error-text="totalVideoMemoryLocalAndApiErrorsTexts"
+    :total-video-memory-local-error-text="totalVideoMemoryLocalErrorText"
+    @remove-error="onRemoveValidationError"
+    />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+
+const props = defineProps<{
+  totalVideoMemory: number
+  disabled: boolean
+  isEdit: boolean
+  errorValidationFields: UI_I_ErrorValidationField[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:total-video-memory', value: number): 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 totalVideoMemoryLocal = computed<number>({
+  get() {
+    return props.totalVideoMemory
+  },
+  set(newValue) {
+    // нужно для правильного отображения
+    const totalVideoMemoryInput = document.getElementById(
+      'vm-wizard-video-card-memory-field'
+    ) as HTMLInputElement
+    totalVideoMemoryInput &&
+      (totalVideoMemoryInput.value = '' + Math.floor(newValue))
+    emits('update:total-video-memory', Math.floor(newValue))
+  },
+})
+
+const totalVideoMemoryMin = 8
+const totalVideoMemoryMax = 128
+const totalVideoMemoryLocalErrorText = computed<string>(() => {
+  const outOfRange =
+    !props.totalVideoMemory ||
+    props.totalVideoMemory < totalVideoMemoryMin ||
+    props.totalVideoMemory > totalVideoMemoryMax
+  if (outOfRange) {
+    return localization.value.common.totalVideoMemoryMustBetween
+      .replace('{0}', `${totalVideoMemoryMin} ${localization.value.common.mb}`)
+      .replace('{1}', `${totalVideoMemoryMax} ${localization.value.common.mb}`)
+  }
+  return ''
+})
+watch(totalVideoMemoryLocalErrorText, (newValue: string) => {
+  emits('invalid', !!newValue.length)
+})
+
+const typeError = 'video_card.memory_mb'
+
+const apiErrorLocal = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find((message) => message.field === typeError)
+      ?.error_message || ''
+  )
+})
+
+const totalVideoMemoryLocalAndApiErrorsTexts = computed<string>(() => {
+  const localError = totalVideoMemoryLocalErrorText.value
+  const apiError = apiErrorLocal.value
+
+  let result = ''
+  if (localError && !apiError) result = localError
+  if (apiError && !localError) result = apiError
+  if (localError && apiError) result = localError + ', ' + apiError
+  if (!localError && apiError) result = apiError
+
+  return result
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError)
+}
+</script>
+
+<style scoped lang="scss">
+.has-error {
+  border: 1px solid #db2100;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/totalVideoMemory/TotalVideoMemoryNew.vue

@@ -0,0 +1,54 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.totalVideoMemory }}
+    </template>
+    <template #stackBlockContent>
+      <div class="total-video-memory-content flex-align-center">
+        <div v-show="props.disabled">
+          {{ localization.common.automatic }}
+        </div>
+        <div v-show="!props.disabled">
+          <ui-input-with-tooltip
+            id="vm-wizard-video-card-memory-field"
+            v-model="totalVideoMemory"
+            test-id="vm-wizard-video-card-memory-input"
+            type="text"
+            size="sm"
+            :error-text="props.errorText"
+          />
+        </div>
+        <span class="unit-text">{{ localization.common.mb }}</span>
+      </div>
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const totalVideoMemory = defineModel<number>('total-video-memory', {
+  required: true,
+})
+
+const props = defineProps<{
+  disabled: boolean
+  errorText: string
+  totalVideoMemoryLocalErrorText: string
+}>()
+// const emits = defineEmits<{
+//   (event: 'remove-error'): void
+// }>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.unit-text {
+  margin-left: 10px;
+}
+
+:deep(.ui-main.ui-main-sm .ui-main-input) {
+  height: 26px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/totalVideoMemory/TotalVideoMemoryOld.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.totalVideoMemory }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!props.errorText"
+            selector="#vm-wizard-video-card-memory-field"
+            @remove="emits('remove-error')"
+          >
+            <template #elem>
+              <div v-show="props.disabled">
+                {{ localization.common.automatic }}
+              </div>
+              <div v-show="!props.disabled" class="flex-align-center">
+                <input
+                  id="vm-wizard-video-card-memory-field"
+                  v-model="totalVideoMemory"
+                  data-id="vm-wizard-video-card-memory-input"
+                  type="text"
+                  :class="[{ 'has-error': props.totalVideoMemoryLocalErrorText }]"
+                />
+              </div>
+            </template>
+            <template #content>
+              {{ props.errorText }}
+            </template>
+          </atoms-tooltip-error>
+          <span>{{ localization.common.mb }}</span>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const totalVideoMemory = defineModel<number>('total-video-memory', {required: true})
+
+const props = defineProps<{
+  disabled: boolean
+  errorText: string
+  totalVideoMemoryLocalErrorText: string
+}>()
+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/vmoptions/Vmoptions.vue

@@ -1,43 +1,46 @@
 <template>
-  <div class="vm-options">
-    <div class="clr-component">
-      <div class="stack-view">
-        <common-vm-actions-common-customize-hardware-vmoptions-general-options
-          v-model:vm-name="vmNameLocal"
-          v-model:guest-machine-type="guestMachineTypeLocal"
-          v-model:guest-os-family="guestOsFamilyLocal"
-          v-model:guest-os-version="guestOsVersionLocal"
-          :is-edit="props.isEdit"
-          :is-clone="props.isClone"
-          :state="props.state"
-        />
-        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options
-          :error-validation-fields="props.errorValidationFields"
-          :remote-console-options="props.options?.remote_console"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          @send-data="sendDataRemoteConsoleOptionsMethod"
-          @invalid="remoteConsoleOptionsInvalid = $event"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-        <common-vm-actions-common-customize-hardware-vmoptions-tools
-          :tools="props.options?.guest_tools?.enabled"
-          @send-data="sendDataToolsMethod"
-        />
-        <common-vm-actions-common-customize-hardware-vmoptions-boot-options
-          :error-validation-fields="props.errorValidationFields"
-          :hard-disks="props.hardDisks"
-          :cd-dvd-drives="props.cdDvdDrives"
-          :networks="props.networks"
-          :boot-options="props.options?.boot_options"
-          :is-edit="props.isEdit"
-          @change-boot-order="changeBootOrder"
-          @send-data="sendDataBootOptionsMethod"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-      </div>
-    </div>
-  </div>
+  <common-vm-actions-common-customize-hardware-vmoptions-new
+    v-if="isNewView"
+    v-model:vm-name="vmName"
+    v-model:guest-machine-type="guestMachineType"
+    v-model:guest-os-family="guestOsFamily"
+    v-model:guest-os-version="guestOsVersion"
+    v-model:remote-console-options-invalid="remoteConsoleOptionsInvalid"
+    :hard-disks="props.hardDisks"
+    :cd-dvd-drives="props.cdDvdDrives"
+    :networks="props.networks"
+    :is-edit="props.isEdit"
+    :is-clone="props.isClone"
+    :error-validation-fields="props.errorValidationFields"
+    :options="props.options"
+    :state="props.state"
+    @change-boot-order="emits('change-boot-order', $event)"
+    @send-data-remote-console-options="sendDataRemoteConsoleOptionsMethod"
+    @send-data-tools="sendDataToolsMethod"
+    @send-data-boot-options="sendDataBootOptionsMethod"
+    @remove-error-by-title="emits('remove-error-by-title', $event)"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-old
+    v-else
+    v-model:vm-name="vmName"
+    v-model:guest-machine-type="guestMachineType"
+    v-model:guest-os-family="guestOsFamily"
+    v-model:guest-os-version="guestOsVersion"
+    v-model:remote-console-options-invalid="remoteConsoleOptionsInvalid"
+    :hard-disks="props.hardDisks"
+    :cd-dvd-drives="props.cdDvdDrives"
+    :networks="props.networks"
+    :is-edit="props.isEdit"
+    :is-clone="props.isClone"
+    :error-validation-fields="props.errorValidationFields"
+    :options="props.options"
+    :state="props.state"
+    @change-boot-order="emits('change-boot-order', $event)"
+    @send-data-remote-console-options="sendDataRemoteConsoleOptionsMethod"
+    @send-data-tools="sendDataToolsMethod"
+    @send-data-boot-options="sendDataBootOptionsMethod"
+    @remove-error-by-title="emits('remove-error-by-title', $event)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -54,14 +57,21 @@ import type {
 } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
+
+const vmName = defineModel<string>('vm-name', { required: true })
+const guestMachineType = defineModel<string>('guest-machine-type', {
+  required: true,
+})
+const guestOsFamily = defineModel<string>('guest-os-family', { required: true })
+const guestOsVersion = defineModel<string>('guest-os-version', {
+  required: true,
+})
+const remoteConsoleOptionsInvalid = defineModel<boolean>(
+  'remote-console-options-invalid',
+  { required: true }
+)
 
 const props = defineProps<{
-  vmName: string
-  guestMachineType: UI_I_OptionItem | null
-  guestOsFamily: UI_I_OptionItem | null
-  guestOsVersion: UI_I_OptionItem | null
   hardDisks: UI_I_SendDataNewHardDisk[] | null
   cdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
   networks: UI_I_SendDataNewNetwork[] | null
@@ -82,45 +92,11 @@ const emits = defineEmits<{
   ): void
   (event: 'send-data', value: UI_I_SendDataVmoptions): void
   (event: 'invalid', value: string[]): void
-  (event: 'update:vm-name', value: string): void
-  (event: 'update:guest-machine-type', value: UI_I_OptionItem | null): void
-  (event: 'update:guest-os-family', value: UI_I_OptionItem | null): void
-  (event: 'update:guest-os-version', value: UI_I_OptionItem | null): void
   (event: 'remove-error-by-title', value: string): void
 }>()
 
-const vmNameLocal = computed<string>({
-  get() {
-    return props.vmName
-  },
-  set(newValue) {
-    emits('update:vm-name', newValue)
-  },
-})
-const guestMachineTypeLocal = computed<UI_I_OptionItem | null>({
-  get() {
-    return props.guestMachineType
-  },
-  set(newValue) {
-    emits('update:guest-machine-type', newValue)
-  },
-})
-const guestOsFamilyLocal = computed<UI_I_OptionItem | null>({
-  get() {
-    return props.guestOsFamily
-  },
-  set(newValue) {
-    emits('update:guest-os-family', newValue)
-  },
-})
-const guestOsVersionLocal = computed<UI_I_OptionItem | null>({
-  get() {
-    return props.guestOsVersion
-  },
-  set(newValue) {
-    emits('update:guest-os-version', newValue)
-  },
-})
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -145,10 +121,6 @@ const sendDataBootOptionsMethod = (data: UI_I_SendDataBootOptions): void => {
   sendData()
 }
 
-const changeBootOrder = (data: UI_T_ChangeBootOrder): void => {
-  emits('change-boot-order', data)
-}
-
 const sendData = (): void => {
   emits('send-data', {
     remote_console: sendDataRemoteConsoleOptions.value,
@@ -157,8 +129,6 @@ const sendData = (): void => {
   })
 }
 
-const remoteConsoleOptionsInvalid = ref<boolean>(false)
-
 watch(
   remoteConsoleOptionsInvalid,
   (newValue) => {
@@ -172,10 +142,4 @@ watch(
 </script>
 
 <style scoped lang="scss">
-.clr-component {
-  padding-top: 36px;
-}
-.stack-view {
-  background-color: var(--block-view-bg-color);
-}
 </style>