bfg-common 1.4.59 → 1.4.61

package/components/common/vm/actions/common/select/os/os.vue

@@ -1,227 +1,233 @@
-<template>
-  <div class="select-os">
-    <p class="select-os-block">
-      {{ localization.common.identifyingGuestSystemInstallation }}
-    </p>
-    <div class="select-os-block os-select-wrap table-row">
-      <label for="machine-type-select" class="table-cell"
-        >{{ localization.common.machineType }}:</label
-      >
-
-      <atoms-tooltip-error
-        :has-error="!!apiErrorMachineType"
-        selector="#vm-wizard-machine-type-select"
-        @remove="onRemoveValidationError('machine_type')"
-      >
-        <template #elem>
-          <select
-            id="vm-wizard-machine-type-select"
-            v-model="selectedMachineType"
-            data-id="vm-wizard-machine-type-select"
-            class="table-cell"
-          >
-            <option
-              v-for="item in machineTypeOptions"
-              :key="item.value"
-              :value="item"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </template>
-        <template #content>{{ apiErrorMachineType }}</template>
-      </atoms-tooltip-error>
-    </div>
-    <div class="select-os-block os-select-wrap table-row">
-      <label for="os-select" class="table-cell"
-        >{{ localization.common.guestOsFamily }}:</label
-      >
-
-      <atoms-tooltip-error
-        :has-error="!!apiErrorGuestOsFamily"
-        selector="#vm-wizard-os-select"
-        @remove="onRemoveValidationError('guest_os_family')"
-      >
-        <template #elem>
-          <select
-            id="vm-wizard-os-select"
-            v-model="selectedOS"
-            data-id="vm-wizard-os-select"
-            class="table-cell"
-            @change="onChangeOS"
-          >
-            <option v-for="item in osOptions" :key="item.value" :value="item">
-              {{ item.text }}
-            </option>
-          </select>
-        </template>
-        <template #content>{{ apiErrorGuestOsFamily }}</template>
-      </atoms-tooltip-error>
-    </div>
-    <div class="select-os-block os-select-wrap table-row">
-      <label for="os-version-select" class="table-cell"
-        >{{ localization.common.guestOsVersion }}:</label
-      >
-
-      <atoms-tooltip-error
-        :has-error="!!apiErrorGuestOsVersion"
-        selector="#vm-wizard-os-version-select"
-        @remove="onRemoveValidationError('guest_os_version')"
-      >
-        <template #elem>
-          <select
-            id="vm-wizard-os-version-select"
-            v-model="selectedVersion"
-            data-id="vm-wizard-os-version-select"
-            class="table-cell"
-          >
-            <option
-              v-for="item in versionsOptions"
-              :key="item.value"
-              :value="item"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </template>
-        <template #content>{{ apiErrorGuestOsVersion }}</template>
-      </atoms-tooltip-error>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_OsChange } from '~/components/common/vm/actions/common/select/lib/models/interfaces'
-import type {
-  UI_I_Localization,
-  UI_I_ArbitraryObject,
-} 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'
-
-const props = defineProps<{
-  familiesOptions: UI_I_OptionItem[]
-  machineTypesOptions: UI_I_OptionItem[]
-  versionsOptions: UI_I_ArbitraryObject<UI_I_OptionItem[]>
-  errorValidationFields: UI_I_ErrorValidationField[]
-}>()
-const emits = defineEmits<{
-  (event: 'change', value: UI_I_OsChange): void
-  (event: 'remove-error-by-title', value: string): void
-}>()
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const machineTypeOptions = ref<UI_I_OptionItem[]>(props.machineTypesOptions)
-const selectedMachineType = ref<UI_I_OptionItem | null>(null)
-watch(
-  () => props.machineTypesOptions,
-  (newValue) => {
-    machineTypeOptions.value = [...newValue]
-    selectedMachineType.value = newValue[0]
-  },
-  { immediate: true }
-)
-
-const osOptions = ref<UI_I_OptionItem[]>(props.familiesOptions)
-const selectedOS = ref<UI_I_OptionItem | null>(null)
-watch(
-  () => props.familiesOptions,
-  (newValue) => {
-    osOptions.value = [...newValue]
-    selectedOS.value = newValue[0]
-  },
-  { immediate: true }
-)
-const onChangeOS = (): void => {
-  selectedVersion.value = versionsOptions.value[0]
-}
-
-const versionsOptions = computed<UI_I_OptionItem[]>(() => {
-  if (!selectedOS.value) return []
-
-  return props.versionsOptions[selectedOS.value.value] || []
-})
-const selectedVersion = ref<UI_I_OptionItem | null>(null)
-watch(
-  versionsOptions,
-  () => {
-    selectedVersion.value = versionsOptions.value[0]
-  },
-  { immediate: true }
-)
-
-const windowsVirtualization = ref<boolean>(false)
-
-// const isShowHelp = ref<boolean>(false)
-
-watch(
-  [selectedMachineType, selectedOS, selectedVersion, windowsVirtualization],
-  () => {
-    if (!selectedOS.value) return
-
-    emits('change', {
-      selectedMachineType: selectedMachineType.value,
-      selectedOS: selectedOS.value,
-      selectedVersion: selectedVersion.value,
-      windowsVirtualization: windowsVirtualization.value,
-    })
-  },
-  { immediate: true }
-)
-
-const apiErrorMachineType = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'machine_type'
-    )?.error_message || ''
-  )
-})
-
-const apiErrorGuestOsFamily = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'guest_os_family'
-    )?.error_message || ''
-  )
-})
-
-const apiErrorGuestOsVersion = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'guest_os_version'
-    )?.error_message || ''
-  )
-})
-
-const onRemoveValidationError = (type: string): void => {
-  emits('remove-error-by-title', type)
-}
-</script>
-
-<style scoped lang="scss">
-.select-os {
-  .select-os-block {
-    label:not(.windows-virtualization-label) {
-      padding: 0 5px 5px 0;
-    }
-
-    .windows-virtualization-label {
-      padding: 0 4px;
-    }
-  }
-}
-
-#os-select-help-icon {
-  h3 {
-    margin-top: 7px;
-    font-size: 22px;
-    color: #565656;
-  }
-  p {
-    width: 310px;
-    margin-top: 24px;
-    font-size: 14px;
-    color: #565656;
-  }
-}
-</style>
+<template>
+  <div class="select-os">
+    <p class="select-os-block">
+      {{ localization.common.identifyingGuestSystemInstallation }}
+    </p>
+    <div class="select-os-block os-select-wrap table-row">
+      <label for="machine-type-select" class="table-cell"
+        >{{ localization.common.machineType }}:</label
+      >
+
+      <atoms-tooltip-error
+        :has-error="!!apiErrorMachineType"
+        selector="#vm-wizard-machine-type-select"
+        @remove="onRemoveValidationError('machine_type')"
+      >
+        <template #elem>
+          <select
+            id="vm-wizard-machine-type-select"
+            v-model="selectedMachineType"
+            data-id="vm-wizard-machine-type-select"
+            class="table-cell"
+            @change="onSelectMachineType"
+          >
+            <option
+              v-for="item in machineTypeOptions"
+              :key="item.value"
+              :value="item"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiErrorMachineType }}</template>
+      </atoms-tooltip-error>
+    </div>
+    <div class="select-os-block os-select-wrap table-row">
+      <label for="os-select" class="table-cell"
+        >{{ localization.common.guestOsFamily }}:</label
+      >
+
+      <atoms-tooltip-error
+        :has-error="!!apiErrorGuestOsFamily"
+        selector="#vm-wizard-os-select"
+        @remove="onRemoveValidationError('guest_os_family')"
+      >
+        <template #elem>
+          <select
+            id="vm-wizard-os-select"
+            v-model="selectedOS"
+            data-id="vm-wizard-os-select"
+            class="table-cell"
+            @change="onChangeOS"
+          >
+            <option v-for="item in osOptions" :key="item.value" :value="item">
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiErrorGuestOsFamily }}</template>
+      </atoms-tooltip-error>
+    </div>
+    <div class="select-os-block os-select-wrap table-row">
+      <label for="os-version-select" class="table-cell"
+        >{{ localization.common.guestOsVersion }}:</label
+      >
+
+      <atoms-tooltip-error
+        :has-error="!!apiErrorGuestOsVersion"
+        selector="#vm-wizard-os-version-select"
+        @remove="onRemoveValidationError('guest_os_version')"
+      >
+        <template #elem>
+          <select
+            id="vm-wizard-os-version-select"
+            v-model="selectedVersion"
+            data-id="vm-wizard-os-version-select"
+            class="table-cell"
+          >
+            <option
+              v-for="item in versionsOptions"
+              :key="item.value"
+              :value="item"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiErrorGuestOsVersion }}</template>
+      </atoms-tooltip-error>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OsChange } from '~/components/common/vm/actions/common/select/lib/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+} 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 { mapCapabilitiesBus } from '~/components/common/vm/actions/common/lib/utils/capabilities'
+
+const props = defineProps<{
+  familiesOptions: UI_I_OptionItem[]
+  machineTypesOptions: UI_I_OptionItem[]
+  versionsOptions: UI_I_ArbitraryObject<UI_I_OptionItem[]>
+  errorValidationFields: UI_I_ErrorValidationField[]
+}>()
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_OsChange): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const machineTypeOptions = ref<UI_I_OptionItem[]>(props.machineTypesOptions)
+const selectedMachineType = ref<UI_I_OptionItem | null>(null)
+watch(
+  () => props.machineTypesOptions,
+  (newValue) => {
+    machineTypeOptions.value = [...newValue]
+    selectedMachineType.value = newValue[0]
+  },
+  { immediate: true }
+)
+const onSelectMachineType = (): void => {
+  selectedMachineType.value &&
+    mapCapabilitiesBus(selectedMachineType.value.value)
+}
+
+const osOptions = ref<UI_I_OptionItem[]>(props.familiesOptions)
+const selectedOS = ref<UI_I_OptionItem | null>(null)
+watch(
+  () => props.familiesOptions,
+  (newValue) => {
+    osOptions.value = [...newValue]
+    selectedOS.value = newValue[0]
+  },
+  { immediate: true }
+)
+const onChangeOS = (): void => {
+  selectedVersion.value = versionsOptions.value[0]
+}
+
+const versionsOptions = computed<UI_I_OptionItem[]>(() => {
+  if (!selectedOS.value) return []
+
+  return props.versionsOptions[selectedOS.value.value] || []
+})
+const selectedVersion = ref<UI_I_OptionItem | null>(null)
+watch(
+  versionsOptions,
+  () => {
+    selectedVersion.value = versionsOptions.value[0]
+  },
+  { immediate: true }
+)
+
+const windowsVirtualization = ref<boolean>(false)
+
+// const isShowHelp = ref<boolean>(false)
+
+watch(
+  [selectedMachineType, selectedOS, selectedVersion, windowsVirtualization],
+  () => {
+    if (!selectedOS.value) return
+
+    emits('change', {
+      selectedMachineType: selectedMachineType.value,
+      selectedOS: selectedOS.value,
+      selectedVersion: selectedVersion.value,
+      windowsVirtualization: windowsVirtualization.value,
+    })
+  },
+  { immediate: true }
+)
+
+const apiErrorMachineType = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'machine_type'
+    )?.error_message || ''
+  )
+})
+
+const apiErrorGuestOsFamily = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'guest_os_family'
+    )?.error_message || ''
+  )
+})
+
+const apiErrorGuestOsVersion = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'guest_os_version'
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (type: string): void => {
+  emits('remove-error-by-title', type)
+}
+</script>
+
+<style scoped lang="scss">
+.select-os {
+  .select-os-block {
+    label:not(.windows-virtualization-label) {
+      padding: 0 5px 5px 0;
+    }
+
+    .windows-virtualization-label {
+      padding: 0 4px;
+    }
+  }
+}
+
+#os-select-help-icon {
+  h3 {
+    margin-top: 7px;
+    font-size: 22px;
+    color: #565656;
+  }
+  p {
+    width: 310px;
+    margin-top: 24px;
+    font-size: 14px;
+    color: #565656;
+  }
+}
+</style>