bfg-common 1.6.89 → 1.6.91

package/components/common/diagramMain/modals/editSettings/modal/EditSettingsModalNew.vue

@@ -1,91 +0,0 @@
-<template>
-  <div>
-    <ui-modal
-      v-if="props.show"
-      :texts="modalTextsLocal"
-      :subtitle="props.title"
-      :test-id="`${props.title}-edit-modal`"
-      width="1120px"
-      size="md"
-      :is-loading="props.isEditModalLoading"
-      :title="localization.common.editSettings"
-      @hide="onHideEditSettingsModal"
-      @submit="emits('change-flag-send-data')"
-    >
-      <template #content>
-        <div class="modal-content">
-          <common-diagram-main-modals-edit-settings
-            v-model:network-edit-data="networkEditData"
-            :items="props.items"
-            :view-name="props.viewName"
-            :initial-data="props.initialData"
-            :adapters="props.adapters"
-            :flag-send-data="props.flagSendData"
-            :is-dark-mode="props.isDarkMode"
-            @send-edit-data="onSendData"
-            @change-edit-fields-data="onChangeEditFieldsData"
-            @check-network-label="onCheckNetworkLabel"
-          />
-        </div>
-      </template>
-      <template #footerLeftContent><span></span></template>
-    </ui-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_TabItem } from '~/node_modules/bfg-uikit/components/ui/tabs/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_EditFieldsData } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_PortViewSettingsModalExtendedProps } from '~/components/common/diagramMain/modals/editSettings/lib/models/interfaces'
-
-const props = defineProps<UI_I_PortViewSettingsModalExtendedProps>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
-  (event: 'send-edit-data', type: string): void
-  (
-    event: 'check-network-label',
-    label: string,
-    sendMessage: (message: string) => void
-  ): void
-  (event: 'change-flag-send-data'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const networkEditData = defineModel<UI_I_EditFieldsData>('network-edit-data')
-
-const modalTextsLocal = computed<UI_I_ModalTexts>(() => ({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.save,
-}))
-
-const onCheckNetworkLabel = (
-  label: string,
-  sendMessage: (message: string) => void
-) => {
-  emits('check-network-label', label, sendMessage)
-}
-
-const onHideEditSettingsModal = (): void => {
-  emits('hide')
-}
-
-const onChangeEditFieldsData = (newEditFieldsData: UI_I_EditFieldsData) => {
-  emits('change-edit-fields-data', newEditFieldsData)
-}
-
-const onSendData = (type: string) => {
-  emits('send-edit-data', type)
-}
-</script>
-
-<style scoped lang="scss">
-.modal-content {
-  height: 463px;
-  max-height: 463px;
-  padding: 8px 0 0 32px;
-}
-</style>

package/components/common/diagramMain/modals/editSettings/tabs/networkProperties/NetworkProperties.vue

@@ -1,158 +0,0 @@
-<template>
-  <div class="network-properties">
-    <component
-      :is="currentComponent"
-      v-model="fieldsValues"
-      :is-show-error-message="isShowErrorMessage"
-      :error-messages="props.errorMessages"
-      :vlan-id-select-data="vlanIdSelectDataLocal"
-      :flag-send-data="props.flagSendData"
-      @hide-error-message-alert="onHideErrorMessageAlert"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_ModalsInitialData,
-  UI_I_EditSettingsErrorMessage,
-  UI_I_PropertiesFields,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_PropertiesFieldName } from '~/components/common/diagramMain/lib/models/types'
-import type { UI_I_VlanIdData } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import { vlanIdSelectDataFunc } from '~/components/common/wizards/network/add/lib/config/config'
-
-const props = withDefaults(
-  defineProps<{
-    isShowErrorMessageAlert: boolean | boolean[]
-    errorMessages: UI_I_EditSettingsErrorMessage
-    networkAlreadyExists: boolean
-    initialData?: UI_I_ModalsInitialData
-    hasErrorMessages?: boolean
-    flagSendData?: boolean
-  }>(),
-  {
-    initialData: () => ({}),
-    hasErrorMessages: undefined,
-    flagSendData: false,
-  }
-)
-
-const emits = defineEmits<{
-  (
-    event: 'change-error-messages',
-    errorMessage: string,
-    fieldName: keyof UI_I_EditSettingsErrorMessage
-  ): void
-  (event: 'hide-error-message-alert'): void
-  (
-    event: 'change-edit-properties-data',
-    propertiesData: UI_I_PropertiesFields
-  ): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./NetworkPropertiesNew.vue'))
-    : defineAsyncComponent(() => import('./NetworkPropertiesOld.vue'))
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const vlanIdSelectDataLocal = computed<UI_I_VlanIdData[]>(() =>
-  vlanIdSelectDataFunc(localization.value)
-)
-
-const isShowErrorMessage = computed<boolean>(
-  () =>
-    props.hasErrorMessages &&
-    (isNewView.value
-      ? props.isShowErrorMessageAlert[0]
-      : props.isShowErrorMessageAlert)
-)
-
-const fieldsValues = ref<UI_I_PropertiesFields>(
-  useDeepCopy({
-    vlanId:
-      props.initialData.vlanId || `${localization.value.common.none2} (0)`,
-    networkLabel: props.initialData.networkLabel || 'Network',
-  })
-)
-
-const onHideErrorMessageAlert = () => emits('hide-error-message-alert')
-
-const onChangeData = (data: UI_I_PropertiesFields) =>
-  emits('change-edit-properties-data', data)
-
-const changeErrorMessage = (
-  errorMessage: string,
-  fieldName: keyof UI_I_EditSettingsErrorMessage
-) => emits('change-error-messages', errorMessage, fieldName)
-
-const messageTexts = (local: UI_I_Localization) => ({
-  vlanId: local.common.vlanIdInvalidMessage,
-  networkLabel: local.common.networkLabelInvalidMessage,
-})
-
-const isNumberInRange = (value: number | string, down: number, up: number) =>
-  isNaN(Number(value)) || Number(value) < down || Number(value) > up
-
-const setMessageOnChangedField = (
-  values: string | number,
-  name: UI_T_PropertiesFieldName,
-  text: string
-) => {
-  if (name === 'networkLabel' && !values) {
-    changeErrorMessage(text, name)
-    return
-  } else if (name === 'networkLabel' && props.networkAlreadyExists) return
-
-  if (
-    name === 'vlanId' &&
-    values !== `${localization.value.common.none2} (0)` &&
-    values !== `${localization.value.common.all} (4095)` &&
-    (isNumberInRange(values, 0, 4095) || values === '')
-  ) {
-    changeErrorMessage(text, name)
-    return
-  }
-  changeErrorMessage('', name)
-}
-
-watch(
-  fieldsValues,
-  (newValues: UI_I_PropertiesFields) => {
-    setMessageOnChangedField(
-      newValues.vlanId,
-      'vlanId',
-      messageTexts(localization.value).vlanId
-    )
-    setMessageOnChangedField(
-      newValues.networkLabel,
-      'networkLabel',
-      messageTexts(localization.value).networkLabel
-    )
-    onChangeData(newValues)
-    !props.hasErrorMessages && onHideErrorMessageAlert()
-  },
-  { deep: true }
-)
-
-onMounted(() => {
-  onChangeData(fieldsValues.value)
-})
-onUnmounted(() => {
-  onHideErrorMessageAlert()
-})
-</script>
-
-<style scoped lang="scss">
-.network-properties {
-  width: 100%;
-}
-</style>

package/components/common/diagramMain/modals/editSettings/tabs/networkProperties/NetworkPropertiesNew.vue

@@ -1,262 +0,0 @@
-<template>
-  <div class="content">
-    <div class="content-fields">
-      <div class="content-fields-title">
-        {{ localization.common.properties }}
-      </div>
-
-      <div v-if="props.isShowErrorMessage" class="content-fields-alert">
-        <div
-          v-for="messageObject in validationMessagesArray"
-          :key="messageObject.key"
-          class="content-fields-alert-item"
-        >
-          <ui-alert
-            :messages="[messageObject.message]"
-            test-id="network-properties-alert"
-            size="md"
-            @hide="onHideMessage(messageObject.key)"
-          />
-        </div>
-      </div>
-
-      <div class="content-fields-block">
-        <div class="col">
-          <h4 class="content-subtitle col-left">
-            {{ localization.common.networkLabel }}
-          </h4>
-          <div class="col-right input">
-            <ui-input
-              id="network-label"
-              v-model="fieldsValues.networkLabel"
-              test-id="network-label"
-              type="text"
-              :placeholder="localization.common.networkLabel"
-              size="md"
-              :error="props.errorMessages.networkLabel"
-            />
-          </div>
-        </div>
-
-        <ui-line margin="16px 0" />
-
-        <div class="col">
-          <h4 class="content-subtitle col-left">
-            {{ localization.common.vlanId }}
-          </h4>
-          <div class="col-right combobox">
-            <ui-combobox
-              v-model="fieldsValues.vlanId"
-              :items="vlanIdSelectDataLocal"
-              select-width="100%"
-              show-text
-              test-id="vlan-id-combobox"
-              :placeholder="localization.common.vlanId"
-              :error="!!props.errorMessages.vlanId"
-              :error-text="props.errorMessages.vlanId"
-              error-type="tooltip"
-              width="auto"
-              @change="selectVlanId"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_EditSettingsErrorMessage,
-  UI_I_PropertiesFields,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_VlanIdData } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import { vlanIdSelectDataFunc } from '~/components/common/wizards/network/add/lib/config/config'
-import { validationMessagesArrayNewFunc } from '~/components/common/diagramMain/modals/lib/utils'
-
-const props = defineProps<{
-  isShowErrorMessage: boolean
-  errorMessages: UI_I_EditSettingsErrorMessage
-  vlanIdSelectData: UI_I_VlanIdData[]
-  flagSendData: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide-error-message-alert'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const fieldsValues = defineModel<UI_I_PropertiesFields>()
-
-const vlanIdSelectDataLocal = computed<UI_I_Localization>(() =>
-  vlanIdSelectDataFunc(localization.value)
-)
-
-const selectVlanId = (id: string): void => {
-  fieldsValues.value.vlanId = id
-}
-
-const keys = ref<keyof UI_I_EditSettingsErrorMessage>([
-  'networkLabel',
-  'vlanId',
-])
-
-const validationMessagesArray = computed(() =>
-  validationMessagesArrayNewFunc(keys.value, props.errorMessages)
-)
-
-const onHideMessage = (
-  messageKey: keyof UI_I_EditSettingsErrorMessage
-): void => {
-  keys.value = keys.value
-    .filter((key) => key !== messageKey)
-    .filter((key) => props.errorMessages[key])
-
-  if (keys.value.length === 0) {
-    emits('hide-error-message-alert')
-    keys.value = ['networkLabel', 'vlanId']
-  }
-}
-
-watch(
-  () => props.flagSendData,
-  () => {
-    keys.value = ['networkLabel', 'vlanId']
-  }
-)
-</script>
-
-<style scoped lang="scss">
-.content {
-  width: 100%;
-
-  &-fields-title {
-    font-weight: 400;
-    font-size: 20px;
-    line-height: 24px;
-    letter-spacing: 0;
-    color: var(--title-form-first-color);
-    margin-bottom: 16px;
-  }
-
-  &-title {
-    display: block;
-    margin: 16px 0;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 20px;
-    letter-spacing: 0;
-    color: var(--title-form-first-color);
-  }
-
-  &-subtitle {
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 16px;
-    letter-spacing: 0;
-    vertical-align: middle;
-    color: var(--title-form-first-color);
-  }
-
-  .col {
-    display: flex;
-    column-gap: 16px;
-
-    &-left {
-      padding-top: 10px;
-      width: calc((100% - 8px) / 3);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    &-right {
-      width: calc(((100% - 8px) / 3) * 2);
-
-      &.input {
-        max-width: 400px;
-      }
-
-      &.combobox {
-        max-width: 200px;
-      }
-    }
-  }
-
-  &-fields {
-    &-alert {
-      margin-bottom: 8px;
-
-      &-item:not(:last-of-type) {
-        margin-bottom: 12px;
-      }
-    }
-
-    &-block {
-      padding-top: 8px;
-    }
-
-    &-col {
-      display: flex;
-      column-gap: 12px;
-
-      &-left {
-        width: 60%;
-      }
-
-      &-right {
-        width: 40%;
-
-        &.input {
-          max-width: 400px;
-        }
-
-        &.combobox {
-          max-width: 200px;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 896px) {
-  .content-fields {
-    &-col {
-      display: flex;
-      row-gap: 12px;
-      flex-direction: column;
-
-      &-left {
-        width: 100%;
-      }
-
-      &-right {
-        width: 100%;
-
-        &.input {
-          max-width: 400px;
-        }
-
-        &.combobox {
-          max-width: 200px;
-        }
-      }
-    }
-  }
-}
-
-:deep(.combobox-input) {
-  width: 100%;
-  height: 36px;
-}
-:deep(.ui-select-toggle-button.md) {
-  padding: 0 8px 0 12px;
-}
-:deep(.ui-checkbox-label) {
-  &.md {
-    height: unset;
-  }
-}
-</style>

package/components/common/diagramMain/modals/editSettings/tabs/port/ipvFourSettings/IpvFourSettings.vue

@@ -1,192 +0,0 @@
-<template>
-  <div class="ipv-four-settings">
-    <component
-      :is="currentComponent"
-      v-model="fieldsValues"
-      :is-show-error-message="isShowErrorMessage"
-      :error-messages="props.errorMessages"
-      :flag-send-data="props.flagSendData"
-      @hide-error-message-alert="onHideErrorMessageAlert"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_EditSettingsErrorMessage,
-  UI_I_IpvFourSettingsFields,
-  UI_I_ModalsInitialData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_IpFourSettingsFieldName } from '~/components/common/wizards/network/add/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    isShowErrorMessageAlert: boolean | boolean[]
-    errorMessages: UI_I_EditSettingsErrorMessage
-    initialData?: UI_I_ModalsInitialData
-    hasErrorMessages?: boolean
-    flagSendData?: boolean
-  }>(),
-  {
-    initialData: () => ({}),
-    hasErrorMessages: undefined,
-    flagSendData: false,
-  }
-)
-
-const emits = defineEmits<{
-  (
-    event: 'change-error-messages',
-    errorMessage: string,
-    fieldName: keyof UI_I_EditSettingsErrorMessage
-  ): void
-  (event: 'hide-error-message-alert'): void
-  (
-    event: 'change-port-ipv-four-data',
-    newPortEditIpvFourData: UI_I_IpvFourSettingsFields
-  ): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./IpvFourSettingsNew.vue'))
-    : defineAsyncComponent(() => import('./IpvFourSettingsOld.vue'))
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowErrorMessage = computed<boolean>(
-  () =>
-    props.hasErrorMessages &&
-    (isNewView.value
-      ? props.isShowErrorMessageAlert[1]
-      : props.isShowErrorMessageAlert)
-)
-
-const fieldsValues = ref<UI_I_IpvFourSettingsFields>(
-  useDeepCopy(props.initialData.tcpConfig)
-)
-
-const onHideErrorMessageAlert = (): void => emits('hide-error-message-alert')
-
-const onChangeData = (data: UI_I_IpvFourSettingsFields) =>
-  emits('change-port-ipv-four-data', data)
-
-const changeErrorMessage = (
-  errorMessage: string,
-  fieldName: keyof UI_I_EditSettingsErrorMessage
-) => emits('change-error-messages', errorMessage, fieldName)
-
-const checkIfValidIP = (str: string) => {
-  const regexExp =
-    /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gi
-
-  return regexExp.test(str)
-}
-
-const messageTexts = (local: UI_I_Localization) => ({
-  ipFourAddressEmpty: local.common.ipFourAddressEmpty,
-  subnetMaskEmpty: local.common.subnetMaskEmpty,
-  defaultGatewayEmpty: local.common.defaultGatewayEmpty,
-  ipFourAddressInvalid: local.common.ipFourAddressInvalid,
-  subnetMaskInvalid: local.common.subnetMaskInvalid,
-  defaultGatewayInvalid: local.common.defaultGatewayInvalid,
-})
-
-const setMessageOnChangedField = (
-  values: string,
-  name: UI_T_IpFourSettingsFieldName,
-  ipSettings: string,
-  override?: boolean
-) => {
-  if (ipSettings === '0') {
-    changeErrorMessage('', name)
-    return
-  }
-
-  if (name === 'ipFourAddress') {
-    if (!values) {
-      changeErrorMessage(messageTexts(localization.value)[`${name}Empty`], name)
-      return
-    }
-    if (!checkIfValidIP(values)) {
-      changeErrorMessage(
-        messageTexts(localization.value)[`${name}Invalid`],
-        name
-      )
-      return
-    }
-  }
-  if (name === 'subnetMask') {
-    if (!values) {
-      changeErrorMessage(messageTexts(localization.value)[`${name}Empty`], name)
-      return
-    }
-    if (!checkIfValidIP(values)) {
-      changeErrorMessage(
-        messageTexts(localization.value)[`${name}Invalid`],
-        name
-      )
-      return
-    }
-  }
-  if (name === 'defaultGateway' && override) {
-    if (!values) {
-      changeErrorMessage(messageTexts(localization.value)[`${name}Empty`], name)
-      return
-    }
-    if (!checkIfValidIP(values)) {
-      changeErrorMessage(
-        messageTexts(localization.value)[`${name}Invalid`],
-        name
-      )
-      return
-    }
-  }
-  changeErrorMessage('', name)
-}
-
-watch(
-  fieldsValues,
-  (newValues: UI_I_IpvFourSettingsFields) => {
-    setMessageOnChangedField(
-      newValues.ipv4Address,
-      'ipFourAddress',
-      newValues.ipv4Settings
-    )
-    setMessageOnChangedField(
-      newValues.subnetMask,
-      'subnetMask',
-      newValues.ipv4Settings
-    )
-    setMessageOnChangedField(
-      newValues.defaultGateway.value,
-      'defaultGateway',
-      newValues.ipv4Settings,
-      newValues.defaultGateway.checked
-    )
-    onChangeData(newValues)
-    !props.hasErrorMessages && onHideErrorMessageAlert()
-  },
-  { deep: true }
-)
-
-onMounted(() => {
-  onChangeData(fieldsValues.value)
-})
-
-onUnmounted(() => {
-  onHideErrorMessageAlert()
-})
-</script>
-
-<style scoped lang="scss">
-.ipv-four-settings {
-  width: 100%;
-}
-</style>