bfg-common 1.4.393 → 1.4.395

package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptions.vue

@@ -1,187 +1,72 @@
 <template>
-  <div class="general-options">
-    <atoms-stack-block
-      :has-children="true"
-      test-id="general-options-stack-block"
-      @toggle="blockIsOpen = $event"
-    >
-      <template #stackBlockKey>
-        <div
-          id="vm-wizard-toggle-block-general-options"
-          data-id="vm-wizard-toggle-block-general-options"
-          class="flex-align-center"
-        >
-          <span>{{ localization.common.generalOptions }}</span>
-        </div>
-      </template>
-      <template #stackBlockContent>
-        <div v-show="!blockIsOpen">
-          {{ localization.common.vmName }}: {{ vmNameLocal }}
-        </div>
-      </template>
-      <template #stackChildren>
-        <atoms-stack-block :has-children="false">
-          <template #stackBlockKey>
-            {{ localization.common.vmName }}
-          </template>
-          <template #stackBlockContent>
-            <span>{{ vmNameLocal }}</span>
-            <!--            <span v-if="!props.isEdit">{{ vmNameLocal }}</span>-->
-            <!--            <input-->
-            <!--              v-else-->
-            <!--              id="general-option-vm-name"-->
-            <!--              v-models="vmNameLocal"-->
-            <!--              type="text"-->
-            <!--            />-->
-          </template>
-        </atoms-stack-block>
-
-        <atoms-stack-block :has-children="false">
-          <template #stackBlockKey>
-            {{ localization.common.machineType }}
-          </template>
-          <template #stackBlockContent>
-            <select
-              v-if="props.guestMachineType"
-              id="guest-machine-type-select"
-              v-model="guestMachineTypeLocal"
-              :disabled="isDisabled"
-              data-id="guest-machine-type-select"
-            >
-              <option
-                v-for="item in machineTypeOptions"
-                :key="item.value"
-                :value="item"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </template>
-        </atoms-stack-block>
-
-        <atoms-stack-block :has-children="false">
-          <template #stackBlockKey>
-            {{ localization.common.guestOsFamily }}
-          </template>
-          <template #stackBlockContent>
-            <select
-              v-if="props.guestOsFamily"
-              id="guest-os-family-select"
-              v-model="guestOsFamilyLocal"
-              data-id="guest-os-family-select"
-              :disabled="isDisabled"
-              @change="onChangeOS"
-            >
-              <option v-for="item in osOptions" :key="item.value" :value="item">
-                {{ item.text }}
-              </option>
-            </select>
-          </template>
-        </atoms-stack-block>
-
-        <atoms-stack-block :has-children="false">
-          <template #stackBlockKey>
-            {{ localization.common.guestOsVersion }}
-          </template>
-          <template #stackBlockContent>
-            <select
-              v-if="props.guestOsVersion"
-              id="guest-os-version-select"
-              v-model="guestOsVersionLocal"
-              data-id="guest-os-version-select"
-              :disabled="isDisabled"
-            >
-              <option
-                v-for="item in versionsOptions"
-                :key="item.value"
-                :value="item"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </template>
-        </atoms-stack-block>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-vmoptions-general-options-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:block-is-open="blockIsOpen"
+    :is-disabled="isDisabled"
+    :machine-type-options="machineTypeOptions"
+    :os-options="osOptions"
+    :versions-options="versionsOptions"
+    @change-os="onChangeOS"
+    />
+  <common-vm-actions-common-customize-hardware-vmoptions-general-options-new
+    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:block-is-open="blockIsOpen"
+    :is-disabled="isDisabled"
+    :machine-type-options="machineTypeOptions"
+    :os-options="osOptions"
+    :versions-options="versionsOptions"
+    @change-os="onChangeOS"
+    />
 </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'
 import { capabilities } from '~/components/common/vm/actions/common/lib/config/capabilities'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+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 props = defineProps<{
-  vmName: string
-  guestMachineType: UI_I_OptionItem | null
-  guestOsFamily: UI_I_OptionItem | null
-  guestOsVersion: UI_I_OptionItem | null
   isEdit: boolean
   isClone: boolean
   state?: string | number
 }>()
-const emits = defineEmits<{
-  (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
-}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 
 const isDisabled = computed<boolean>(
   () => (!props.isEdit && !props.isClone) || (props.isEdit && props.state !== 1)
 )
-
-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 machineTypeOptions = ref<UI_I_OptionItem[]>(capabilities.machineTypes)
 
-const guestOsFamilyLocal = computed<UI_I_OptionItem | null>({
-  get() {
-    return props.guestOsFamily
-  },
-  set(newValue) {
-    emits('update:guest-os-family', newValue)
-  },
-})
 const osOptions = ref<UI_I_OptionItem[]>(capabilities.guestOsFamilies)
 const onChangeOS = (): void => {
-  guestOsVersionLocal.value = versionsOptions.value[0]
+  guestOsVersion.value = versionsOptions.value[0]
 }
 
-const guestOsVersionLocal = computed<UI_I_OptionItem | null>({
-  get() {
-    return props.guestOsVersion
-  },
-  set(newValue) {
-    emits('update:guest-os-version', newValue)
-  },
-})
 const versionsOptions = computed<UI_I_OptionItem[]>(() => {
-  if (!guestOsFamilyLocal.value) return []
+  if (!guestOsFamily.value) return []
 
-  return capabilities.guestOsVersions[guestOsFamilyLocal.value.value] || []
+  return capabilities.guestOsVersions[guestOsFamily.value.value] || []
 })
 watch(
   versionsOptions,
   () => {
-    guestOsVersionLocal.value = versionsOptions.value[0]
+    guestOsVersion.value = versionsOptions.value[0]
   }
   // { immediate: true }
 )

package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptionsNew.vue

@@ -0,0 +1,141 @@
+<template>
+  <ui-stack-block
+    :has-children="true"
+    test-id="general-options-stack-block"
+    @toggle="blockIsOpen = $event"
+  >
+    <template #stackBlockKey>
+      <div
+        id="vm-wizard-toggle-block-general-options"
+        data-id="vm-wizard-toggle-block-general-options"
+        class="flex-align-center"
+      >
+        <span>{{ localization.common.generalOptions }}</span>
+      </div>
+    </template>
+    <template #stackBlockContent>
+      <div v-show="!blockIsOpen" class="vm-name-wrap">
+        <span class="vsphere-icon-vm"></span>
+        <span>{{ vmName }}</span>
+      </div>
+    </template>
+    <template #stackChildren>
+      <ui-stack-block :has-children="false">
+        <template #stackBlockKey>
+          {{ localization.common.vmName }}
+        </template>
+        <template #stackBlockContent>
+          <span>{{ vmName }}</span>
+          <!--            <span v-if="!props.isEdit">{{ vmName }}</span>-->
+          <!--            <input-->
+          <!--              v-else-->
+          <!--              id="general-option-vm-name"-->
+          <!--              v-models="vmName"-->
+          <!--              type="text"-->
+          <!--            />-->
+        </template>
+      </ui-stack-block>
+
+      <ui-stack-block :has-children="false">
+        <template #stackBlockKey>
+          {{ localization.common.machineType }}
+        </template>
+        <template #stackBlockContent>
+          <ui-select
+            v-if="guestMachineType"
+            id="guest-machine-type-select"
+            v-model="guestMachineType"
+            width="auto"
+            :items="props.machineTypeOptions"
+            :disabled="props.isDisabled"
+            test-id="guest-machine-type-select"
+            class="guest-machine-type-select"
+            @click.stop
+          />
+        </template>
+      </ui-stack-block>
+
+      <ui-stack-block :has-children="false">
+        <template #stackBlockKey>
+          {{ localization.common.guestOsFamily }}
+        </template>
+        <template #stackBlockContent>
+          <ui-select
+            v-if="guestOsFamily"
+            id="guest-os-family-select"
+            v-model="guestOsFamily"
+            width="auto"
+            :items="props.osOptions"
+            :disabled="props.isDisabled"
+            test-id="guest-os-family-select"
+            class="guest-os-family-select"
+            @change="emits('change-os')"
+            @click.stop
+          />
+        </template>
+      </ui-stack-block>
+
+      <ui-stack-block :has-children="false">
+        <template #stackBlockKey>
+          {{ localization.common.guestOsVersion }}
+        </template>
+        <template #stackBlockContent>
+          <ui-select
+            v-if="guestOsVersion"
+            id="guest-os-version-select"
+            v-model="guestOsVersion"
+            width="auto"
+            :items="props.versionsOptions"
+            :disabled="props.isDisabled"
+            test-id="guest-os-version-select"
+            class="guest-os-version-select"
+            @click.stop
+          />
+        </template>
+      </ui-stack-block>
+    </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 blockIsOpen = defineModel<boolean>('block-is-open', { required: true })
+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 props = defineProps<{
+  isDisabled: boolean
+  machineTypeOptions: UI_I_OptionItem[]
+  osOptions: UI_I_OptionItem[]
+  versionsOptions: UI_I_OptionItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'change-os'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.vm-name-wrap {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+:deep(.guest-os-family-select .ui-main-select-toggle),
+:deep(.guest-machine-type-select .ui-main-select-toggle) {
+  width: 108px;
+}
+:deep(.guest-os-version-select .ui-main-select-toggle) {
+  width: 196px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptionsOld.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="general-options">
+    <atoms-stack-block
+      :has-children="true"
+      test-id="general-options-stack-block"
+      @toggle="blockIsOpen = $event"
+    >
+      <template #stackBlockKey>
+        <div
+          id="vm-wizard-toggle-block-general-options"
+          data-id="vm-wizard-toggle-block-general-options"
+          class="flex-align-center"
+        >
+          <span>{{ localization.common.generalOptions }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div v-show="!blockIsOpen">
+          {{ localization.common.vmName }}: {{ vmName }}
+        </div>
+      </template>
+      <template #stackChildren>
+        <atoms-stack-block :has-children="false">
+          <template #stackBlockKey>
+            {{ localization.common.vmName }}
+          </template>
+          <template #stackBlockContent>
+            <span>{{ vmName }}</span>
+            <!--            <span v-if="!props.isEdit">{{ vmName }}</span>-->
+            <!--            <input-->
+            <!--              v-else-->
+            <!--              id="general-option-vm-name"-->
+            <!--              v-models="vmName"-->
+            <!--              type="text"-->
+            <!--            />-->
+          </template>
+        </atoms-stack-block>
+
+        <atoms-stack-block :has-children="false">
+          <template #stackBlockKey>
+            {{ localization.common.machineType }}
+          </template>
+          <template #stackBlockContent>
+            <select
+              v-if="guestMachineType"
+              id="guest-machine-type-select"
+              v-model="guestMachineType"
+              :disabled="props.isDisabled"
+              data-id="guest-machine-type-select"
+            >
+              <option
+                v-for="item in props.machineTypeOptions"
+                :key="item.value"
+                :value="item"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </template>
+        </atoms-stack-block>
+
+        <atoms-stack-block :has-children="false">
+          <template #stackBlockKey>
+            {{ localization.common.guestOsFamily }}
+          </template>
+          <template #stackBlockContent>
+            <select
+              v-if="guestOsFamily"
+              id="guest-os-family-select"
+              v-model="guestOsFamily"
+              data-id="guest-os-family-select"
+              :disabled="props.isDisabled"
+              @change="emits('change-os')"
+            >
+              <option v-for="item in props.osOptions" :key="item.value" :value="item">
+                {{ item.text }}
+              </option>
+            </select>
+          </template>
+        </atoms-stack-block>
+
+        <atoms-stack-block :has-children="false">
+          <template #stackBlockKey>
+            {{ localization.common.guestOsVersion }}
+          </template>
+          <template #stackBlockContent>
+            <select
+              v-if="guestOsVersion"
+              id="guest-os-version-select"
+              v-model="guestOsVersion"
+              data-id="guest-os-version-select"
+              :disabled="props.isDisabled"
+            >
+              <option
+                v-for="item in props.versionsOptions"
+                :key="item.value"
+                :value="item"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </template>
+        </atoms-stack-block>
+      </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 blockIsOpen = defineModel<boolean>('block-is-open', {required: true})
+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 props = defineProps<{
+  isEdit: boolean
+  isClone: boolean
+  state?: string | number
+  isDisabled: boolean
+  machineTypeOptions: UI_I_OptionItem[]
+  osOptions: UI_I_OptionItem[]
+  versionsOptions: UI_I_OptionItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'change-os'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/New.vue

@@ -0,0 +1,140 @@
+<template>
+  <ui-stack-block :has-children="true" test-id="remote-console-stack-block">
+    <template #stackBlockKey>
+      <div
+        id="vm-wizard-toggle-block-remote-console"
+        data-id="vm-wizard-toggle-block-remote-console"
+        class="flex-align-center"
+      >
+        <span class="title">{{ localization.common.remoteConsoleOptions }}</span>
+        <ui-icon
+          v-show="props.remoteConsoleOptionsInvalid"
+          width="18px"
+          height="18px"
+          name="error-outline"
+        />
+      </div>
+    </template>
+    <template #stackChildren>
+      <!--        TODO возможно вернем, НЕ УДАЛЯТЬ-->
+
+      <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-type-->
+      <!--          v-models:remote-console-type="remoteConsoleType"-->
+      <!--          :error-validation-fields="props.errorValidationFields"-->
+      <!--          :disabled="isDisabled"-->
+      <!--          @input="changeRemoteConsoleType"-->
+      <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+      <!--        />-->
+      <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-keymap
+        v-model:keymap="keymap"
+        :disabled="props.isDisabled"
+      />
+      <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-password
+        v-model:password="password"
+        :disabled="props.isDisabled"
+        @valid="passwordIsValid = $event"
+      />
+      <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-power-control-->
+      <!--          v-if="remoteConsoleType === 'vnc'"-->
+      <!--          v-models:power-control="powerControl"-->
+      <!--        />-->
+      <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-share-policy-->
+      <!--          v-if="remoteConsoleType === 'vnc'"-->
+      <!--          v-models:share-policy="sharePolicy"-->
+      <!--        />-->
+      <!--        TODO возможно вернем, НЕ УДАЛЯТЬ-->
+      <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-img-compression-->
+      <!--          v-if="remoteConsoleType === 'spice'"-->
+      <!--          v-models:img-compression="imgCompression"-->
+      <!--          :error-validation-fields="props.errorValidationFields"-->
+      <!--          :disabled="isDisabled"-->
+      <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+      <!--        />-->
+      <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-jpeg-compression-->
+      <!--          v-if="remoteConsoleType === 'spice'"-->
+      <!--          v-models:jpeg-compression="jpegCompression"-->
+      <!--          :error-validation-fields="props.errorValidationFields"-->
+      <!--          :disabled="isDisabled"-->
+      <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+      <!--        />-->
+      <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-zlib-compression-->
+      <!--          v-if="remoteConsoleType === 'spice'"-->
+      <!--          v-models:zlib-compression="zlibCompression"-->
+      <!--          :error-validation-fields="props.errorValidationFields"-->
+      <!--          :disabled="isDisabled"-->
+      <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+      <!--        />-->
+      <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-playback-compression-->
+      <!--          v-if="remoteConsoleType === 'spice'"-->
+      <!--          :disabled="isDisabled"-->
+      <!--          v-models:playback-compression="playbackCompression"-->
+      <!--        />-->
+      <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-streaming-mode-->
+      <!--          v-if="remoteConsoleType === 'spice'"-->
+      <!--          v-models:streaming-mode="streamingMode"-->
+      <!--          :error-validation-fields="props.errorValidationFields"-->
+      <!--          :disabled="isDisabled"-->
+      <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+      <!--        />-->
+      <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-copy-paste
+        v-if="remoteConsoleType === 'spice'"
+        v-model:copy-paste="copyPaste"
+        :disabled="props.isDisabled"
+      />
+      <!--        TODO возможно вернем, НЕ УДАЛЯТЬ-->
+      <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-mouse-mode-->
+      <!--          v-if="remoteConsoleType === 'spice'"-->
+      <!--          v-models:mouse-mode="mouseMode"-->
+      <!--        />-->
+      <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-file-transfer
+        v-if="remoteConsoleType === 'spice'"
+        v-model:file-transfer="fileTransfer"
+        :disabled="props.isDisabled"
+      />
+      <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-usb-redirection
+        v-if="remoteConsoleType === 'spice'"
+        v-model:usb-redirection="usbRedirection"
+        :disabled="props.isDisabled"
+      />
+      <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-folder-sharing
+        v-if="remoteConsoleType === 'spice'"
+        v-model:folder-sharing="folderSharing"
+        :disabled="props.isDisabled"
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const keymap = defineModel<string>('keymap', { required: true })
+const password = defineModel<string>('password', { required: true })
+const passwordIsValid = defineModel<boolean>('password-is-valid', {
+  required: true,
+})
+const remoteConsoleType = defineModel<string>('remote-console-type', {
+  required: true,
+})
+const copyPaste = defineModel<boolean>('copy-paste', { required: true })
+const fileTransfer = defineModel<boolean>('file-transfer', { required: true })
+const usbRedirection = defineModel<number>('usb-redirection', {
+  required: true,
+})
+const folderSharing = defineModel<boolean>('folder-sharing', { required: true })
+
+const props = defineProps<{
+  // TODO возможно вернем, НЕ УДАЛЯТЬ
+  // errorValidationFields: UI_I_ErrorValidationField<string>[]
+  remoteConsoleOptionsInvalid: boolean
+  isDisabled: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.title {
+  margin-right: 10px;
+}
+</style>