bfg-common 1.5.538 → 1.5.540

package/components/common/pages/backups/modals/restore/networks/table/new/Table.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="networks-table">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :loading="props.networksLoading"
+      :total-pages="1"
+      :total-items="props.networks?.length || 0"
+      :texts="texts"
+      :default-layout="false"
+      :skeleton="skeletonData"
+      size="sm"
+      test-id="backup-restore-networks-table"
+    >
+      <template #icon="{ item }">
+        <span :class="['icon', item.data.iconClassName]"></span>
+        <span :title="item.text" class="text-ellipsis ml-1 networks-table-text">
+          {{ item.text }}
+        </span>
+      </template>
+
+      <template #select="item">
+        <div v-if="item.item.data.type === 'select-network'" class="w-full">
+          <ui-select
+            v-model="selectedLocation"
+            :items="locationOptions"
+            test-id="select-network-type"
+            size="sm"
+            class="network-type-select"
+            select-width="100%"
+            show-text
+            @change="changeLocation($event, item.item.data.key)"
+          />
+        </div>
+
+        <div v-if="item.item.data.type === 'select-adapter'" class="w-full">
+          <ui-select
+            v-model="model.pvm.network_devices[item.item.data.key].model"
+            :items="adapterTypeOptionsConfig"
+            test-id="select-adapter-type"
+            size="sm"
+            class="adapter-type-select"
+            select-width="112px"
+            show-text
+          />
+        </div>
+      </template>
+    </ui-data-table>
+
+    <common-vm-actions-common-customize-hardware-virtual-hardware-new-network-location
+      v-if="selectedNetworkKeyForLocation !== -1"
+      :location-modal-is-show="selectedNetworkKeyForLocation !== -1"
+      :networks-table="props.sourceNetworks"
+      @hide="onHideLocationModal"
+      @select="onSelectLocation"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader,
+  UI_I_DataTableSkeleton,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import {
+  getBodyDataFunc,
+  getHeaderDataFunc,
+  options,
+} from '~/components/common/pages/backups/modals/restore/networks/table/new/lib/config/table'
+import type {
+  UI_I_HTMLSelectElement,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import { adapterTypeOptionsConfig } from '~/components/common/pages/backups/modals/restore/networks/table/old/adapterType/lib/config/options'
+import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const model = defineModel<UI_I_RestoreForm>({ required: true })
+
+const props = defineProps<{
+  networks: UI_I_RestoreForm['pvm']['network_devices']
+  sourceNetworks: UI_I_NetworkTableItem[]
+  networksLoading: 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 skeletonData = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 4,
+  headColumns: [],
+  bodyColumns: [],
+  withoutPagination: true,
+})
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'backup-restore-networks-table',
+  header: headItems.value,
+  body: bodyItems.value,
+  title: `${localization.value.common.networks} (${
+    props.networks?.length || 0
+  })`,
+}))
+
+const headItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
+)
+
+const bodyItems = ref<UI_I_DataTableBody[]>([])
+watch(
+  () => props.networks,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = getBodyDataFunc(newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const selectedLocationOld = ref<string>('')
+const selectedLocation = ref<string>('')
+const locationOptions = ref<UI_I_OptionItem[]>([])
+const selectedNetworkKeyForLocation = ref<number>(-1)
+
+watch(
+  (): any => props.sourceNetworks,
+  (newValue) => {
+    if (!props.networks?.length || !newValue?.length) {
+      return
+    }
+    let selectedNetwork: any = null
+    model.value.pvm.network_devices = model.value.pvm.network_devices.map(
+      (network) => {
+        selectedNetwork =
+          newValue.find((net) => net.net_bridge === network.net_bridge) ||
+          newValue[0]
+
+        network.network = selectedNetwork.name
+        return network
+      }
+    )
+    selectedLocationOld.value = selectedNetwork.net_bridge
+    selectedLocation.value = selectedNetwork.net_bridge
+
+    locationOptions.value = [
+      {
+        text: selectedNetwork.name,
+        value: selectedNetwork.net_bridge,
+      },
+      { text: `${localization.value.common.browse}...`, value: 'browser' },
+    ]
+  },
+  { immediate: true }
+)
+
+const onHideLocationModal = (): void => {
+  selectedLocation.value = selectedLocationOld.value
+  const network = findNetwork(selectedLocationOld.value)
+  model.value.pvm.network_devices[selectedNetworkKeyForLocation.value].network =
+    network.name
+  model.value.pvm.network_devices[
+    selectedNetworkKeyForLocation.value
+  ].net_bridge = selectedLocationOld.value
+  selectedNetworkKeyForLocation.value = -1
+}
+
+const changeLocation = (event: UI_I_HTMLSelectElement, key: number): void => {
+  const value = event
+
+  if (value === 'browser') {
+    selectedNetworkKeyForLocation.value = key
+    return
+  }
+
+  selectedLocationOld.value = value
+  selectedLocation.value = value
+  const network = findNetwork(value)
+  model.value.pvm.network_devices[key].network = network.name || ''
+  model.value.pvm.network_devices[key].net_bridge = value
+}
+
+const onSelectLocation = (network: any): void => {
+  selectedLocationOld.value = network.net_bridge
+  selectedLocation.value = network.net_bridge
+  model.value.pvm.network_devices[selectedNetworkKeyForLocation.value].network =
+    network.name
+  model.value.pvm.network_devices[
+    selectedNetworkKeyForLocation.value
+  ].net_bridge = network.net_bridge
+  selectedNetworkKeyForLocation.value = -1
+
+  const hasNetwork = locationOptions.value.some(
+    (option) => option.value === network.name
+  )
+  if (hasNetwork) {
+    return
+  }
+
+  locationOptions.value = [
+    ...locationOptions.value.slice(0, -1),
+    { text: network.name, value: network.net_bridge },
+    locationOptions.value[locationOptions.value.length - 1],
+  ]
+}
+
+const findNetwork = (net_bridge: string): any => {
+  return props.sourceNetworks.find(
+    (network) => network.net_bridge === net_bridge
+  )
+}
+</script>
+
+<style scoped lang="scss">
+.networks-table {
+  :deep(.table-header-content) {
+    min-height: auto;
+  }
+
+  :deep(.title-container-top-info h6.title-container-top-selected-rows) {
+    font-size: 12px;
+  }
+
+  :deep(.ui-main-no-items-found span) {
+    font-size: 14px;
+  }
+
+  .adapter-type-select,
+  .network-type-select {
+    :deep(.ui-select-toggle-button) {
+      height: 28px;
+    }
+
+    :deep(.ui-selected-text) {
+      font-size: 12px;
+    }
+
+    :deep(.ui-arrow-icon) {
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  &-text {
+    font-size: 12px;
+  }
+}
+</style>

package/components/common/pages/backups/modals/restore/networks/table/new/lib/config/table.ts

@@ -0,0 +1,127 @@
+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_RestoreForm } from '~/components/common/pages/backups/modals/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: '188px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col1',
+    colName: 'macAddress',
+    text: localization.common.macAddress,
+    isSortable: true,
+    sort: 'asc',
+    width: '128px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col2',
+    colName: 'adapterType',
+    text: localization.common.adapterType,
+    isSortable: true,
+    sort: 'asc',
+    width: '112px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col3',
+    colName: 'networkInProcurator',
+    text: localization.common.networkInProcurator,
+    isSortable: true,
+    sort: 'asc',
+    width: '188px',
+    show: true,
+    filter: false,
+  },
+]
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [{ text: '10', value: 100, default: true }],
+  isSelectable: false,
+  isFocusable: false,
+  showPagination: false,
+  showPaginationOnTop: false,
+  selectType: 'checkbox',
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: true,
+  showSearch: false,
+  showSelectedRows: false,
+  showColumnManager: false,
+  withActions: false,
+  inBlock: false,
+  inModal: true,
+  showExport: false,
+  withCollapse: false,
+}
+
+export const getBodyDataFunc = (
+  bodyData: UI_I_RestoreForm['pvm']['network_devices']
+): UI_I_DataTableBody[] => {
+  return bodyData.map((network, index: number) => {
+    const dataAdapterType = {
+      key: index,
+      id: `${network.vm_name}-select`,
+      sourceNetwork: network.source_network,
+      disabled: false,
+      type: 'select-adapter',
+      network: network.network,
+    }
+    const dataSelectNetwork = {
+      key: index,
+      id: `${network.vm_name}-select`,
+      type: 'select-network',
+      network: network.network,
+    }
+
+    return {
+      row: index,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      data: [
+        {
+          key: 'icon',
+          col: 'col0',
+          text: network.import_source_id,
+          data: {
+            iconClassName: 'vsphere-icon-network',
+          },
+        },
+        {
+          col: 'col1',
+          text: network.mac,
+        },
+        {
+          col: 'col2',
+          key: 'select',
+          text: network.target,
+          data: dataAdapterType,
+        },
+        {
+          col: 'col3',
+          key: 'select',
+          data: dataSelectNetwork,
+          text: network.network,
+        },
+      ],
+    }
+  })
+}

package/components/common/pages/backups/modals/restore/networks/table/{Table.vue → old/Table.vue}

@@ -5,7 +5,7 @@
       v-model:page="pagination.page"
       :head-items="headItems"
       :body-items="bodyItems"
-      :total-items="bodyItems.length"
+      :total-items="bodyItems.length || 0"
       :total-pages="1"
       :loading="props.loading"
       off-select-by-row
@@ -36,7 +36,7 @@
             </select>
           </div>
 
-          <common-pages-backups-modals-restore-networks-table-adapter-type
+          <common-pages-backups-modals-restore-networks-table-old-adapter-type
             v-if="data.item.data.type === 'select-adapter'"
             v-model="model.pvm.network_devices[data.item.data.key].model"
           />
@@ -66,7 +66,7 @@ import type {
   UI_I_BodyItem,
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import * as table from '~/components/common/pages/backups/modals/restore/networks/table/lib/config/networkTable'
+import * as table from '~/components/common/pages/backups/modals/restore/networks/table/old/lib/config/networkTable'
 
 const model = defineModel<UI_I_RestoreForm>({ required: true })
 const props = defineProps<{
@@ -191,20 +191,25 @@ const findNetwork = (net_bridge: string): any => {
 <style lang="scss" scoped>
 .table-view-wrapper {
   height: inherit;
+
   .networks-table {
     height: inherit;
+
     :deep(.datagrid-outer-wrapper) {
       height: inherit;
       margin-top: 0;
     }
+
     :deep(.datagrid) {
       padding-top: 0;
       height: inherit;
     }
+
     &__select {
       width: 100%;
       height: 24px;
       min-width: 107px;
+
       & > select {
         height: 100%;
       }

package/components/common/pages/backups/modals/restore/networks/table/{adapterType → old/adapterType}/AdapterType.vue

@@ -22,7 +22,7 @@
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import {
   adapterTypeOptionsConfig
-} from '~/components/common/pages/backups/modals/restore/networks/table/adapterType/lib/config/options'
+} from '~/components/common/pages/backups/modals/restore/networks/table/old/adapterType/lib/config/options'
 
 const adapterTypeLocal = defineModel<string>()
 

package/components/common/pages/backups/modals/restore/networks/table/{lib → old/lib}/config/networkTable.ts

@@ -4,7 +4,7 @@ import type {
 } 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 { networkTableItemKeys } from '~/components/common/pages/backups/modals/restore/networks/table/lib/config/tableKeys'
+import { networkTableItemKeys } from '~/components/common/pages/backups/modals/restore/networks/table/old/lib/config/tableKeys'
 
 const getItems = (
   localization: UI_I_Localization

package/components/common/pages/backups/modals/restore/networks/table/old/lib/config/tableKeys.ts

@@ -0,0 +1,8 @@
+import type { UI_T_NetworkTableKeysTuple } from '~/components/common/pages/backups/modals/restore/networks/table/old/lib/models/types'
+
+export const networkTableItemKeys: UI_T_NetworkTableKeysTuple = [
+  'import_source_id',
+  'mac',
+  'target',
+  'network',
+]

package/components/common/pages/backups/modals/restore/types/Types.vue

@@ -1,60 +1,19 @@
 <template>
-  <div class="select-restore-type flex">
-    <atoms-list-select-list
-      v-model="model.restore_code"
-      :items="backupTypes"
-      class="select"
-    />
-    <p class="description">
-      {{ description }}
-    </p>
-  </div>
+  <common-pages-backups-modals-restore-types-new
+    v-if="isNewView"
+    v-model="model"
+  />
+  <common-pages-backups-modals-restore-types-old v-else v-model="model" />
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type {UI_I_RestoreForm} from "~/components/common/pages/backups/modals/lib/models/interfaces";
-import { backupsTypesFunc } from '~/components/common/pages/backups/modals/restore/types/lib/config/typeOptions'
-import { descriptionsFunc } from '~/components/common/pages/backups/modals/restore/types/lib/config/descriptions'
+import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
 
 const model = defineModel<UI_I_RestoreForm>({ required: true })
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
 
-const backupTypes = ref<UI_I_OptionItem[]>(backupsTypesFunc(localization.value))
-
-const description = computed<string[]>(
-  () => descriptionsFunc(localization.value)[model.value.restore_code - 1]
-)
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
-<style>
-:root {
-  --type-list-border-color: #ccc;
-}
-:root.dark-theme {
-  --type-list-border-color: #000;
-}
-</style>
-<style scoped lang="scss">
-.select-restore-type {
-  padding-top: 12px;
-
-  .description {
-    color: #333333;
-    font-size: 13px;
-  }
-
-  .description,
-  .select {
-    flex: 1 1 100%;
-    margin-right: 5px;
-  }
-
-  :deep(select) {
-    background-color: transparent;
-    border-color: var(--type-list-border-color);
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/pages/backups/modals/restore/types/TypesNew.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="datastore-type">
+    <div class="datastore-type__radio-container flex flex-col gap-3">
+      <ui-radio
+        v-for="(option, key) in backupTypes"
+        :key="key"
+        v-model="model.restore_code"
+        :label="option.text"
+        :test-id="option.testId"
+        :value="option.value"
+        size="md"
+      >
+        <template #description>
+          <span class="datastore-type__radio-description">
+            {{ optionsDescription[option.value - 1] }}
+          </span>
+        </template>
+      </ui-radio>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { backupsTypesFunc } from '~/components/common/pages/backups/modals/restore/types/lib/config/typeOptions'
+import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const model = defineModel<UI_I_RestoreForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const backupTypes = ref<UI_I_OptionItem[]>(backupsTypesFunc(localization.value))
+
+const optionsDescription = computed<string[]>(() => {
+  return [
+    localization.value.common.restoreDiskOnlyDescription,
+    localization.value.common.restoreExistingDescription,
+    localization.value.common.restoreAsNewDescription,
+  ]
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+
+.datastore-type {
+  container-type: inline-size;
+  margin-top: 16px;
+
+  &__radio {
+    &-description {
+      color: #9da6ad;
+      line-height: 18px;
+    }
+
+    &-container {
+      :deep(.radio-label__text) {
+        padding-top: 1px;
+      }
+    }
+  }
+
+  :deep(input[type='radio']) {
+    & ~ .radio-label {
+      width: 100%;
+      height: 100%;
+      background-color: var(--select-bg);
+      border-radius: 8px;
+      padding: 12px;
+      box-shadow: inset 0 0 0 1px var(--line-color);
+      transition: box-shadow 0.1s ease-in-out;
+    }
+
+    &:not(:checked) {
+      & ~ .radio-label:hover {
+        box-shadow: inset 0 0 0 1px var(--select-border);
+      }
+    }
+
+    &:checked {
+      & ~ .radio-label {
+        background-color: var(--radio-btn-active-label-bg-color);
+        box-shadow: inset 0 0 0 1.5px var(--radio-btn-active-label-border-color);
+      }
+    }
+  }
+}
+
+@container (max-width:600px) {
+  .datastore-type__radio-container {
+    grid-template-columns: 1fr;
+  }
+}
+</style>