bfg-common 1.3.230 → 1.3.231

package/components/common/weekSelect/WeekSelect.vue

@@ -1,112 +1,112 @@
-<template>
-  <div class="flex-align-center">
-    <common-select-input
-      v-model="selectedOption"
-      :data="options"
-      class="mr-1"
-    />
-
-    <div class="btn-group">
-      <button
-        v-for="item in tabs"
-        :key="item"
-        :class="['btn btn-sm btn-secondary', { 'btn-primary': item.isActive }]"
-        :disabled="!isCustom"
-        @click="onSelectDay(item.value)"
-      >
-        {{ item.text }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import type { UI_I_TabItem } from '~/components/common/weekSelect/lib/models/interfaces'
-import { optionsFunc } from '~/components/common/weekSelect/lib/config/options'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const model = defineModel<number[]>()
-
-const selectedOption = ref<number>(0)
-if (model.value.length === 2 && model.value.includes(6) && model.value.includes(0)) {
-  selectedOption.value = 1
-} else if (model.value.length < 7) {
-  selectedOption.value = 2
-}
-
-const options = ref<UI_I_SelectInputItem[]>(optionsFunc(localization.value))
-
-const isCustom = computed<boolean>(() => selectedOption.value === 2)
-const onSelectDay = (value: number): void => {
-  const index = model.value?.indexOf(value)
-  if (index === -1) {
-    model.value.push(value)
-    model.value.sort((a: number, b: number) => a - b)
-  }
-  else if (model.value.length > 1) {
-    model.value = model.value?.filter((_: number, key: number) => key !== index)
-  }
-}
-
-const tabs = computed<UI_I_TabItem[]>(() => {
-  return [
-    { text: localization.value.weekM, value: 1, isActive: checkIsActiveDay(1) },
-    { text: localization.value.weekT, value: 2, isActive: checkIsActiveDay(2) },
-    { text: localization.value.weekW, value: 3, isActive: checkIsActiveDay(3) },
-    {
-      text: localization.value.weekTh,
-      value: 4,
-      isActive: checkIsActiveDay(4),
-    },
-    { text: localization.value.weekF, value: 5, isActive: checkIsActiveDay(5) },
-    { text: localization.value.weekS, value: 6, isActive: checkIsActiveDay(6) },
-    {
-      text: localization.value.weekSu,
-      value: 0,
-      isActive: checkIsActiveDay(0),
-    },
-  ]
-})
-const checkIsActiveDay = (value: number): boolean => {
-  let result = false
-  switch (selectedOption.value) {
-    case 0:
-      result = true
-      break
-    case 1:
-      if (value === 6 || value === 0) result = true
-      break
-    default:
-      result = !!model.value?.includes(value)
-      break
-  }
-
-  return result
-}
-watch(
-  tabs,
-  (newValue: UI_I_TabItem[]) => {
-    if (selectedOption.value === 2) return
-
-    model.value = newValue.filter((tab) => tab.isActive).map((tab) => tab.value)
-  },
-  { immediate: true }
-)
-</script>
-
-<style lang="scss" scoped>
-:deep(.select::after) {
-  top: 2px;
-  right: -16px;
-}
-.btn-group {
-  button {
-    width: 24px;
-    min-width: 24px;
-    padding: 0;
-  }
-}
-</style>
+<template>
+  <div class="flex-align-center">
+    <common-select-input
+      v-model="selectedOption"
+      :data="options"
+      class="mr-1"
+    />
+
+    <div class="btn-group">
+      <button
+        v-for="item in tabs"
+        :key="item"
+        :class="['btn btn-sm btn-secondary', { 'btn-primary': item.isActive }]"
+        :disabled="!isCustom"
+        @click="onSelectDay(item.value)"
+      >
+        {{ item.text }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import type { UI_I_TabItem } from '~/components/common/weekSelect/lib/models/interfaces'
+import { optionsFunc } from '~/components/common/weekSelect/lib/config/options'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const model = defineModel<number[]>()
+
+const selectedOption = ref<number>(0)
+if (model.value.length === 2 && model.value.includes(6) && model.value.includes(0)) {
+  selectedOption.value = 1
+} else if (model.value.length < 7) {
+  selectedOption.value = 2
+}
+
+const options = ref<UI_I_SelectInputItem[]>(optionsFunc(localization.value))
+
+const isCustom = computed<boolean>(() => selectedOption.value === 2)
+const onSelectDay = (value: number): void => {
+  const index = model.value?.indexOf(value)
+  if (index === -1) {
+    model.value.push(value)
+    model.value.sort((a: number, b: number) => a - b)
+  }
+  else if (model.value.length > 1) {
+    model.value = model.value?.filter((_: number, key: number) => key !== index)
+  }
+}
+
+const tabs = computed<UI_I_TabItem[]>(() => {
+  return [
+    { text: localization.value.weekM, value: 1, isActive: checkIsActiveDay(1) },
+    { text: localization.value.weekT, value: 2, isActive: checkIsActiveDay(2) },
+    { text: localization.value.weekW, value: 3, isActive: checkIsActiveDay(3) },
+    {
+      text: localization.value.weekTh,
+      value: 4,
+      isActive: checkIsActiveDay(4),
+    },
+    { text: localization.value.weekF, value: 5, isActive: checkIsActiveDay(5) },
+    { text: localization.value.weekS, value: 6, isActive: checkIsActiveDay(6) },
+    {
+      text: localization.value.weekSu,
+      value: 0,
+      isActive: checkIsActiveDay(0),
+    },
+  ]
+})
+const checkIsActiveDay = (value: number): boolean => {
+  let result = false
+  switch (selectedOption.value) {
+    case 0:
+      result = true
+      break
+    case 1:
+      if (value === 6 || value === 0) result = true
+      break
+    default:
+      result = !!model.value?.includes(value)
+      break
+  }
+
+  return result
+}
+watch(
+  tabs,
+  (newValue: UI_I_TabItem[]) => {
+    if (selectedOption.value === 2) return
+
+    model.value = newValue.filter((tab) => tab.isActive).map((tab) => tab.value)
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+:deep(.select::after) {
+  top: 2px;
+  right: -16px;
+}
+.btn-group {
+  button {
+    width: 24px;
+    min-width: 24px;
+    padding: 0;
+  }
+}
+</style>

package/components/common/weekSelect/lib/config/options.ts

@@ -1,10 +1,10 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-
-export const optionsFunc = (
-  localization: UI_I_Localization
-): UI_I_SelectInputItem[] => [
-  { label: localization.daily, value: 0 },
-  { label: localization.weekly, value: 1 },
-  { label: localization.custom, value: 2 },
-]
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+
+export const optionsFunc = (
+  localization: UI_I_Localization
+): UI_I_SelectInputItem[] => [
+  { label: localization.daily, value: 0 },
+  { label: localization.weekly, value: 1 },
+  { label: localization.custom, value: 2 },
+]

package/components/common/wizards/vm/migrate/Migrate.vue

@@ -53,7 +53,11 @@
         />
 
         <common-wizards-vm-migrate-select-network
-          v-show="currentBlockId === 'select-networks'"
+          v-if="currentBlockId === 'select-networks'"
+          v-model:is-basic-network-mode="
+            dataFormLocal.selectNetwork.isShowNetworkBasic
+          "
+          v-model:network-data="dataFormLocal.selectNetwork.data"
         />
 
         <common-wizards-vm-migrate-select-priority
@@ -135,6 +139,10 @@ const connectedStorageIdOnVm = computed<string>(
 const dataFormLocal = ref<UI_I_CollectedDataFormLocal>({
   selectedComputeResource: null,
   selectStorage: null,
+  selectNetwork: {
+    isShowNetworkBasic: true,
+    data: null,
+  },
   selectedVMotionPriority: 'high',
 })
 

package/components/common/wizards/vm/migrate/lib/models/interfaces.ts

@@ -20,5 +20,9 @@ export interface UI_I_MigrateReadyBlockData extends UI_I_TableInfoItem {
 export interface UI_I_CollectedDataFormLocal {
   selectedComputeResource: UI_I_ComputeResourceDataLocal
   selectStorage: UI_I_SelectStorageReadyData
+  selectNetwork: {
+    isShowNetworkBasic: boolean
+    data: any // добавить интерфае потом
+  }
   selectedVMotionPriority: UI_T_SelectVMotionPriority
 }

package/components/common/wizards/vm/migrate/select/network/Network.vue

@@ -1,15 +1,32 @@
 <template>
   <div class="select-network">
-    <common-wizards-vm-migrate-select-network-table-disk
-      v-model="selected"
+    <div class="select-network__text">
+      {{ selectNetworkHeadline }}
+    </div>
+
+    <common-wizards-vm-migrate-select-network-table-network
+      v-model="selectedSourceNetwork"
+      :key="uniqueKey"
+      :networks="dataNetwork"
       :type="tableType"
-      :networks="[]"
+      @select-network="onSelectNetwork"
     />
 
+    <div
+      v-if="isShowNetworkBasic && selectedSourceNetwork"
+      class="select-network__matcher-details"
+    >
+      <span> {{ networkDetailsHeadline }} </span>
+
+      <common-wizards-vm-migrate-select-network-table-use-at
+        :networks="useAtTableData"
+      />
+    </div>
+
     <div class="vm-migrate-advanced-view-button">
       <button
         class="btn btn-sm migrate-network-advanced-btn"
-        @click="isShowNetworkBasic = !isShowNetworkBasic"
+        @click="onClickSelectNetworkMode"
       >
         <span v-if="!isShowNetworkBasic"> &#x226A; </span>
         {{ buttonText }}
@@ -28,10 +45,13 @@
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
+const isShowNetworkBasic = defineModel<boolean>('isBasicNetworkMode')
+const networkData = defineModel<any>('networkData')
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const selected = ref<number | null>(null)
-const isShowNetworkBasic = ref<boolean>(true)
+const selectedSourceNetwork = ref<string | null>(null)
+const uniqueKey = ref<number>(0)
 
 const buttonText = computed(
   () => localization.value[isShowNetworkBasic.value ? 'advanced' : 'basic']
@@ -40,10 +60,63 @@ const buttonText = computed(
 const tableType = computed<string>(() =>
   isShowNetworkBasic.value ? 'basic' : 'advanced'
 )
+
+const selectNetworkHeadline = computed<string>(() => {
+  const { migrateNetworkingForAllAdapters, migrateNetworkingForEachAdapters } =
+    localization.value
+
+  return isShowNetworkBasic.value
+    ? migrateNetworkingForAllAdapters
+    : migrateNetworkingForEachAdapters
+})
+const networkDetailsHeadline = computed<string>(() =>
+  localization.value.networkIsInUseAt.replace(
+    '{ network }',
+    selectedSourceNetwork.value + ''
+  )
+)
+
+const dataNetwork = computed(() => {
+  return [
+    {
+      vm_name: 'vm-horizon-1',
+      network_adapter: 'Network adapter 1',
+      source_network: 'VM-VLAN105',
+      used_by: '1 VMs / 1 Network adapters',
+      destination_network: ['VM Network 1', 'VM-VLAN105', 'VM Network 2'],
+    },
+  ]
+})
+
+const useAtTableData = computed(() =>
+  dataNetwork.value.map((x) => {
+    return {
+      vm_name: x.vm_name,
+      network: x.source_network,
+      network_adapter: x.network_adapter,
+    }
+  })
+)
+
+const onClickSelectNetworkMode = (): void => {
+  uniqueKey.value++
+  isShowNetworkBasic.value = !isShowNetworkBasic.value
+  selectedSourceNetwork.value = ''
+}
+const onSelectNetwork = (data: any): void => {
+  networkData.value = data
+}
 </script>
 
 <style lang="scss" scoped>
 .select-network {
+  margin-top: 10px;
+  &__text {
+    font-size: 12px;
+  }
+  &__matcher-details {
+    margin-top: 10px;
+  }
   .vm-migrate-advanced-view-button {
     text-align: end;
   }

package/components/common/wizards/vm/migrate/select/network/table/{disk/Disk.vue → network/Network.vue}

@@ -10,6 +10,7 @@
       :total-items="bodyItems.length"
       :total-pages="1"
       class="select-network"
+      :off-select-by-row="props.type === 'advanced'"
       server-off
       hide-footer
       hide-page-size
@@ -20,6 +21,7 @@
             :id="item.data.id"
             v-model="item.data.value"
             :disabled="item.data.disabled"
+            @change="onSelect(item.data)"
           >
             <option
               v-for="option in item.data.option"
@@ -42,18 +44,18 @@ import type {
   UI_I_HeadItem,
   UI_I_BodyItem,
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_T_MigrateSelectNetwork } from '~/components/common/wizards/vm/migrate/select/network/table/disk/lib/models/types'
-import * as basicTable from '~/components/common/wizards/vm/migrate/select/network/table/disk/lib/config/basicTable'
-import * as advancedTable from '~/components/common/wizards/vm/migrate/select/network/table/disk/lib/config/advancedTable'
+import type { UI_T_MigrateSelectNetwork } from '~/components/common/wizards/vm/migrate/select/network/table/network/lib/models/types'
+import * as basicTable from '~/components/common/wizards/vm/migrate/select/network/table/network/lib/config/basicTable'
+import * as advancedTable from '~/components/common/wizards/vm/migrate/select/network/table/network/lib/config/advancedTable'
 
 const props = defineProps<{
-  modelValue: number | null
   networks: UI_T_MigrateSelectNetwork[]
   type: 'basic' | 'advanced'
 }>()
 const emits = defineEmits<{
-  (event: 'update:model-value', value: number | null): void
+  (event: 'select-network', value: any): void
 }>()
+const selectedNetworkLocal = defineModel<string | null>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -81,14 +83,19 @@ const bodyItems = computed<UI_I_BodyItem[][]>(() => {
   return table[props.type].bodyItems(props.networks)
 })
 
-const selectedNetworkLocal = computed<number | null>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue: number | null) {
-    emits('update:model-value', newValue)
+const onSelect = (data: any): void => {
+  emits('select-network', data)
+}
+watch(
+  () => props.type,
+  (newValue: 'basic' | 'advanced') => {
+    const tableData = bodyItems.value[0]
+    const itemKey = newValue === 'basic' ? 2 : 3
+    const data = tableData[itemKey].data
+    onSelect(data)
   },
-})
+  { deep: true, immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>

package/components/common/wizards/vm/migrate/select/network/table/{disk → network}/lib/config/advancedTable.ts

@@ -4,8 +4,8 @@ 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 type { UI_I_MigrateSelectNetworkAdvancedItem } from '~/components/common/wizards/vm/migrate/select/network/table/disk/lib/models/interfaces'
-import { networkAdvancedTableItemKeys } from '~/components/common/wizards/vm/migrate/select/network/table/disk/lib/config/tableKeys'
+import type { UI_I_MigrateSelectNetworkAdvancedItem } from '~/components/common/wizards/vm/migrate/select/network/table/network/lib/models/interfaces'
+import { networkAdvancedTableItemKeys } from '~/components/common/wizards/vm/migrate/select/network/table/network/lib/config/tableKeys'
 
 const getItems = (
   localization: UI_I_Localization
@@ -41,8 +41,11 @@ export const bodyItems = (
     (network: UI_I_MigrateSelectNetworkAdvancedItem, key: number) => {
       const data = {
         id: `${network.vm_name}-select`,
+        sourceNetwork: network.source_network,
         disabled: false,
-        value: network.destination_network[0],
+        value: network.destination_network.find(
+          (item: string) => item === network.source_network
+        ),
         option: network.destination_network,
       }
 

package/components/common/wizards/vm/migrate/select/network/table/{disk → network}/lib/config/basicTable.ts

@@ -4,8 +4,8 @@ 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 type { UI_I_MigrateSelectNetworkBasicItem } from '~/components/common/wizards/vm/migrate/select/network/table/disk/lib/models/interfaces'
-import { networkBasicsTableItemKeys } from '~/components/common/wizards/vm/migrate/select/network/table/disk/lib/config/tableKeys'
+import type { UI_I_MigrateSelectNetworkBasicItem } from '~/components/common/wizards/vm/migrate/select/network/table/network/lib/models/interfaces'
+import { networkBasicsTableItemKeys } from '~/components/common/wizards/vm/migrate/select/network/table/network/lib/config/tableKeys'
 
 const getItems = (
   localization: UI_I_Localization
@@ -36,11 +36,14 @@ export const bodyItems = (
 ): UI_I_BodyItem[][] => {
   const bodyItems: UI_I_BodyItem[][] = []
 
-  data.forEach((network: UI_I_MigrateSelectNetworkBasicItem, key: number) => {
+  data.forEach((network: UI_I_MigrateSelectNetworkBasicItem) => {
     const data = {
       id: `${network.source_network}-select`,
+      sourceNetwork: network.source_network,
       disabled: false,
-      value: network.destination_network[0],
+      value: network.destination_network.find(
+        (item) => item === network.source_network
+      ),
       option: network.destination_network,
     }
 
@@ -48,18 +51,18 @@ export const bodyItems = (
       {
         key: 'col0',
         text: network[networkBasicsTableItemKeys[0]],
-        id: key,
+        id: network.source_network,
       },
       {
         key: 'col1',
         text: network[networkBasicsTableItemKeys[1]],
-        id: key,
+        id: network.source_network,
       },
       {
         key: 'select',
         text: network[networkBasicsTableItemKeys[2]],
         data,
-        id: key,
+        id: network.source_network,
       },
     ])
   })

package/components/common/wizards/vm/migrate/select/network/table/{disk → network}/lib/config/tableKeys.ts

@@ -1,7 +1,7 @@
 import type {
   UI_T_NetworkBasicsTableKeysTuple,
   UI_T_NetworkAdvancedTableKeysTuple,
-} from '~/components/common/wizards/vm/migrate/select/network/table/disk/lib/models/types'
+} from '~/components/common/wizards/vm/migrate/select/network/table/network/lib/models/types'
 
 export const networkBasicsTableItemKeys: UI_T_NetworkBasicsTableKeysTuple = [
   'source_network',

package/components/common/wizards/vm/migrate/select/network/table/{disk → network}/lib/models/types.ts

@@ -1,7 +1,7 @@
 import type {
   UI_I_MigrateSelectNetworkBasicItem,
   UI_I_MigrateSelectNetworkAdvancedItem,
-} from '~/components/common/wizards/vm/migrate/select/network/table/disk/lib/models/interfaces'
+} from '~/components/common/wizards/vm/migrate/select/network/table/network/lib/models/interfaces'
 
 export type UI_T_NetworkAdvancedTableKeysTuple = [
   'vm_name',

package/components/common/wizards/vm/migrate/select/network/table/useAt/UseAt.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="table-wrap">
+    <atoms-table-data-grid
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :page-size="100"
+      :page="1"
+      :total-pages="1"
+      class="select-network"
+      server-off
+      off-select-by-row
+      hide-footer
+      hide-page-size
+    >
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import * as table from '~/components/common/wizards/vm/migrate/select/network/table/useAt/lib/config/useAtTable'
+
+const props = defineProps<{
+  networks: any[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  return table.bodyItems(props.networks)
+})
+</script>
+
+<style lang="scss" scoped>
+.select-network {
+  :deep(.datagrid) {
+    margin-top: 0;
+  }
+  :deep(.datagrid-outer-wrapper) {
+    padding-top: 0;
+    //height: inherit;
+  }
+}
+</style>

package/components/common/wizards/vm/migrate/select/network/table/useAt/lib/config/tableKeys.ts

@@ -0,0 +1,7 @@
+import type { UI_T_NetworkUseAtTableKeysTuple } from '~/components/common/wizards/vm/migrate/select/network/table/useAt/lib/models/types'
+
+export const useAtTableItemKeys: UI_T_NetworkUseAtTableKeysTuple = [
+  'vm_name',
+  'network_adapter',
+  'network',
+]

package/components/common/wizards/vm/migrate/select/network/table/useAt/lib/config/useAtTable.ts

@@ -0,0 +1,47 @@
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import * as defaultSettings from '~/components/atoms/table/dataGrid/lib/config/settingsTable'
+import { useAtTableItemKeys } from '~/components/common/wizards/vm/migrate/select/network/table/useAt/lib/config/tableKeys'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.vm, true, '33.3%', useAtTableItemKeys[0]],
+    [localization.networkAdapter, true, '33.3%', useAtTableItemKeys[1]],
+    [localization.network, true, '33.3%', useAtTableItemKeys[2]],
+  ]
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  return defaultSettings.defaultHeadItems(getItems(localization))
+}
+
+export const bodyItems = (data: any[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+
+  data.forEach((network: any, key: number) => {
+    bodyItems.push([
+      {
+        key: 'col0',
+        text: network[useAtTableItemKeys[0]],
+        id: key,
+      },
+      {
+        key: 'col1',
+        text: network[useAtTableItemKeys[1]],
+        id: key,
+      },
+      {
+        key: 'col2',
+        text: network[useAtTableItemKeys[2]],
+        data,
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}