bfg-common 1.5.595 → 1.5.597

package/components/common/vm/actions/register/New.vue

@@ -0,0 +1,218 @@
+<template>
+  <ui-wizard
+    :steps="props.wizard.steps"
+    :selected-scheme="props.selectedScheme"
+    :is-loading="props.wizard.wizardLoader.status"
+    :title="localization.common.registerVm"
+    :texts="texts"
+    test-id="register-wizard"
+    show
+    @change-steps="emits('change-steps', $event)"
+    @hide="emits('hide')"
+    @submit="emits('finish')"
+  >
+    <template #content="{ selectedStep }">
+      <ui-wizard-block
+        v-if="
+          selectedStep.id === props.dynamicSteps.selectName ||
+          selectedStep.id === props.dynamicSteps.selectNameFolder
+        "
+        :sub-title-height="heightName"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlockName" class="subtitle-block">
+            <div
+              id="name-alert-wrapper"
+              :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
+            ></div>
+            <ui-wizard-subtitle
+              :sub-title="
+                localization.vmWizard.specifyUniqueNameAndTargetLocationForVm
+              "
+            />
+          </div>
+        </template>
+        <template #content>
+          <common-wizards-common-steps-name
+            v-show="
+              selectedStep.id === props.dynamicSteps.selectName ||
+              selectedStep.id === props.dynamicSteps.selectNameFolder
+            "
+            v-model:name="vmForm.name"
+            v-model:location="location"
+            :show="
+              selectedStep.id === props.dynamicSteps.selectName ||
+              selectedStep.id === props.dynamicSteps.selectNameFolder
+            "
+            :name-form-submit="props.nameFormSubmit"
+            :name-request-url="props.nameRequestUrl"
+            :validation-description="
+              localization.common.enterValidLocationVirtualMachine
+            "
+            :name-exist-validation-description="
+              localization.common.vmNameExistInSelectedLocation
+            "
+            :test-ids="props.nameTestIds"
+            :has-location="props.isSphere"
+            :location-nodes="props.locationNodes"
+            :allowed-location-kinds="props.allowedLocationKinds"
+            :location-description="props.locationDescription"
+            @submit="emits('change-name', $event)"
+            @has-errors="isNameAlertWrapperEmpty = $event"
+          />
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="
+          props.isSphere &&
+          selectedStep.id === props.dynamicSteps.selectComputeResource
+        "
+        :sub-title-height="heightComputeResource"
+      >
+        <template #subTitle>
+          <div ref="computeResource" class="subtitle-block">
+            <div class="subtitle-block">
+              <ui-alert
+                v-if="props.computeResourceAlert.length"
+                :messages="props.computeResourceAlert"
+                test-id="computed-resource-alert"
+                type="error"
+                size="md"
+                class="subtitle-block__alert"
+              />
+              <ui-wizard-subtitle
+                :sub-title="
+                  localization.vmWizard
+                    .selectDestinationComputeResourceForThisOperation
+                "
+              />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <common-wizards-common-steps-compute-resource
+            v-show="
+              selectedStep.id === props.dynamicSteps.selectComputeResource
+            "
+            v-model="vmForm.computeResource"
+            :node="props.computeResourceTreeLocal"
+            :alert-messages="props.computeResourceAlert"
+            :is-loading="props.isLoadingComputeTree"
+            :compatibility-text="props.compatibilityText"
+          />
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === props.dynamicSteps.readyComplete"
+        :sub-title-height="heightReadyComplete"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlockReadyComplete">
+            <div class="subtitle-block">
+              <ui-wizard-subtitle
+                :sub-title="localization.registerVm.lastCreateSubtitle"
+              />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <common-ready-to-complete
+            v-if="selectedStep.id === props.dynamicSteps.readyComplete"
+            :data="props.readyCompleteTableInfo"
+          />
+        </template>
+      </ui-wizard-block>
+    </template>
+  </ui-wizard>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import type {
+  UI_I_WizardStep,
+  UI_I_WizardTexts,
+} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_I_NameTestIds } from '~/components/common/wizards/common/steps/name/lib/models/interfaces'
+import type { UI_T_CompatibilityStatus } from '~/components/common/wizards/common/compatibility/lib/models/types'
+
+const vmForm = defineModel<any>({ required: true })
+const location = defineModel<UI_I_TreeNode | null>('location')
+
+const props = withDefaults(
+  defineProps<{
+    project: UI_T_Project
+    readyCompleteTableInfo: UI_I_TableInfoItem[]
+    nameRequestUrl: string
+    wizard: Wizard
+    selectedScheme: number[]
+    dynamicSteps: any
+    nameFormSubmit: null | Function
+    nameTestIds: UI_I_NameTestIds
+    allowedLocationKinds: number[]
+    locationDescription: string
+    isSphere: boolean
+    computeResourceTreeLocal: UI_I_TreeNode | null
+    compatibilityText: [UI_T_CompatibilityStatus, string]
+    isLoadingComputeTree?: boolean // для сферы
+    computeResourceAlert?: string[] // для сферы
+    locationNodes?: UI_I_TreeNode[] // для сферы
+  }>(),
+  {
+    isLoadingComputeTree: false,
+    computeResourceAlert: () => [],
+    locationNodes: () => [],
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'finish'): void
+  (event: 'hide'): void
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+  (event: 'change-name', value: [string, UI_I_TreeNode | null]): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed<UI_I_WizardTexts>(() => ({
+  cancel: localization.value.common.cancel,
+  back: localization.value.common.backCap,
+  processing: localization.value.common.processing,
+  next: localization.value.common.next,
+  finish: localization.value.registerVm.register,
+  incompleteTitle: localization.value.common.incompleteProcess,
+  incompleteMessage: localization.value.common.incompleteProcessMessage,
+  incompleteCancel: localization.value.common.cancel,
+  incompleteLeave: localization.value.common.leave,
+  step: localization.value.common.step,
+  of: localization.value.common.of2,
+}))
+
+const isNameAlertWrapperEmpty = ref<boolean>(false)
+
+const subTitleBlockName = ref<HTMLElement | null>(null)
+const { height: heightName } = useElementSize(subTitleBlockName)
+
+const computeResource = ref<HTMLElement | null>(null)
+const { height: heightComputeResource } = useElementSize(computeResource)
+
+const subTitleBlockReadyComplete = ref<HTMLElement | null>(null)
+const { height: heightReadyComplete } = useElementSize(
+  subTitleBlockReadyComplete
+)
+</script>
+
+<style scoped lang="scss">
+.subtitle-block {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--wizard-line);
+  padding-bottom: 12px;
+}
+</style>

package/components/common/vm/actions/register/Old.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="register-vm">
+    <atoms-wizard
+      :wizard="props.wizard"
+      :selected-scheme="props.selectedScheme"
+      :title="localization.common.registerVm"
+      :localization="localization"
+      test-id="register-wizard"
+      show
+      @change-steps="emits('change-steps', $event)"
+      @hide="emits('hide')"
+      @submit="emits('finish')"
+    >
+      <template #modalBody="{ selectedStep }">
+        <!--        <atoms-loader-->
+        <!--          v-show="props.isLoading"-->
+        <!--          id="loader"-->
+        <!--          test-id="edit-vm-settings-spinner"-->
+        <!--        />-->
+        <div class="register-vm-content">
+          <common-wizards-common-steps-name
+            v-show="
+              selectedStep.id === props.dynamicSteps.selectName ||
+              selectedStep.id === props.dynamicSteps.selectNameFolder
+            "
+            v-model:name="vmForm.name"
+            v-model:location="location"
+            :show="
+              selectedStep.id === props.dynamicSteps.selectName ||
+              selectedStep.id === props.dynamicSteps.selectNameFolder
+            "
+            :name-form-submit="props.nameFormSubmit"
+            :name-request-url="props.nameRequestUrl"
+            :validation-description="
+              localization.common.enterValidLocationVirtualMachine
+            "
+            :name-exist-validation-description="
+              localization.common.vmNameExistInSelectedLocation
+            "
+            :test-ids="props.nameTestIds"
+            :has-location="props.isSphere"
+            :location-nodes="props.locationNodes"
+            :allowed-location-kinds="props.allowedLocationKinds"
+            :location-description="props.locationDescription"
+            @submit="emits('change-name', $event)"
+          />
+          <common-wizards-common-steps-compute-resource
+            v-if="props.isSphere"
+            v-show="
+              selectedStep.id === props.dynamicSteps.selectComputeResource
+            "
+            v-model="vmForm.computeResource"
+            :node="props.computeResourceTreeLocal"
+            :alert-messages="props.computeResourceAlert"
+            :is-loading="props.isLoadingComputeTree"
+            :compatibility-text="props.compatibilityText"
+          />
+          <common-ready-to-complete
+            v-if="selectedStep.id === props.dynamicSteps.readyComplete"
+            :data="props.readyCompleteTableInfo"
+          />
+        </div>
+      </template>
+    </atoms-wizard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_I_NameTestIds } from '~/components/common/wizards/common/steps/name/lib/models/interfaces'
+import type { UI_T_CompatibilityStatus } from '~/components/common/wizards/common/compatibility/lib/models/types'
+
+const vmForm = defineModel<any>({ required: true })
+const location = defineModel<UI_I_TreeNode | null>('location')
+
+const props = withDefaults(
+  defineProps<{
+    project: UI_T_Project
+    readyCompleteTableInfo: UI_I_TableInfoItem[]
+    nameRequestUrl: string
+    wizard: Wizard
+    selectedScheme: number[]
+    dynamicSteps: any
+    nameFormSubmit: null | Function
+    nameTestIds: UI_I_NameTestIds
+    allowedLocationKinds: number[]
+    locationDescription: string
+    isSphere: boolean
+    computeResourceTreeLocal: UI_I_TreeNode | null
+    compatibilityText: [UI_T_CompatibilityStatus, string]
+    isLoadingComputeTree?: boolean // для сферы
+    computeResourceAlert?: string[] // для сферы
+    locationNodes?: UI_I_TreeNode[] // для сферы
+  }>(),
+  {
+    isLoadingComputeTree: false,
+    computeResourceAlert: () => [],
+    locationNodes: () => [],
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'finish'): void
+  (event: 'hide'): void
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+  (event: 'change-name', value: [string, UI_I_TreeNode | null]): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+:deep(.modal-body) {
+  display: flex;
+  flex-direction: column;
+}
+.register-vm-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+</style>

package/components/common/vm/actions/register/Register.vue

@@ -1,66 +1,29 @@
 <template>
-  <div class="register-vm">
-    <atoms-wizard
-      :wizard="wizard"
-      :selected-scheme="selectedScheme"
-      :title="localization.common.registerVm"
-      :localization="localization"
-      test-id="register-wizard"
-      show
-      @change-steps="onChangeSteps"
-      @hide="emits('hide')"
-      @submit="emits('finish')"
-    >
-      <template #modalBody="{ selectedStep }">
-        <!--        <atoms-loader-->
-        <!--          v-show="props.isLoading"-->
-        <!--          id="loader"-->
-        <!--          test-id="edit-vm-settings-spinner"-->
-        <!--        />-->
-        <div class="register-vm-content">
-          <common-wizards-common-steps-name
-            v-show="
-              selectedStep.id === dynamicSteps.selectName ||
-              selectedStep.id === dynamicSteps.selectNameFolder
-            "
-            v-model:name="vmForm.name"
-            v-model:location="location"
-            :show="
-              selectedStep.id === dynamicSteps.selectName ||
-              selectedStep.id === dynamicSteps.selectNameFolder
-            "
-            :name-form-submit="nameFormSubmit"
-            :name-request-url="props.nameRequestUrl"
-            :validation-description="
-              localization.common.enterValidLocationVirtualMachine
-            "
-            :name-exist-validation-description="
-              localization.common.vmNameExistInSelectedLocation
-            "
-            :test-ids="nameTestIds"
-            :has-location="props.project === 'sphere'"
-            :location-nodes="props.locationNodes"
-            :allowed-location-kinds="allowedLocationKinds"
-            :location-description="locationDescription"
-            @submit="onChangeName(...$event)"
-          />
-          <common-wizards-common-steps-compute-resource
-            v-if="isSphere"
-            v-show="selectedStep.id === dynamicSteps.selectComputeResource"
-            v-model="vmForm.computeResource"
-            :node="computeResourceTreeLocal"
-            :alert-messages="computeResourceAlert"
-            :is-loading="isLoadingComputeTree"
-            :compatibility-text="compatibilityText"
-          />
-          <common-ready-to-complete
-            v-if="selectedStep.id === dynamicSteps.readyComplete"
-            :data="props.readyCompleteTableInfo"
-          />
-        </div>
-      </template>
-    </atoms-wizard>
-  </div>
+  <component
+    :is="currentComponent"
+    v-model="vmForm"
+    v-model:location="location"
+    :project="props.project"
+    :ready-complete-table-info="props.readyCompleteTableInfo"
+    :name-request-url="props.nameRequestUrl"
+    :wizard="wizard"
+    :selected-scheme="selectedScheme"
+    :dynamic-steps="dynamicSteps"
+    :name-form-submit="nameFormSubmit"
+    :name-test-ids="nameTestIds"
+    :allowed-location-kinds="allowedLocationKinds"
+    :location-description="locationDescription"
+    :is-sphere="isSphere"
+    :compute-resource-tree-local="computeResourceTreeLocal"
+    :compatibility-text="compatibilityText"
+    :is-loading-compute-tree="isLoadingComputeTree"
+    :compute-resource-alert="computeResourceAlert"
+    :location-nodes="props.locationNodes"
+    @finish="emits('finish')"
+    @hide="emits('hide')"
+    @change-steps="onChangeSteps"
+    @change-name="onChangeName(...$event)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -78,6 +41,7 @@ import {
   stepsFunc,
   stepsSchemeInitial,
 } from '~/components/common/vm/actions/register/lib/config/steps'
+import { allowedLocationKinds } from '~/components/common/vm/actions/register/lib/config'
 
 const vmForm = defineModel<any>({ required: true })
 
@@ -111,7 +75,15 @@ const emits = defineEmits<{
   ): void // для сферы
 }>()
 
-const { $recursion }: any = useNuxtApp()
+const { $store, $recursion }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 const isSphere = computed<boolean>(() => props.project === 'sphere')
@@ -127,7 +99,6 @@ if (isSphere.value) {
   wizard.selectStepHard(1)
 }
 
-const allowedLocationKinds = [3, 7] // TODO use from config
 const locationDescription = computed<string>(
   () => localization.value.common.selectLocationVirtualMachine
 )
@@ -339,14 +310,4 @@ const computeResourceTreeLocal = computed<UI_I_TreeNode | null>(() => {
 })
 </script>
 
-<style scoped lang="scss">
-:deep(.modal-body) {
-  display: flex;
-  flex-direction: column;
-}
-.register-vm-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/vm/actions/register/lib/config/index.ts

@@ -0,0 +1 @@
+export const allowedLocationKinds = [3, 7]

package/components/common/vm/actions/register/lib/config/steps.ts

@@ -1,86 +1,86 @@
-import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/enums'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-export const dynamicSteps = {
-  selectName: 0,
-  selectNameFolder: 1,
-  selectComputeResource: 2,
-  readyComplete: 3,
-}
-
-export const stepsFunc = (
-  localization: UI_I_Localization
-): UI_I_WizardStep[] => {
-  return [
-    // Procurator
-    {
-      id: dynamicSteps.selectName,
-      stepName: '',
-      title: localization.common.selectName,
-      subTitle: localization.common.specifyUniqueName,
-      status: UI_E_WIZARD_STATUS.SELECTED,
-      isValid: true,
-      testId: 'vm-select-name',
-      fields: {
-        name: {
-          field: '',
-          alert: '',
-        },
-      },
-    },
-    // Sphere
-    {
-      id: dynamicSteps.selectNameFolder,
-      stepName: '',
-      title: localization.vmWizard.selectNameFolder,
-      subTitle: localization.common.specifyUniqueNameTargetLocation,
-      status: UI_E_WIZARD_STATUS.INACTIVE,
-      isValid: true,
-      testId: 'vm-select-name-folder',
-      fields: {
-        name: {
-          field: '',
-          alert: '',
-        },
-      },
-    },
-    // Sphere
-    {
-      id: dynamicSteps.selectComputeResource,
-      stepName: '',
-      title: localization.vmWizard.selectComputeResource,
-      subTitle: localization.common.selectDestinationComputeResourceOperation,
-      status: UI_E_WIZARD_STATUS.INACTIVE,
-      isValid: true,
-      testId: 'vm-select-compute-resource',
-      fields: {
-        computeResource: {
-          field: '',
-          alert: '',
-        },
-      },
-    },
-    {
-      id: dynamicSteps.readyComplete,
-      stepName: '',
-      title: localization.vmWizard.readyComplete,
-      subTitle: localization.vmWizard.lastCreateSubtitle,
-      status: UI_E_WIZARD_STATUS.INACTIVE,
-      isValid: true,
-      testId: 'vm-ready-complete',
-      fields: {},
-    },
-  ]
-}
-
-export const stepsSchemeInitial = [
-  // 0 Procurator
-  [dynamicSteps.selectName, dynamicSteps.readyComplete],
-  // 1 Sphere
-  [
-    dynamicSteps.selectNameFolder,
-    dynamicSteps.selectComputeResource,
-    dynamicSteps.readyComplete,
-  ],
-]
+import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/enums'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+export const dynamicSteps = {
+  selectName: 0,
+  selectNameFolder: 1,
+  selectComputeResource: 2,
+  readyComplete: 3,
+}
+
+export const stepsFunc = (
+  localization: UI_I_Localization
+): UI_I_WizardStep[] => {
+  return [
+    // Procurator
+    {
+      id: dynamicSteps.selectName,
+      stepName: '',
+      title: localization.common.selectName,
+      subTitle: localization.common.specifyUniqueName,
+      status: UI_E_WIZARD_STATUS.SELECTED,
+      isValid: true,
+      testId: 'vm-select-name',
+      fields: {
+        name: {
+          field: '',
+          alert: '',
+        },
+      },
+    },
+    // Sphere
+    {
+      id: dynamicSteps.selectNameFolder,
+      stepName: '',
+      title: localization.vmWizard.selectNameFolder,
+      subTitle: localization.common.specifyUniqueNameTargetLocation,
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      testId: 'vm-select-name-folder',
+      fields: {
+        name: {
+          field: '',
+          alert: '',
+        },
+      },
+    },
+    // Sphere
+    {
+      id: dynamicSteps.selectComputeResource,
+      stepName: '',
+      title: localization.vmWizard.selectComputeResource,
+      subTitle: localization.common.selectDestinationComputeResourceOperation,
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      testId: 'vm-select-compute-resource',
+      fields: {
+        computeResource: {
+          field: '',
+          alert: '',
+        },
+      },
+    },
+    {
+      id: dynamicSteps.readyComplete,
+      stepName: '',
+      title: localization.vmWizard.readyComplete,
+      subTitle: localization.vmWizard.lastCreateSubtitle,
+      status: UI_E_WIZARD_STATUS.INACTIVE,
+      isValid: true,
+      testId: 'vm-ready-complete',
+      fields: {},
+    },
+  ]
+}
+
+export const stepsSchemeInitial = [
+  // 0 Procurator
+  [dynamicSteps.selectName, dynamicSteps.readyComplete],
+  // 1 Sphere
+  [
+    dynamicSteps.selectNameFolder,
+    dynamicSteps.selectComputeResource,
+    dynamicSteps.readyComplete,
+  ],
+]