bfg-common 1.4.481 → 1.4.482

package/components/common/diagramMain/modals/viewSettings/info/InfoNew.vue

@@ -1,155 +0,0 @@
-<template>
-  <div v-if="props.show" class="info-container">
-    <div class="tabs-container">
-      <ui-tabs
-        v-if="modalTabsLocal && modalTabsLocal.length > 0"
-        v-model="selectedTabViewSettings"
-        test-id="main-tabs"
-        :tabs="modalTabsLocal"
-        type="underline"
-      />
-    </div>
-    <template v-if="modalTabsLocal && modalTabsLocal.length > 0">
-      <template v-for="tab in modalTabsLocal" :key="tab.value">
-        <template v-if="selectedTabViewSettings === tab.value">
-          <div
-            :class="[
-              'table-fixed-height',
-              { 'table-fixed-full-height': props.fullMode },
-            ]"
-          >
-            <template
-              v-for="viewSettingsField in viewSettingsTabContent(tab.value)"
-              :key="viewSettingsField.id"
-            >
-              <div class="info-block-container">
-                <div class="info-block-container-inner">
-                  <common-diagram-main-modals-view-settings-view-settings
-                    :view-name="props.viewName"
-                    :view-settings-field="viewSettingsField"
-                  />
-                </div>
-              </div>
-            </template>
-          </div>
-        </template>
-      </template>
-    </template>
-    <template v-else>
-      <div class="table-fixed-height" :style="{ 'min-height': props.height }">
-        <template
-          v-for="viewSettingsField in props.viewSettingsFields"
-          :key="viewSettingsField.id"
-        >
-          <div class="info-block-container">
-            <div class="info-block-container-inner">
-              <common-diagram-main-modals-view-settings-view-settings
-                :view-name="props.viewName"
-                :view-settings-field="viewSettingsField"
-              />
-            </div>
-          </div>
-        </template>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ViewSettingsFields,
-  UI_I_ModalTab,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    modalTabs?: UI_I_ModalTab[]
-    viewSettingsFields: UI_I_ViewSettingsFields[]
-    viewName?: string
-    fullMode?: boolean
-    height?: string
-    selectedTab?: number
-  }>(),
-  {
-    modalTabs: undefined,
-    height: undefined,
-    viewName: '',
-    selectedTab: 0,
-  }
-)
-
-const modalTabsLocal = computed(() =>
-  props.modalTabs.map((tab) => ({ ...tab, name: tab.text }))
-)
-// Selected tab id on the view settings modal
-const selectedTabViewSettings = ref<number>(props.selectedTab)
-
-// Filtering the selected tab content
-const viewSettingsTabContent = (tab: number): UI_I_ViewSettingsFields[] =>
-  tab === 0
-    ? props.viewSettingsFields
-    : props.viewSettingsFields.filter(
-        (field: UI_I_ViewSettingsFields): boolean => field.type === tab
-      )
-</script>
-
-<style scoped lang="scss">
-.info-container {
-  padding: 8px 0px 0 32px;
-  background-color: #fafafa;
-
-  .tabs-container {
-    padding-right: 32px;
-  }
-}
-
-.table-fixed-height {
-  min-height: 400px;
-  max-height: 400px;
-  overflow-y: auto;
-  padding-right: 32px;
-  padding-top: 16px;
-
-  &.table-fixed-full-height {
-    max-height: 312px;
-  }
-
-  .info-block-container {
-    padding-bottom: 24px;
-
-    &-inner {
-      padding-bottom: 32px;
-      border-bottom: 1px solid #e9ebeda3;
-    }
-  }
-  & > div:last-of-type {
-    padding-bottom: 16px;
-
-    .info-block-container-inner {
-      padding-bottom: 0;
-      border-bottom: none;
-    }
-  }
-}
-
-:root.dark-theme {
-  .info-container {
-    background-color: #213444;
-  }
-  .info-block-container .info-block-container-inner {
-    border-bottom: 1px solid #e9ebed1f;
-  }
-
-  .table-fixed-height {
-    & > div:last-of-type {
-      .info-block-container-inner {
-        padding-bottom: 0;
-        border-bottom: none;
-      }
-    }
-  }
-}
-</style>

package/components/common/diagramMain/modals/viewSettings/viewSettings/ViewSettings.vue

@@ -1,35 +0,0 @@
-<template>
-  <common-diagram-main-modals-view-settings-view-settings-new
-    v-if="isNewView"
-    :view-name="props.viewName"
-    :view-settings-field="props.viewSettingsField"
-  />
-  <common-diagram-main-modals-view-settings-view-settings-old
-    v-else
-    :view-name="props.viewName"
-    :view-settings-field="props.viewSettingsField"
-    :with-collapse="props.withCollapse"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ViewSettingsFields } from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    viewSettingsField: UI_I_ViewSettingsFields
-    viewName?: string
-    withCollapse?: boolean
-  }>(),
-  {
-    viewName: '',
-  }
-)
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-</script>
-
-<style scoped lang="scss"></style>

package/components/common/diagramMain/modals/viewSettings/viewSettings/ViewSettingsNew.vue

@@ -1,199 +0,0 @@
-<template>
-  <div>
-    <div class="table-wrapper">
-      <table class="settings-table">
-        <tbody>
-          <tr>
-            <td colspan="2">
-              <span>
-                {{ props.viewSettingsField.title }}
-              </span>
-            </td>
-          </tr>
-          <template v-if="props.viewSettingsField.rows.length > 0">
-            <tr
-              v-for="row in props.viewSettingsField.rows"
-              :key="row.name"
-              class="table-block"
-            >
-              <td class="row-name-container">
-                <span>
-                  {{ row.name }}
-                </span>
-              </td>
-              <td class="row-value-container">
-                <span
-                  :class="[
-                    'settings-table__values',
-                    row.status && {
-                      'is-status-yes': row.color,
-                      'is-status-no': !row.color,
-                    },
-                  ]"
-                >
-                  <template v-if="Array.isArray(row.value)">
-                    <template v-if="row.value.length > 0">
-                      <span
-                        v-for="value in row.value"
-                        :key="value"
-                        class="settings-table__value array-items"
-                      >
-                        {{ value }}
-                      </span>
-                    </template>
-                    <template v-else>
-                      <span class="settings-table__value">--</span>
-                    </template>
-                  </template>
-                  <span v-else class="settings-table__value">
-                    {{ row.value || '--' }}
-                  </span>
-                </span>
-              </td>
-            </tr>
-          </template>
-          <tr v-else-if="props.viewSettingsField.rows.length === 0">
-            <td colspan="2">
-              <div class="not-available">
-                <span><ui-icon width="16" height="16" name="info" /></span>
-                <span>
-                  {{ props.viewSettingsField.title }}
-                  {{ localization.common.isNotAvailableOnThis }}
-                  {{ props.viewName }}
-                </span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ViewSettingsFields } from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    viewSettingsField: UI_I_ViewSettingsFields
-    viewName?: string
-  }>(),
-  {
-    viewName: '',
-  }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-.table-wrapper {
-  flex: 1 1 auto;
-  width: 100%;
-  height: auto;
-  box-sizing: border-box;
-
-  .settings-table {
-    width: 100%;
-    box-sizing: border-box;
-    background-color: transparent;
-
-    tr:first-of-type {
-      span {
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 19.36px;
-        color: var(--diagram-info-text);
-      }
-      td {
-        padding-bottom: 16px;
-      }
-    }
-
-    tr:not(:first-of-type) {
-      vertical-align: top;
-
-      td {
-        &.row-name-container {
-          border-right: 16px solid transparent;
-          width: 256px;
-          min-width: 256px;
-          color: var(--diagram-info-second-text);
-          font-size: 13px;
-          font-weight: 400;
-          line-height: 15.73px;
-          padding-bottom: 12px;
-        }
-        &.row-value-container {
-          padding-bottom: 12px;
-        }
-
-        width: 240px;
-        white-space: normal;
-        padding: 0;
-        line-height: 18px;
-
-        .settings-table {
-          &__values {
-            display: inline-block;
-            table-layout: auto;
-            word-break: break-word;
-            width: 240px;
-
-            font-size: 13px;
-            font-weight: 400;
-            line-height: 15.73px;
-            color: var(--diagram-info-text);
-
-            &.is-status-yes {
-              color: #239332;
-            }
-            &.is-status-no {
-              color: #ea3223;
-            }
-
-            .array-items {
-              padding-bottom: 8px;
-
-              &:last-of-type {
-                padding-bottom: 0;
-              }
-            }
-          }
-          &__value {
-            white-space: pre-wrap;
-            width: 100%;
-            display: inline-block;
-          }
-        }
-      }
-
-      &:last-of-type {
-        td {
-          padding-bottom: 0;
-        }
-      }
-    }
-    tr td.row-name-container,
-    tr td.row-value-container {
-      max-width: 240px;
-      word-break: break-word;
-    }
-
-    .not-available {
-      color: var(--diagram-info-second-text);
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 15.73px;
-      display: flex;
-
-      span:first-of-type {
-        margin-right: 8px;
-      }
-    }
-  }
-}
-</style>

package/components/common/diagramMain/modals/viewSettings/viewSettingsModal/ViewSettingsModal.vue

@@ -1,83 +0,0 @@
-<template>
-  <template v-if="props.show">
-    <common-diagram-main-modals-view-settings-view-settings-modal-new
-      v-if="isNewView"
-      :view-name="props.viewName"
-      :height="props.height"
-      :title="props.title"
-      :second-title="props.secondTitle"
-      :show="props.show"
-      :modal-tabs="props.modalTabs"
-      :view-settings-fields="props.viewSettingsFields"
-      :width="props.width || '560px'"
-      :info-height="props.infoHeight"
-      :initial-data="props.initialData"
-      :without-footer-padding="props.withoutFooterPadding"
-      @hide="emits('hide')"
-    />
-    <common-diagram-main-modals-view-settings-view-settings-modal-old
-      v-else
-      :view-name="props.viewName"
-      :height="props.height"
-      :title="props.title"
-      :second-title="props.secondTitle"
-      :show="props.show"
-      :modal-tabs="props.modalTabs"
-      :view-settings-fields="props.viewSettingsFields"
-      :width="props.width || '576px'"
-      :info-height="props.infoHeight"
-      :initial-data="props.initialData"
-      :without-footer-padding="props.withoutFooterPadding"
-      :with-collapse="props.withCollapse"
-      @hide="emits('hide')"
-    />
-  </template>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ViewSettingsFields,
-  UI_I_ModalTab,
-  UI_I_ModalsInitialData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-interface UI_I_PortViewSettingsModalProps {
-  show: boolean
-  modalTabs?: UI_I_ModalTab[]
-  viewSettingsFields: UI_I_ViewSettingsFields[]
-  viewName: string
-  title?: string
-  width?: string
-  height?: string
-  infoHeight?: string
-  withCollapse?: boolean
-  initialData?: UI_I_ModalsInitialData
-  secondTitle?: string
-  withoutFooterPadding?: boolean
-}
-
-const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
-  initialData: () => ({}),
-  title: '',
-  width: '',
-  height: '420px',
-  modalTabs: () => [],
-  infoHeight: '390px',
-  secondTitle: '',
-  withoutFooterPadding: false,
-})
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-const onHideViewSettingsModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss"></style>

package/components/common/diagramMain/modals/viewSettings/viewSettingsModal/ViewSettingsModalNew.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="view-settings-modal__container">
-    <ui-modal
-      v-if="props.show"
-      :width="props.width"
-      :title="props.title"
-      :subtitle="props.secondTitle"
-      @hide="emits('hide')"
-    >
-      <template #content>
-        <common-diagram-main-modals-view-settings-info
-          :show="true"
-          :height="props.infoHeight"
-          :view-name="props.viewName"
-          :modal-tabs="props.modalTabs"
-          :full-mode="false"
-          :view-settings-fields="props.viewSettingsFields"
-        />
-      </template>
-      <template #footer>
-        <div style="height: 32px"></div>
-      </template>
-    </ui-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ViewSettingsFields,
-  UI_I_ModalTab,
-  UI_I_ModalsInitialData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-interface UI_I_PortViewSettingsModalProps {
-  show: boolean
-  modalTabs?: UI_I_ModalTab[]
-  viewSettingsFields: UI_I_ViewSettingsFields[]
-  viewName: string
-  title?: string
-  width?: string
-  height?: string
-  infoHeight?: string
-  initialData?: UI_I_ModalsInitialData
-  secondTitle?: string
-}
-
-const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
-  initialData: () => ({}),
-  title: '',
-  width: '560px',
-  height: '553px',
-  modalTabs: () => [],
-  infoHeight: '390px',
-  secondTitle: '',
-})
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-</script>
-
-<style scoped lang="scss"></style>

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

@@ -1,68 +0,0 @@
-<template>
-  <g data-title="network-main-block-group">
-    <g class="network-main-block-container">
-      <rect
-        data-title="network-main-block"
-        width="288"
-        :height="props.network.networkHeight"
-        x="6.5"
-        :y="props.network.rectPosition"
-        rx="6"
-        ry="6"
-        shape-rendering="geometricprecision"
-        class="panel"
-      />
-      <polyline
-        :points="`284.5,${props.network.rectPosition} 294.5,${
-          props.network.rectPosition
-        } 294.5,${
-          props.network.rectPosition + props.network.networkHeight
-        } 284.5,${props.network.rectPosition + props.network.networkHeight}`"
-        class="panel"
-      />
-    </g>
-
-    <common-diagram-main-highlights
-      data-title="network-main"
-      type="main-blue"
-      :is-network-block="true"
-      :height="props.network.networkHeight"
-      :y="props.network.rectPosition"
-      radius="6"
-      :hide="!(props.selectedNetwork === props.network.id)"
-    />
-
-    <common-diagram-main-highlights
-      data-title="network-main"
-      type="main-orange"
-      :is-network-block="true"
-      :height="props.network.networkHeight"
-      :y="props.network.rectPosition"
-      radius="6"
-      :hide="
-        props.isCantBeHighlighted ||
-        (!props.selectedMainLine && !props.isNetworkConnectedSelectedAdapter)
-      "
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_NetworkFullWithPositions } from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  selectedNetwork: string
-  selectedMainLine: boolean
-  isNetworkConnectedSelectedAdapter: boolean
-  isCantBeHighlighted: boolean
-}>()
-</script>
-
-<style scoped lang="scss">
-.panel {
-  fill: var(--diagram-block-bg);
-  stroke: var(--diagram-connect-line);
-  stroke-width: 1;
-}
-</style>

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

@@ -1,89 +0,0 @@
-<template>
-  <g>
-    <rect
-      width="288"
-      height="61.5"
-      shape-rendering="geometricprecision"
-      x="6.5"
-      y="17.5"
-      rx="6"
-      ry="6"
-      class="panel"
-    ></rect>
-    <polyline
-      :points="`284.5,17.5 294.5,17.5 294.5,79 284.5,79`"
-      class="panel"
-    />
-    <rect
-      data-title="network-second-block"
-      width="28"
-      height="61.5"
-      x="310.5"
-      rx="6"
-      ry="6"
-      y="17.5"
-      shape-rendering="geometricprecision"
-      class="panel"
-    />
-
-    <polyline
-      :points="`320.5,17.5 310.5,17.5 310.5,79 320.5,79`"
-      class="panel"
-    />
-    <foreignObject
-      data-title="no-adapter-text"
-      height="41.5"
-      width="264"
-      x="18.5"
-      y="27.5"
-    >
-      <div class="content">
-        <span><ui-icon name="info" width="20" height="20" /></span>
-        <span
-          data-title="no-associated-port-groups"
-          class="no-associated-port-groups text-ellipsis"
-        >
-          {{ localization.common.noAssociatedPortGroups }}
-        </span>
-      </div>
-    </foreignObject>
-  </g>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-.panel {
-  fill: var(--diagram-block-bg);
-  stroke: var(--diagram-connect-line);
-  stroke-width: 1;
-}
-
-.text-ellipsis {
-  display: block;
-  max-width: 264px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-
-  color: var(--diagram-content-third-text);
-
-  .no-associated-port-groups {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16.94px;
-    text-align: center;
-  }
-}
-</style>