bfg-common 1.5.93 → 1.5.95

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

@@ -1,37 +1,224 @@
 <template>
-  <div class="name-and-device">
-    {{ props }}
-    {{ model }}
+  <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="formModelLocal.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="isShowInfoAlert"
+      test-id="device-selection-information-alert"
+      class="device-selection-step__alert-info"
+      status="alert-info"
+      :items="[localization.common.nameAndDeviceSelectionAlertInfo]"
+      @remove="isShowInfoAlert = false"
+    />
+
+    <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="formModelLocal.hosts"
+            data-id="device-host-select"
+            class="dropdown-toggle"
+            @change="emits('select-host')"
+          >
+            <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="formModelLocal.lunDisk"
+        :lun-disks-data="props.lunDisksData"
+        :pagination="pagination"
+        :loading="props.loading"
+        :is-main-filter="props.isMainFilter"
+        @pagination="updatePagination"
+        @sort="emits('sort', $event)"
+        @main-filter="emits('main-filter', $event)"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { UI_T_Project } from '~/lib/models/types'
 import type {
-  // UI_I_Localization,
+  UI_I_Localization,
   UI_I_ArbitraryObject,
 } from '~/lib/models/interfaces'
+import { 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_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 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'
+import { dynamicSteps } from '~/components/common/wizards/datastore/add/lib/config/steps'
 
+const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
+const isShowInfoAlert = defineModel<boolean>('isShowInfoAlert', {
+  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
   isMainFilter?: boolean
   hostId?: string
+  lunDisksData: UI_I_CreateStorageLunDisks
+  hostOptions: UI_I_SelectHostOptions[]
+  loading: boolean
 }>()
-const model = defineModel<any>()
 const emits = defineEmits<{
+  (event: 'select-host'): void
   (event: 'hide-alert', value: number): void
   (event: 'main-filter', value: string): void
+  (event: 'sort', value: string): void
 }>()
 
-// const localization = computed<UI_I_Localization>(() => useLocal())
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isInitDatastoreNameValidation = ref<boolean>(false)
+const initValidation = (onlyBlur: boolean): void => {
+  onlyBlur && (isInitDatastoreNameValidation.value = true)
+}
+
+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.specifyDatastoreName
+    : ''
+})
+
+const defaultDataId = ref<string>('device-selection-alert-error')
+const errorAlertDataId = computed<string>(() => {
+  if (!props.alertMessages?.length) return
+
+  return !formModelLocal.value.lunDisk.length
+    ? `${defaultDataId.value}-not-selected-lundisk`
+    : validateNameAndGenerateDataId(
+        formModelLocal.value.name,
+        props.alertMessages[0],
+        defaultDataId.value
+      )
+})
+
+/* Lun disk table  */
+
+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 onHideAlert = (): void => {
+  emits('hide-alert', dynamicSteps.nameAndDevice)
+}
 </script>
 
-<style lang="scss" scoped></style>
+<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>

package/components/common/wizards/datastore/add/steps/nameAndDevice/lib/config/selectOptions.ts

@@ -1,5 +1,5 @@
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SelectHostOptions } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/lib/models/interfaces'
 
 const constructHostListFunc = (
   data: { host: string; id: string }[]
@@ -19,5 +19,8 @@ export const hostsOptionsFunc = (
 
   const data = constructHostListFunc(hosts)
 
-  return [{ text: localization.common.selectHost, value: '', disabled: true }, ...data]
+  return [
+    { text: localization.common.selectHost, value: '', disabled: true },
+    ...data,
+  ]
 }

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

@@ -1,4 +1,4 @@
-import { UI_I_DataTableQuery } from '~/lib/models/table/interfaces'
+import type { UI_I_DataTableQuery } from '~/lib/models/table/interfaces'
 
 export interface UI_I_LunDiskSpherePayload extends UI_I_DataTableQuery {
   host: string
@@ -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/table/Table.vue

@@ -1,32 +1,17 @@
 <template>
-  <div class="data-table-view">
-    <atoms-table-data-grid
-      v-model:selected-row="selectedLunDiskLocal"
-      v-model:column-keys="columnKeys"
-      v-model:page-size="pagination.pageSize"
-      v-model:page="pagination.page"
-      type="checkbox"
-      class="data-table"
-      test-id="device-selection-lun-disk-table"
-      :head-items="headItems"
-      :body-items="bodyItems"
-      :total-items="props.totalItems"
-      :total-pages="props.totalPages"
-      :loading="loading"
-      :is-main-filter="props.isMainFilter"
-      :main-filter-placeholder="localization.filter"
-      hide-page-size
-      @main-filter="onMainFiltering"
-      @sorting="sorting"
-    >
-      <template #icon="{ item }">
-        <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
-        <span class="text-ellipsis">
-          {{ item.text }}
-        </span>
-      </template>
-    </atoms-table-data-grid>
-  </div>
+  <common-wizards-datastore-add-steps-name-and-device-table-new
+    v-if="isNewView"
+    :data-table="props.lunDisksData?.items || []"
+    :total-items="props.lunDisksData?.total_items || 0"
+    :total-pages="props.lunDisksData?.total_pages || 1"
+  />
+
+  <common-wizards-datastore-add-steps-name-and-device-table-old
+    v-else
+    :data-table="props.lunDisksData?.items || []"
+    :total-items="props.lunDisksData?.total_items || 0"
+    :total-pages="props.lunDisksData?.total_pages || 1"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -38,18 +23,19 @@ import type {
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 import { UI_I_Localization } from '~/lib/models/interfaces'
 import { UI_I_Pagination } from '~/lib/models/table/interfaces'
-import { UI_I_CreateStorageLunDiskItem } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
+import type {
+  UI_I_CreateStorageLunDiskItem,
+  UI_I_CreateStorageLunDisks,
+} from '~/components/common/wizards/datastore/add/steps/nameAndDevice/table/lib/models/interfaces'
 import * as lunDiskTable from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/table/lib/config/lunDiskTable'
 
+const modelLunDisk = defineModel<UI_I_CreateStorageLunDiskItem[]>()
 const props = defineProps<{
-  dataTable: UI_I_CreateStorageLunDiskItem[]
+  lunDisksData: UI_I_CreateStorageLunDisks
   loading: boolean
-  totalItems: number
-  totalPages: number
   pagination: UI_I_Pagination
   isMainFilter?: boolean
 }>()
-const modelLunDisk = defineModel<UI_I_CreateStorageLunDiskItem[]>()
 const emits = defineEmits<{
   (event: 'pagination', value: UI_I_Pagination): void
   (event: 'sort', value: string): void
@@ -57,6 +43,9 @@ const emits = defineEmits<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const sorting = (e: [number, boolean]): void => {
   const [column, status] = e

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

@@ -0,0 +1,14 @@
+import type { API_UI_I_DataTable } from '~/lib/models/table/interfaces'
+
+export interface UI_I_CreateStorageLunDiskItem {
+  name: string
+  identifier: string
+  lun: number
+  capacity_mb: string
+  hardware_acceleration: string
+  drive_type: string
+  sector_format: string
+}
+
+export interface UI_I_CreateStorageLunDisks
+  extends API_UI_I_DataTable<UI_I_CreateStorageLunDiskItem[]> {}

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/new/New.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="host-accessibility-table">
+    <h2>
+      {{ tableHeadline }}
+    </h2>
+
+    <ui-data-table
+      test-id="accessibility-table"
+      :data="data"
+      :options="options"
+      :loading="props.loading"
+      :total-pages="props.totalPages"
+      :total-items="props.totalItems"
+      :texts="texts"
+      class="accessibility-host-table"
+      size="sm"
+      @select-row="onSelectRow"
+    >
+      <template #icon="{ item }">
+        <span :class="['icon', item.data.iconClassName]" />
+        <span class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </ui-data-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableHeader,
+  UI_I_DataTableBody,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import {
+  options,
+  getHeaderDataFunc,
+  getBodyDataFunc,
+} from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/new/lib/config/compatibleTable'
+import { UI_I_CompatibleHostsTableItem } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
+
+const selectedHostsIdLocal = defineModel<string[]>({ required: true })
+const props = defineProps<{
+  tableData: UI_I_CompatibleHostsTableItem[]
+  totalItems: number
+  totalPages: number
+  loading: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'accessibility-host-table',
+  header: hostHeadItems.value,
+  body: hostBodyItems.value,
+}))
+
+const hostHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
+)
+
+const hostBodyItems = ref<UI_I_DataTableBody[]>([])
+watch(
+  () => props.tableData,
+  (newValue: UI_I_CompatibleHostsTableItem[]) => {
+    if (!newValue?.length) {
+      hostBodyItems.value = []
+      return
+    }
+
+    hostBodyItems.value = getBodyDataFunc(newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const tableHeadline = computed<string>(() => {
+  const { selected } = localization.value.common
+  return ` ${props.totalItems} ${selected}`
+})
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  // TODO поправить сейчас работает неправильно < selectedHostsIdLocal >
+  selectedHostsIdLocal.value = value?.[0].row
+}
+</script>
+
+<style lang="scss" scoped>
+.host-accessibility-table {
+  h2 {
+    font-family: Inter, serif;
+    color: var(--title-form-first-color);
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 100%;
+    margin-bottom: 12px;
+  }
+  .icon {
+    margin-right: 4px;
+  }
+}
+</style>

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/new/lib/config/lunDiskTable.ts

@@ -0,0 +1,86 @@
+import type {
+  UI_I_DataTableBody,
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CompatibleHostsTableItem } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
+import {
+  hostIconByState,
+  clusterIconByState,
+} from '~/components/common/lib/config/states'
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 'col0',
+    colName: 'host',
+    text: localization.common.host,
+    isSortable: true,
+    sort: 'asc',
+    width: '250px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col1',
+    colName: 'cluster',
+    text: localization.common.cluster,
+    isSortable: true,
+    sort: 'asc',
+    width: '250px',
+    show: true,
+    filter: false,
+  },
+]
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [{ text: '10', value: 100, default: true }],
+  isSelectable: true,
+  isFocusable: false,
+  showPagination: false,
+  showPaginationOnTop: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: true,
+  isResizable: true,
+  showSearch: false,
+  showSelectedRows: false,
+  showColumnManager: false,
+  withActions: false,
+  selectType: 'checkbox',
+  inBlock: true,
+  showExport: false,
+  withCollapse: false,
+}
+
+export const getBodyDataFunc = (
+  bodyData: UI_I_CompatibleHostsTableItem[]
+): UI_I_DataTableBody[] => {
+  return bodyData.map((host, _index: number) => {
+    return {
+      row: Number(host.id),
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      data: [
+        {
+          key: 'icon',
+          col: 'col0',
+          text: host.host,
+          data: {
+            iconClassName: `vsphere-icon-${hostIconByState[host.state]}`,
+          },
+        },
+        {
+          key: 'icon',
+          col: 'col1',
+          text: host.cluster || '--',
+          data: {
+            iconClassName: `vsphere-icon-${clusterIconByState[1]}`,
+          },
+        },
+      ],
+    }
+  })
+}