bfg-common 1.4.496 → 1.4.498

package/components/common/diagramMain/network/Contents.vue

@@ -1,361 +1,488 @@
-<template>
-  <g data-title="network-contents">
-    <foreignObject
-      data-title="network-icon"
-      width="18"
-      height="18"
-      x="26"
-      :y="props.network.titlePosition"
-    >
-      <div :class="networkIcon" :title="errorText"></div>
-    </foreignObject>
-
-    <a
-      :id="`network-${props.network.id}`"
-      :data-id="`${props.network.testId}-link`"
-      style="text-decoration: none"
-      cursor="pointer"
-      data-title="network-name-link"
-      @click="onSelectNetwork(props.network.id)"
-    >
-      <foreignObject
-        data-title="network-name-text"
-        height="22"
-        width="206"
-        x="50"
-        :title="props.network.title"
-        :y="networkTitlePosition"
-        class="diagram__heading"
-      >
-        <span
-          class="text-ellipsis"
-          :title="props.network.title"
-          :id="`network_${props.network.id}`"
-        >
-          {{ props.network.title }}
-        </span>
-      </foreignObject>
-    </a>
-
-    <foreignObject
-      v-if="isNotShowNetworkActions"
-      data-title="network-actions"
-      width="18"
-      height="18"
-      x="270"
-      :y="props.network.titlePosition"
-      cursor="pointer"
-    >
-      <div class="diagram-actions">
-        <atoms-collapse-nav
-          class="diagram-actions__icon"
-          value="-1"
-          popup-class="diagram-actions__popup"
-          :close-after-click="true"
-          :items="networkPopupFields"
-          :test-id="`${props.network.testId}`"
-          @change="(value: string) => onShowModal(value, dataForSelectedNetwork)"
-        />
-      </div>
-    </foreignObject>
-
-    <text
-      data-title="network-vlan-text"
-      dy="11px"
-      font-size="13"
-      font-weight="400"
-      x="26"
-      :y="props.network.vlanPosition"
-      class="vlan-id"
-    >
-      {{ localization.common.vlanId }}: {{ props.network.vlanId }}
-    </text>
-
-    <common-diagram-main-highlights
-      data-title="ports-closed"
-      type="main-orange"
-      width="276"
-      height="18"
-      x="18.5"
-      :y="closedPortsHighlightPosition"
-      :hide="!props.isNetworkSelectedWithClosedPorts"
-    />
-
-    <foreignObject
-      v-if="hasPorts"
-      data-title="ports-toggle-icon"
-      width="18"
-      height="18"
-      x="24"
-      :y="portsArrowPosition"
-      cursor="pointer"
-      :data-id="`${props.network.testId}-toggle-ports`"
-      @click="
-        onTogglePorts(props.network.id, !props.network.toggle, props.diagramId)
-      "
-    >
-      <div class="diagram-block__toggle">
-        <atoms-the-icon
-          name="angle"
-          :class="[
-            'virtual-switch__arrow-icon',
-            {
-              open: props.network.toggle,
-            },
-          ]"
-        />
-      </div>
-    </foreignObject>
-
-    <text
-      v-if="props.network.state.state !== 3"
-      data-title="ports-main-text"
-      dy="11px"
-      font-size="13"
-      font-weight="400"
-      x="42"
-      :y="props.network.portsPosition"
-      class="port-group-header"
-    >
-      {{ props.network.networkPortsName }} ({{ props.network.portsCount }})
-    </text>
-    <foreignObject
-      v-else
-      dy="11px"
-      font-size="13"
-      font-weight="400"
-      x="26"
-      height="20"
-      width="246"
-      :y="props.network.portsPosition - 5"
-      class="port-group-header"
-    >
-      <span class="error-text text-ellipsis" :title="errorText">
-        {{ errorText }}
-      </span>
-    </foreignObject>
-
-    <common-diagram-main-highlights
-      data-title="ports-closed"
-      type="line-orange"
-      x="334.5"
-      :y="closedPortsLinePosition"
-      x2="362.5"
-      :y2="closedPortsLinePosition"
-      :hide="!props.isNetworkSelectedWithClosedPorts"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ModalsInitialData,
-  UI_I_NetworkFullWithPositions,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { networkPopupFieldsFunc } from '~/components/common/diagramMain/modals/lib/config'
-import { dataForSelectedNetworkFunc } from '~/components/common/diagramMain/lib/config'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  inPortlet: boolean
-  isNetworkSelectedWithClosedPorts: boolean
-  diagramId: string
-  testId?: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-network', networkId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-  (
-    event: 'toggle-ports',
-    id: string,
-    newState: boolean,
-    diagramId: string
-  ): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const networkIcon = computed<string>(() => {
-  switch (props.network.state.state) {
-    case 0:
-      return 'vsphere-icon-network-error'
-    case 3:
-      return 'vsphere-icon-network-error'
-    case 2:
-      return 'vsphere-icon-network-warning'
-    default:
-      return 'vsphere-icon-network'
-  }
-})
-
-const errorText = computed<string>(() =>
-  props.network.state?.errors?.length > 0
-    ? props.network.state?.errors.join(', ') ||
-      localization.value.common.somethingWentWrong
-    : ''
-)
-
-const networkPopupFields = computed(() =>
-  networkPopupFieldsFunc(
-    localization.value,
-    props.network.networkType,
-    props.network.testId,
-    props.network.state.state,
-    props.inPortlet
-  )
-)
-
-const dataForSelectedNetwork = computed<UI_I_ModalsInitialData>(() =>
-  dataForSelectedNetworkFunc(props.network)
-)
-
-const closedPortsHighlightPosition = computed<number>(
-  () => props.network.portsPosition - 1.5
-)
-
-const hasPorts = computed<boolean>(() => props.network.portsCount > 0)
-
-const portsArrowPosition = computed<number>(
-  () => props.network.portsPosition - 1
-)
-
-const closedPortsLinePosition = computed<number>(
-  () => props.network.portsPosition + 7.5
-)
-
-const networkTitlePosition = computed<number>(
-  () => props.network.titlePosition - 5
-)
-
-const isNotShowNetworkActions = computed<boolean>(
-  () => !(props.inPortlet && props.network.state.state === 3)
-)
-
-const onSelectNetwork = (networkId: string): void => {
-  emits('select-network', networkId)
-}
-const onShowModal = (
-  value: string,
-  properties?: UI_I_ModalsInitialData
-): void => {
-  emits('show-modal', value, properties)
-}
-const onTogglePorts = (
-  id: string,
-  isToggle: boolean,
-  diagramId: string
-): void => {
-  emits('toggle-ports', id, isToggle, diagramId)
-}
-
-watch(
-  () => props.network,
-  (newValue: any) => {
-    console.log(444, newValue)
-  },
-  { immediate: true, deep: true }
-)
-</script>
-
-<style scoped lang="scss">
-@import '@/assets/scss/common/mixins.scss';
-
-:root.dark-theme {
-  .diagram__heading,
-  .vlan-id,
-  .port-group-header {
-    fill: #c1cdd4;
-  }
-
-  .text-ellipsis {
-    color: #c1cdd4;
-
-    &:hover {
-      color: #c1cdd4;
-      text-decoration: solid underline #c1cdd4 2px;
-    }
-  }
-
-  .error-text {
-    color: #e02200;
-
-    &:hover {
-      color: #e02200;
-      text-decoration: unset;
-    }
-  }
-}
-
-.diagram {
-  &__heading {
-    @include text($fs: 14px, $fw: 500);
-    fill: #565656;
-    letter-spacing: normal;
-    line-height: 1.2rem;
-  }
-
-  &__values {
-    @include text($fs: 12px, $fw: 400);
-  }
-  &-actions {
-    :deep(.diagram-actions__icon) {
-      &.tabs-overflow {
-        top: -12px;
-        right: -13px;
-      }
-      .navbar-dropdown-menu {
-        .navbar-dropdown-menu-item {
-          background: red;
-        }
-      }
-    }
-  }
-}
-
-.virtual-switch__arrow-icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 4px;
-  transform: rotate(90deg);
-  align-self: center;
-  fill: var(--triger-icon-color);
-  cursor: pointer;
-  &.open {
-    transform: rotate(180deg);
-  }
-}
-
-.text-ellipsis {
-  display: block;
-  max-width: 206px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-weight: 500;
-  font-size: 14px;
-  color: #565656;
-
-  &:hover {
-    color: #565656;
-    text-decoration: solid underline #565656 2px;
-  }
-}
-
-.error-text {
-  font-weight: 400;
-  font-size: 12px;
-  max-width: 246px;
-  color: #e02200;
-
-  &:hover {
-    color: #e02200;
-    text-decoration: unset;
-  }
-}
-</style>
+<template>
+  <g data-title="network-contents">
+    <foreignObject
+      data-title="network-icon"
+      :width="positions.networkIconSize"
+      :height="positions.networkIconSize"
+      :x="positions.networkIconX"
+      :y="positions.networkIconY"
+    >
+      <div :class="networkIcon" :title="errorText"></div>
+    </foreignObject>
+
+    <a
+      :id="`network-${props.network.id}`"
+      :data-id="`${props.network.testId}-link`"
+      style="text-decoration: none"
+      cursor="pointer"
+      data-title="network-name-link"
+      @click="onSelectNetwork(props.network.id)"
+    >
+      <foreignObject
+        data-title="network-name-text"
+        height="22"
+        width="206"
+        :x="positions.networkTitleX"
+        :title="props.network.title"
+        :y="networkTitlePosition"
+        class="diagram__heading"
+      >
+        <span
+          :class="[
+            'network-title text-ellipsis',
+            {
+              'is-selected': props.isSelected,
+            },
+          ]"
+          :title="props.network.title"
+          :id="`network_${props.network.id}`"
+        >
+          {{ props.network.title }}
+        </span>
+      </foreignObject>
+    </a>
+
+    <foreignObject
+      v-if="isNotShowNetworkActions"
+      data-title="network-actions"
+      width="18"
+      height="18"
+      :x="positions.actionX"
+      :y="positions.actionY"
+      cursor="pointer"
+    >
+      <div v-if="isNewView" class="dropdown-actions-container">
+        <button
+          :id="`dropdown-${props.network.id}`"
+          :class="[
+            'action-button',
+            { 'action-button-selected': isShowDropdown },
+          ]"
+          @click="isShowDropdown = !isShowDropdown"
+        >
+          <ui-icon name="horizontal-dotes" width="16" height="16" />
+        </button>
+        <Teleport to="body">
+          <ui-dropdown
+            :test-id="props.network.testId"
+            :show="isShowDropdown"
+            :items="networkPopupFields"
+            :elem-id="`dropdown-${props.network.id}`"
+            width="max-content"
+            show-from-left
+            @select="(value: string) => onShowModal(value, dataForSelectedNetwork)"
+            @hide="onHide"
+          ></ui-dropdown>
+        </Teleport>
+      </div>
+      <div v-else class="diagram-actions">
+        <atoms-collapse-nav
+          class="diagram-actions__icon"
+          value="-1"
+          popup-class="diagram-actions__popup"
+          :close-after-click="true"
+          :items="networkPopupFields"
+          :test-id="props.network.testId"
+          @change="(value: string) => onShowModal(value, dataForSelectedNetwork)"
+        />
+      </div>
+    </foreignObject>
+
+    <text
+      data-title="network-vlan-text"
+      dy="11px"
+      font-size="13"
+      font-weight="400"
+      :x="positions.contentX"
+      :y="props.network.vlanPosition"
+      class="vlan-id"
+    >
+      {{ localization.common.vlanId }}: {{ props.network.vlanId }}
+    </text>
+
+    <common-diagram-main-highlights
+      data-title="ports-closed"
+      type="main-orange"
+      width="276"
+      height="18"
+      :x="positions.blockX"
+      :y="closedPortsHighlightPosition"
+      :hide="!props.isNetworkSelectedWithClosedPorts"
+    />
+
+    <foreignObject
+      data-title="ports-toggle-icon"
+      :width="positions.arrowSize"
+      :height="positions.arrowSize"
+      :x="positions.arrowX"
+      :y="positions.portsArrowPosition"
+      cursor="pointer"
+      :data-id="`${props.network.testId}-toggle-ports`"
+      :class="{
+        disabled: !hasPorts && isNewView,
+        hide: !hasPorts && !isNewView,
+      }"
+      @click="
+        onTogglePorts(props.network.id, !props.network.toggle, props.diagramId)
+      "
+    >
+      <div class="diagram-block__toggle">
+        <ui-icon
+          v-if="isNewView"
+          name="arrow"
+          width="16"
+          height="16"
+          :class="[
+            'virtual-switch__arrow-icon',
+            {
+              open: hasPorts ? props.network.toggle : false,
+            },
+          ]"
+        />
+        <atoms-the-icon
+          v-else
+          name="angle"
+          :class="[
+            'virtual-switch__arrow-icon',
+            {
+              open: hasPorts ? props.network.toggle : false,
+            },
+          ]"
+        />
+      </div>
+    </foreignObject>
+
+    <text
+      v-if="props.network.state.state !== 3"
+      data-title="ports-main-text"
+      dy="11px"
+      font-size="13"
+      font-weight="400"
+      :x="positions.portX"
+      :y="positions.portsY"
+      class="port-group-header"
+    >
+      {{ props.network.networkPortsName }} ({{ props.network.portsCount }})
+    </text>
+    <foreignObject
+      v-else
+      dy="11px"
+      font-size="13"
+      font-weight="400"
+      x="26"
+      height="20"
+      width="246"
+      :y="props.network.portsPosition - 5"
+      class="port-group-header"
+    >
+      <span class="error-text text-ellipsis" :title="errorText">
+        {{ errorText }}
+      </span>
+    </foreignObject>
+
+    <common-diagram-main-highlights
+      data-title="ports-closed"
+      type="line-orange"
+      :x="positions.x1"
+      :y="closedPortsLinePosition"
+      :x2="positions.x2"
+      :y2="closedPortsLinePosition"
+      :hide="!props.isNetworkSelectedWithClosedPorts"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFullWithPositions,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+} from '~/lib/models/interfaces'
+import {
+  networkPopupFieldsFunc,
+  networkPopupFieldsNewFunc,
+} from '~/components/common/diagramMain/modals/lib/config'
+import {
+  dataForSelectedNetworkFunc,
+  networkContentPositionsFunc,
+} from '~/components/common/diagramMain/lib/config'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  inPortlet: boolean
+  isNetworkSelectedWithClosedPorts: boolean
+  diagramId: string
+  testId?: string
+  isSelected: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-network', networkId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+  (
+    event: 'toggle-ports',
+    id: string,
+    newState: boolean,
+    diagramId: string
+  ): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const positions = computed<UI_I_ArbitraryObject<number>>(() =>
+  networkContentPositionsFunc(
+    isNewView.value,
+    props.network.portsPosition,
+    props.network.titlePosition
+  )
+)
+
+const isShowDropdown = ref<boolean>(false)
+const onHide = (): void => {
+  isShowDropdown.value = false
+}
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const networkIcon = computed<string>(() => {
+  switch (props.network.state.state) {
+    case 0:
+      return 'vsphere-icon-network-error network-icon'
+    case 3:
+      return 'vsphere-icon-network-error network-icon'
+    case 2:
+      return 'vsphere-icon-network-warning network-icon'
+    default:
+      return 'vsphere-icon-network network-icon'
+  }
+})
+
+const errorText = computed<string>(() =>
+  props.network.state?.errors?.length > 0
+    ? props.network.state?.errors.join(', ') ||
+      localization.value.common.somethingWentWrong
+    : ''
+)
+
+const networkPopupFields = computed(() =>
+  isNewView.value
+    ? networkPopupFieldsNewFunc(
+        localization.value,
+        props.network.networkType,
+        props.network.testId,
+        props.network.state.state,
+        props.inPortlet
+      )
+    : networkPopupFieldsFunc(
+        localization.value,
+        props.network.networkType,
+        props.network.testId,
+        props.network.state.state,
+        props.inPortlet
+      )
+)
+
+const dataForSelectedNetwork = computed<UI_I_ModalsInitialData>(() =>
+  dataForSelectedNetworkFunc(props.network)
+)
+
+const closedPortsHighlightPosition = computed<number>(
+  () => props.network.portsPosition - 1.5
+)
+
+const hasPorts = computed<boolean>(() => props.network.portsCount > 0)
+
+const closedPortsLinePosition = computed<number>(
+  () => props.network.portsPosition + 7.5
+)
+
+const networkTitlePosition = computed<number>(
+  () => props.network.titlePosition - 5
+)
+
+const isNotShowNetworkActions = computed<boolean>(
+  () => !(props.inPortlet && props.network.state.state === 3)
+)
+
+const onSelectNetwork = (networkId: string): void => {
+  emits('select-network', networkId)
+}
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
+  emits('show-modal', value, properties)
+}
+const onTogglePorts = (
+  id: string,
+  isToggle: boolean,
+  diagramId: string
+): void => {
+  emits('toggle-ports', id, isToggle, diagramId)
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/scss/common/mixins.scss';
+
+:root.dark-theme {
+  .diagram__heading,
+  .vlan-id,
+  .port-group-header {
+    fill: #c1cdd4;
+  }
+
+  .text-ellipsis {
+    color: #c1cdd4;
+
+    &:hover {
+      color: #c1cdd4;
+      text-decoration: solid underline #c1cdd4 2px;
+    }
+  }
+
+  .error-text {
+    color: #e02200;
+
+    &:hover {
+      color: #e02200;
+      text-decoration: unset;
+    }
+  }
+}
+
+.diagram {
+  &__heading {
+    @include text($fs: 14px, $fw: 500);
+    fill: #565656;
+    letter-spacing: normal;
+    line-height: 1.2rem;
+  }
+
+  &__values {
+    @include text($fs: 12px, $fw: 400);
+  }
+  &-actions {
+    :deep(.diagram-actions__icon) {
+      &.tabs-overflow {
+        top: -12px;
+        right: -13px;
+      }
+      .navbar-dropdown-menu {
+        .navbar-dropdown-menu-item {
+          background: red;
+        }
+      }
+    }
+  }
+}
+
+.virtual-switch__arrow-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  transform: rotate(90deg);
+  align-self: center;
+  fill: var(--triger-icon-color);
+  cursor: pointer;
+  &.open {
+    transform: rotate(180deg);
+  }
+}
+
+.text-ellipsis {
+  display: block;
+  max-width: 206px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 500;
+  font-size: 14px;
+  color: #565656;
+}
+.network-title {
+  &:hover {
+    color: #565656;
+    text-decoration: solid underline #565656 2px;
+  }
+}
+
+.error-text {
+  font-weight: 400;
+  font-size: 12px;
+  max-width: 246px;
+  color: #e02200;
+
+  &:hover {
+    color: #e02200;
+    text-decoration: unset;
+  }
+}
+
+:root.is-new-view {
+  .network-title {
+    line-height: 26px;
+    color: var(--diagram-content-text);
+
+    &:hover {
+      color: var(--diagram-content-text-hover);
+      text-decoration: unset;
+    }
+    &.is-selected {
+      color: var(--diagram-content-text-selected);
+      &:hover {
+        color: var(--diagram-content-text-selected);
+        text-decoration: unset;
+      }
+    }
+  }
+  .disabled {
+    pointer-events: none;
+    .virtual-switch__arrow-icon {
+      fill: none;
+      color: var(--diagram-content-second-disabled-text);
+    }
+  }
+  .virtual-switch__arrow-icon {
+    fill: none;
+    color: var(--diagram-content-second-text);
+  }
+  .port-group-header {
+    fill: var(--diagram-content-second-text);
+  }
+  .network-icon {
+    color: var(--diagram-content-text);
+    width: 20px;
+    height: 20px;
+  }
+  .vlan-id {
+    fill: var(--diagram-content-third-text);
+  }
+
+  .action-button {
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+    color: var(--diagram-content-text);
+
+    &:hover {
+      color: var(--diagram-content-text-hover);
+    }
+
+    &.action-button-selected {
+      color: var(--diagram-content-text-selected);
+    }
+  }
+}
+</style>