bfg-common 1.5.682 → 1.5.684

package/components/common/wizards/datastore/add/steps/nameAndDevice/NameAndDeviceNew.vue

@@ -1,227 +1,232 @@
-<template>
-  <div class="name-and-device">
-    <div class="name-and-device__row row">
-      <div class="row__title">
-        <span class="row__title-text">
-          {{ localization.common.name }}
-        </span>
-      </div>
-      <div class="row__content">
-        <ui-input
-          id="device-selection-input"
-          v-model="formModelLocal.name"
-          :placeholder="localization.common.name"
-          :error="nameErrorText"
-          test-id="device-selection-input"
-          @blur="initValidation(true)"
-          @input="initValidation(false)"
-        />
-      </div>
-    </div>
-
-    <ui-alert
-      v-if="isShowInfoAlert"
-      :messages="[alertInfoDescription]"
-      test-id="device-selection-information-alert"
-      type="info"
-      size="md"
-      class="name-and-device__alert"
-    />
-
-    <div class="name-and-device__row row">
-      <div class="row__title">
-        <span class="row__title-text">
-          {{ selectedHostLabel }}
-        </span>
-
-        <common-tooltip-help
-          v-if="props.isShowSelectHost"
-          :title="localization.common.information"
-          :help-text="localization.common.selectHostToViewAccessible"
-          test-id="device-select-host-tooltip"
-          help-id="device-select-host-tooltip"
-          dropdown-width="272px"
-          dropdown-left
-          dropdown-top
-        />
-      </div>
-      <div v-if="props.isShowSelectHost" class="row__content">
-        <ui-select
-          v-model="selectedHostLocal"
-          :items="props.hostOptions"
-          :placeholder="localization.common.selectHost"
-          select-width="100%"
-          show-text
-          test-id="device-host-select"
-          size="md"
-          theme="light"
-          @change="onSelectHost"
-        />
-      </div>
-
-      <div v-else class="row__host-name">
-        <span class="icon vsphere-icon-host" />
-        {{ props.selectedHostName }}
-      </div>
-    </div>
-
-    <div class="name-and-device__disk-list">
-      <common-wizards-datastore-add-steps-name-and-device-table
-        v-model="formModelLocal.dev_names"
-        :lun-disks-data="props.lunDisksData"
-        :pagination="props.pagination"
-        :loading="props.loading"
-        :is-main-filter="props.isMainFilter"
-        @sort="emits('sort', $event)"
-        @main-filter="emits('main-filter', $event)"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import type {
-  UI_I_Localization,
-  UI_I_ArbitraryObject,
-} from '~/lib/models/interfaces'
-import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
-import type { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/lib/models/interfaces'
-import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
-import type { UI_I_CreateStorageLunDisks } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/table/lib/models/interfaces'
-
-const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
-const isShowInfoAlert = defineModel<boolean>('isShowInfoAlert', {
-  required: true,
-})
-const props = withDefaults(
-  defineProps<{
-    selectedHostName: string
-    lunDisksData: UI_I_CreateStorageLunDisks
-    hostOptions: UI_I_SelectHostOptions[]
-    alertMessages: string[]
-    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-    pagination: UI_I_Pagination
-    isShowSelectHost: boolean
-    loading: boolean
-    isMainFilter?: boolean
-  }>(),
-  {
-    isMainFilter: undefined,
-  }
-)
-const emits = defineEmits<{
-  (event: 'select-host'): void
-  (event: 'main-filter', value: string): void
-  (event: 'sort', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedHostLocal = ref<string>(formModelLocal.value.hosts[0] || '')
-
-const isInitDatastoreNameValidation = ref<boolean>(false)
-const initValidation = (onlyBlur: boolean): void => {
-  onlyBlur && (isInitDatastoreNameValidation.value = true)
-}
-
-const alertInfoDescription = computed<string>(() =>
-  props.isShowSelectHost
-    ? localization.value.common.nameAndDeviceSelectionAlertInfo
-    : localization.value.common.nameAndDeviceSelectionHostAlertInfo
-)
-const selectedHostLabel = computed<string>(() =>
-  props.isShowSelectHost
-    ? localization.value.common.selectHost
-    : localization.value.common.host
-)
-
-const nameErrorText = computed<string>(() => {
-  if (
-    props.messagesFields?.datastoreName?.field &&
-    !formModelLocal.value.name
-  ) {
-    return props.messagesFields.datastoreName.field
-  }
-
-  if (!isInitDatastoreNameValidation.value) return ''
-  return !formModelLocal.value.name
-    ? localization.value.common.fieldRequired
-    : ''
-})
-
-const onSelectHost = (event: string): void => {
-  formModelLocal.value.hosts = [event]
-  emits('select-host')
-}
-</script>
-
-<style lang="scss" scoped>
-.name-and-device {
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
-  margin: 16px 0 10px 2px;
-
-  &__alert {
-    align-items: flex-start;
-  }
-
-  &__row {
-    width: 100%;
-    min-height: 36px;
-    display: flex;
-    align-items: center;
-    column-gap: 16px;
-    border-bottom: 1px solid var(--wizard-content-line);
-    padding-bottom: 16px;
-  }
-  .row {
-    &__title {
-      max-width: 240px;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      column-gap: 8px;
-      color: var(--wizard-content-title);
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 20px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-
-      &-text {
-        display: block;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-    &__content {
-      max-width: 480px;
-      width: 100%;
-      color: var(--wizard-content-value);
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 20px;
-      letter-spacing: 0;
-      vertical-align: middle;
-    }
-    &__host-name {
-      font-family: 'Inter', sans-serif;
-      height: 36px;
-      display: flex;
-      align-items: center;
-      column-gap: 8px;
-      color: var(--wizard-content-value);
-      font-size: 13px;
-      font-weight: 400;
-      .icon {
-        width: 20px;
-        height: 20px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="name-and-device">
+    <div class="name-and-device__row row">
+      <div class="row__title">
+        <span class="row__title-text">
+          {{ localization.common.name }}
+        </span>
+      </div>
+      <div class="row__content">
+        <ui-input
+          id="device-selection-input"
+          v-model="formModelLocal.name"
+          :placeholder="localization.common.name"
+          :error="nameErrorText"
+          test-id="device-selection-input"
+          @blur="initValidation(true)"
+          @input="initValidation(false)"
+        />
+      </div>
+    </div>
+
+    <ui-alert
+      v-if="isShowInfoAlert"
+      :messages="[alertInfoDescription]"
+      test-id="device-selection-information-alert"
+      type="info"
+      size="md"
+      class="name-and-device__alert"
+    />
+
+    <div class="name-and-device__row row">
+      <div class="row__title">
+        <span class="row__title-text">
+          {{ selectedHostLabel }}
+        </span>
+
+        <common-tooltip-help
+          v-if="props.isShowSelectHost"
+          :title="localization.common.information"
+          :help-text="localization.common.selectHostToViewAccessible"
+          test-id="device-select-host-tooltip"
+          help-id="device-select-host-tooltip"
+          dropdown-width="272px"
+          dropdown-left
+          dropdown-top
+        />
+      </div>
+      <div v-if="props.isShowSelectHost" class="row__content">
+        <ui-select
+          v-model="selectedHostLocal"
+          :items="props.hostOptions"
+          :placeholder="localization.common.selectHost"
+          select-width="100%"
+          show-text
+          test-id="device-host-select"
+          size="md"
+          theme="light"
+          @change="onSelectHost"
+        />
+      </div>
+
+      <div v-else class="row__host-name">
+        <span class="icon vsphere-icon-host" />
+        {{ props.selectedHostName }}
+      </div>
+    </div>
+
+    <div class="name-and-device__disk-list">
+      <common-wizards-datastore-add-steps-name-and-device-table
+        v-model="formModelLocal.dev_names"
+        :lun-disks-data="props.lunDisksData"
+        :pagination="props.pagination"
+        :loading="props.loading"
+        :is-main-filter="props.isMainFilter"
+        @sort="emits('sort', $event)"
+        @main-filter="emits('main-filter', $event)"
+      />
+    </div>
+
+    <common-wizards-datastore-add-steps-name-and-device-advanced-options
+      v-model="formModelLocal.level"
+      :dev-names-count="formModelLocal.dev_names.length"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+} from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/lib/models/interfaces'
+import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+import type { UI_I_CreateStorageLunDisks } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/table/lib/models/interfaces'
+
+const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
+const isShowInfoAlert = defineModel<boolean>('isShowInfoAlert', {
+  required: true,
+})
+const props = withDefaults(
+  defineProps<{
+    selectedHostName: string
+    lunDisksData: UI_I_CreateStorageLunDisks
+    hostOptions: UI_I_SelectHostOptions[]
+    alertMessages: string[]
+    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+    pagination: UI_I_Pagination
+    isShowSelectHost: boolean
+    loading: boolean
+    isMainFilter?: boolean
+  }>(),
+  {
+    isMainFilter: undefined,
+  }
+)
+const emits = defineEmits<{
+  (event: 'select-host'): void
+  (event: 'main-filter', value: string): void
+  (event: 'sort', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedHostLocal = ref<string>(formModelLocal.value.hosts[0] || '')
+
+const isInitDatastoreNameValidation = ref<boolean>(false)
+const initValidation = (onlyBlur: boolean): void => {
+  onlyBlur && (isInitDatastoreNameValidation.value = true)
+}
+
+const alertInfoDescription = computed<string>(() =>
+  props.isShowSelectHost
+    ? localization.value.common.nameAndDeviceSelectionAlertInfo
+    : localization.value.common.nameAndDeviceSelectionHostAlertInfo
+)
+const selectedHostLabel = computed<string>(() =>
+  props.isShowSelectHost
+    ? localization.value.common.selectHost
+    : localization.value.common.host
+)
+
+const nameErrorText = computed<string>(() => {
+  if (
+    props.messagesFields?.datastoreName?.field &&
+    !formModelLocal.value.name
+  ) {
+    return props.messagesFields.datastoreName.field
+  }
+
+  if (!isInitDatastoreNameValidation.value) return ''
+  return !formModelLocal.value.name
+    ? localization.value.common.fieldRequired
+    : ''
+})
+
+const onSelectHost = (event: string): void => {
+  formModelLocal.value.hosts = [event]
+  emits('select-host')
+}
+</script>
+
+<style lang="scss" scoped>
+.name-and-device {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  margin: 16px 0 10px 2px;
+
+  &__alert {
+    align-items: flex-start;
+  }
+
+  &__row {
+    width: 100%;
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+    border-bottom: 1px solid var(--wizard-content-line);
+    padding-bottom: 16px;
+  }
+  .row {
+    &__title {
+      max-width: 240px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      color: var(--wizard-content-title);
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      &-text {
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+    &__content {
+      max-width: 480px;
+      width: 100%;
+      color: var(--wizard-content-value);
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0;
+      vertical-align: middle;
+    }
+    &__host-name {
+      font-family: 'Inter', sans-serif;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      color: var(--wizard-content-value);
+      font-size: 13px;
+      font-weight: 400;
+      .icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+}
+</style>