bfg-common 1.4.488 → 1.4.490

package/components/common/details/DetailsList.vue

@@ -1,23 +1,23 @@
-<template>
-  <div class="list">
-    <div v-for="(item, key) in props.items" :key="key" class="item">
-      <slot :key="key" :item="item">
-        {{ item }}
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_DetailsItem[]
-}>()
-</script>
-
-<style lang="scss" scoped>
-.list {
-  padding: 0 12px 10px;
-}
-</style>
+<template>
+  <div class="list">
+    <div v-for="(item, key) in props.items" :key="key" class="item">
+      <slot :key="key" :item="item">
+        {{ item }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_DetailsItem[]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.list {
+  padding: 0 12px 10px;
+}
+</style>

package/components/common/details/lib/models/interfaces.ts

@@ -1,11 +1,11 @@
-import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
-
-export interface UI_I_DetailsItem {
-  label: string
-  value: string
-  items: UI_I_DetailsItem[]
-  actions?: UI_I_Button[]
-  permission?: string[]
-  data?: any
-  testId?: string
-}
+import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
+
+export interface UI_I_DetailsItem {
+  label: string
+  value: string
+  items: UI_I_DetailsItem[]
+  actions?: UI_I_Button[]
+  permission?: string[]
+  data?: any
+  testId?: string
+}

package/components/common/diagramMain/Diagram.vue

@@ -1,234 +1,234 @@
-<template>
-  <div class="diagram-container">
-    <svg
-      v-if="props.diagramData && props.isShowDiagram"
-      xmlns="http://www.w3.org/2000/svg"
-      :height="diagramHeight"
-      :width="diagramWidth"
-      :viewBox="viewBox"
-      :preserveAspectRatio="preserveAspectRatio"
-      :class="svgClasses"
-      @click.capture="onClickDiagram"
-    >
-      <common-diagram-main-switch
-        :networks-count="props.networksCount"
-        :main-rect-height="props.mainRectHeight"
-        :main-switch-line="props.mainSwitchLine"
-        :selected-main-line="props.selectedMainLine"
-        :is-visible-line="hasActiveAdapter"
-        :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
-      />
-      <common-diagram-main-adapter
-        :networks-count="props.networksCount"
-        :adapters-with-positions="props.adaptersWithPositions"
-        :selected-main-line="props.selectedMainLine"
-        :selected-port="props.selectedPort"
-        :selected-adapter="props.selectedAdapter"
-        :selected-network="props.selectedNetwork"
-        :is-visible-line="hasActiveAdapter"
-        :is-dark-mode="props.isDarkMode"
-        :test-id="props.diagramData.testId"
-        :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
-        :networks-with-positions="props.networksWithPositions"
-        @toggle-adapters="onToggleAdapters"
-        @select-adapter="onSelectAdapter"
-        @show-modal="onShowModal"
-      />
-      <template v-if="!!props.networksWithPositions.length">
-        <template
-          v-for="network in props.networksWithPositions"
-          :key="network.id"
-        >
-          <common-diagram-main-network
-            :network="network"
-            :selected-port="props.selectedPort"
-            :selected-adapter="props.selectedAdapter"
-            :selected-network="props.selectedNetwork"
-            :selected-main-line="props.selectedMainLine"
-            :diagram-id="props.diagramData.id"
-            :in-portlet="props.inPortlet"
-            :is-visible-line="hasActiveAdapter"
-            :is-dark-mode="props.isDarkMode"
-            @toggle-ports="onTogglePorts"
-            @select-port="onSelectPort"
-            @select-network="onSelectNetwork"
-            @show-modal="onShowModal"
-          />
-        </template>
-      </template>
-      <common-diagram-main-network-no-network v-else />
-      <common-diagram-main-switch-selected
-        :selected-switch-line-y="props.selectedSwitchLineY"
-        :is-visible-line="hasActiveAdapter && isSelectedLinkedWithAdapter"
-      />
-    </svg>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_AdaptersWithPositions,
-  UI_I_DiagramData,
-  UI_I_ModalsInitialData,
-  UI_I_NetworksWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_SwitchLine,
-  UI_I_Network,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import { UI_E_PositionsY } from '~/components/common/diagramMain/lib/models/enums'
-
-const props = defineProps<{
-  diagramData: UI_I_DiagramData
-  isShowDiagram: boolean
-  inPortlet: boolean
-  networksWithPositions: UI_I_NetworksWithPositions[]
-  mainRectHeight: number
-  mainSwitchLine: UI_I_SwitchLine
-  selectedMainLine: boolean
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  selectedNetwork: string
-  selectedSwitchLineY: UI_I_SwitchLine
-  isDarkMode: boolean
-  networksCount: number
-}>()
-
-const emits = defineEmits<{
-  (event: 'click-diagram', ev: MouseEvent): void
-  (event: 'toggle-adapters'): void
-  (event: 'select-adapter', adapterId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-  (
-    event: 'toggle-ports',
-    id: string,
-    newState: boolean,
-    diagramId: string
-  ): void
-  (event: 'select-port', networkId: string, portId: string): void
-  (event: 'select-network', networkId: string): void
-}>()
-
-const svgClasses = computed(() => ({
-  'diagram-margin-top': !props.inPortlet,
-}))
-
-const preserveAspectRatio = computed<string | undefined>(() =>
-  props.inPortlet ? 'xMinYMin' : undefined
-)
-
-const svgHeight = computed<number>(
-  () =>
-    UI_E_PositionsY.DIAGRAM_TOP +
-    props.mainRectHeight +
-    UI_E_PositionsY.DIAGRAM_BOTTOM
-)
-
-const viewBox = computed<string>(() =>
-  props.inPortlet ? '0 0 750 1' : `0 0 740 ${svgHeight.value}`
-)
-
-const diagramHeight = computed<number>(() =>
-  props.inPortlet ? svgHeight.value / 1.35 : svgHeight.value
-)
-
-const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 740))
-
-const hasActiveAdapter = computed<boolean>(() => {
-  let flag = false
-  props.diagramData?.networks.forEach(
-    (network: UI_I_Network) =>
-      network.activeAdapters.length > 0 && (flag = true)
-  )
-  return flag
-})
-
-const isSelectedLinkedWithAdapter = computed<boolean>(() => {
-  if (props.selectedNetwork && props.selectedNetwork !== '-1') {
-    const selectedNetworkData = props.networksWithPositions.find(
-      (network: UI_I_NetworksWithPositions) =>
-        network.id === props.selectedNetwork
-    )
-
-    if (!selectedNetworkData) return false
-
-    return (
-      selectedNetworkData.activeAdapters.length > 0 &&
-      selectedNetworkData.state.state !== 3
-    )
-  }
-
-  if (props.selectedPort.portId && props.selectedPort.portId !== '-1') {
-    const selectedNetworkData = props.networksWithPositions.find(
-      (network: UI_I_NetworksWithPositions) =>
-        network.id === props.selectedPort.networkId
-    )
-
-    if (!selectedNetworkData) return false
-
-    return (
-      selectedNetworkData.activeAdapters.length > 0 &&
-      selectedNetworkData.state.state !== 3
-    )
-  }
-
-  if (props.selectedAdapter.adapterId !== '-1' || props.selectedMainLine)
-    return true
-
-  return false
-})
-
-const onClickDiagram = (ev: MouseEvent) => emits('click-diagram', ev)
-const onToggleAdapters = () => emits('toggle-adapters')
-const onSelectAdapter = (adapterId: string) =>
-  emits('select-adapter', adapterId)
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
-  emits('show-modal', value, properties)
-const onTogglePorts = (
-  id: string,
-  isToggle: boolean,
-  diagramId: string
-): void => {
-  emits('toggle-ports', id, isToggle, diagramId)
-}
-const onSelectPort = (networkId: string, portId: string): void => {
-  emits('select-port', networkId, portId)
-}
-const onSelectNetwork = (networkId: string): void => {
-  emits('select-network', networkId)
-}
-</script>
-
-<style scoped lang="scss">
-.diagram {
-  &-container {
-    display: flex;
-    justify-content: center;
-  }
-  &-margin-top {
-    margin-top: 10px;
-  }
-}
-</style>
-<style lang="scss">
-.diagram-actions__popup.navbar-dropdown-menu {
-  transform: translate(-30px, -20px);
-
-  .btn {
-    border-radius: 0;
-    border-bottom: 1px solid transparent;
-
-    span {
-      font-size: 14px;
-    }
-    &:active {
-      box-shadow: none;
-    }
-  }
-}
-</style>
+<template>
+  <div class="diagram-container">
+    <svg
+      v-if="props.diagramData && props.isShowDiagram"
+      xmlns="http://www.w3.org/2000/svg"
+      :height="diagramHeight"
+      :width="diagramWidth"
+      :viewBox="viewBox"
+      :preserveAspectRatio="preserveAspectRatio"
+      :class="svgClasses"
+      @click.capture="onClickDiagram"
+    >
+      <common-diagram-main-switch
+        :networks-count="props.networksCount"
+        :main-rect-height="props.mainRectHeight"
+        :main-switch-line="props.mainSwitchLine"
+        :selected-main-line="props.selectedMainLine"
+        :is-visible-line="hasActiveAdapter"
+        :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
+      />
+      <common-diagram-main-adapter
+        :networks-count="props.networksCount"
+        :adapters-with-positions="props.adaptersWithPositions"
+        :selected-main-line="props.selectedMainLine"
+        :selected-port="props.selectedPort"
+        :selected-adapter="props.selectedAdapter"
+        :selected-network="props.selectedNetwork"
+        :is-visible-line="hasActiveAdapter"
+        :is-dark-mode="props.isDarkMode"
+        :test-id="props.diagramData.testId"
+        :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
+        :networks-with-positions="props.networksWithPositions"
+        @toggle-adapters="onToggleAdapters"
+        @select-adapter="onSelectAdapter"
+        @show-modal="onShowModal"
+      />
+      <template v-if="!!props.networksWithPositions.length">
+        <template
+          v-for="network in props.networksWithPositions"
+          :key="network.id"
+        >
+          <common-diagram-main-network
+            :network="network"
+            :selected-port="props.selectedPort"
+            :selected-adapter="props.selectedAdapter"
+            :selected-network="props.selectedNetwork"
+            :selected-main-line="props.selectedMainLine"
+            :diagram-id="props.diagramData.id"
+            :in-portlet="props.inPortlet"
+            :is-visible-line="hasActiveAdapter"
+            :is-dark-mode="props.isDarkMode"
+            @toggle-ports="onTogglePorts"
+            @select-port="onSelectPort"
+            @select-network="onSelectNetwork"
+            @show-modal="onShowModal"
+          />
+        </template>
+      </template>
+      <common-diagram-main-network-no-network v-else />
+      <common-diagram-main-switch-selected
+        :selected-switch-line-y="props.selectedSwitchLineY"
+        :is-visible-line="hasActiveAdapter && isSelectedLinkedWithAdapter"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_AdaptersWithPositions,
+  UI_I_DiagramData,
+  UI_I_ModalsInitialData,
+  UI_I_NetworksWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_SwitchLine,
+  UI_I_Network,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import { UI_E_PositionsY } from '~/components/common/diagramMain/lib/models/enums'
+
+const props = defineProps<{
+  diagramData: UI_I_DiagramData
+  isShowDiagram: boolean
+  inPortlet: boolean
+  networksWithPositions: UI_I_NetworksWithPositions[]
+  mainRectHeight: number
+  mainSwitchLine: UI_I_SwitchLine
+  selectedMainLine: boolean
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  selectedNetwork: string
+  selectedSwitchLineY: UI_I_SwitchLine
+  isDarkMode: boolean
+  networksCount: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'click-diagram', ev: MouseEvent): void
+  (event: 'toggle-adapters'): void
+  (event: 'select-adapter', adapterId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+  (
+    event: 'toggle-ports',
+    id: string,
+    newState: boolean,
+    diagramId: string
+  ): void
+  (event: 'select-port', networkId: string, portId: string): void
+  (event: 'select-network', networkId: string): void
+}>()
+
+const svgClasses = computed(() => ({
+  'diagram-margin-top': !props.inPortlet,
+}))
+
+const preserveAspectRatio = computed<string | undefined>(() =>
+  props.inPortlet ? 'xMinYMin' : undefined
+)
+
+const svgHeight = computed<number>(
+  () =>
+    UI_E_PositionsY.DIAGRAM_TOP +
+    props.mainRectHeight +
+    UI_E_PositionsY.DIAGRAM_BOTTOM
+)
+
+const viewBox = computed<string>(() =>
+  props.inPortlet ? '0 0 750 1' : `0 0 740 ${svgHeight.value}`
+)
+
+const diagramHeight = computed<number>(() =>
+  props.inPortlet ? svgHeight.value / 1.35 : svgHeight.value
+)
+
+const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 740))
+
+const hasActiveAdapter = computed<boolean>(() => {
+  let flag = false
+  props.diagramData?.networks.forEach(
+    (network: UI_I_Network) =>
+      network.activeAdapters.length > 0 && (flag = true)
+  )
+  return flag
+})
+
+const isSelectedLinkedWithAdapter = computed<boolean>(() => {
+  if (props.selectedNetwork && props.selectedNetwork !== '-1') {
+    const selectedNetworkData = props.networksWithPositions.find(
+      (network: UI_I_NetworksWithPositions) =>
+        network.id === props.selectedNetwork
+    )
+
+    if (!selectedNetworkData) return false
+
+    return (
+      selectedNetworkData.activeAdapters.length > 0 &&
+      selectedNetworkData.state.state !== 3
+    )
+  }
+
+  if (props.selectedPort.portId && props.selectedPort.portId !== '-1') {
+    const selectedNetworkData = props.networksWithPositions.find(
+      (network: UI_I_NetworksWithPositions) =>
+        network.id === props.selectedPort.networkId
+    )
+
+    if (!selectedNetworkData) return false
+
+    return (
+      selectedNetworkData.activeAdapters.length > 0 &&
+      selectedNetworkData.state.state !== 3
+    )
+  }
+
+  if (props.selectedAdapter.adapterId !== '-1' || props.selectedMainLine)
+    return true
+
+  return false
+})
+
+const onClickDiagram = (ev: MouseEvent) => emits('click-diagram', ev)
+const onToggleAdapters = () => emits('toggle-adapters')
+const onSelectAdapter = (adapterId: string) =>
+  emits('select-adapter', adapterId)
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
+  emits('show-modal', value, properties)
+const onTogglePorts = (
+  id: string,
+  isToggle: boolean,
+  diagramId: string
+): void => {
+  emits('toggle-ports', id, isToggle, diagramId)
+}
+const onSelectPort = (networkId: string, portId: string): void => {
+  emits('select-port', networkId, portId)
+}
+const onSelectNetwork = (networkId: string): void => {
+  emits('select-network', networkId)
+}
+</script>
+
+<style scoped lang="scss">
+.diagram {
+  &-container {
+    display: flex;
+    justify-content: center;
+  }
+  &-margin-top {
+    margin-top: 10px;
+  }
+}
+</style>
+<style lang="scss">
+.diagram-actions__popup.navbar-dropdown-menu {
+  transform: translate(-30px, -20px);
+
+  .btn {
+    border-radius: 0;
+    border-bottom: 1px solid transparent;
+
+    span {
+      font-size: 14px;
+    }
+    &:active {
+      box-shadow: none;
+    }
+  }
+}
+</style>