bfg-common 1.3.19 → 1.3.21

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

@@ -1,253 +1,253 @@
-<template>
-  <g data-title="network-contents">
-    <foreignObject
-      data-title="network-icon"
-      width="18"
-      height="18"
-      x="26"
-      :y="props.network.titlePosition"
-    >
-      <div class="vsphere-icon-network"></div>
-    </foreignObject>
-
-    <a
-      :id="`network-${testId}`"
-      cursor="pointer"
-      data-title="network-name-link"
-      @click="onSelectNetwork(props.network.id)"
-    >
-      <text
-        data-title="network-name-text"
-        dy="14px"
-        font-size="14"
-        font-weight="500"
-        x="50"
-        :y="props.network.titlePosition"
-        class="diagram__heading"
-      >
-        {{ props.network.title }}
-      </text>
-    </a>
-
-    <foreignObject
-      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="`network-${testId}-toggle`"
-          @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.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"
-      @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
-      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>
-
-    <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 {
-  UI_I_ModalsInitialData,
-  UI_I_NetworkFullWithPositions,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import { networkPopupFieldsFunc } from '~/components/common/diagramMain/modals/lib/config'
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import { dataForSelectedNetworkFunc } from '~/components/common/diagramMain/lib/config'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  inPortlet: boolean
-  isNetworkSelectedWithClosedPorts: boolean
-  diagramId: 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 testId = computed<string>(() => props.network.id.replaceAll('=', '_'))
-
-const networkPopupFields = computed(() =>
-  networkPopupFieldsFunc(
-    localization.value,
-    props.network.networkType,
-    props.network.id,
-    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 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;
-  }
-}
-
-.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);
-  }
-}
-</style>
+<template>
+  <g data-title="network-contents">
+    <foreignObject
+      data-title="network-icon"
+      width="18"
+      height="18"
+      x="26"
+      :y="props.network.titlePosition"
+    >
+      <div class="vsphere-icon-network"></div>
+    </foreignObject>
+
+    <a
+      :id="`network-${testId}`"
+      cursor="pointer"
+      data-title="network-name-link"
+      @click="onSelectNetwork(props.network.id)"
+    >
+      <text
+        data-title="network-name-text"
+        dy="14px"
+        font-size="14"
+        font-weight="500"
+        x="50"
+        :y="props.network.titlePosition"
+        class="diagram__heading"
+      >
+        {{ props.network.title }}
+      </text>
+    </a>
+
+    <foreignObject
+      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="`network-${testId}-toggle`"
+          @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.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"
+      @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
+      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>
+
+    <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 {
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFullWithPositions,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import { networkPopupFieldsFunc } from '~/components/common/diagramMain/modals/lib/config'
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { dataForSelectedNetworkFunc } from '~/components/common/diagramMain/lib/config'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  inPortlet: boolean
+  isNetworkSelectedWithClosedPorts: boolean
+  diagramId: 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 testId = computed<string>(() => props.network.id.replaceAll('=', '_'))
+
+const networkPopupFields = computed(() =>
+  networkPopupFieldsFunc(
+    localization.value,
+    props.network.networkType,
+    props.network.id,
+    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 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;
+  }
+}
+
+.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);
+  }
+}
+</style>

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

@@ -1,71 +1,71 @@
-<template>
-  <g data-title="network-lines-group">
-    <line
-      data-title="network-line"
-      x1="332.5"
-      :y1="props.network.connectLineY"
-      x2="362.5"
-      :y2="props.network.connectLineY"
-      shape-rendering="geometricprecision"
-      class="connection-line"
-    />
-
-    <common-diagram-main-highlights
-      data-title="network-selected-main-line"
-      type="line-orange"
-      x="332.5"
-      :y="props.network.connectLineY"
-      x2="362.5"
-      :y2="props.network.connectLineY"
-      :hide="!props.selectedMainLine"
-    />
-
-    <common-diagram-main-highlights
-      data-title="network-selected-line"
-      type="line-orange"
-      x="332.5"
-      :y="props.network.connectLineY"
-      x2="362.5"
-      :y2="props.network.connectLineY"
-      :hide="!props.isNetworkSelectedWithoutPorts"
-    />
-
-    <line
-      data-title="network-invisible-line"
-      x1="332.5"
-      :y1="props.network.connectLineY"
-      x2="362.5"
-      :y2="props.network.connectLineY"
-      shape-rendering="geometricprecision"
-      class="invisible-line main-line__handler"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import { UI_I_NetworkFullWithPositions } from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  selectedMainLine: boolean
-  isNetworkSelectedWithoutPorts: boolean
-}>()
-</script>
-
-<style scoped lang="scss">
-:root.dark-theme {
-  .connection-line {
-    stroke: #adbbc4;
-  }
-}
-
-.connection-line {
-  stroke: #888;
-}
-.invisible-line {
-  cursor: pointer;
-  stroke: #000;
-  stroke-opacity: 0;
-  stroke-width: 10px;
-}
-</style>
+<template>
+  <g data-title="network-lines-group">
+    <line
+      data-title="network-line"
+      x1="332.5"
+      :y1="props.network.connectLineY"
+      x2="362.5"
+      :y2="props.network.connectLineY"
+      shape-rendering="geometricprecision"
+      class="connection-line"
+    />
+
+    <common-diagram-main-highlights
+      data-title="network-selected-main-line"
+      type="line-orange"
+      x="332.5"
+      :y="props.network.connectLineY"
+      x2="362.5"
+      :y2="props.network.connectLineY"
+      :hide="!props.selectedMainLine"
+    />
+
+    <common-diagram-main-highlights
+      data-title="network-selected-line"
+      type="line-orange"
+      x="332.5"
+      :y="props.network.connectLineY"
+      x2="362.5"
+      :y2="props.network.connectLineY"
+      :hide="!props.isNetworkSelectedWithoutPorts"
+    />
+
+    <line
+      data-title="network-invisible-line"
+      x1="332.5"
+      :y1="props.network.connectLineY"
+      x2="362.5"
+      :y2="props.network.connectLineY"
+      shape-rendering="geometricprecision"
+      class="invisible-line main-line__handler"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import { UI_I_NetworkFullWithPositions } from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  selectedMainLine: boolean
+  isNetworkSelectedWithoutPorts: boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+:root.dark-theme {
+  .connection-line {
+    stroke: #adbbc4;
+  }
+}
+
+.connection-line {
+  stroke: #888;
+}
+.invisible-line {
+  cursor: pointer;
+  stroke: #000;
+  stroke-opacity: 0;
+  stroke-width: 10px;
+}
+</style>