bfg-common 1.5.93 → 1.5.95

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/old/Old.vue

@@ -0,0 +1,133 @@
+<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="onSorting"
+    >
+      <template #icon="{ item }">
+        <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
+        <span class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDebounceFn } from '@vueuse/core'
+import type {
+  UI_I_HeadItem,
+  UI_I_ColumnKey,
+  UI_I_BodyItem,
+} 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 type { UI_I_CreateStorageLunDiskItem } 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<{
+  tableData: UI_I_CreateStorageLunDiskItem[]
+  loading: boolean
+  totalItems: number
+  totalPages: number
+  pagination: UI_I_Pagination
+  isMainFilter?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'pagination', value: UI_I_Pagination): void
+  (event: 'sort', value: string): void
+  (event: 'main-filter', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSorting = (e: [number, boolean]): void => {
+  const [column, status] = e
+  const direction = status ? 'desc' : 'asc'
+
+  const sort = `${column}.${direction}`
+
+  emits('sort', sort)
+}
+const sendFilter = useDebounceFn((searchText: string) => {
+  emits('main-filter', searchText)
+}, 1000)
+const onMainFiltering = (data: string): void => {
+  sendFilter(data)
+}
+
+const pagination = ref<UI_I_Pagination>({
+  page: 1,
+  pageSize: 1,
+})
+watch(
+  () => props.pagination,
+  (newValue) => {
+    pagination.value = newValue
+  },
+  { immediate: true }
+)
+watch(
+  pagination,
+  (newValue) => {
+    emits('pagination', newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const columnKeys = ref<UI_I_ColumnKey[]>(
+  lunDiskTable.columnKeys(localization.value)
+)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  lunDiskTable.headItems(localization.value)
+)
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  let result: UI_I_BodyItem[][] = []
+  if (props.tableData?.length) {
+    result = lunDiskTable.bodyItems(props.tableData)
+  }
+
+  return result
+})
+
+const selectedLunDiskLocal = ref<number[]>([])
+watch(
+  selectedLunDiskLocal,
+  (newValue: number[]) => {
+    modelLunDisk.value = props.tableData.filter((_: never, key: number) =>
+      newValue.includes(key)
+    )
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.data-table-view {
+  height: inherit;
+  overflow: hidden;
+  .data-table {
+    height: inherit;
+    :deep(.datagrid-outer-wrapper) {
+      height: 400px;
+    }
+  }
+}
+</style>

package/components/common/wizards/datastore/add/steps/readyComplete/ReadyCompleteNew.vue

@@ -18,6 +18,7 @@
 
             <div class="details-list__col-right">
               <span class="details-item-value">
+                <span :class="['icon', list.data.iconClassName]"></span>
                 {{ list.value }}
               </span>
             </div>

package/components/common/wizards/datastore/add/steps/readyComplete/lib/config/propertiesDetails.ts

@@ -3,7 +3,8 @@ import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/in
 import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_CreateStorageLunDiskItem } from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
 import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/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'
+
 const constructLunDiskItems = (
   disks: UI_I_CreateStorageLunDiskItem[]
 ): string => {
@@ -21,7 +22,7 @@ const nfsDetailsFunc = (
   localization: UI_I_Localization,
   data: UI_I_CreateDatastoreForm,
   project: UI_T_Project,
-  nfsHosts: UI_I_CreateDatastoreHosts
+  nfsHosts: UI_I_CompatibleHosts
 ): UI_I_DetailsItem[] => {
   const { name, server, folder, nfsVersion, hosts } = data
   // const accessMode = readonly ? 'Read-only' : 'Read-write'
@@ -50,18 +51,21 @@ const nfsDetailsFunc = (
           value: name,
           items: [],
           testId: 'view-storage-name-in-complete',
+          iconClassName: 'vsphere-icon-datastore',
         },
         {
           label: localization.common.server,
           value: server,
           items: [],
           testId: 'view-server-name-in-complete',
+          iconClassName: 'vsphere-icon-host',
         },
         {
           label: localization.common.folder,
           value: folder,
           items: [],
           testId: 'view-folder-name-in-complete',
+          iconClassName: 'vsphere-icon-folder',
         },
         // {
         //   label: localization.accessMode,
@@ -90,6 +94,7 @@ const nfsDetailsFunc = (
           data: hostsNames,
           items: [],
           testId: 'view-hosts-name-in-complete',
+          iconClassName: 'vsphere-icon-host',
         },
       ],
       actions: [],
@@ -114,6 +119,7 @@ const sharedStormDetailsFunc = (
           value: name,
           items: [],
           testId: 'view-storage-name-in-complete',
+          iconClassName: 'vsphere-icon-datastore',
         },
         {
           label: localization.common.diskLun,
@@ -131,7 +137,7 @@ export const constructDataReadyViewFunc = (
   localization: UI_I_Localization,
   data: UI_I_CreateDatastoreForm,
   project: UI_T_Project,
-  nfsHosts: UI_I_CreateDatastoreHosts
+  nfsHosts: UI_I_CompatibleHosts
 ): UI_I_DetailsItem[] => {
   const details = {
     2: sharedStormDetailsFunc,

package/package.json

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

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

@@ -1 +0,0 @@
-export type T_DatastoreTableItemsTuple = ['name', 'type_ds', 'description']

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

@@ -1 +0,0 @@
-export type T_DatastoreTableItemsTuple = ['name', 'type_ds', 'description']