bfg-common 1.5.514 → 1.5.516

package/components/common/pages/backups/modals/createBackup/datastores/tableView/new/lib/config/table.ts

@@ -0,0 +1,219 @@
+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_BackupDatastore,
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import { datastoreLocalizationByState } from '~/components/common/lib/config/states'
+import type {
+  I_BackupDatastoreChipStatus
+} from "~/components/common/pages/backups/modals/createBackup/datastores/tableView/new/lib/models/interfaces";
+
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 'col0',
+    colName: 'name',
+    text: localization.common.name,
+    isSortable: true,
+    sort: 'asc',
+    width: '104px',
+    show: true,
+    filter: true
+  },
+  {
+    col: 'col1',
+    colName: 'state',
+    text: localization.common.state,
+    isSortable: true,
+    sort: 'asc',
+    width: '128px',
+    show: true,
+    filter: true
+  },
+  {
+    col: 'col2',
+    colName: 'capacity',
+    text: localization.common.capacity,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: true
+  },
+  {
+    col: 'col3',
+    colName: 'provisioned',
+    text: localization.common.provisioned,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: true
+  },
+  {
+    col: 'col4',
+    colName: 'free',
+    text: localization.common.free,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: true
+  },
+  {
+    col: 'col5',
+    colName: 'used',
+    text: localization.common.used,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: true
+  },
+  {
+    col: 'col6',
+    colName: 'type',
+    text: localization.common.type,
+    isSortable: true,
+    sort: 'asc',
+    width: '80',
+    show: true,
+    filter: true
+  },
+  {
+    col: 'col7',
+    colName: 'location',
+    text: localization.common.location,
+    isSortable: true,
+    sort: 'asc',
+    width: '160px',
+    show: true,
+    filter: true
+  }
+]
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [{ text: '10', value: 100, default: true }],
+  isSelectable: true,
+  isFocusable: false,
+  showPagination: false,
+  showPaginationOnTop: false,
+  selectType: 'radio',
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: true,
+  showSearch: false,
+  showSelectedRows: false,
+  showColumnManager: true,
+  withActions: false,
+  inBlock: false,
+  inModal: true,
+  showExport: false,
+  withCollapse: false
+}
+
+export const getBodyDataFunc = (
+  bodyData: UI_I_BackupDatastore[],
+  localization: UI_I_Localization,
+  selectedRow: string
+): UI_I_DataTableBody[] => {
+  const { $binary }: any = useNuxtApp()
+  const lang = useLocalStorage('lang') === 'ru_RU' ? 'ru' : 'en'
+
+  return bodyData.map((datastore, index: number) => {
+    const stateData: I_BackupDatastoreChipStatus = {
+      chipColor: '',
+      testId: `${datastore.name}-progress`
+    }
+
+    switch (datastore.state) {
+      case 0:
+        stateData.iconClassName = 'icon-help'
+        stateData.chipColor = 'primary'
+        break
+      case 1:
+        stateData.iconClassName = 'status-check'
+        stateData.chipColor = 'green'
+        break
+      case 2:
+        stateData.iconClassName = 'warning-outline'
+        stateData.chipColor = 'yellow'
+        break
+      case 3:
+        stateData.iconClassName = 'error-outline'
+        stateData.chipColor = 'red'
+        break
+      case 4:
+        stateData.iconClassName = 'maintenance'
+        stateData.chipColor = 'yellow'
+        break
+      case 5:
+        stateData.iconClassName = 'close'
+        stateData.chipColor = 'red'
+        break
+      case 6:
+        stateData.iconClassName = 'close'
+        stateData.chipColor = 'red'
+        break
+      default:
+        stateData.iconClassName = ''
+        stateData.chipColor = ''
+    }
+
+    return {
+      row: index,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      isSelected: selectedRow === datastore.id,
+      data: [
+        {
+          key: 'icon',
+          col: 'col0',
+          text: datastore.name,
+          data: {
+            iconClassName: [3, 5, 6].includes(datastore.state) ? 'vsphere-icon-datastore-error' : 'vsphere-icon-datastore',
+            id: datastore.id
+          }
+        },
+        {
+          key: 'status',
+          col: 'col1',
+          text: localization.common[datastoreLocalizationByState[datastore.state]] || '--',
+          data: stateData
+        },
+        {
+          col: 'col2',
+          text: $binary.round(datastore.capacity.capacity_mb, false, lang)
+        },
+        {
+          col: 'col3',
+          text: $binary.round(datastore.capacity.provisioned_mb, false, lang)
+        },
+        {
+          col: 'col4',
+          text: $binary.round(datastore.capacity.free_mb, false, lang)
+        },
+        {
+          col: 'col5',
+          text: $binary.round(datastore.capacity.used_mb, false, lang)
+        },
+        {
+          col: 'col6',
+          text: datastore.type_text
+        },
+        {
+          col: 'col7',
+          text: datastore.location
+        }
+      ]
+    }
+  })
+}

package/components/common/pages/backups/modals/createBackup/datastores/tableView/new/lib/models/enums.ts

@@ -0,0 +1,15 @@
+export enum E_BackupDatastoreChipStatus {
+  'help-icon',
+  'running-icon',
+  'status-check',
+  'close',
+}
+
+export enum E_BackupDatastoreChipColor {
+  'default',
+  'primary',
+  'green',
+  'red',
+}
+
+

package/components/common/pages/backups/modals/createBackup/datastores/tableView/new/lib/models/interfaces.ts

@@ -0,0 +1,5 @@
+export interface I_BackupDatastoreChipStatus {
+    iconClassName?: string,
+    chipColor?: string,
+    testId: string
+}

package/components/common/pages/backups/modals/createBackup/datastores/tableView/{TableView.vue → old/TableView.vue}

@@ -1,95 +1,95 @@
-<template>
-  <div class="data-table-view overflow-hidden">
-    <div class="data-table-view__inner">
-      <atoms-table-data-grid
-        v-model:selected-row="selectedRows"
-        v-model:column-keys="columnKeys"
-        class="data-table"
-        type="radio"
-        test-id="datastore-table"
-        :head-items="headItems"
-        :body-items="bodyItems"
-        :total-items="props.totalItems"
-        :total-pages="props.totalPages"
-        :items-per-page="itemsPerPage"
-        :loading="loading"
-        hide-pagination
-        server-off
-      >
-        <template #icon="{ item }">
-          <span :class="['datagrid-cell-icon', item.data]" />
-          <span class="text-ellipsis">
-            {{ item.text }}
-          </span>
-        </template>
-      </atoms-table-data-grid>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type {
-  UI_I_HeadItem,
-  UI_I_ColumnKey,
-  UI_I_BodyItem,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_BackupDatastore } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
-import * as table from '~/components/common/pages/backups/modals/createBackup/datastores/tableView/lib/config/table'
-
-const props = defineProps<{
-  dataTable: UI_I_BackupDatastore[]
-  loading: boolean
-  totalItems: number
-  totalPages: number
-}>()
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedRows = defineModel<string>('selected')
-
-const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
-
-const headItems = computed<UI_I_HeadItem[]>(() =>
-  table.headItems(localization.value)
-)
-
-const bodyItems = computed<UI_I_BodyItem[][]>(() => {
-  let result: UI_I_BodyItem[][] = []
-  if (props.dataTable) {
-    result = table.bodyItems(props.dataTable, localization.value)
-  }
-
-  return result
-})
-watch(
-  bodyItems,
-  () => {
-    setTimeout(() => {
-      selectedRows.value = ''
-    }, 0)
-  },
-  { deep: true, immediate: true }
-)
-</script>
-
-<style lang="scss" scoped>
-.data-table-view {
-  height: inherit;
-  margin-bottom: 10px;
-  margin-right: 10px;
-
-  &__inner {
-    height: inherit;
-  }
-  :deep(.data-table) {
-    height: inherit;
-    .datagrid-outer-wrapper {
-      height: inherit;
-    }
-  }
-}
-.vm-icon {
-  margin-right: 5px;
-}
-</style>
+<template>
+  <div class="data-table-view overflow-hidden">
+    <div class="data-table-view__inner">
+      <atoms-table-data-grid
+        v-model:selected-row="selectedRows"
+        v-model:column-keys="columnKeys"
+        v-model:page="pagination.page"
+        v-model:page-size="pagination.pageSize"
+        :head-items="headItems"
+        :body-items="bodyItems"
+        :total-items="props.totalItems"
+        :total-pages="props.totalPages"
+        :items-per-page="itemsPerPage"
+        :loading="loading"
+        class="data-table"
+        type="radio"
+        test-id="datastore-table"
+        hide-pagination
+        server-off
+      >
+        <template #icon="{ item }">
+          <span :class="['datagrid-cell-icon', item.data]" />
+          <span class="text-ellipsis">
+            {{ item.text }}
+          </span>
+        </template>
+      </atoms-table-data-grid>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_HeadItem,
+  UI_I_ColumnKey,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_BackupDatastore } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
+import * as table from '~/components/common/pages/backups/modals/createBackup/datastores/tableView/old/lib/config/table'
+import type {UI_I_Pagination} from "~/lib/models/table/interfaces";
+
+const props = defineProps<{
+  dataTable: UI_I_BackupDatastore[]
+  loading: boolean
+  totalItems: number
+  totalPages: number
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRows = defineModel<string>('selected')
+
+const pagination = ref<UI_I_Pagination>({
+  page: 1,
+  pageSize: 100,
+})
+
+const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  let result: UI_I_BodyItem[][] = []
+  if (props.dataTable) {
+    result = table.bodyItems(props.dataTable, localization.value)
+  }
+
+  return result
+})
+
+</script>
+
+<style lang="scss" scoped>
+.data-table-view {
+  height: inherit;
+  margin-bottom: 10px;
+  margin-right: 10px;
+
+  &__inner {
+    height: inherit;
+  }
+  :deep(.data-table) {
+    height: inherit;
+    .datagrid-outer-wrapper {
+      height: inherit;
+    }
+  }
+}
+.vm-icon {
+  margin-right: 5px;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/datastores/tableView/{lib → old/lib}/config/keys.ts

@@ -1,14 +1,14 @@
-import type {
-  UI_T_DatastoreTableKeysTuple
-} from '~/components/common/pages/backups/modals/createBackup/datastores/tableView/lib/models/types';
-
-export const tableKeys: UI_T_DatastoreTableKeysTuple = [
-  'name',
-  'state',
-  'capacity_mb',
-  'provisioned_mb',
-  'free_mb',
-  'used_mb',
-  'type_text',
-  'location'
-]
+import type {
+  UI_T_DatastoreTableKeysTuple
+} from '~/components/common/pages/backups/modals/createBackup/datastores/tableView/old/lib/models/types';
+
+export const tableKeys: UI_T_DatastoreTableKeysTuple = [
+  'name',
+  'state',
+  'capacity_mb',
+  'provisioned_mb',
+  'free_mb',
+  'used_mb',
+  'type_text',
+  'location'
+]