bfg-common 1.5.85 → 1.5.87

package/components/common/wizards/datastore/add/steps/hostAccessibility/HostAccessibilityNew.vue

@@ -1,27 +1,48 @@
 <template>
   <div class="host-accessibility">
-    {{ props }}
-    {{ modelHosts }}
+    <ui-tabs
+      v-model="activeTabModel"
+      test-id="accessibility"
+      :tabs="tabsLocal"
+      type="outline"
+      class="host-accessibility__tab"
+    >
+    </ui-tabs>
+
+    <common-wizards-datastore-add-steps-host-accessibility-table
+      v-model="formHostsLocal"
+      :data="props.hosts"
+      :table-type="activeTabModel"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { T_HostsAccessibilityTab } from '~/components/common/wizards/datastore/add/nfs/accessibility/lib/models/types'
-import type { UI_I_CreateDatastoreHosts } from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/models/interfaces'
-import { hostAccessibilityTabsFunc } from '~/components/common/wizards/datastore/add/nfs/accessibility/lib/config/tabsPannel'
+import type { UI_I_CompatibleHosts } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
+import type { UI_T_HostsAccessibilityTab } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/lib/models/types'
 
+const formHostsLocal = defineModel<string[]>({ required: true })
+const activeTabModel = defineModel<UI_T_HostsAccessibilityTab>('activeTab', {
+  required: true,
+})
 const props = defineProps<{
-  alertMessages: string[]
-  hosts?: UI_I_CreateDatastoreHosts
+  hosts?: UI_I_CompatibleHosts
+  tabOptions: UI_I_CollapseNavItem[]
 }>()
-const modelHosts = defineModel<string[]>()
-// const emits = defineEmits<{
-//   (event: 'hide-alert', value: number): void
-// }>()
 
-// const localization = computed<UI_I_Localization>(() => useLocal())
+const tabsLocal = computed<UI_I_CollapseNavItem[]>(() =>
+  props.tabOptions.map((tab: UI_I_CollapseNavItem) => ({
+    ...tab,
+    name: tab.text,
+  }))
+)
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.host-accessibility {
+  &__tab {
+    padding: 16px 0;
+  }
+}
+</style>

package/components/common/wizards/datastore/add/steps/hostAccessibility/HostAccessibilityOld.vue

@@ -26,7 +26,6 @@
 
 <script lang="ts" setup>
 import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_CompatibleHosts } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
 import type { UI_T_HostsAccessibilityTab } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/lib/models/types'
 import { dynamicSteps } from '~/components/common/wizards/datastore/add/lib/config/steps'
@@ -44,8 +43,6 @@ const emits = defineEmits<{
   (event: 'hide-alert', value: number): void
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
 const onHideAlert = (): void =>
   emits('hide-alert', dynamicSteps.hostAccessibility)
 </script>

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

@@ -1,16 +1,29 @@
 <template>
-  <ui-data-table
-    test-id="add-host-license-table"
-    :data="data"
-    :options="options"
-    :loading="props.loading"
-    :total-pages="props.totalPages"
-    :total-items="props.totalItems"
-    :texts="texts"
-    class="license-table"
-    @select-row="onSelectRow"
-  >
-  </ui-data-table>
+  <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>
@@ -26,10 +39,11 @@ import {
   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 selectedLicenseIdLocal = defineModel<number>({ required: true })
+const selectedHostsIdLocal = defineModel<string[]>({ required: true })
 const props = defineProps<{
-  tableData: any[]
+  tableData: UI_I_CompatibleHostsTableItem[]
   totalItems: number
   totalPages: number
   loading: boolean
@@ -53,32 +67,51 @@ const texts = computed<UI_I_TableTexts>(() => ({
 }))
 
 const data = computed<UI_I_DataTable>(() => ({
-  id: 'license-table',
-  header: taskHeadItems.value,
-  body: taskBodyItems.value,
+  id: 'accessibility-host-table',
+  header: hostHeadItems.value,
+  body: hostBodyItems.value,
 }))
 
-const taskHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+const hostHeadItems = computed<UI_I_DataTableHeader[]>(() =>
   getHeaderDataFunc(localization.value)
 )
 
-const taskBodyItems = ref<UI_I_DataTableBody[]>([])
+const hostBodyItems = ref<UI_I_DataTableBody[]>([])
 watch(
   () => props.tableData,
-  (newValue) => {
+  (newValue: UI_I_CompatibleHostsTableItem[]) => {
     if (!newValue?.length) {
-      taskBodyItems.value = []
+      hostBodyItems.value = []
       return
     }
 
-    taskBodyItems.value = getBodyDataFunc(newValue)
+    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 => {
-  selectedLicenseIdLocal.value = value?.[0].row
+  // TODO поправить сейчас работает неправильно < selectedHostsIdLocal >
+  selectedHostsIdLocal.value = value?.[0].row
 }
 </script>
 
-<style lang="scss" scoped></style>
+<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 {
+  }
+}
+</style>

package/components/common/wizards/datastore/add/steps/hostAccessibility/table/new/lib/config/compatibleTable.ts

@@ -4,57 +4,32 @@ import type {
   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: 'license',
-    text: localization.license.license,
+    colName: 'host',
+    text: localization.common.host,
     isSortable: true,
     sort: 'asc',
-    width: '120px',
+    width: '250px',
     show: true,
     filter: false,
   },
   {
     col: 'col1',
-    colName: 'license_key',
-    text: localization.license.licenseKey,
+    colName: 'cluster',
+    text: localization.common.cluster,
     isSortable: true,
     sort: 'asc',
-    width: '120px',
-    show: true,
-    filter: false,
-  },
-  {
-    col: 'col2',
-    colName: 'product',
-    text: localization.common.product,
-    isSortable: true,
-    sort: 'asc',
-    width: '96px',
-    show: true,
-    filter: false,
-  },
-  {
-    col: 'col3',
-    colName: 'usage',
-    text: localization.common.usage,
-    isSortable: true,
-    sort: 'asc',
-    width: '96px',
-    show: true,
-    filter: false,
-  },
-  {
-    col: 'col4',
-    colName: 'capacity',
-    text: localization.common.capacity,
-    isSortable: true,
-    sort: 'asc',
-    width: '96px',
+    width: '250px',
     show: true,
     filter: false,
   },
@@ -73,30 +48,38 @@ export const options: UI_I_DataTableOptions = {
   showSelectedRows: false,
   showColumnManager: false,
   withActions: false,
-  selectType: 'radio',
+  selectType: 'checkbox',
   inBlock: true,
   showExport: false,
   withCollapse: false,
 }
 
 export const getBodyDataFunc = (
-  bodyData: any[]
+  bodyData: UI_I_CompatibleHostsTableItem[]
 ): UI_I_DataTableBody[] => {
-  return bodyData.map((license, _index: number) => {
+  return bodyData.map((host, _index: number) => {
     return {
-      row: Number(license.id),
+      row: Number(host.id),
       collapse: false,
       isHiddenCollapse: false,
       collapseToggle: false,
       data: [
-        { col: 'col0', text: license.licence },
         {
+          key: 'icon',
+          col: 'col0',
+          text: host.host,
+          data: {
+            iconClassName: `vsphere-icon-${hostIconByState[host.state]}`,
+          },
+        },
+        {
+          key: 'icon',
           col: 'col1',
-          text: license.licence_key,
+          text: host.cluster || '--',
+          data: {
+            iconClassName: `vsphere-icon-${clusterIconByState[1]}`,
+          },
         },
-        { col: 'col2', text: license.product },
-        { col: 'col3', text: license.usage },
-        { col: 'col4', text: license.capacity || '--' },
       ],
     }
   })

package/components/common/wizards/datastore/add/steps/hostAccessibility/table/old/lib/config/compatibleTable.ts

@@ -3,8 +3,8 @@ import type {
   UI_I_BodyItem,
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { constructHeadItem } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
-import type { I_CompatibleHostsTable } from '~/components/common/wizards/datastore/add/nfs/accessibility/lib/models/interfaces'
+import * as defaultSettings from '~/components/atoms/table/dataGrid/lib/config/settingsTable'
+import type { UI_I_CompatibleHostsTableItem } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/lib/models/interfaces'
 import { compatibleHostsTableKeys } from '~/components/common/wizards/datastore/add/steps/hostAccessibility/table/old/lib/config/tableKeys'
 import {
   hostIconByState,
@@ -19,22 +19,18 @@ const getItems = (
     [localization.common.cluster, true, '300px', compatibleHostsTableKeys[1]],
   ]
 }
-
 export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
-  const result: UI_I_HeadItem[] = []
-  getItems(localization).forEach((item) => {
-    result.push(constructHeadItem('icon', item[0], item[3], false, item[2]))
+  return defaultSettings.defaultHeadItems(getItems(localization), {
+    icon: [0, 1],
   })
-  return result
 }
 
 export const bodyItems = (
-  data: I_CompatibleHostsTable[]
+  data: UI_I_CompatibleHostsTableItem[]
 ): UI_I_BodyItem[][] => {
   const bodyItems: UI_I_BodyItem[][] = []
-  data.forEach((item: I_CompatibleHostsTable, key) => {
+  data.forEach((item: UI_I_CompatibleHostsTableItem, key) => {
     const hostData = {
-      // @ts-ignore
       iconClassName: `vsphere-icon-${hostIconByState[item.state]}`,
     }
     const clusterData = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.85",
+  "version": "1.5.87",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",