bfg-common 1.6.76 → 1.6.77

package/components/common/diagramMain/header/Header.vue

@@ -1,49 +0,0 @@
-<template>
-  <component
-    :is="currentComponent"
-    :project="props.project"
-    :is-show-diagram="props.isShowDiagram"
-    :diagram-name="props.diagramName"
-    :test-id="props.testId"
-    @toggle-diagram="emits('toggle-diagram')"
-    @show-modal="onShowModal"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    isShowDiagram: boolean
-    diagramName: string
-    testId: string
-    project?: UI_T_Project
-  }>(),
-  {
-    project: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'toggle-diagram'): void
-  (event: 'show-modal', modalName: string, data?: { switch_name: string }): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./HeaderNew.vue'))
-    : defineAsyncComponent(() => import('./HeaderOld.vue'))
-)
-
-const onShowModal = (modalName: string, data?: { switch_name: string }) => {
-  emits('show-modal', modalName, data)
-}
-</script>
-
-<style scoped lang="scss"></style>

package/components/common/diagramMain/header/HeaderNew.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="diagram-header">
-    <div class="diagram-header-left">
-      <span
-        class="diagram-header-left-icon"
-        :data-id="`${props.testId}-toggle-icon`"
-      >
-        <ui-icon
-          name="arrow"
-          width="20"
-          height="20"
-          :class="[
-            'diagram-header-left-icon-arrow',
-            {
-              open: props.isShowDiagram,
-            },
-          ]"
-          @click="emits('toggle-diagram')"
-        />
-      </span>
-
-      <span class="diagram-header-left-title" @click="emits('toggle-diagram')">
-        {{ localization.common.standardSwitch }}:
-        {{ props.diagramName }}
-      </span>
-    </div>
-    <div v-if="props.isShowDiagram" class="diagram-header-right">
-      <ui-button-group
-        :buttons="buttons"
-        :left-line="true"
-        :group-id="props.diagramName"
-        class="switch-actions"
-        @action="onSelectAction"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Button } from '~/node_modules/bfg-common/components/common/tools/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import { switchMainNavigationNewFunc } from '~/components/common/diagramMain/modals/lib/config'
-
-const props = withDefaults(
-  defineProps<{
-    isShowDiagram: boolean
-    diagramName: string
-    testId: string
-    project?: UI_T_Project
-  }>(),
-  {
-    project: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'toggle-diagram'): void
-  (
-    event: 'show-modal',
-    modalName: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const buttons = computed<UI_I_Button[]>(() =>
-  switchMainNavigationNewFunc(localization.value, props.testId)
-)
-
-const onShowModal = (modalName: string, diagramName?: string) => {
-  diagramName
-    ? emits(
-        'show-modal',
-        modalName,
-        diagramName && { switch_name: diagramName }
-      )
-    : emits('show-modal', modalName)
-}
-
-const onSelectAction = (event: string): void => {
-  onShowModal(event, event === 'add-networking' && props.diagramName)
-}
-</script>
-
-<style scoped lang="scss">
-.diagram-header {
-  display: flex;
-  height: 20px;
-
-  &-left {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    column-gap: 12px;
-    height: 20px;
-    min-width: max-content;
-
-    &-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--select-arrow);
-
-      &-arrow {
-        transform: rotate(90deg);
-        cursor: pointer;
-
-        &.open {
-          transform: rotate(180deg);
-        }
-      }
-    }
-
-    &-title {
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 19px;
-      letter-spacing: 0;
-      color: var(--title-form-first-color);
-      cursor: pointer;
-
-      &:hover {
-        color: var(--dropdown-item-hover-color);
-      }
-    }
-  }
-
-  &-right {
-    height: 20px;
-    width: 100%;
-
-    :deep(.ui-button-group) {
-      .ui-button-group-line {
-        height: 20px;
-        top: 0;
-      }
-
-      .ui-button-group-items {
-        height: 20px !important;
-
-        .button-from-group {
-          height: 20px !important;
-        }
-      }
-      .ui-button-group-dots {
-        margin-top: 0;
-        padding-top: 0;
-        height: 20px;
-      }
-    }
-  }
-}
-</style>

package/components/common/diagramMain/modals/UnsavedChangesModal.vue

@@ -1,32 +0,0 @@
-<template>
-  <ui-popup
-    v-if="props.isShow"
-    test-id="unsaved-changes"
-    icon-name="circle-warning"
-    :texts="texts"
-    :title="localization.common.unsavedChanges"
-    :message="localization.common.unsavedChangesModalDescription"
-    @hide="emits('hide')"
-    @submit="emits('leave')"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  isShow: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'leave'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const texts = computed(() => ({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.leave,
-}))
-</script>

package/components/common/diagramMain/modals/editSettings/EditSettingsNew.vue

@@ -1,285 +0,0 @@
-<template>
-  <div class="edit-settings">
-    <ui-tabs-step
-      v-model="selectedTab"
-      :items="tabs"
-      :errors="tabsErrors"
-      :has-error-messages="props.hasErrorMessages"
-      @set-alert="emits('show-error-message-alert', selectedTab - 1)"
-    />
-
-    <div class="edit-settings-content">
-      <div class="edit-settings-content-container">
-        <template v-if="props.isNetwork || props.isSwitch">
-          <common-diagram-main-modals-edit-settings-tabs-network-properties
-            v-if="props.isNetwork"
-            v-show="selectedTab === '1'"
-            :is-show-error-message-alert="props.isShowErrorMessageAlertNew"
-            :error-messages="props.errorMessages"
-            :initial-data="props.initialData"
-            :has-error-messages="props.hasErrorMessages"
-            :network-already-exists="props.networkAlreadyExists"
-            :flag-send-data="props.flagSendData"
-            @change-edit-properties-data="onChangeNetworkEditPropertiesData"
-            @change-error-messages="onChangeErrorMessages"
-            @hide-error-message-alert="emits('hide-error-message-alert', 0)"
-          />
-          <common-diagram-main-modals-edit-settings-tabs-switch-properties
-            v-if="props.isSwitch"
-            v-show="selectedTab === '1'"
-            :is-show-error-message-alert="props.isShowErrorMessageAlertNew"
-            :error-messages="props.errorMessages"
-            :initial-data="props.initialData"
-            :has-error-messages="props.hasErrorMessages"
-            @change-edit-properties-data="onChangeSwitchEditPropertiesData"
-            @change-error-messages="onChangeErrorMessages"
-            @hide-error-message-alert="emits('hide-error-message-alert', 0)"
-          />
-          <common-diagram-main-modals-edit-settings-tabs-security
-            v-show="selectedTab === '2'"
-            :is-switch="props.isSwitch"
-            :initial-data="props.initialData"
-            @change-edit-security-data="onChangeEditSecurityData"
-          />
-          <common-diagram-main-modals-edit-settings-tabs-traffic-shaping
-            v-show="selectedTab === '3'"
-            :is-show-error-message-alert="props.isShowErrorMessageAlertNew"
-            :error-messages="props.errorMessages"
-            :initial-data="props.initialData"
-            :has-error-messages="props.hasErrorMessages"
-            :is-switch="props.isSwitch"
-            :flag-send-data="props.flagSendData"
-            @change-edit-traffic-shaping-data="onChangeEditTrafficShapingData"
-            @change-error-messages="onChangeErrorMessages"
-            @hide-error-message-alert="emits('hide-error-message-alert', 2)"
-          />
-          <common-diagram-main-modals-edit-settings-tabs-teaming-failover
-            v-show="selectedTab === '4'"
-            :is-switch="props.isSwitch"
-            :adapters="props.adapters"
-            :initial-data="props.initialData"
-            :adapter-status="props.adapterStatus"
-            :is-dark-mode="props.isDarkMode"
-            @change-edit-teaming-failover-data="onChangeEditTeamingFailoverData"
-            @change-adapter-status="onChangeAdapterStatus"
-          />
-        </template>
-        <template v-if="props.isPort">
-          <common-diagram-main-modals-edit-settings-tabs-port-port-properties
-            v-show="selectedTab === '1'"
-            :is-show-error-message-alert="props.isShowErrorMessageAlertNew"
-            :error-messages="props.errorMessages"
-            :initial-data="props.initialData"
-            :has-error-messages="props.hasErrorMessages"
-            @change-error-messages="onChangeErrorMessages"
-            @change-port-edit-properties-data="onChangePortEditPropertiesData"
-            @hide-error-message-alert="emits('hide-error-message-alert', 0)"
-          />
-          <common-diagram-main-modals-edit-settings-tabs-port-ipv-four-settings
-            v-show="selectedTab === '2'"
-            :is-show-error-message-alert="props.isShowErrorMessageAlertNew"
-            :error-messages="props.errorMessages"
-            :initial-data="props.initialData"
-            :has-error-messages="props.hasErrorMessages"
-            :flag-send-data="props.flagSendData"
-            @change-error-messages="onChangeErrorMessages"
-            @change-port-ipv-four-data="onChangePortEditIpvFourData"
-            @hide-error-message-alert="emits('hide-error-message-alert', 1)"
-          />
-        </template>
-      </div>
-      <div class="edit-settings-content-transparent-block"></div>
-    </div>
-
-    <common-diagram-main-modals-edit-settings-confirm-teaming-settings-modal
-      :is-show="props.isShowWithoutActiveAdapterModal"
-      @hide="emits('hide-without-active-adapter-modal')"
-      @submit="emits('approve-without-active-adapter-modal')"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ItemsWithTotalCounts } from '~/lib/models/interfaces'
-import type {
-  UI_I_AdapterStatus,
-  UI_I_ModalsInitialData,
-  UI_I_SwitchAdapterItem,
-  UI_I_SecurityFields,
-  UI_I_TrafficShapingFields,
-  UI_I_TeamingFailoverFields,
-  UI_I_PropertiesFields,
-  UI_I_EditSettingsErrorMessage,
-  UI_I_SwitchPropertiesFields,
-  UI_I_PortPropertiesFields,
-  UI_I_IpvFourSettingsFields,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  items: {
-    value: string
-    text: string
-  }[]
-  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-  initialData: UI_I_ModalsInitialData
-  isDarkMode: boolean
-  isSwitch: boolean
-  isNetwork: boolean
-  isPort: boolean
-  hasErrorMessages: boolean
-  isShowErrorMessageAlertNew: boolean[]
-  networkAlreadyExists: boolean
-  isShowWithoutActiveAdapterModal: boolean
-  adapterStatus: UI_I_AdapterStatus
-  errorMessages: UI_I_EditSettingsErrorMessage
-  flagSendData: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'show-error-message-alert', tab?: number): void
-  (event: 'hide-error-message-alert', tab?: number): void
-  (
-    event: 'change-error-messages',
-    newErrorMessage: string,
-    fieldName: keyof UI_I_EditSettingsErrorMessage
-  ): void
-  (event: 'change-adapter-status', newAdapterStatus: UI_I_AdapterStatus): void
-  (
-    event: 'change-network-edit-properties-data',
-    newNetworkEditPropertiesData: UI_I_PropertiesFields
-  ): void
-  (
-    event: 'change-switch-edit-properties-data',
-    newSwitchEditPropertiesData: UI_I_SwitchPropertiesFields
-  ): void
-  (
-    event: 'change-port-edit-properties-data',
-    newSwitchEditPropertiesData: UI_I_SwitchPropertiesFields
-  ): void
-  (
-    event: 'change-port-ipv-four-data',
-    newPortEditIpvFourData: UI_I_IpvFourSettingsFields
-  ): void
-  (
-    event: 'change-edit-security-data',
-    newEditSecurityData: UI_I_SecurityFields
-  ): void
-  (
-    event: 'change-edit-traffic-shaping-data',
-    newEditTrafficShapingData: UI_I_TrafficShapingFields
-  ): void
-  (
-    event: 'change-edit-teaming-failover-data',
-    newEditTeamingFailoverData: UI_I_TeamingFailoverFields
-  ): void
-  (event: 'hide-without-active-adapter-modal'): void
-  (event: 'approve-without-active-adapter-modal'): void
-}>()
-
-const selectedTab = defineModel<string>()
-
-const tabs = computed<UI_I_TabItem[]>(() =>
-  props.items.map((item) => ({ name: item.text, value: item.value }))
-)
-
-const tabsErrors = computed<boolean[]>(() =>
-  props.isPort
-    ? [
-        props.errorMessages.mtu,
-        props.errorMessages.ipFourAddress ||
-          props.errorMessages.subnetMask ||
-          props.errorMessages.defaultGateway,
-      ]
-    : [
-        props.errorMessages.networkLabel ||
-          props.errorMessages.vlanId ||
-          props.errorMessages.mtu,
-        false,
-        props.errorMessages.average ||
-          props.errorMessages.peak ||
-          props.errorMessages.burstSize,
-        false,
-      ]
-)
-
-const onChangeErrorMessages = (
-  newErrorMessage: string,
-  fieldName: keyof UI_I_EditSettingsErrorMessage
-): void => {
-  emits('change-error-messages', newErrorMessage, fieldName)
-}
-
-const onChangeAdapterStatus = (newAdapterStatus: UI_I_AdapterStatus) => {
-  emits('change-adapter-status', newAdapterStatus)
-}
-
-const onChangeNetworkEditPropertiesData = (
-  newNetworkEditPropertiesData: UI_I_PropertiesFields
-) => {
-  emits('change-network-edit-properties-data', newNetworkEditPropertiesData)
-}
-const onChangeSwitchEditPropertiesData = (
-  newSwitchEditPropertiesData: UI_I_SwitchPropertiesFields
-) => {
-  emits('change-switch-edit-properties-data', newSwitchEditPropertiesData)
-}
-const onChangePortEditPropertiesData = (
-  newPortEditPropertiesData: UI_I_PortPropertiesFields
-) => {
-  emits('change-port-edit-properties-data', newPortEditPropertiesData)
-}
-const onChangePortEditIpvFourData = (
-  newPortEditIpvFourData: UI_I_IpvFourSettingsFields
-) => {
-  emits('change-port-ipv-four-data', newPortEditIpvFourData)
-}
-
-const onChangeEditSecurityData = (newEditSecurityData: UI_I_SecurityFields) => {
-  emits('change-edit-security-data', newEditSecurityData)
-}
-const onChangeEditTrafficShapingData = (
-  newEditTrafficShapingData: UI_I_TrafficShapingFields
-) => {
-  emits('change-edit-traffic-shaping-data', newEditTrafficShapingData)
-}
-const onChangeEditTeamingFailoverData = (
-  newEditTeamingFailoverData: UI_I_TeamingFailoverFields
-) => {
-  emits('change-edit-teaming-failover-data', newEditTeamingFailoverData)
-}
-</script>
-
-<style scoped lang="scss">
-.edit-settings {
-  display: flex;
-  height: 100%;
-
-  &-content {
-    margin-left: 16px;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    &-container {
-      overflow-y: auto;
-      width: 100%;
-      height: 100%;
-      padding-right: 18px;
-      padding-bottom: 16px;
-      scrollbar-gutter: stable;
-    }
-
-    &-transparent-block {
-      position: absolute;
-      background: red;
-      height: 16px;
-      width: 100%;
-      bottom: 0;
-      right: 14px;
-      background: linear-gradient(rgba(250, 250, 250, 0), var(--modal-bg));
-      z-index: var(--z-modal-transparent-block);
-    }
-  }
-}
-</style>