bfg-common 1.5.93 → 1.5.95

package/components/common/wizards/datastore/add/lib/models/interfaces.ts

@@ -2,7 +2,7 @@ import type {
   UI_T_NfsType,
   UI_T_DatastoreTypeCode,
 } from '~/components/common/wizards/datastore/add/lib/models/types'
-import type { UI_I_CreateStorageLunDiskItem } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
+import type { UI_I_CreateStorageLunDiskItem } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/table/lib/models/interfaces'
 
 export interface UI_I_CreateDatastoreForm {
   name: string

package/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces.ts

@@ -14,13 +14,3 @@ export interface UI_I_SelectHostOptions {
   value: string
   disabled?: boolean
 }
-
-export interface UI_I_CreateStorageLunDiskItem {
-  name: string
-  identifier: string
-  lun: number
-  capacity_mb: string
-  hardware_acceleration: string
-  drive_type: string
-  sector_format: string
-}

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

@@ -1,95 +1,34 @@
 <template>
-  <div class="device-selection-step">
-    <atoms-alert
-      v-show="props.alertMessages?.length"
-      :test-id="errorAlertDataId"
-      status="alert-danger"
-      :items="props.alertMessages"
-      @remove="onHideAlert"
-    />
-
-    <div class="clr-form-control clr-row">
-      <label for="" class="clr-control-label clr-col-md-2">
-        {{ localization.common.name }}
-      </label>
-
-      <div class="clr-control-container" :class="nameErrorText && 'clr-error'">
-        <div class="flex-align-center">
-          <input
-            id="device-selection-input"
-            v-model="model.name"
-            data-id="device-selection-input"
-            type="text"
-            class="clr-input"
-            @blur="initValidation(true)"
-            @input="initValidation(false)"
-          />
-          <atoms-the-icon class="error-icon" name="info-circle" />
-        </div>
-
-        <div class="clr-subtext" data-id="storm-datastore-name-field-require">
-          {{ nameErrorText }}
-        </div>
-      </div>
-    </div>
-
-    <atoms-alert
-      v-if="alertInfo"
-      test-id="device-selection-information-alert"
-      class="device-selection-step__alert-info"
-      status="alert-info"
-      :items="[localization.common.nameAndDeviceSelectionAlertInfo]"
-      @remove="onHideAlertInfo"
-    />
-
-    <div
-      v-if="props.project === 'sphere' && !props.hostId"
-      class="clr-form-control clr-row"
-    >
-      <label class="clr-control-label clr-col-12 clr-col-md-2">
-        {{ localization.common.selectHost }}
-      </label>
-
-      <div>
-        <div class="clr-select-wrapper">
-          <select
-            id="device-host-select"
-            v-model="model.hosts"
-            data-id="device-host-select"
-            class="dropdown-toggle"
-            @change="onSelectHost"
-          >
-            <option
-              v-for="(item, index) in hostOptions"
-              :key="index"
-              :value="[item.value]"
-              :disabled="item.disabled"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </div>
-        <div class="clr-subtext">
-          {{ localization.common.selectHostToViewAccessible }}
-        </div>
-      </div>
-    </div>
-
-    <div class="device-selection-step__disk-list">
-      <common-wizards-datastore-add-shared-storm-device-selection-table
-        v-model="model.lunDisk"
-        :data-table="dataTable?.items || []"
-        :total-items="dataTable?.total_items || 0"
-        :total-pages="dataTable?.total_pages || 1"
-        :pagination="pagination"
-        :loading="loading"
-        :is-main-filter="props.isMainFilter"
-        @pagination="updatePagination"
-        @sort="sortTable"
-        @main-filter="emits('main-filter', $event)"
-      />
-    </div>
-  </div>
+  <common-wizards-datastore-add-steps-name-and-device-new
+    v-if="isNewView"
+    v-model="formModel"
+    v-model:is-show-info-alert="isShowAlertInfo"
+    :project="props.project"
+    :messages-fields="props.messagesFields"
+    :host-id="props.hostId"
+    :lun-disks-data="lunDisksData"
+    :host-options="hostOptions"
+    :is-main-filter="props.isMainFilter"
+    :loading="loading"
+    @select-host="onSelectHost"
+  />
+
+  <common-wizards-datastore-add-steps-name-and-device-old
+    v-else
+    v-model="formModel"
+    v-model:is-show-info-alert="isShowAlertInfo"
+    :project="props.project"
+    :alert-messages="props.alertMessages"
+    :messages-fields="props.messagesFields"
+    :host-id="props.hostId"
+    :lun-disks-data="lunDisksData"
+    :host-options="hostOptions"
+    :is-main-filter="props.isMainFilter"
+    :loading="loading"
+    @select-host="onSelectHost"
+    @sort="onSortTable"
+    @hide-alert="(e) => emits('hide-alert', e)"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -98,112 +37,46 @@ import type {
   UI_I_Localization,
   UI_I_ArbitraryObject,
 } from '~/lib/models/interfaces'
-import {
-  API_UI_I_DataTable,
+import type {
   UI_I_Pagination,
   UI_I_DataTableQuery,
 } from '~/lib/models/table/interfaces'
 import type {
-  UI_I_CreateStorageLunDiskItem,
   UI_I_LunDiskSpherePayload,
   UI_I_SelectHostOptions,
-} from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
+} from '~/components/common/wizards/datastore/add/steps/nameAndDevice/lib/models/interfaces'
 import type { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
-import type { UI_I_CreateDatastoreHosts } from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/models/interfaces'
-import type { UI_T_DatastoreTypeCode } from '~/components/common/wizards/datastore/add/lib/models/types'
-import { hostsOptionsFunc } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/config/selectOptions'
-import { validateNameAndGenerateDataId } from '~/components/common/wizards/datastore/add/lib/utils'
+import type { UI_I_CompatibleHosts } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/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'
+import { hostsOptionsFunc } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/lib/config/selectOptions'
 
+const formModel = defineModel<UI_I_CreateDatastoreForm>({ required: true })
 const props = defineProps<{
   project: UI_T_Project
-  stepId: number
   alertMessages: string[]
   messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-  datastoreType: UI_T_DatastoreTypeCode
-  hosts?: UI_I_CreateDatastoreHosts | undefined
+  hosts?: UI_I_CompatibleHosts | undefined
   isMainFilter?: boolean
   hostId?: string
 }>()
-const model = defineModel<any>()
 const emits = defineEmits<{
   (event: 'hide-alert', value: number): void
   (event: 'main-filter', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store } = useNuxtApp()
+const { $store }: any = useNuxtApp()
 
-const isInitDatastoreNameValidation = ref<boolean>(false)
-const initValidation = (onlyBlur: boolean): void => {
-  onlyBlur && (isInitDatastoreNameValidation.value = true)
-}
-
-const nameErrorText = computed<string>(() => {
-  if (props.messagesFields?.datastoreName?.field && !model.value.name) {
-    return props.messagesFields.datastoreName.field
-  }
-
-  if (!isInitDatastoreNameValidation.value) return ''
-  return !model.value.name ? localization.value.common.specifyDatastoreName : ''
-})
-
-const defaultDataId = ref<string>('device-selection-alert-error')
-const errorAlertDataId = computed<string>(() => {
-  if (!props.alertMessages?.length) return
-
-  return !model.value.lunDisk.length
-    ? `${defaultDataId.value}-not-selected-lundisk`
-    : validateNameAndGenerateDataId(
-        model.value.name,
-        props.alertMessages[0],
-        defaultDataId.value
-      )
-})
-
-const alertInfo = ref<boolean>(true)
-const onHideAlertInfo = (): void => {
-  alertInfo.value = false
-}
-
-/* Lun disk table  */
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const isShowAlertInfo = ref<boolean>(true)
 const pagination = ref<UI_I_Pagination>({
   page: 1,
   pageSize: 35,
 })
 const sort = ref<string | null>(null)
 
-const updatePagination = (event: UI_I_Pagination): void => {
-  pagination.value = event
-}
-const sortTable = (event: string): void => {
-  sort.value = event
-
-  props.project === 'procurator'
-    ? initLunDisksDataTable()
-    : initLunDisksForSphere(model.value.hosts[0])
-}
-
-const loading = computed<boolean>(() =>
-  $store.getters['storage/getLoading']('datastoreHosts')
-)
-const dataTable = computed<API_UI_I_DataTable<
-  UI_I_CreateStorageLunDiskItem[]
-> | null>(() => {
-  return $store.getters['storage/getNewDatastoreHosts']
-})
-
-/*  Select host */
-const hostOptions = computed<UI_I_SelectHostOptions[]>(() =>
-  hostsOptionsFunc(localization.value, props.hosts?.items)
-)
-
-const onSelectHost = (): void => {
-  if (props.datastoreType !== 'shared-storm') return // TODO рефакторинг ( удалить проверку )
-
-  initLunDisksForSphere(model.value.hosts[0])
-}
-
 const initLunDisksForSphere = async (host: string): Promise<void> => {
   await $store.dispatch('storage/A_GET_DISKS_LIST', {
     host,
@@ -211,69 +84,51 @@ const initLunDisksForSphere = async (host: string): Promise<void> => {
     sortBy: sort.value,
   } as UI_I_LunDiskSpherePayload)
 }
-if (props.hostId) {
-  initLunDisksForSphere(props.hostId)
-}
-const initLunDisksDataTable = async (): Promise<void> => {
+const initLunDisksForProcurator = async (): Promise<void> => {
   await $store.dispatch('storage/A_GET_LUN_DISK_LIST', {
     ...pagination.value,
     sortBy: sort.value,
   } as UI_I_DataTableQuery)
 }
 
-if (props.project === 'procurator') {
-  // && props.stepId === 2
-  initLunDisksDataTable()
+onMounted(() => {
+  switch (props.project) {
+    case 'procurator':
+      initLunDisksForProcurator()
+      break
+    case 'sphere':
+      if (props.hostId) {
+        initLunDisksForSphere(props.hostId)
+      }
+      break
+  }
+})
+
+const loading = computed<boolean>(() =>
+  $store.getters['storage/getLoading']('datastoreHosts')
+)
+const lunDisksData = computed<UI_I_CreateStorageLunDisks | null>(() => {
+  return $store.getters['storage/getNewDatastoreHosts']
+})
+
+const onSortTable = (event: string): void => {
+  sort.value = event
+
+  props.project === 'procurator'
+    ? initLunDisksForProcurator()
+    : initLunDisksForSphere(formModel.value.hosts[0])
 }
+// const updatePagination = (event: UI_I_Pagination): void => {
+//   pagination.value = event
+// }
 
-const onHideAlert = (): void => {
-  emits('hide-alert', props.stepId)
+/*  Select host for Sphere */
+const hostOptions = computed<UI_I_SelectHostOptions[]>(() =>
+  hostsOptionsFunc(localization.value, props.hosts?.items)
+)
+const onSelectHost = (): void => {
+  initLunDisksForSphere(formModel.value.hosts[0])
 }
 </script>
 
-<style lang="scss" scoped>
-.device-selection-step {
-  display: flex;
-  flex-direction: column;
-  height: inherit;
-  overflow-y: auto;
-  overflow-x: hidden;
-  &__alert-info {
-    :deep(.alert-text) {
-      font-size: 11px;
-      letter-spacing: normal;
-    }
-  }
-  .dropdown-toggle {
-    min-width: 160px;
-  }
-  .clr-form-control {
-    display: flex;
-    flex-direction: row;
-
-    .clr-control-container {
-      min-height: 48px;
-      &.clr-error {
-        .clr-subtext,
-        .error-icon {
-          display: block;
-        }
-      }
-      .clr-subtext,
-      .error-icon {
-        display: none;
-      }
-      .error-icon {
-        fill: #db2100;
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-  &__disk-list {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

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

@@ -1,88 +1,11 @@
 <template>
-  <div class="device-selection-step">
-    <atoms-alert
-      v-show="props.alertMessages?.length"
-      :test-id="errorAlertDataId"
-      status="alert-danger"
-      :items="props.alertMessages"
-      @remove="onHideAlert"
-    />
-
-    <div class="clr-form-control clr-row">
-      <label for="" class="clr-control-label clr-col-md-2">
-        {{ localization.common.name }}
-      </label>
-
-      <div class="clr-control-container" :class="nameErrorText && 'clr-error'">
-        <div class="flex-align-center">
-          <input
-            id="device-selection-input"
-            v-model="model.name"
-            data-id="device-selection-input"
-            type="text"
-            class="clr-input"
-            @blur="initValidation(true)"
-            @input="initValidation(false)"
-          />
-          <atoms-the-icon class="error-icon" name="info-circle" />
-        </div>
-
-        <div class="clr-subtext" data-id="storm-datastore-name-field-require">
-          {{ nameErrorText }}
-        </div>
-      </div>
-    </div>
-
-    <atoms-alert
-      v-if="alertInfo"
-      test-id="device-selection-information-alert"
-      class="device-selection-step__alert-info"
-      status="alert-info"
-      :items="[localization.common.nameAndDeviceSelectionAlertInfo]"
-      @remove="onHideAlertInfo"
-    />
-
-    <div
-      v-if="props.project === 'sphere' && !props.hostId"
-      class="clr-form-control clr-row"
-    >
-      <label class="clr-control-label clr-col-12 clr-col-md-2">
-        {{ localization.common.selectHost }}
-      </label>
-
-      <div>
-        <div class="clr-select-wrapper">
-          <select
-            id="device-host-select"
-            v-model="model.hosts"
-            data-id="device-host-select"
-            class="dropdown-toggle"
-            @change="onSelectHost"
-          >
-            <option
-              v-for="(item, index) in hostOptions"
-              :key="index"
-              :value="[item.value]"
-              :disabled="item.disabled"
-            >
-              {{ item.text }}
-            </option>
-          </select>
-        </div>
-        <div class="clr-subtext">
-          {{ localization.common.selectHostToViewAccessible }}
-        </div>
-      </div>
-    </div>
-
-    <div class="device-selection-step__disk-list">
+  <div class="name-and-device">
+    <div class="name-and-device__disk-list">
       <common-wizards-datastore-add-shared-storm-device-selection-table
-        v-model="model.lunDisk"
-        :data-table="dataTable?.items || []"
-        :total-items="dataTable?.total_items || 0"
-        :total-pages="dataTable?.total_pages || 1"
+        v-model="formModelLocal.lunDisk"
+        :lun-disks-data="props.lunDisksData"
         :pagination="pagination"
-        :loading="loading"
+        :loading="props.loading"
         :is-main-filter="props.isMainFilter"
         @pagination="updatePagination"
         @sort="sortTable"
@@ -98,45 +21,38 @@ import type {
   UI_I_Localization,
   UI_I_ArbitraryObject,
 } from '~/lib/models/interfaces'
-import {
-  API_UI_I_DataTable,
-  UI_I_Pagination,
-  UI_I_DataTableQuery,
-} from '~/lib/models/table/interfaces'
-import type {
-  UI_I_CreateStorageLunDiskItem,
-  UI_I_LunDiskSpherePayload,
-  UI_I_SelectHostOptions,
-} from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
 import type { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
-import type { UI_I_CreateDatastoreHosts } from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/models/interfaces'
+import type { UI_I_CompatibleHosts } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
 import type { UI_T_DatastoreTypeCode } from '~/components/common/wizards/datastore/add/lib/models/types'
-import { hostsOptionsFunc } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/config/selectOptions'
+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'
 import { validateNameAndGenerateDataId } from '~/components/common/wizards/datastore/add/lib/utils'
 
+const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
+const isShowInfoAlert = defineModel<boolean>('isShowInfoAlert', {
+  required: true,
+})
 const props = defineProps<{
   project: UI_T_Project
-  stepId: number
+  lunDisksData: UI_I_CreateStorageLunDisks
+  hostOptions: UI_I_SelectHostOptions[]
   alertMessages: string[]
   messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
   datastoreType: UI_T_DatastoreTypeCode
-  hosts?: UI_I_CreateDatastoreHosts | undefined
+  hosts?: UI_I_CompatibleHosts | undefined
   isMainFilter?: boolean
   hostId?: string
+  loading: boolean
 }>()
-const model = defineModel<any>()
 const emits = defineEmits<{
-  (event: 'hide-alert', value: number): void
   (event: 'main-filter', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store } = useNuxtApp()
 
 const isInitDatastoreNameValidation = ref<boolean>(false)
-const initValidation = (onlyBlur: boolean): void => {
-  onlyBlur && (isInitDatastoreNameValidation.value = true)
-}
 
 const nameErrorText = computed<string>(() => {
   if (props.messagesFields?.datastoreName?.field && !model.value.name) {
@@ -161,9 +77,6 @@ const errorAlertDataId = computed<string>(() => {
 })
 
 const alertInfo = ref<boolean>(true)
-const onHideAlertInfo = (): void => {
-  alertInfo.value = false
-}
 
 /* Lun disk table  */
 
@@ -184,96 +97,14 @@ const sortTable = (event: string): void => {
     : initLunDisksForSphere(model.value.hosts[0])
 }
 
-const loading = computed<boolean>(() =>
-  $store.getters['storage/getLoading']('datastoreHosts')
-)
-const dataTable = computed<API_UI_I_DataTable<
-  UI_I_CreateStorageLunDiskItem[]
-> | null>(() => {
-  return $store.getters['storage/getNewDatastoreHosts']
-})
-
-/*  Select host */
-const hostOptions = computed<UI_I_SelectHostOptions[]>(() =>
-  hostsOptionsFunc(localization.value, props.hosts?.items)
-)
-
 const onSelectHost = (): void => {
   if (props.datastoreType !== 'shared-storm') return // TODO рефакторинг ( удалить проверку )
 
   initLunDisksForSphere(model.value.hosts[0])
 }
-
-const initLunDisksForSphere = async (host: string): Promise<void> => {
-  await $store.dispatch('storage/A_GET_DISKS_LIST', {
-    host,
-    ...pagination.value,
-    sortBy: sort.value,
-  } as UI_I_LunDiskSpherePayload)
-}
-if (props.hostId) {
-  initLunDisksForSphere(props.hostId)
-}
-const initLunDisksDataTable = async (): Promise<void> => {
-  await $store.dispatch('storage/A_GET_LUN_DISK_LIST', {
-    ...pagination.value,
-    sortBy: sort.value,
-  } as UI_I_DataTableQuery)
-}
-
-if (props.project === 'procurator') {
-  // && props.stepId === 2
-  initLunDisksDataTable()
-}
-
-const onHideAlert = (): void => {
-  emits('hide-alert', props.stepId)
-}
 </script>
 
 <style lang="scss" scoped>
-.device-selection-step {
-  display: flex;
-  flex-direction: column;
-  height: inherit;
-  overflow-y: auto;
-  overflow-x: hidden;
-  &__alert-info {
-    :deep(.alert-text) {
-      font-size: 11px;
-      letter-spacing: normal;
-    }
-  }
-  .dropdown-toggle {
-    min-width: 160px;
-  }
-  .clr-form-control {
-    display: flex;
-    flex-direction: row;
-
-    .clr-control-container {
-      min-height: 48px;
-      &.clr-error {
-        .clr-subtext,
-        .error-icon {
-          display: block;
-        }
-      }
-      .clr-subtext,
-      .error-icon {
-        display: none;
-      }
-      .error-icon {
-        fill: #db2100;
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-  &__disk-list {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
+.name-and-device {
 }
 </style>