bfg-common 1.6.76 → 1.6.77

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

@@ -1,388 +0,0 @@
-<template>
-  <div class="content">
-    <div class="content-fields">
-      <div class="content-fields-title">
-        {{ localization.common.ipV4Settings }}
-      </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="ipv-four-settings-alert"
-            size="md"
-            @hide="onHideMessage(messageObject.key)"
-          />
-        </div>
-      </div>
-
-      <div class="content-fields-block">
-        <div class="radio-container">
-          <div
-            :class="[
-              'radio-block',
-              { selected: fieldsValues.ipv4Settings === '0' },
-            ]"
-            @click="fieldsValues.ipv4Settings = '0'"
-          >
-            <ui-radio
-              v-model="fieldsValues.ipv4Settings"
-              :label="localization.common.obtainIPv4SettingsAutomatically"
-              value="0"
-              test-id="obtain-ipv-settings-automatically-radio"
-              size="md"
-            />
-          </div>
-          <div
-            :class="[
-              'radio-block',
-              { selected: fieldsValues.ipv4Settings === '1' },
-            ]"
-            @click="fieldsValues.ipv4Settings = '1'"
-          >
-            <ui-radio
-              v-model="fieldsValues.ipv4Settings"
-              :label="localization.common.useStaticIPv4Settings"
-              value="1"
-              test-id="use-static-ipv-settings-radio"
-              size="md"
-            />
-          </div>
-        </div>
-
-        <ui-line margin="16px 0" />
-
-        <div class="col">
-          <h4
-            :class="[
-              'content-subtitle col-left',
-              { disabled: fieldsValues.ipv4Settings === '0' },
-            ]"
-          >
-            {{ localization.common.ipv4address }}
-          </h4>
-          <div class="col-right">
-            <ui-input
-              id="port-properties-network"
-              v-model="fieldsValues.ipv4Address"
-              test-id="port-properties-network"
-              type="text"
-              placeholder="e.g. 192.168.1.1"
-              size="md"
-              :disabled="fieldsValues.ipv4Settings === '0'"
-              :error="props.errorMessages.ipFourAddress"
-            />
-          </div>
-        </div>
-
-        <ui-line margin="16px 0" />
-
-        <div class="col">
-          <h4
-            :class="[
-              'content-subtitle col-left',
-              { disabled: fieldsValues.ipv4Settings === '0' },
-            ]"
-          >
-            {{ localization.common.subnetMask }}
-          </h4>
-          <div class="col-right">
-            <ui-input
-              id="subnet-mask"
-              v-model="fieldsValues.subnetMask"
-              test-id="subnet-mask"
-              type="text"
-              placeholder="e.g. 255.255.255.0"
-              size="md"
-              :disabled="fieldsValues.ipv4Settings === '0'"
-              :error="props.errorMessages.subnetMask"
-            />
-          </div>
-        </div>
-
-        <ui-line margin="16px 0" />
-
-        <div class="col">
-          <h4
-            :class="[
-              'content-subtitle col-left without-padding',
-              {
-                disabled: fieldsValues.ipv4Settings === '0',
-              },
-            ]"
-          >
-            {{ localization.common.defaultGateway }}
-          </h4>
-          <div class="col-right">
-            <div class="field-checkbox">
-              <ui-checkbox
-                v-model="fieldsValues.defaultGateway.checked"
-                test-id="default-gateway-checkbox"
-                :label-text="
-                  localization.common.overrideDefaultGatewayForThisAdapter
-                "
-                size="md"
-                :disabled="fieldsValues.ipv4Settings === '0'"
-              />
-            </div>
-            <ui-input
-              id="default-gateway"
-              v-model="fieldsValues.defaultGateway.value"
-              test-id="default-gateway"
-              type="text"
-              placeholder="10.10.101.1"
-              size="md"
-              :disabled="
-                !fieldsValues.defaultGateway.checked ||
-                fieldsValues.ipv4Settings === '0'
-              "
-              :error="props.errorMessages.defaultGateway"
-            />
-          </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_IpvFourSettingsFields,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import { validationMessagesArrayNewFunc } from '~/components/common/diagramMain/modals/lib/utils'
-
-const props = defineProps<{
-  isShowErrorMessage: boolean
-  errorMessages: UI_I_EditSettingsErrorMessage
-  flagSendData: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide-error-message-alert'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const fieldsValues = defineModel<UI_I_IpvFourSettingsFields>()
-
-const keys = ref<keyof UI_I_EditSettingsErrorMessage>([
-  'ipFourAddress',
-  'subnetMask',
-  'defaultGateway',
-])
-
-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 = ['ipFourAddress', 'subnetMask', 'defaultGateway']
-  }
-}
-
-watch(
-  () => props.flagSendData,
-  () => {
-    keys.value = ['ipFourAddress', 'subnetMask', 'defaultGateway']
-  }
-)
-</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;
-
-      &.without-padding {
-        padding-top: 0;
-      }
-
-      &.disabled {
-        color: var(--btn-text-disabled-color);
-      }
-    }
-
-    &-right {
-      width: calc(((100% - 8px) / 3) * 2);
-
-      &.input {
-        max-width: 400px;
-      }
-
-      &.combobox {
-        max-width: 200px;
-      }
-
-      .field-checkbox {
-        margin-bottom: 16px;
-      }
-    }
-  }
-
-  &-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;
-        }
-      }
-    }
-  }
-}
-
-:root.dark-theme {
-  .radio-block:not(.selected).disabled {
-    background-color: #1b2a371f;
-    opacity: unset;
-  }
-}
-.radio-block {
-  width: 100%;
-  background-color: var(--radio-block-bg-color);
-  box-shadow: inset 0 0 0 1px var(--radio-block-border-color);
-  transition: box-shadow 0.1s ease-in-out;
-  padding: 12px;
-  border-radius: 8px;
-
-  &:not(.selected):not(.disabled) {
-    &:hover {
-      box-shadow: inset 0 0 0 1px var(--radio-block-border-hover-color);
-    }
-  }
-
-  &:not(.disabled) {
-    cursor: pointer;
-  }
-
-  &:not(.selected).disabled {
-    background-color: #ffffff;
-    opacity: 0.6;
-  }
-
-  &.selected {
-    background-color: var(--radio-block-selected-bg-color);
-    box-shadow: inset 0 0 0 1.5px var(--radio-block-selected-border-color);
-  }
-}
-
-.radio-container {
-  display: flex;
-  column-gap: 12px;
-}
-
-@media (max-width: 896px) {
-  .radio-container:not(.radio-container-three) {
-    display: flex;
-    flex-direction: column;
-    row-gap: 12px;
-    margin: 16px 0;
-  }
-}
-
-:deep(.ui-checkbox-label.md) {
-  height: unset;
-}
-</style>

package/components/common/diagramMain/modals/editSettings/tabs/port/portProperties/PortProperties.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="port-properties">
-    <component
-      :is="currentComponent"
-      v-model="fieldsValues"
-      :port-properties-enabled-services="portPropertiesEnabledServices"
-      :is-show-error-message="isShowErrorMessage"
-      :error-messages="props.errorMessages"
-      @hide-error-message-alert="onHideErrorMessageAlert"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_PortPropertiesFields,
-  UI_I_ModalsInitialData,
-  UI_I_EditSettingsErrorMessage,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_PortPropertiesFieldName } from '~/components/common/diagramMain/lib/models/types'
-import { portPropertiesEnabledServicesFunc } from '~/components/common/diagramMain/modals/lib/config'
-
-const props = withDefaults(
-  defineProps<{
-    isShowErrorMessageAlert: boolean | boolean[]
-    errorMessages: UI_I_EditSettingsErrorMessage
-    initialData?: UI_I_ModalsInitialData
-    hasErrorMessages?: boolean
-  }>(),
-  {
-    initialData: () => ({}),
-    hasErrorMessages: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (
-    event: 'change-error-messages',
-    errorMessage: string,
-    fieldName: keyof UI_I_EditSettingsErrorMessage
-  ): void
-  (event: 'hide-error-message-alert'): void
-  (
-    event: 'change-port-edit-properties-data',
-    newPortEditPropertiesData: UI_I_PortPropertiesFields
-  ): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./PortPropertiesNew.vue'))
-    : defineAsyncComponent(() => import('./PortPropertiesOld.vue'))
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const portPropertiesEnabledServices = computed(() =>
-  portPropertiesEnabledServicesFunc(localization.value)
-)
-
-const isShowErrorMessage = computed<boolean>(
-  () =>
-    props.hasErrorMessages &&
-    (isNewView.value
-      ? props.isShowErrorMessageAlert[0]
-      : props.isShowErrorMessageAlert)
-)
-
-const fieldsValues = ref<UI_I_PortPropertiesFields>(
-  useDeepCopy({
-    tcpIp: props.initialData.tcpIp,
-    mtu: props.initialData.mtu,
-    services: props.initialData.services,
-  }) as UI_I_PortPropertiesFields
-)
-
-const onHideErrorMessageAlert = (): void => emits('hide-error-message-alert')
-
-const onChangeData = (data: UI_I_PortPropertiesFields): void =>
-  emits('change-port-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) => ({
-  mtu: local.common.mtuInvalidError,
-})
-
-const setMessageOnChangedField = (
-  values: number[],
-  index: number,
-  name: UI_T_PortPropertiesFieldName,
-  text: string
-) => {
-  if (values[index] >= 1280 && values[index] <= 65535) {
-    changeErrorMessage('', name)
-  } else {
-    changeErrorMessage(text, name)
-  }
-}
-
-watch(
-  fieldsValues,
-  (newValues: UI_I_PortPropertiesFields): void => {
-    setMessageOnChangedField(
-      [newValues.mtu],
-      0,
-      'mtu',
-      messageTexts(localization.value).mtu
-    )
-    onChangeData(newValues)
-    !props.hasErrorMessages && onHideErrorMessageAlert()
-  },
-  {
-    deep: true,
-  }
-)
-
-onMounted(() => {
-  onChangeData(fieldsValues.value)
-})
-
-onUnmounted((): void => {
-  onHideErrorMessageAlert()
-})
-</script>
-
-<style scoped lang="scss">
-.port-properties {
-  width: 100%;
-}
-</style>