bfg-common 1.5.442 → 1.5.443

package/components/common/wizards/network/add/lib/config/selectSwitch.ts

@@ -1,5 +1,14 @@
+import type {
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+  UI_I_DataTableBody,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_TableHead } from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type {
+  UI_I_Switch,
+  UI_I_NetworkForAdding,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
 
 export const selectNetworkTableHeadFunc = (
   localization: UI_I_Localization
@@ -8,12 +17,220 @@ export const selectNetworkTableHeadFunc = (
   { text: localization.common.nsxPortGroupId },
   { text: localization.common.discoveredIssues },
 ]
+
+export const selectNetworkTableHeadNewFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 0,
+    colName: 'name',
+    text: localization.common.name,
+    isSortable: true,
+    sort: 'asc',
+    sortColumn: true,
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 1,
+    colName: 'nsx-port-group-id',
+    text: localization.common.nsxPortGroupId,
+    isSortable: true,
+    sort: 'asc',
+    sortColumn: false,
+    width: '',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 2,
+    colName: 'distributed-switch',
+    text: localization.common.distributedSwitch,
+    isSortable: true,
+    sort: 'asc',
+    sortColumn: false,
+    width: '',
+    show: true,
+    filter: true,
+  },
+]
+
+export const selectNetworkTableBodyNewFunc = (
+  data: UI_I_NetworkForAdding[]
+): UI_I_DataTableBody[] =>
+  data.map(
+    (item: UI_I_NetworkForAdding, index: number): UI_I_DataTableBody[] => {
+      return {
+        row: index,
+        collapse: false,
+        isHiddenCollapse: false,
+        collapseToggle: false,
+        data: [
+          {
+            col: 0,
+            key: 'icon',
+            text: item.name,
+            icon: 'vsphere-icon-network',
+          },
+          {
+            col: 1,
+            key: '',
+            text: '--',
+          },,
+          {
+            col: 2,
+            key: '',
+            text: '--',
+          },
+        ],
+      }
+    }
+  )
+
 export const selectSwitchTableHeadFunc = (
   localization: UI_I_Localization
 ): UI_I_TableHead[] => [
   { text: localization.common.switch },
   { text: localization.common.discoveredIssues },
 ]
+
+export const selectSwitchTableHeadNewFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 0,
+    colName: 'name',
+    text: localization.common.name,
+    isSortable: true,
+    sort: 'asc',
+    sortColumn: true,
+    width: '200px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 1,
+    colName: 'discovered-issues',
+    text: localization.common.discoveredIssues,
+    isSortable: true,
+    sort: 'asc',
+    sortColumn: false,
+    width: '',
+    show: true,
+    filter: true,
+  },
+]
+
+export const selectSwitchTableBodyNewFunc = (
+  data: UI_I_Switch[]
+): UI_I_DataTableBody[] =>
+  data.map((item: UI_I_Switch, index: number): UI_I_DataTableBody[] => {
+    return {
+      row: index,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      data: [
+        {
+          col: 0,
+          key: 'icon',
+          text: item.name,
+          icon: 'network-lib-ui-icon-vswitch',
+        },
+        {
+          col: 1,
+          key: '',
+          text: '--',
+        },
+      ],
+    }
+  })
+
 export const selectStandardSwitchTableHeadFunc = (
   localization: UI_I_Localization
 ): UI_I_TableHead[] => [{ text: localization.common.switch }]
+
+export const selectStandardSwitchTableHeadNewFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 0,
+    colName: 'name',
+    text: localization.common.name,
+    isSortable: true,
+    sort: 'asc',
+    sortColumn: true,
+    width: '',
+    show: true,
+    filter: true,
+  },
+]
+
+export const selectStandardSwitchTableBodyNewFunc = (
+  data: UI_I_Switch[]
+): UI_I_DataTableBody[] =>
+  data.map((item: UI_I_Switch, index: number): UI_I_DataTableBody[] => {
+    return {
+      row: index,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      data: [
+        {
+          col: 0,
+          key: 'icon',
+          text: item.name,
+          icon: 'network-lib-ui-icon-vswitch',
+        },
+      ],
+    }
+  })
+
+export const tableOptionsNew: UI_I_DataTableOptions = {
+  perPageOptions: [
+    { text: '10', value: 10 },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100, default: true },
+  ],
+  isSelectable: true,
+  selectType: 'radio',
+  showPagination: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: false,
+  showSearch: false,
+  showColumnManager: false,
+  withActions: false,
+  inBlock: false,
+  inModal: false,
+  showExport: false,
+  withCollapse: false,
+  showPaginationOnTop: false,
+}
+
+export const tableNetworkOptionsNew: UI_I_DataTableOptions = {
+  perPageOptions: [
+    { text: '10', value: 10 },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100, default: true },
+  ],
+  isSelectable: true,
+  selectType: 'radio',
+  showPagination: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: false,
+  showSearch: false,
+  showColumnManager: true,
+  withActions: false,
+  inBlock: false,
+  inModal: false,
+  showExport: false,
+  withCollapse: false,
+  showPaginationOnTop: false,
+}

package/components/common/wizards/network/add/lib/config/steps.ts

@@ -1,3 +1,8 @@
+import type {
+  UI_I_WizardStep,
+  UI_I_WizardSchemeData,
+} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/enums'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type {
   UI_I_ConnectionSettings,
@@ -13,11 +18,6 @@ import type {
   UI_I_Adapter,
 } from '~/components/common/diagramMain/lib/models/interfaces'
 import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/lib/models/enums'
-import type {
-  UI_I_WizardStep,
-  UI_I_WizardSchemeData,
-} from '~/components/atoms/wizard/lib/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
 
 export const stepsFunc = (
   localization: UI_I_Localization

package/components/common/wizards/network/add/lib/models/interfaces.ts

@@ -247,3 +247,12 @@ export interface UI_I_TCPStack {
   routing_table: number
   routes: string[]
 }
+
+export interface UI_I_SelectConnectionTypeItem {
+  label: string
+  description: string
+  value: string
+  testId: string
+  permission?: string
+  id?: string
+}

package/components/common/wizards/network/add/steps/ConnectionSettings.vue

@@ -88,13 +88,13 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type {
   UI_I_ArbitraryObject,
   UI_I_Localization,
 } from '~/lib/models/interfaces'
 import type { UI_I_ConnectionSettings } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
 import { vlanIdSelectData } from '~/components/common/wizards/network/add/lib/config/config'
 import {
   validateNetworkConnectionSettingsLocal,

package/components/common/wizards/network/add/steps/IpFourSettings.vue

@@ -178,6 +178,8 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type {
   UI_I_ArbitraryObject,
   UI_I_Localization,
@@ -186,8 +188,6 @@ import type {
   UI_I_IpFourSettings,
   UI_I_TCPStack,
 } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
 import {
   removeIpFourSettingsValidationLocal,
   validateAddressIpFourSettingsLocal,

package/components/common/wizards/network/add/steps/PortProperties.vue

@@ -221,6 +221,8 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type {
   UI_I_ArbitraryObject,
   UI_I_Localization,
@@ -231,8 +233,6 @@ import type {
   UI_I_TCPStack,
 } from '~/components/common/wizards/network/add/lib/models/interfaces'
 import type { UI_T_TCP } from '~/components/common/wizards/network/add/lib/models/types'
-import type { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
 import {
   servicesInitial,
   vlanIdSelectData,

package/components/common/wizards/network/add/steps/selectConnectionType/SelectConnectionType.vue

@@ -0,0 +1,35 @@
+<template>
+  <common-wizards-network-add-steps-select-connection-type-new
+    v-if="isNewView"
+    v-model="connectionTypeLocal"
+  />
+  <common-wizards-network-add-steps-select-connection-type-old
+    v-else
+    v-model="connectionTypeLocal"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:model-value', connectionType: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const connectionTypeLocal = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue: string) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/wizards/network/add/steps/selectConnectionType/SelectConnectionTypeNew.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="content">
+    <div
+      v-for="item in selectConnectionTypeItems"
+      :key="item.testId"
+      v-permission="item.permission"
+      :class="['radio-block', { selected: connectionTypeLocal === item.value }]"
+      @click="connectionTypeLocal = item.value"
+    >
+      <ui-radio
+        v-model="connectionTypeLocal"
+        :label="item.label"
+        :value="item.value"
+        :test-id="item.testId"
+        size="md"
+      >
+        <template #description>
+          <p class="description">
+            {{ item.description }}
+          </p>
+        </template>
+      </ui-radio>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SelectConnectionTypeItem } from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { selectConnectionTypeFunc } from '~/components/common/wizards/network/add/lib/config/config'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:model-value', connectionType: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const connectionTypeLocal = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue: string) {
+    emits('update:model-value', newValue)
+  },
+})
+
+const selectConnectionTypeItems = computed<UI_I_SelectConnectionTypeItem[]>(
+  () => selectConnectionTypeFunc(localization.value)
+)
+</script>
+
+<style scoped lang="scss">
+.content {
+  padding: 16px 0;
+
+  :root.dark-theme {
+    .radio-block:not(.selected).disabled {
+      background-color: #1b2a371f;
+      opacity: unset;
+    }
+  }
+  .radio-block {
+    background-color: var(--radio-block-bg-color);
+    box-shadow: inset 0 0 0 1px var(--radio-block-border-color);
+    transition: box-shadow 0.1s ease-in-out;
+    padding: 12px;
+    border-radius: 8px;
+
+    &:not(.selected):not(.disabled) {
+      &:hover {
+        box-shadow: inset 0 0 0 1px var(--radio-block-border-hover-color);
+      }
+    }
+
+    &:not(.disabled) {
+      cursor: pointer;
+    }
+
+    &:not(.selected).disabled {
+      background-color: #ffffff;
+      opacity: 0.6;
+    }
+
+    &.selected {
+      background-color: var(--radio-block-selected-bg-color);
+      box-shadow: inset 0 0 0 1.5px var(--radio-block-selected-border-color);
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 12px;
+    }
+
+    .description {
+      font-size: 13px;
+      color: #9da6ad !important;
+      line-height: 18px;
+    }
+  }
+}
+</style>

package/components/common/wizards/network/add/steps/selectConnectionType/SelectConnectionTypeOld.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="wizard-content-container add-networking-step">
+    <div class="wizard-content">
+      <form>
+        <template v-for="item in selectConnectionTypeItems" :key="item.testId">
+          <div v-permission="item.permission" class="radio">
+            <input
+              :id="item.id"
+              v-model="connectionTypeLocal"
+              type="radio"
+              :value="item.value"
+              name="connection-type"
+            />
+            <label :for="item.id" :data-id="item.testId">
+              {{ item.label }}
+            </label>
+          </div>
+          <div
+            v-permission="item.permission"
+            class="add-networking-radio-button-description"
+          >
+            {{ item.description }}
+          </div>
+        </template>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SelectConnectionTypeItem } from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { selectConnectionTypeFunc } from '~/components/common/wizards/network/add/lib/config/config'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:model-value', connectionType: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const connectionTypeLocal = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue: string) {
+    emits('update:model-value', newValue)
+  },
+})
+
+const selectConnectionTypeItems = computed<UI_I_SelectConnectionTypeItem[]>(
+  () => selectConnectionTypeFunc(localization.value)
+)
+</script>
+
+<style scoped lang="scss">
+.wizard-content {
+  height: auto;
+  width: inherit;
+  margin: 0;
+
+  .radio {
+    min-height: 20px;
+    margin: 10px 0;
+
+    label {
+      font-weight: 700;
+      margin: 6px 12px 6px 0;
+    }
+  }
+
+  .add-networking-radio-button-description {
+    padding-left: 20px;
+    color: #333;
+  }
+}
+</style>