bfg-common 1.1.66 → 1.1.68

package/components/common/vm/actions/add/customizeHardware/CustomizeHardware.vue

@@ -47,9 +47,9 @@
     <div v-show="selectedNavItem === 1">
       <common-vm-actions-add-customize-hardware-vmoptions
         v-model:vm-name="vmNameLocal"
-        :guest-machine-type="props.guestMachineType"
-        :guest-os-family="props.guestOsFamily"
-        :guest-os-version="props.guestOsVersion"
+        v-model:guest-machine-type="guestMachineTypeLocal"
+        v-model:guest-os-family="guestOsFamilyLocal"
+        v-model:guest-os-version="guestOsVersionLocal"
         :hard-disks="props.hardDisksForBootOptions"
         :cd-dvd-drives="props.cdDvdDrivesForBootOptions"
         :networks="props.networksForBootOptions"
@@ -141,6 +141,9 @@ const emits = defineEmits<{
   (event: 'send-data', value: UI_I_SendDataCustomizeHardware): void
   (event: 'next'): 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: 'get-storage', value: UI_I_TablePayload): void
   (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
   (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
@@ -158,6 +161,30 @@ const vmNameLocal = computed<string>({
     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 localization = computed<UI_I_Localization>(() => useLocal())
 

package/components/common/vm/actions/add/customizeHardware/vmoptions/Vmoptions.vue

@@ -4,9 +4,9 @@
       <div class="stack-view">
         <common-vm-actions-add-customize-hardware-vmoptions-general-options
           v-model:vm-name="vmNameLocal"
-          :guest-machine-type="props.guestMachineType"
-          :guest-os-family="props.guestOsFamily"
-          :guest-os-version="props.guestOsVersion"
+          v-model:guest-machine-type="guestMachineTypeLocal"
+          v-model:guest-os-family="guestOsFamilyLocal"
+          v-model:guest-os-version="guestOsVersionLocal"
           :is-edit="props.isEdit"
           :state="props.state"
         />
@@ -81,6 +81,9 @@ const emits = defineEmits<{
   (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
 }>()
 
@@ -92,6 +95,30 @@ const vmNameLocal = computed<string>({
     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 localization = computed<UI_I_Localization>(() => useLocal())
 

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

@@ -1,117 +1,182 @@
-<template>
-  <div class="hardware-cpu">
-    <atoms-stack-block :has-children="true" @toggle="blockIsOpen = $event">
-      <template #stackBlockKey>
-        <div class="flex-align-center">
-          <span>{{ localization.generalOptions }}</span>
-        </div>
-      </template>
-      <template #stackBlockContent>
-        <div v-show="!blockIsOpen">
-          {{ localization.vmName }}: {{ vmNameLocal }}
-        </div>
-      </template>
-      <template #stackChildren>
-        <atoms-stack-block :has-children="false">
-          <template #stackBlockKey>
-            {{ localization.vmName }}
-          </template>
-          <template #stackBlockContent>
-            <span v-if="!props.isEdit">{{ vmNameLocal }}</span>
-            <input
-              v-else
-              id="general-option-vm-name"
-              v-model="vmNameLocal"
-              type="text"
-            />
-          </template>
-        </atoms-stack-block>
-
-        <atoms-stack-block :has-children="false">
-          <template #stackBlockKey>
-            {{ localization.machineType }}
-          </template>
-          <template #stackBlockContent>
-            <select
-              v-if="props.guestMachineType"
-              id="guest-machine-type-select"
-              :disabled="isDisabled"
-            >
-              <option selected :value="props.guestMachineType.value">
-                {{ props.guestMachineType.text }}
-              </option>
-            </select>
-          </template>
-        </atoms-stack-block>
-
-        <atoms-stack-block :has-children="false">
-          <template #stackBlockKey>
-            {{ localization.guestOsFamily }}
-          </template>
-          <template #stackBlockContent>
-            <select
-              v-if="props.guestOsFamily"
-              id="guest-os-family-select"
-              :disabled="isDisabled"
-            >
-              <option selected :value="props.guestOsFamily.value">
-                {{ props.guestOsFamily.text }}
-              </option>
-            </select>
-          </template>
-        </atoms-stack-block>
-
-        <atoms-stack-block :has-children="false">
-          <template #stackBlockKey>
-            {{ localization.guestOsVersion }}
-          </template>
-          <template #stackBlockContent>
-            <select
-              v-if="props.guestOsVersion"
-              id="guest-os-version-select"
-              :disabled="isDisabled"
-            >
-              <option selected :value="props.guestOsVersion.value">
-                {{ props.guestOsVersion.text }}
-              </option>
-            </select>
-          </template>
-        </atoms-stack-block>
-      </template>
-    </atoms-stack-block>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  vmName: string
-  guestMachineType: UI_I_OptionItem | null
-  guestOsFamily: UI_I_OptionItem | null
-  guestOsVersion: UI_I_OptionItem | null
-  isEdit: boolean
-  state?: string | number
-}>()
-const emits = defineEmits<{
-  (event: 'update:vm-name', value: string): void
-}>()
-
-const isDisabled = computed<boolean>(() => !props.isEdit || props.isEdit && props.state !== 1)
-
-const vmNameLocal = computed<string>({
-  get() {
-    return props.vmName
-  },
-  set(newValue) {
-    emits('update:vm-name', newValue)
-  },
-})
-
-const blockIsOpen = ref<boolean>(false)
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div class="hardware-cpu">
+    <atoms-stack-block :has-children="true" @toggle="blockIsOpen = $event">
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span>{{ localization.generalOptions }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <div v-show="!blockIsOpen">
+          {{ localization.vmName }}: {{ vmNameLocal }}
+        </div>
+      </template>
+      <template #stackChildren>
+        <atoms-stack-block :has-children="false">
+          <template #stackBlockKey>
+            {{ localization.vmName }}
+          </template>
+          <template #stackBlockContent>
+            <span v-if="!props.isEdit">{{ vmNameLocal }}</span>
+            <input
+              v-else
+              id="general-option-vm-name"
+              v-model="vmNameLocal"
+              type="text"
+            />
+          </template>
+        </atoms-stack-block>
+
+        <atoms-stack-block :has-children="false">
+          <template #stackBlockKey>
+            {{ localization.machineType }}
+          </template>
+          <template #stackBlockContent>
+            <select
+              v-if="props.guestMachineType"
+              id="guest-machine-type-select"
+              :disabled="isDisabled"
+              v-model="guestMachineTypeLocal"
+            >
+              <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.guestOsFamily }}
+          </template>
+          <template #stackBlockContent>
+            <select
+              v-if="props.guestOsFamily"
+              id="guest-os-family-select"
+              v-model="guestOsFamilyLocal"
+              :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.guestOsVersion }}
+          </template>
+          <template #stackBlockContent>
+            <select
+              v-if="props.guestOsVersion"
+              id="guest-os-version-select"
+              v-model="guestOsVersionLocal"
+              :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>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { capabilities } from '~/components/common/vm/actions/add/config/capabilities'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  vmName: string
+  guestMachineType: UI_I_OptionItem | null
+  guestOsFamily: UI_I_OptionItem | null
+  guestOsVersion: UI_I_OptionItem | null
+  isEdit: 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 isDisabled = computed<boolean>(
+  () => !props.isEdit || (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() {
+    console.log(props.guestMachineType, 111);
+    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() {
+    console.log(props.guestOsFamily, 2222);
+    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]
+}
+
+const guestOsVersionLocal = computed<UI_I_OptionItem | null>({
+  get() {
+    console.log(props.guestOsVersion, 333);
+    return props.guestOsVersion
+  },
+  set(newValue) {
+    emits('update:guest-os-version', newValue)
+  },
+})
+const versionsOptions = computed<UI_I_OptionItem[]>(() => {
+  if (!guestOsFamilyLocal.value) return []
+
+  return capabilities.guestOsVersions[guestOsFamilyLocal.value.value] || []
+})
+watch(
+  versionsOptions,
+  () => {
+    guestOsVersionLocal.value = versionsOptions.value[0]
+  },
+  // { immediate: true }
+)
+
+const blockIsOpen = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/editSettings/EditSettings.vue

@@ -17,9 +17,9 @@
         <div v-if="vmSettings" class="add-vm-context">
           <common-vm-actions-add-customize-hardware
             v-model:vm-name="vmName"
-            :guest-machine-type="vmSettings.guestMachineType"
-            :guest-os-family="vmSettings.guestOsFamily"
-            :guest-os-version="vmSettings.guestOsVersion"
+            v-model:guest-machine-type="vmSettings.guestMachineType"
+            v-model:guest-os-family="vmSettings.guestOsFamily"
+            v-model:guest-os-version="vmSettings.guestOsVersion"
             :storage="vmSettings.storage"
             :hard-disks-for-boot-options="virtualHardwareHardDisksLocal"
             :cd-dvd-drives-for-boot-options="virtualHardwareCdDvdDrivesLocal"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.1.66",
+  "version": "1.1.68",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",