bfg-common 1.4.871 → 1.4.873

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

@@ -1,433 +1,433 @@
-<template>
-  <g data-title="adapter-item-group">
-    <g>
-      <common-diagram-main-highlights
-        data-title="adapter-item"
-        type="main-orange"
-        width="276"
-        height="18"
-        :x="positions.blockX"
-        :y="adapterSelectionPosition"
-        radius="3"
-        :hide="!isConnectedAdapterToPortOrNetwork"
-      />
-
-      <common-diagram-main-highlights
-        data-title="adapter-item"
-        type="main-blue"
-        width="276"
-        height="18"
-        :x="positions.blockX"
-        :y="adapterSelectionPosition"
-        radius="3"
-        :hide="!isSelectedAdapter"
-      />
-    </g>
-
-    <foreignObject
-      dy="11px"
-      height="20"
-      :width="positions.adapterWidth"
-      :x="positions.adapterX"
-      :y="props.adapter.adapterPosition"
-      class="diagram__values"
-    >
-      <span
-        :id="`adapter-${props.adapter.id}`"
-        :data-id="`${props.adapter.testId}-select`"
-        data-title="adapter-name"
-        class="adapter-name text-ellipsis"
-        @click="onSelectAdapter(props.adapter.id)"
-      >
-        {{ adapterName }}
-      </span>
-    </foreignObject>
-
-    <!--    Connection X-->
-    <foreignObject
-      v-if="
-        !props.adapter.carrier && props.adapter.status !== 'error' && !isNewView
-      "
-      data-title="adapter-connection-icon"
-      width="18"
-      height="18"
-      x="446"
-      :y="adapterSelectionPosition"
-    >
-      <atoms-diagram-icon name="adapter-carrier" />
-    </foreignObject>
-
-    <foreignObject
-      v-if="props.adapter.status === 'error'"
-      data-title="adapter-error-icon"
-      width="15"
-      height="15"
-      :x="positions.errorIconX"
-      :y="positions.errorIconY"
-    >
-      <!-- TODO MAKE TOOLTIP-->
-      <ui-icon
-        v-if="isNewView"
-        name="info"
-        color="#EA3223"
-        width="14"
-        height="14"
-      />
-      <atoms-diagram-icon v-else name="adapter-error" />
-    </foreignObject>
-
-    <common-diagram-main-highlights
-      data-title="adapter-item-line"
-      type="line-orange"
-      :x="positions.x1"
-      :y="adapterLinePosition"
-      :x2="positions.x2"
-      :y2="adapterLinePosition"
-      :hide="!isVisibleAdapterLine"
-    />
-
-    <foreignObject
-      data-title="adapter-item-icon"
-      :width="positions.adapterIconSize"
-      :height="positions.adapterIconSize"
-      :x="positions.adapterIconX"
-      :y="positions.adapterIconY"
-    >
-      <div v-if="isNewView && !props.adapter.carrier">
-        <ui-icon
-          v-if="props.isDarkMode"
-          name="diagram-adapter-item-not-connected-dark"
-          width="20"
-          height="20"
-        />
-        <ui-icon
-          v-else
-          name="diagram-adapter-item-not-connected"
-          width="20"
-          height="20"
-        />
-      </div>
-      <div v-else-if="isNewView && props.adapter.carrier">
-        <ui-icon
-          v-if="props.isDarkMode"
-          name="diagram-adapter-item-dark"
-          width="20"
-          height="20"
-        />
-        <ui-icon v-else name="diagram-adapter-item" width="20" height="20" />
-      </div>
-      <div v-else>
-        <atoms-diagram-icon
-          v-if="props.isDarkMode"
-          name="adapter-item-icon-dark"
-        />
-        <atoms-diagram-icon v-else name="adapter-item-icon" />
-      </div>
-    </foreignObject>
-
-    <foreignObject
-      v-if="props.adapter.status !== 'error'"
-      data-title="adapter-action-icon"
-      width="18"
-      height="18"
-      :x="positions.actionX"
-      :y="positions.actionY"
-      cursor="pointer"
-    >
-      <div v-if="isNewView" class="dropdown-actions-container">
-        <button
-          :id="`dropdown-${props.adapter.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.adapter.testId"
-            :show="isShowDropdown"
-            :items="adapterPopupFields"
-            :elem-id="`dropdown-${props.adapter.id}`"
-            width="max-content"
-            show-from-left
-            :margin-between-trigger="0"
-            @select="(value) => onShowModal(value, adapterProperties)"
-            @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="adapterPopupFields"
-          :test-id="props.adapter.testId"
-          @change="(value) => onShowModal(value, adapterProperties)"
-        />
-      </div>
-    </foreignObject>
-
-    <g v-if="props.adapter.status !== 'error'">
-      <foreignObject
-        v-if="props.adapter.carrier"
-        data-title="adapter-second-connected-icon"
-        :width="positions.adapterSecondIconSize"
-        :height="positions.adapterSecondIconSize"
-        :x="positions.adapterSecondIconX"
-        :y="positions.adapterSecondIconY"
-      >
-        <div>
-          <ui-icon
-            v-if="isNewView"
-            width="16"
-            height="16"
-            name="diagram-fill-adapter"
-          />
-          <atoms-diagram-icon v-else name="fill-adapter" />
-        </div>
-      </foreignObject>
-
-      <foreignObject
-        v-else
-        data-title="adapter-second-not-connected-icon"
-        :width="positions.adapterSecondIconSize"
-        :height="positions.adapterSecondIconSize"
-        :x="positions.adapterSecondIconX"
-        :y="positions.adapterSecondIconY"
-      >
-        <div>
-          <ui-icon
-            v-if="isNewView"
-            width="16"
-            height="16"
-            name="diagram-outline-adapter"
-          />
-          <atoms-diagram-icon v-else name="outline-adapter" />
-        </div>
-      </foreignObject>
-    </g>
-  </g>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_Adapter,
-  UI_I_AdapterWithError,
-  UI_I_ModalsInitialData,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_NetworksWithPositions,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_Localization, UI_I_ArbitraryObject } from '~/lib/models/interfaces'
-import {
-  adapterPopupFieldsFunc,
-  adapterPopupFieldsNewFunc,
-} from '~/components/common/diagramMain/modals/lib/config'
-import {
-  dataForSelectedAdapterFunc,
-  adapterItemPositionsFunc,
-} from '~/components/common/diagramMain/lib/config'
-
-const props = defineProps<{
-  adapter: (UI_I_Adapter | UI_I_AdapterWithError) & { adapterPosition: number }
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  networksWithPositions: UI_I_NetworksWithPositions[]
-  networksCount: number
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-adapter', adapterId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const adapterPopupFields = computed(() =>
-  isNewView.value
-    ? adapterPopupFieldsNewFunc(localization.value, props.adapter.testId)
-    : adapterPopupFieldsFunc(localization.value, props.adapter.testId)
-)
-
-const adapterProperties = dataForSelectedAdapterFunc(props.adapter)
-
-const adapterSelectionPosition = computed<number>(
-  () => props.adapter.adapterPosition - 1.5
-)
-
-const isConnectedAdapterToPortOrNetwork = computed<boolean>(() => {
-  return 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 isAdapterActiveOnAnyNetwork = computed<boolean>(() => {
-  let flag = false
-  props.networksWithPositions.forEach(
-    (network: UI_I_NetworksWithPositions) =>
-      network.activeAdapters.includes(props.selectedAdapter.adapterId) &&
-      (flag = true)
-  )
-  return flag
-})
-
-const isVisibleAdapterLine = computed<boolean>(() => {
-  return (
-    (props.selectedPort.activeAdapters.includes(props.adapter.id) ||
-      (props.selectedAdapter.adapterId === props.adapter.id &&
-        isAdapterActiveOnAnyNetwork.value)) &&
-    !!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)
-}
-
-const positions = computed<UI_I_ArbitraryObject<number>>(() =>
-  adapterItemPositionsFunc(
-    isNewView.value,
-    adapterIconPosition.value,
-    props.adapter.carrier,
-    props.adapter.adapterPosition,
-    adapterSelectionPosition.value,
-    adapterActionIconPosition.value
-  )
-)
-
-const isShowDropdown = ref<boolean>(false)
-const onHide = (): void => {
-  isShowDropdown.value = false
-}
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-
-:root.dark-theme {
-  .adapter-name {
-    fill: #c1cdd4;
-  }
-
-  .adapter-name {
-    color: #c1cdd4;
-
-    &:hover {
-      color: #c1cdd4;
-      text-decoration: solid underline #c1cdd4 1px;
-    }
-  }
-}
-
-.text-ellipsis {
-  display: block;
-  max-width: 198px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.adapter-name {
-  color: #565656;
-
-  &:hover {
-    color: #565656;
-    text-decoration: solid underline #565656 1px;
-  }
-  font-size: 12px;
-  font-weight: 400;
-  cursor: pointer;
-  line-height: normal;
-}
-
-.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;
-        }
-      }
-    }
-  }
-}
-
-:root.is-new-view {
-  .adapter-name {
-    user-select: none;
-    -webkit-user-select: none;
-    color: var(--diagram-content-text);
-
-    &:hover {
-      color: var(--diagram-content-text-hover);
-      text-decoration: unset;
-    }
-  }
-
-  .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>
+<template>
+  <g data-title="adapter-item-group">
+    <g>
+      <common-diagram-main-highlights
+        data-title="adapter-item"
+        type="main-orange"
+        width="276"
+        height="18"
+        :x="positions.blockX"
+        :y="adapterSelectionPosition"
+        radius="3"
+        :hide="!isConnectedAdapterToPortOrNetwork"
+      />
+
+      <common-diagram-main-highlights
+        data-title="adapter-item"
+        type="main-blue"
+        width="276"
+        height="18"
+        :x="positions.blockX"
+        :y="adapterSelectionPosition"
+        radius="3"
+        :hide="!isSelectedAdapter"
+      />
+    </g>
+
+    <foreignObject
+      dy="11px"
+      height="20"
+      :width="positions.adapterWidth"
+      :x="positions.adapterX"
+      :y="props.adapter.adapterPosition"
+      class="diagram__values"
+    >
+      <span
+        :id="`adapter-${props.adapter.id}`"
+        :data-id="`${props.adapter.testId}-select`"
+        data-title="adapter-name"
+        class="adapter-name text-ellipsis"
+        @click="onSelectAdapter(props.adapter.id)"
+      >
+        {{ adapterName }}
+      </span>
+    </foreignObject>
+
+    <!--    Connection X-->
+    <foreignObject
+      v-if="
+        !props.adapter.carrier && props.adapter.status !== 'error' && !isNewView
+      "
+      data-title="adapter-connection-icon"
+      width="18"
+      height="18"
+      x="446"
+      :y="adapterSelectionPosition"
+    >
+      <atoms-diagram-icon name="adapter-carrier" />
+    </foreignObject>
+
+    <foreignObject
+      v-if="props.adapter.status === 'error'"
+      data-title="adapter-error-icon"
+      width="15"
+      height="15"
+      :x="positions.errorIconX"
+      :y="positions.errorIconY"
+    >
+      <!-- TODO MAKE TOOLTIP-->
+      <ui-icon
+        v-if="isNewView"
+        name="info"
+        color="#EA3223"
+        width="14"
+        height="14"
+      />
+      <atoms-diagram-icon v-else name="adapter-error" />
+    </foreignObject>
+
+    <common-diagram-main-highlights
+      data-title="adapter-item-line"
+      type="line-orange"
+      :x="positions.x1"
+      :y="adapterLinePosition"
+      :x2="positions.x2"
+      :y2="adapterLinePosition"
+      :hide="!isVisibleAdapterLine"
+    />
+
+    <foreignObject
+      data-title="adapter-item-icon"
+      :width="positions.adapterIconSize"
+      :height="positions.adapterIconSize"
+      :x="positions.adapterIconX"
+      :y="positions.adapterIconY"
+    >
+      <div v-if="isNewView && !props.adapter.carrier">
+        <ui-icon
+          v-if="props.isDarkMode"
+          name="diagram-adapter-item-not-connected-dark"
+          width="20"
+          height="20"
+        />
+        <ui-icon
+          v-else
+          name="diagram-adapter-item-not-connected"
+          width="20"
+          height="20"
+        />
+      </div>
+      <div v-else-if="isNewView && props.adapter.carrier">
+        <ui-icon
+          v-if="props.isDarkMode"
+          name="diagram-adapter-item-dark"
+          width="20"
+          height="20"
+        />
+        <ui-icon v-else name="diagram-adapter-item" width="20" height="20" />
+      </div>
+      <div v-else>
+        <atoms-diagram-icon
+          v-if="props.isDarkMode"
+          name="adapter-item-icon-dark"
+        />
+        <atoms-diagram-icon v-else name="adapter-item-icon" />
+      </div>
+    </foreignObject>
+
+    <foreignObject
+      v-if="props.adapter.status !== 'error'"
+      data-title="adapter-action-icon"
+      width="18"
+      height="18"
+      :x="positions.actionX"
+      :y="positions.actionY"
+      cursor="pointer"
+    >
+      <div v-if="isNewView" class="dropdown-actions-container">
+        <button
+          :id="`dropdown-${props.adapter.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.adapter.testId"
+            :show="isShowDropdown"
+            :items="adapterPopupFields"
+            :elem-id="`dropdown-${props.adapter.id}`"
+            width="max-content"
+            show-from-left
+            :margin-between-trigger="0"
+            @select="(value) => onShowModal(value, adapterProperties)"
+            @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="adapterPopupFields"
+          :test-id="props.adapter.testId"
+          @change="(value) => onShowModal(value, adapterProperties)"
+        />
+      </div>
+    </foreignObject>
+
+    <g v-if="props.adapter.status !== 'error'">
+      <foreignObject
+        v-if="props.adapter.carrier"
+        data-title="adapter-second-connected-icon"
+        :width="positions.adapterSecondIconSize"
+        :height="positions.adapterSecondIconSize"
+        :x="positions.adapterSecondIconX"
+        :y="positions.adapterSecondIconY"
+      >
+        <div>
+          <ui-icon
+            v-if="isNewView"
+            width="16"
+            height="16"
+            name="diagram-fill-adapter"
+          />
+          <atoms-diagram-icon v-else name="fill-adapter" />
+        </div>
+      </foreignObject>
+
+      <foreignObject
+        v-else
+        data-title="adapter-second-not-connected-icon"
+        :width="positions.adapterSecondIconSize"
+        :height="positions.adapterSecondIconSize"
+        :x="positions.adapterSecondIconX"
+        :y="positions.adapterSecondIconY"
+      >
+        <div>
+          <ui-icon
+            v-if="isNewView"
+            width="16"
+            height="16"
+            name="diagram-outline-adapter"
+          />
+          <atoms-diagram-icon v-else name="outline-adapter" />
+        </div>
+      </foreignObject>
+    </g>
+  </g>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_Adapter,
+  UI_I_AdapterWithError,
+  UI_I_ModalsInitialData,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_NetworksWithPositions,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_I_Localization, UI_I_ArbitraryObject } from '~/lib/models/interfaces'
+import {
+  adapterPopupFieldsFunc,
+  adapterPopupFieldsNewFunc,
+} from '~/components/common/diagramMain/modals/lib/config'
+import {
+  dataForSelectedAdapterFunc,
+  adapterItemPositionsFunc,
+} from '~/components/common/diagramMain/lib/config'
+
+const props = defineProps<{
+  adapter: (UI_I_Adapter | UI_I_AdapterWithError) & { adapterPosition: number }
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  networksWithPositions: UI_I_NetworksWithPositions[]
+  networksCount: number
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-adapter', adapterId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const adapterPopupFields = computed(() =>
+  isNewView.value
+    ? adapterPopupFieldsNewFunc(localization.value, props.adapter.testId)
+    : adapterPopupFieldsFunc(localization.value, props.adapter.testId)
+)
+
+const adapterProperties = dataForSelectedAdapterFunc(props.adapter)
+
+const adapterSelectionPosition = computed<number>(
+  () => props.adapter.adapterPosition - 1.5
+)
+
+const isConnectedAdapterToPortOrNetwork = computed<boolean>(() => {
+  return 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 isAdapterActiveOnAnyNetwork = computed<boolean>(() => {
+  let flag = false
+  props.networksWithPositions.forEach(
+    (network: UI_I_NetworksWithPositions) =>
+      network.activeAdapters.includes(props.selectedAdapter.adapterId) &&
+      (flag = true)
+  )
+  return flag
+})
+
+const isVisibleAdapterLine = computed<boolean>(() => {
+  return (
+    (props.selectedPort.activeAdapters.includes(props.adapter.id) ||
+      (props.selectedAdapter.adapterId === props.adapter.id &&
+        isAdapterActiveOnAnyNetwork.value)) &&
+    !!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)
+}
+
+const positions = computed<UI_I_ArbitraryObject<number>>(() =>
+  adapterItemPositionsFunc(
+    isNewView.value,
+    adapterIconPosition.value,
+    props.adapter.carrier,
+    props.adapter.adapterPosition,
+    adapterSelectionPosition.value,
+    adapterActionIconPosition.value
+  )
+)
+
+const isShowDropdown = ref<boolean>(false)
+const onHide = (): void => {
+  isShowDropdown.value = false
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+
+:root.dark-theme {
+  .adapter-name {
+    fill: #c1cdd4;
+  }
+
+  .adapter-name {
+    color: #c1cdd4;
+
+    &:hover {
+      color: #c1cdd4;
+      text-decoration: solid underline #c1cdd4 1px;
+    }
+  }
+}
+
+.text-ellipsis {
+  display: block;
+  max-width: 198px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.adapter-name {
+  color: #565656;
+
+  &:hover {
+    color: #565656;
+    text-decoration: solid underline #565656 1px;
+  }
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+  line-height: normal;
+}
+
+.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;
+        }
+      }
+    }
+  }
+}
+
+:root.is-new-view {
+  .adapter-name {
+    user-select: none;
+    -webkit-user-select: none;
+    color: var(--diagram-content-text);
+
+    &:hover {
+      color: var(--diagram-content-text-hover);
+      text-decoration: unset;
+    }
+  }
+
+  .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>