bfg-common 1.1.78 → 1.1.80

package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/CoresPerSocket.vue

@@ -1,97 +1,108 @@
-<template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.coresPerSocket }}
-      </template>
-      <template #stackBlockContent>
-        <div class="clr-control-container">
-          <div class="clr-select-wrapper">
-            <atoms-tooltip-error
-              :has-error="!!apiError"
-              selector="#vm-wizard-core-per-socket-field"
-              @remove="onRemoveValidationError"
-            >
-              <template #elem>
-                <select
-                  id="vm-wizard-core-per-socket-field"
-                  v-model="selectedCorePerSocketLocal"
-                  :disabled="props.disabled"
-                >
-                  <option
-                    v-for="(item, key) in socketOptions"
-                    :key="key"
-                    :value="item"
-                  >
-                    {{ item }}
-                  </option>
-                </select>
-              </template>
-              <template #content>{{ apiError }}</template>
-            </atoms-tooltip-error>
-          </div>
-          <div class="clr-subtext">
-            {{ localization.sockets }}: {{ socketsCount }}
-          </div>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  cpuOptions: UI_I_OptionItem[]
-  selectedCpu: number
-  selectedCorePerSocket: number
-  isEdit: boolean
-  disabled: boolean
-  errorValidationFields: UI_I_ErrorValidationField[]
-}>()
-const emits = defineEmits<{
-  (event: 'update:selected-core-per-socket', value: number): void
-  (event: 'remove-error-by-title', value: string): void
-}>()
-
-const apiError = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'cpu.core_per_socket'
-    )?.error_message || ''
-  )
-})
-
-const socketOptions = computed<number[]>(() => {
-  const result = []
-  const cpus = props.cpuOptions[1].value
-  for (let i = 1; i <= cpus; i++) {
-    if (i <= props.selectedCpu && (props.selectedCpu % i === 0 || i === 1)) {
-      result.push(i)
-    }
-  }
-  return result
-})
-const socketsCount = computed<number>(() => {
-  return props.selectedCpu / props.selectedCorePerSocket
-})
-const selectedCorePerSocketLocal = computed<number>({
-  get() {
-    return props.selectedCorePerSocket
-  },
-  set(newValue) {
-    emits('update:selected-core-per-socket', +newValue)
-  },
-})
-
-const onRemoveValidationError = (): void => {
-  emits('remove-error-by-title', 'cpu.core_per_socket')
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.coresPerSocket }}
+      </template>
+      <template #stackBlockContent>
+        <div class="clr-control-container">
+          <div class="clr-select-wrapper">
+            <atoms-tooltip-error
+              :has-error="!!apiError"
+              selector="#vm-wizard-core-per-socket-field"
+              @remove="onRemoveValidationError"
+            >
+              <template #elem>
+                <select
+                  id="vm-wizard-core-per-socket-field"
+                  v-model="selectedCorePerSocketLocal"
+                  :disabled="props.disabled"
+                >
+                  <option
+                    v-for="(item, key) in socketOptions"
+                    :key="key"
+                    :value="item"
+                  >
+                    {{ item }}
+                  </option>
+                </select>
+              </template>
+              <template #content>{{ apiError }}</template>
+            </atoms-tooltip-error>
+          </div>
+          <div class="clr-subtext">
+            {{ localization.sockets }}: {{ socketsCount }}
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  cpuOptions: UI_I_OptionItem[]
+  selectedCpu: number[]
+  selectedCorePerSocket: number
+  isEdit: boolean
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:selected-core-per-socket', value: number): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'cpu.core_per_socket'
+    )?.error_message || ''
+  )
+})
+
+const socketOptions = computed<number[]>(() => {
+  const result = []
+  const cpus = props.cpuOptions[1].value
+  for (let i = 1; i <= cpus; i++) {
+    const isCommonDivisor = props.selectedCpu.every(
+      (cpu) => i <= cpu && (cpu % i === 0 || i === 1)
+    )
+    if (isCommonDivisor) {
+      result.push(i)
+    }
+  }
+  return result
+})
+watch(
+  socketOptions,
+  () => {
+    !socketOptions.value.includes(selectedCorePerSocketLocal.value) &&
+      (selectedCorePerSocketLocal.value = 1)
+  },
+  { deep: true }
+)
+const socketsCount = computed<number>(() => {
+  return props.selectedCpu[0] / props.selectedCorePerSocket
+})
+const selectedCorePerSocketLocal = computed<number>({
+  get() {
+    return props.selectedCorePerSocket
+  },
+  set(newValue) {
+    emits('update:selected-core-per-socket', +newValue)
+  },
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', 'cpu.core_per_socket')
+}
+</script>
+
+<style scoped></style>