bfg-common 1.4.393 → 1.4.395

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/firmware/Firmware.vue

@@ -1,39 +1,18 @@
 <template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.firmware }}
-      </template>
-      <template #stackBlockContent>
-        <atoms-tooltip-error
-          :has-error="!!apiError"
-          selector="#vm-wizard-firmware-field"
-          @remove="onRemoveValidationError"
-        >
-          <template #elem>
-            <div class="select">
-              <select
-                id="vm-wizard-firmware-field"
-                v-model="firmwareLocal"
-                data-id="vm-wizard-firmware-select"
-              >
-                <option
-                  v-for="(item, key) in firmwareOptions"
-                  :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-vmoptions-boot-options-firmware-new
+    v-if="isNewView"
+    v-model:firmware="firmware"
+    :firmware-options="firmwareOptions"
+    :error-text="apiError"
+    @remove-error="onRemoveValidationError"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-boot-options-firmware-new
+    v-else
+    v-model:firmware="firmware"
+    :firmware-options="firmwareOptions"
+    :error-text="apiError"
+    @remove-error="onRemoveValidationError"
+  />
 </template>
 
 <script setup lang="ts">
@@ -42,31 +21,25 @@ import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import { firmwareOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/firmware/lib/config/config'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const firmware = defineModel<string>('firmware', { required: true })
 
 const props = defineProps<{
-  firmware: string
   errorValidationFields: UI_I_ErrorValidationField[]
   isEdit: boolean
 }>()
 const emits = defineEmits<{
-  (event: 'update:firmware', value: string): void
   (event: 'remove-error-by-title', value: string): void
 }>()
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const firmwareOptions = ref<UI_I_OptionItem[]>(
   firmwareOptionsFunc(localization.value)
 )
 
-const firmwareLocal = computed<string>({
-  get() {
-    return props.firmware
-  },
-  set(newValue) {
-    emits('update:firmware', newValue)
-  },
-})
-
 const typeError = 'options.boot_options.firmware'
 
 const apiError = computed<string>(() => {

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/firmware/FirmwareNew.vue

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

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/firmware/FirmwareOld.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.firmware }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!props.errorText"
+          selector="#vm-wizard-firmware-field"
+          @remove="emits('remove-error')"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                id="vm-wizard-firmware-field"
+                v-model="firmware"
+                data-id="vm-wizard-firmware-select"
+              >
+                <option
+                  v-for="(item, key) in props.firmwareOptions"
+                  :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 firmware = defineModel<string>('firmware', {required: true})
+
+const props = defineProps<{
+  firmwareOptions: UI_I_OptionItem[]
+  errorText: string
+}>()
+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/vmoptions/bootOptions/menu/Menu.vue

@@ -0,0 +1,20 @@
+<template>
+  <common-vm-actions-common-customize-hardware-vmoptions-boot-options-menu-new
+    v-if="isNewView"
+    v-model:boot-menu="bootMenu"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-boot-options-menu-old
+    v-else
+    v-model:boot-menu="bootMenu"
+  />
+</template>
+
+<script setup lang="ts">
+const bootMenu = defineModel<boolean>('boot-menu', {required: true})
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped>
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/menu/MenuNew.vue

@@ -0,0 +1,25 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.bootMenu }}
+    </template>
+    <template #stackBlockContent>
+      <ui-checkbox
+        id="boot-menu"
+        v-model="bootMenu"
+        test-id="boot-menu-checkbox"
+        :label-text="localization.common.enable"
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const bootMenu = defineModel<boolean>('boot-menu', { required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/menu/MenuOld.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.bootMenu }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <input
+            id="boot-menu"
+            v-model="bootMenu"
+            data-id="boot-menu-checkbox"
+            type="checkbox"
+          />
+          <label for="boot-menu" class="label-text-normal">{{
+              localization.common.enable
+            }}</label>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const bootMenu = defineModel<boolean>('boot-menu', {required: true})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped>
+#boot-menu {
+  margin: 0 4px 4px 0;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue

@@ -1,39 +1,14 @@
 <template>
-  <div class="boot-orders">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.bootOrder }}
-      </template>
-      <template #stackBlockContent>
-        <atoms-list-drag-drop-list
-          :items="bootList"
-          grab-item-key="text"
-          @drop="onChangeOrder"
-        >
-          <template
-            v-for="(item, index) in bootList"
-            :key="index"
-            #[`leftSide${index}`]
-          >
-            <input
-              :id="`boot-order-${index}`"
-              v-model="item.isChecked"
-              :data-id="item.testId"
-              type="checkbox"
-            />
-          </template>
-          <template
-            v-for="(item, index) in bootList"
-            :key="bootList.length + index"
-            #[`rightSide${index}`]
-          >
-            <div :class="['device-icon', item.iconClassName]" />
-            <span>{{ item.text }}</span>
-          </template>
-        </atoms-list-drag-drop-list>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-vmoptions-boot-options-order-new
+    v-if="isNewView"
+    :boot-list="bootList"
+    @change-order="onChangeOrder"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-boot-options-order-new
+    v-else
+    :boot-list="bootList"
+    @change-order="onChangeOrder"
+  />
 </template>
 
 <script setup lang="ts">
@@ -43,11 +18,8 @@ import type {
   UI_I_SendDataNewHardDisk,
   UI_I_SendDataNewNetwork,
 } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
 const props = defineProps<{
   hardDisks: UI_I_SendDataNewHardDisk[] | null
   cdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
@@ -64,6 +36,9 @@ const emits = defineEmits<{
   ): void
 }>()
 
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const bootList = ref<UI_I_BootItem[]>([])
 
 const hardDisksAndNetworks = computed<
@@ -193,9 +168,4 @@ watch(
 </script>
 
 <style scoped lang="scss">
-.boot-orders {
-  .device-icon {
-    margin-right: 6px;
-  }
-}
 </style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/OrderNew.vue

@@ -0,0 +1,50 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.bootOrder }}
+    </template>
+    <template #stackBlockContent>
+      <ui-drag-drop-list
+        :items="props.bootList"
+        grab-item-key="text"
+        @drop="emits('change-order', $event)"
+      >
+        <template
+          v-for="(item, index) in props.bootList"
+          :key="index"
+          #[`leftSide${index}`]
+        >
+          <ui-checkbox
+            v-model="item.isChecked"
+            :test-id="item.testId"
+          />
+        </template>
+        <template
+          v-for="(item, index) in props.bootList"
+          :key="props.bootList.length + index"
+          #[`rightSide${index}`]
+        >
+          <div :class="['device-icon', item.iconClassName]" />
+          <span>{{ item.text }}</span>
+        </template>
+      </ui-drag-drop-list>
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_BootItem } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  bootList: UI_I_BootItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'change-order', value: UI_I_DropEvent): void
+}>()
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/OrderOld.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="boot-orders">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.bootOrder }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-list-drag-drop-list
+          :items="props.bootList"
+          grab-item-key="text"
+          @drop="emits('change-order', $event)"
+        >
+          <template
+            v-for="(item, index) in props.bootList"
+            :key="index"
+            #[`leftSide${index}`]
+          >
+            <input
+              :id="`boot-order-${index}`"
+              v-model="item.isChecked"
+              :data-id="item.testId"
+              type="checkbox"
+            />
+          </template>
+          <template
+            v-for="(item, index) in props.bootList"
+            :key="props.bootList.length + index"
+            #[`rightSide${index}`]
+          >
+            <div :class="['device-icon', item.iconClassName]" />
+            <span>{{ item.text }}</span>
+          </template>
+        </atoms-list-drag-drop-list>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_BootItem } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  bootList: UI_I_BootItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'change-order', value: UI_I_DropEvent): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.boot-orders {
+  .device-icon {
+    margin-right: 6px;
+  }
+}
+</style>