bfg-common 1.5.514 → 1.5.516

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

@@ -1,127 +1,127 @@
-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 {
-  constructHeadItem,
-  constructColumnKey,
-} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
-import { datastoreLocalizationByState } from '~/components/common/lib/config/states'
-import { tableKeys } from '~/components/common/pages/backups/modals/createBackup/datastores/tableView/lib/config/keys'
-
-const getItems = (
-  localization: UI_I_Localization
-): [string, boolean, string, string][] => {
-  return [
-    [localization.common.name, true, '180px', tableKeys[0]],
-    [localization.inventorySummary.state, true, '180px', tableKeys[1]],
-    [localization.common.capacity, true, '180px', tableKeys[2]],
-    [localization.common.provisioned, true, '180px', tableKeys[3]],
-    [localization.common.free, true, '180px', tableKeys[4]],
-    [localization.common.used, true, '180px', tableKeys[5]],
-    [localization.common.type, true, '180px', tableKeys[6]],
-    [localization.common.location, true, '180px', tableKeys[7]],
-  ]
-}
-export const columnKeys = (
-  localization: UI_I_Localization
-): UI_I_ColumnKey[] => {
-  const result: UI_I_ColumnKey[] = []
-  getItems(localization).forEach((item, i) => {
-    result.push(
-      constructColumnKey(`col${i}`, item[0], item[1], `show-column-${item[3]}`)
-    )
-  })
-  return result
-}
-export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
-  const result: UI_I_HeadItem[] = []
-  getItems(localization).forEach((item, i) => {
-    result.push(
-      constructHeadItem(
-        `col${i}`,
-        item[0],
-        item[3],
-        true,
-        item[2],
-        undefined,
-        item[3]
-      )
-    )
-  })
-  return result
-}
-
-export const bodyItems = (
-  data: UI_I_BackupDatastore[],
-  localization: UI_I_Localization
-): UI_I_BodyItem[][] => {
-  const { $binary }: any = useNuxtApp()
-  const lang = useLocalStorage('lang') === 'ru_RU' ? 'ru' : 'en'
-
-  const bodyItems: UI_I_BodyItem[][] = []
-  data.forEach((datastore: UI_I_BackupDatastore) => {
-    // ??
-    const state =
-      localization.common[datastoreLocalizationByState[datastore[tableKeys[1]]]]
-
-    bodyItems.push([
-      {
-        key: 'col0',
-        text: datastore[tableKeys[0]],
-        id: datastore.id,
-        testId: `backup-datastore-table-item-${datastore.id}`,
-      },
-      {
-        key: 'col1',
-        text: state,
-        id: datastore.id,
-        testId: `backup-datastore-table-item-${datastore.id}`,
-      },
-      {
-        key: 'col2',
-        text: $binary.round(datastore.capacity[tableKeys[2]], false, lang),
-        id: datastore.id,
-        testId: `backup-datastore-table-item-${datastore.id}`,
-      },
-      {
-        key: 'col3',
-        text: $binary.round(
-          datastore.capacity[tableKeys[3]],
-          false,
-          lang
-        ),
-        id: datastore.id,
-        testId: `backup-datastore-table-item-${datastore.id}`,
-      },
-      {
-        key: 'col4',
-        text: $binary.round(datastore.capacity[tableKeys[4]], false, lang),
-        id: datastore.id,
-        testId: `backup-datastore-table-item-${datastore.id}`,
-      },
-      {
-        key: 'col5',
-        text: $binary.round(datastore.capacity[tableKeys[5]], false, lang),
-        id: datastore.id,
-        testId: `backup-datastore-table-item-${datastore.id}`,
-      },
-      {
-        key: 'col6',
-        text: datastore[tableKeys[6]],
-        id: datastore.id,
-        testId: `backup-datastore-table-item-${datastore.id}`,
-      },
-      {
-        key: 'col7',
-        text: datastore[tableKeys[7]],
-        id: datastore.id,
-        testId: `backup-datastore-table-item-${datastore.id}`,
-      },
-    ])
-  })
-  return bodyItems
-}
+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 {
+  constructHeadItem,
+  constructColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+import { datastoreLocalizationByState } from '~/components/common/lib/config/states'
+import { tableKeys } from '~/components/common/pages/backups/modals/createBackup/datastores/tableView/old/lib/config/keys'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.common.name, true, '180px', tableKeys[0]],
+    [localization.inventorySummary.state, true, '180px', tableKeys[1]],
+    [localization.common.capacity, true, '180px', tableKeys[2]],
+    [localization.common.provisioned, true, '180px', tableKeys[3]],
+    [localization.common.free, true, '180px', tableKeys[4]],
+    [localization.common.used, true, '180px', tableKeys[5]],
+    [localization.common.type, true, '180px', tableKeys[6]],
+    [localization.common.location, true, '180px', tableKeys[7]],
+  ]
+}
+export const columnKeys = (
+  localization: UI_I_Localization
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    result.push(
+      constructColumnKey(`col${i}`, item[0], item[1], `show-column-${item[3]}`)
+    )
+  })
+  return result
+}
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    result.push(
+      constructHeadItem(
+        `col${i}`,
+        item[0],
+        item[3],
+        true,
+        item[2],
+        undefined,
+        item[3]
+      )
+    )
+  })
+  return result
+}
+
+export const bodyItems = (
+  data: UI_I_BackupDatastore[],
+  localization: UI_I_Localization
+): UI_I_BodyItem[][] => {
+  const { $binary }: any = useNuxtApp()
+  const lang = useLocalStorage('lang') === 'ru_RU' ? 'ru' : 'en'
+
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((datastore: UI_I_BackupDatastore) => {
+    // ??
+    const state =
+      localization.common[datastoreLocalizationByState[datastore[tableKeys[1]]]]
+
+    bodyItems.push([
+      {
+        key: 'col0',
+        text: datastore[tableKeys[0]],
+        id: datastore.id,
+        testId: `backup-datastore-table-item-${datastore.id}`,
+      },
+      {
+        key: 'col1',
+        text: state,
+        id: datastore.id,
+        testId: `backup-datastore-table-item-${datastore.id}`,
+      },
+      {
+        key: 'col2',
+        text: $binary.round(datastore.capacity[tableKeys[2]], false, lang),
+        id: datastore.id,
+        testId: `backup-datastore-table-item-${datastore.id}`,
+      },
+      {
+        key: 'col3',
+        text: $binary.round(
+          datastore.capacity[tableKeys[3]],
+          false,
+          lang
+        ),
+        id: datastore.id,
+        testId: `backup-datastore-table-item-${datastore.id}`,
+      },
+      {
+        key: 'col4',
+        text: $binary.round(datastore.capacity[tableKeys[4]], false, lang),
+        id: datastore.id,
+        testId: `backup-datastore-table-item-${datastore.id}`,
+      },
+      {
+        key: 'col5',
+        text: $binary.round(datastore.capacity[tableKeys[5]], false, lang),
+        id: datastore.id,
+        testId: `backup-datastore-table-item-${datastore.id}`,
+      },
+      {
+        key: 'col6',
+        text: datastore[tableKeys[6]],
+        id: datastore.id,
+        testId: `backup-datastore-table-item-${datastore.id}`,
+      },
+      {
+        key: 'col7',
+        text: datastore[tableKeys[7]],
+        id: datastore.id,
+        testId: `backup-datastore-table-item-${datastore.id}`,
+      },
+    ])
+  })
+  return bodyItems
+}

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

@@ -1,10 +1,10 @@
-export type UI_T_DatastoreTableKeysTuple = [
-  'name',
-  'state',
-  'capacity_mb',
-  'provisioned_mb',
-  'free_mb',
-  'used_mb',
-  'type_text',
-  'location'
-]
+export type UI_T_DatastoreTableKeysTuple = [
+  'name',
+  'state',
+  'capacity_mb',
+  'provisioned_mb',
+  'free_mb',
+  'used_mb',
+  'type_text',
+  'location'
+]

package/components/common/pages/backups/modals/createBackup/disks/Disks.vue

@@ -1,28 +1,34 @@
-<template>
-  <div class="disks h-full">
-    <common-pages-backups-modals-create-backup-disks-table-view
-      v-model:selected="model.disk_devices"
-      :data-table="props.disks"
-      :loading="props.disksLoading"
-      :total-items="props.disks.length"
-      :total-pages="1"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type {
-  UI_I_CreateBackupForm,
-  UI_I_Pvm
-} from "~/components/common/pages/backups/modals/lib/models/interfaces";
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const props = defineProps<{
-  disks: UI_I_Pvm['disk_devices']
-  disksLoading: boolean
-}>()
-
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <common-pages-backups-modals-create-backup-disks-old
+    v-if="!isNewView"
+    v-model="model"
+    :disks="props.disks"
+    :disks-loading="props.disksLoading"
+  />
+  <common-pages-backups-modals-create-backup-disks-new
+    v-else
+    v-model="model"
+    :disks="props.disks"
+    :disks-loading="props.disksLoading"
+  />
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_CreateBackupForm,
+  UI_I_Pvm
+} from "~/components/common/pages/backups/modals/lib/models/interfaces";
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const props = defineProps<{
+  disks: UI_I_Pvm['disk_devices']
+  disksLoading: boolean
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/pages/backups/modals/createBackup/disks/DisksNew.vue

@@ -0,0 +1,22 @@
+<template>
+  <common-pages-backups-modals-create-backup-disks-table-view-new-table-view
+    v-model="model.disk_devices"
+    :disks="props.disks"
+    :disks-loading="props.disksLoading"
+  />
+</template>
+<script setup lang="ts">
+
+import type { UI_I_Pvm } from '~/lib/models/store/vm/interfaces'
+import type {UI_I_CreateBackupForm} from "~/components/common/pages/backups/modals/lib/models/interfaces";
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const props = defineProps<{
+  disks: UI_I_Pvm['disk_devices']
+  disksLoading: boolean
+}>()
+</script>
+<style scoped lang="scss">
+
+</style>

package/components/common/pages/backups/modals/createBackup/disks/DisksOld.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="disks h-full">
+    <common-pages-backups-modals-create-backup-disks-table-view-old-table-view
+      v-model:selected="model.disk_devices"
+      :data-table="props.disks"
+      :loading="props.disksLoading"
+      :total-items="props.disks.length"
+      :total-pages="1"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_CreateBackupForm,
+  UI_I_Pvm
+} from "~/components/common/pages/backups/modals/lib/models/interfaces";
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const props = defineProps<{
+  disks: UI_I_Pvm['disk_devices']
+  disksLoading: boolean
+}>()
+
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/pages/backups/modals/createBackup/disks/tableView/new/TableView.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="disks-table">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :loading="props.disksLoading"
+      :total-pages="1"
+      :total-items="props.disks?.length"
+      :texts="texts"
+      :default-layout="false"
+      :skeleton="skeletonData"
+      size="sm"
+      test-id="vm-backup-disks-table"
+      @select-row="onSelectRow"
+    >
+      <template #icon="{ item }">
+        <span :class="['icon', item.data.iconClassName]"></span>
+        <span
+          :title="item.text"
+          class="text-ellipsis ml-1 disks-table-text"
+        >
+          {{ item.text }}
+        </span>
+      </template>
+    </ui-data-table>
+  </div>
+</template>
+<script setup lang="ts">
+
+import type { UI_I_TableTexts } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Pvm } from '~/lib/models/store/vm/interfaces'
+import {
+  getBodyDataFunc,
+  getHeaderDataFunc,
+  options
+} from '~/components/common/pages/backups/modals/createBackup/disks/tableView/new/lib/config/table'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_CreateBackupFormDiskDevice
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+
+const model = defineModel<UI_I_CreateBackupFormDiskDevice[]>({ required: true })
+
+const props = defineProps<{
+  disks: UI_I_Pvm['disk_devices']
+  disksLoading: boolean
+}>()
+
+const { $text }: any = useNuxtApp()
+
+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 skeletonData = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 5,
+  headColumns: [],
+  bodyColumns: [],
+  withoutPagination: true,
+})
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'vm-backup-disks-table',
+  header: headItems.value,
+  body: bodyItems.value,
+}))
+
+const headItems = computed<UI_I_DataTableHeader[]>(() => {
+  const lang = useLocalStorage('lang')
+
+  return getHeaderDataFunc(localization.value).map(item => ({
+    ...item,
+    text: lang === 'en_US' ? $text.toCapitalizeEveryWord(item.text) : item.text
+  }))
+})
+
+const bodyItems = ref<UI_I_DataTableBody[]>([])
+watch(
+  () => props.disks,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = getBodyDataFunc(newValue, localization.value, model.value)
+  },
+  { deep: true, immediate: true }
+)
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  model.value = value.map(item => item.data[0]?.data?.data)
+}
+</script>
+<style scoped lang="scss">
+.disks-table {
+  :deep(.title-container-top-info h6.title-container-top-selected-rows) {
+    font-size: 12px;
+  }
+  :deep(.ui-main-no-items-found span) {
+    font-size: 14px;
+  }
+
+  :deep(.title-container) {
+    text-transform: lowercase;
+  }
+
+  &-text {
+    font-size: 12px;
+  }
+}
+</style>