bfg-common 1.1.37 → 1.1.38

package/components/common/browse/blocks/Title.vue

@@ -1,66 +1,66 @@
-<template>
-  <div class="title-block" :style="blockWidth">
-    <div class="title-block__container" :style="blockWidth">
-      <div class="title-block__title" :style="blockTitleWidth">
-        <b>{{ props.title }}</b>
-      </div>
-      <div class="title-block__body">
-        <slot name="content"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  title: string
-  width: number
-}>()
-
-const blockWidth = computed(() => ({ width: `${props.width}px` }))
-const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
-</script>
-
-<style scoped lang="scss">
-.title-block {
-  width: 100%;
-  min-height: 400px;
-  position: relative;
-
-  &__container {
-    position: absolute;
-    top: 0;
-    height: 400px;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    border-width: 1px;
-    border-style: solid;
-    border-color: rgb(204, 204, 204);
-    border-image: initial;
-    background: rgb(255, 255, 255);
-  }
-  &__title {
-    background-color: rgb(231, 235, 239);
-    flex: 0 0 auto;
-    padding: 8px;
-    border-bottom: 1px solid rgb(204, 204, 204);
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-
-    b {
-      font-weight: bolder;
-      font-size: 13px;
-      letter-spacing: normal;
-      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
-      color: #666;
-    }
-  }
-  &__body {
-    flex: 1 1 auto;
-    overflow-y: auto;
-  }
-}
-</style>
+<template>
+  <div class="title-block" :style="blockWidth">
+    <div class="title-block__container" :style="blockWidth">
+      <div class="title-block__title" :style="blockTitleWidth">
+        <b>{{ props.title }}</b>
+      </div>
+      <div class="title-block__body">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  width: number
+}>()
+
+const blockWidth = computed(() => ({ width: `${props.width}px` }))
+const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
+</script>
+
+<style scoped lang="scss">
+.title-block {
+  width: 100%;
+  min-height: 400px;
+  position: relative;
+
+  &__container {
+    position: absolute;
+    top: 0;
+    height: 400px;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(204, 204, 204);
+    border-image: initial;
+    background: rgb(255, 255, 255);
+  }
+  &__title {
+    background-color: rgb(231, 235, 239);
+    flex: 0 0 auto;
+    padding: 8px;
+    border-bottom: 1px solid rgb(204, 204, 204);
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+
+    b {
+      font-weight: bolder;
+      font-size: 13px;
+      letter-spacing: normal;
+      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
+      color: #666;
+    }
+  }
+  &__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}
+</style>

package/components/common/diagramMain/Diagram.vue

@@ -1,186 +1,186 @@
-<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.networksWithPositions.length"
-        :main-rect-height="props.mainRectHeight"
-        :main-switch-line="props.mainSwitchLine"
-        :selected-main-line="props.selectedMainLine"
-        :is-visible-line="hasActiveAdapter"
-      />
-      <common-diagram-main-adapter
-        :networks-count="props.networksWithPositions.length"
-        :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"
-        @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"
-            @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"
-      />
-    </svg>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_Adapter,
-  UI_I_AdaptersWithPositions,
-  UI_I_DiagramDataFull,
-  UI_I_ModalsInitialData,
-  UI_I_NetworksWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_SwitchLine,
-} from '~/components/common/diagramMain/models/interfaces'
-import { UI_E_PositionsY } from '~/components/common/diagramMain/models/enums'
-
-const props = defineProps<{
-  diagramData: UI_I_DiagramDataFull | null
-  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
-}>()
-
-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>(() => {
-  return !!props.diagramData?.physicalAdapters?.adapters.filter(
-    (adapter: UI_I_Adapter) => {
-      return adapter.status === 'active'
-    }
-  ).length
-})
-
-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.networksWithPositions.length"
+        :main-rect-height="props.mainRectHeight"
+        :main-switch-line="props.mainSwitchLine"
+        :selected-main-line="props.selectedMainLine"
+        :is-visible-line="hasActiveAdapter"
+      />
+      <common-diagram-main-adapter
+        :networks-count="props.networksWithPositions.length"
+        :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"
+        @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"
+            @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"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_Adapter,
+  UI_I_AdaptersWithPositions,
+  UI_I_DiagramDataFull,
+  UI_I_ModalsInitialData,
+  UI_I_NetworksWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_SwitchLine,
+} from '~/components/common/diagramMain/models/interfaces'
+import { UI_E_PositionsY } from '~/components/common/diagramMain/models/enums'
+
+const props = defineProps<{
+  diagramData: UI_I_DiagramDataFull | null
+  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
+}>()
+
+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>(() => {
+  return !!props.diagramData?.physicalAdapters?.adapters.filter(
+    (adapter: UI_I_Adapter) => {
+      return adapter.status === 'active'
+    }
+  ).length
+})
+
+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>