bfg-common 1.2.85 → 1.2.87

package/components/common/diagramMain/adapter/Adapter.vue

@@ -1,105 +1,105 @@
-<template>
-  <g>
-    <common-diagram-main-adapter-block
-      :is-highlighted-closed-adapter-block="isHighlightedClosedAdapterBlock"
-      :adapters-with-positions-height="props.adaptersWithPositions.height"
-    />
-
-    <common-diagram-main-adapter-contents
-      :adapters-with-positions="props.adaptersWithPositions"
-      @toggle-adapters="onToggleAdapters"
-    />
-
-    <common-diagram-main-adapter-second-block
-      :is-highlighted-closed-adapter-block="isHighlightedClosedAdapterBlock"
-      :adapters-with-positions-rect-position="
-        props.adaptersWithPositions.rectPosition
-      "
-      :adapters-with-positions-height="props.adaptersWithPositions.height"
-    />
-
-    <common-diagram-main-adapter-lines
-      v-if="props.isVisibleLine && !!props.networksCount"
-      :adapters-connect-line-y="
-        props.adaptersWithPositions.adaptersConnectLineY
-      "
-      :is-highlighted-adapter-line="isHighlightedAdapterLine"
-    />
-
-    <common-diagram-main-adapter-items
-      :adapters-with-positions="props.adaptersWithPositions"
-      :selected-port="props.selectedPort"
-      :selected-adapter="props.selectedAdapter"
-      :networks-count="props.networksCount"
-      @select-adapter="onSelectAdapter"
-      @show-modal="onShowModal"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_AdaptersWithPositions,
-  UI_I_ModalsInitialData,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-} from '~/components/common/diagramMain/models/interfaces'
-
-const props = defineProps<{
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  selectedMainLine: boolean
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  selectedNetwork: string
-  isVisibleLine: boolean
-  networksCount: number
-}>()
-
-const isOpenedAdapterBlockAndNoSelectedNetwork = computed<boolean>(
-  () =>
-    !props.adaptersWithPositions.toggle && props.selectedPort.networkId !== '-1'
-)
-
-const hasNoAdaptersAndNoSelectedNetwork = computed<boolean>(
-  () =>
-    props.adaptersWithPositions.adapters?.length === 0 &&
-    props.selectedNetwork !== '-1'
-)
-
-const isHighlightedOptimizePart = computed(
-  () =>
-    !props.selectedMainLine && !isOpenedAdapterBlockAndNoSelectedNetwork.value
-)
-
-const isHighlightedAdapterLine = computed<boolean>(
-  () =>
-    !(
-      isHighlightedOptimizePart.value &&
-      !hasNoAdaptersAndNoSelectedNetwork.value
-    )
-)
-
-const isHighlightedClosedAdapterBlock = computed<boolean>(
-  () =>
-    !(
-      isHighlightedOptimizePart.value &&
-      !(hasNoAdaptersAndNoSelectedNetwork.value && props.isVisibleLine)
-    )
-)
-
-const emits = defineEmits<{
-  (event: 'toggle-adapters', networkId: string, portId: string): void
-  (event: 'select-adapter', adapterId: string): void
-  (event: 'show-modal', value: string, properties?: UI_I_ModalsInitialData): void
-}>()
-
-const onToggleAdapters = (networkId: string, portId: string): void => {
-  emits('toggle-adapters', networkId, portId)
-}
-const onSelectAdapter = (adapterId: string): void => {
-  emits('select-adapter', adapterId)
-}
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData): void => {
-  emits('show-modal', value, properties)
-}
-</script>
+<template>
+  <g>
+    <common-diagram-main-adapter-block
+      :is-highlighted-closed-adapter-block="isHighlightedClosedAdapterBlock"
+      :adapters-with-positions-height="props.adaptersWithPositions.height"
+    />
+
+    <common-diagram-main-adapter-contents
+      :adapters-with-positions="props.adaptersWithPositions"
+      @toggle-adapters="onToggleAdapters"
+    />
+
+    <common-diagram-main-adapter-second-block
+      :is-highlighted-closed-adapter-block="isHighlightedClosedAdapterBlock"
+      :adapters-with-positions-rect-position="
+        props.adaptersWithPositions.rectPosition
+      "
+      :adapters-with-positions-height="props.adaptersWithPositions.height"
+    />
+
+    <common-diagram-main-adapter-lines
+      v-if="props.isVisibleLine && !!props.networksCount"
+      :adapters-connect-line-y="
+        props.adaptersWithPositions.adaptersConnectLineY
+      "
+      :is-highlighted-adapter-line="isHighlightedAdapterLine"
+    />
+
+    <common-diagram-main-adapter-items
+      :adapters-with-positions="props.adaptersWithPositions"
+      :selected-port="props.selectedPort"
+      :selected-adapter="props.selectedAdapter"
+      :networks-count="props.networksCount"
+      @select-adapter="onSelectAdapter"
+      @show-modal="onShowModal"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_AdaptersWithPositions,
+  UI_I_ModalsInitialData,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+} from '~/components/common/diagramMain/models/interfaces'
+
+const props = defineProps<{
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  selectedMainLine: boolean
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  selectedNetwork: string
+  isVisibleLine: boolean
+  networksCount: number
+}>()
+
+const isOpenedAdapterBlockAndNoSelectedNetwork = computed<boolean>(
+  () =>
+    !props.adaptersWithPositions.toggle && props.selectedPort.networkId !== '-1'
+)
+
+const hasNoAdaptersAndNoSelectedNetwork = computed<boolean>(
+  () =>
+    props.adaptersWithPositions.adapters?.length === 0 &&
+    props.selectedNetwork !== '-1'
+)
+
+const isHighlightedOptimizePart = computed(
+  () =>
+    !props.selectedMainLine && !isOpenedAdapterBlockAndNoSelectedNetwork.value
+)
+
+const isHighlightedAdapterLine = computed<boolean>(
+  () =>
+    !(
+      isHighlightedOptimizePart.value &&
+      !hasNoAdaptersAndNoSelectedNetwork.value
+    )
+)
+
+const isHighlightedClosedAdapterBlock = computed<boolean>(
+  () =>
+    !(
+      isHighlightedOptimizePart.value &&
+      !(hasNoAdaptersAndNoSelectedNetwork.value && props.isVisibleLine)
+    )
+)
+
+const emits = defineEmits<{
+  (event: 'toggle-adapters', networkId: string, portId: string): void
+  (event: 'select-adapter', adapterId: string): void
+  (event: 'show-modal', value: string, properties?: UI_I_ModalsInitialData): void
+}>()
+
+const onToggleAdapters = (networkId: string, portId: string): void => {
+  emits('toggle-adapters', networkId, portId)
+}
+const onSelectAdapter = (adapterId: string): void => {
+  emits('select-adapter', adapterId)
+}
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData): void => {
+  emits('show-modal', value, properties)
+}
+</script>

package/components/common/diagramMain/adapter/AdapterItem.vue

@@ -1,230 +1,230 @@
-<template>
-  <g data-title="adapter-item-group">
-    <common-diagram-main-highlights
-      data-title="adapter-item"
-      type="main-orange"
-      width="276"
-      height="18"
-      x="430.5"
-      :y="adapterSelectionPosition"
-      :hide="!isConnectedAdapterToPortOrNetwork"
-    />
-
-    <common-diagram-main-highlights
-      data-title="adapter-item"
-      type="main-blue"
-      width="276"
-      height="18"
-      x="430.5"
-      :y="adapterSelectionPosition"
-      :hide="!isSelectedAdapter"
-    />
-
-    <a
-      :id="`adapter-${props.adapter.id}`"
-      data-title="adapter-name"
-      cursor="pointer"
-      @click="onSelectAdapter(props.adapter.id)"
-    >
-      <text
-        dy="11px"
-        font-size="12"
-        font-weight="400"
-        x="482"
-        :y="props.adapter.adapterPosition"
-        class="diagram__values"
-      >
-        {{ adapterName }}
-      </text>
-    </a>
-
-    <foreignObject
-      v-if="!props.adapter.carrier"
-      data-title="adapter-connection-icon"
-      width="18"
-      height="18"
-      x="446"
-      :y="adapterSelectionPosition"
-    >
-      <atoms-diagram-icon name="adapter-carrier" />
-    </foreignObject>
-
-    <common-diagram-main-highlights
-      data-title="adapter-item-line"
-      type="line-orange"
-      x="391.5"
-      :y="adapterLinePosition"
-      x2="362.5"
-      :y2="adapterLinePosition"
-      :hide="!isVisibleAdapterLine"
-    />
-
-    <foreignObject
-      data-title="adapter-item-icon"
-      width="18"
-      height="18"
-      x="462"
-      :y="adapterIconPosition"
-    >
-      <div>
-        <atoms-diagram-icon name="adapter-item-icon" />
-      </div>
-    </foreignObject>
-
-    <foreignObject
-      data-title="adapter-action-icon"
-      width="18"
-      height="18"
-      x="682"
-      :y="adapterActionIconPosition"
-      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="adapterPopupFields"
-          :test-id="`adapter-${props.adapter.id}-toggle`"
-          @change="(value) => onShowModal(value, adapterProperties)"
-        />
-      </div>
-    </foreignObject>
-
-    <foreignObject
-      v-if="props.adapter.carrier"
-      data-title="adapter-second-connected-icon"
-      width="18"
-      height="18"
-      x="396"
-      :y="props.adapter.adapterPosition"
-    >
-      <div>
-        <atoms-diagram-icon name="fill-adapter" />
-      </div>
-    </foreignObject>
-
-    <foreignObject
-      v-else
-      data-title="adapter-second-not-connected-icon"
-      width="18"
-      height="18"
-      x="396"
-      :y="props.adapter.adapterPosition"
-    >
-      <div>
-        <atoms-diagram-icon name="outline-adapter" />
-      </div>
-    </foreignObject>
-  </g>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_Adapter,
-  UI_I_ModalsInitialData,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-} from '~/components/common/diagramMain/models/interfaces'
-import { UI_I_Localization } from '~/models/interfaces'
-import { adapterPopupFieldsFunc } from '~/components/common/diagramMain/modals/config'
-import { dataForSelectedAdapterFunc } from '~/components/common/diagramMain/config'
-
-const props = defineProps<{
-  adapter: UI_I_Adapter & { adapterPosition: number }
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  networksCount: number
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-adapter', adapterId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const adapterPopupFields = adapterPopupFieldsFunc(
-  localization.value,
-  props.adapter.id
-)
-
-const adapterProperties = dataForSelectedAdapterFunc(props.adapter)
-
-const adapterSelectionPosition = computed<number>(
-  () => props.adapter.adapterPosition - 1.5
-)
-
-const isConnectedAdapterToPortOrNetwork = computed<boolean>(() =>
-  props.selectedPort.activeAdapters.includes(props.adapter.id)
-)
-
-const isSelectedAdapter = computed<boolean>(
-  () => props.selectedAdapter.adapterId === props.adapter.id
-)
-
-const adapterLinePosition = computed<number>(
-  () => props.adapter.adapterPosition + 7.5
-)
-
-const adapterIconPosition = computed<number>(
-  () => props.adapter.adapterPosition - 3
-)
-
-const adapterActionIconPosition = computed<number>(
-  () => props.adapter.adapterPosition - 2
-)
-
-const isVisibleAdapterLine = computed<boolean>(
-  () =>
-    (props.selectedPort.activeAdapters.includes(props.adapter.id) ||
-      props.selectedAdapter.adapterId === props.adapter.id) &&
-    props.adapter.status === 'active' &&
-    !!props.networksCount
-)
-
-const adapterName = computed<string>(() =>
-  props.adapter.status === 'active'
-    ? props.adapter.fullName
-    : props.adapter.name
-)
-
-const onSelectAdapter = (adapterId: string): void => {
-  emits('select-adapter', adapterId)
-}
-
-const onShowModal = (
-  value: string,
-  properties?: UI_I_ModalsInitialData
-): void => {
-  emits('show-modal', value, properties)
-}
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-.diagram {
-  &__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;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <g data-title="adapter-item-group">
+    <common-diagram-main-highlights
+      data-title="adapter-item"
+      type="main-orange"
+      width="276"
+      height="18"
+      x="430.5"
+      :y="adapterSelectionPosition"
+      :hide="!isConnectedAdapterToPortOrNetwork"
+    />
+
+    <common-diagram-main-highlights
+      data-title="adapter-item"
+      type="main-blue"
+      width="276"
+      height="18"
+      x="430.5"
+      :y="adapterSelectionPosition"
+      :hide="!isSelectedAdapter"
+    />
+
+    <a
+      :id="`adapter-${props.adapter.id}`"
+      data-title="adapter-name"
+      cursor="pointer"
+      @click="onSelectAdapter(props.adapter.id)"
+    >
+      <text
+        dy="11px"
+        font-size="12"
+        font-weight="400"
+        x="482"
+        :y="props.adapter.adapterPosition"
+        class="diagram__values"
+      >
+        {{ adapterName }}
+      </text>
+    </a>
+
+    <foreignObject
+      v-if="!props.adapter.carrier"
+      data-title="adapter-connection-icon"
+      width="18"
+      height="18"
+      x="446"
+      :y="adapterSelectionPosition"
+    >
+      <atoms-diagram-icon name="adapter-carrier" />
+    </foreignObject>
+
+    <common-diagram-main-highlights
+      data-title="adapter-item-line"
+      type="line-orange"
+      x="391.5"
+      :y="adapterLinePosition"
+      x2="362.5"
+      :y2="adapterLinePosition"
+      :hide="!isVisibleAdapterLine"
+    />
+
+    <foreignObject
+      data-title="adapter-item-icon"
+      width="18"
+      height="18"
+      x="462"
+      :y="adapterIconPosition"
+    >
+      <div>
+        <atoms-diagram-icon name="adapter-item-icon" />
+      </div>
+    </foreignObject>
+
+    <foreignObject
+      data-title="adapter-action-icon"
+      width="18"
+      height="18"
+      x="682"
+      :y="adapterActionIconPosition"
+      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="adapterPopupFields"
+          :test-id="`adapter-${props.adapter.id}-toggle`"
+          @change="(value) => onShowModal(value, adapterProperties)"
+        />
+      </div>
+    </foreignObject>
+
+    <foreignObject
+      v-if="props.adapter.carrier"
+      data-title="adapter-second-connected-icon"
+      width="18"
+      height="18"
+      x="396"
+      :y="props.adapter.adapterPosition"
+    >
+      <div>
+        <atoms-diagram-icon name="fill-adapter" />
+      </div>
+    </foreignObject>
+
+    <foreignObject
+      v-else
+      data-title="adapter-second-not-connected-icon"
+      width="18"
+      height="18"
+      x="396"
+      :y="props.adapter.adapterPosition"
+    >
+      <div>
+        <atoms-diagram-icon name="outline-adapter" />
+      </div>
+    </foreignObject>
+  </g>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_Adapter,
+  UI_I_ModalsInitialData,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+} from '~/components/common/diagramMain/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import { adapterPopupFieldsFunc } from '~/components/common/diagramMain/modals/config'
+import { dataForSelectedAdapterFunc } from '~/components/common/diagramMain/config'
+
+const props = defineProps<{
+  adapter: UI_I_Adapter & { adapterPosition: number }
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  networksCount: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-adapter', adapterId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const adapterPopupFields = adapterPopupFieldsFunc(
+  localization.value,
+  props.adapter.id
+)
+
+const adapterProperties = dataForSelectedAdapterFunc(props.adapter)
+
+const adapterSelectionPosition = computed<number>(
+  () => props.adapter.adapterPosition - 1.5
+)
+
+const isConnectedAdapterToPortOrNetwork = computed<boolean>(() =>
+  props.selectedPort.activeAdapters.includes(props.adapter.id)
+)
+
+const isSelectedAdapter = computed<boolean>(
+  () => props.selectedAdapter.adapterId === props.adapter.id
+)
+
+const adapterLinePosition = computed<number>(
+  () => props.adapter.adapterPosition + 7.5
+)
+
+const adapterIconPosition = computed<number>(
+  () => props.adapter.adapterPosition - 3
+)
+
+const adapterActionIconPosition = computed<number>(
+  () => props.adapter.adapterPosition - 2
+)
+
+const isVisibleAdapterLine = computed<boolean>(
+  () =>
+    (props.selectedPort.activeAdapters.includes(props.adapter.id) ||
+      props.selectedAdapter.adapterId === props.adapter.id) &&
+    props.adapter.status === 'active' &&
+    !!props.networksCount
+)
+
+const adapterName = computed<string>(() =>
+  props.adapter.status === 'active'
+    ? props.adapter.fullName
+    : props.adapter.name
+)
+
+const onSelectAdapter = (adapterId: string): void => {
+  emits('select-adapter', adapterId)
+}
+
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
+  emits('show-modal', value, properties)
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+.diagram {
+  &__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;
+        }
+      }
+    }
+  }
+}
+</style>