bfg-common 1.5.869 → 1.5.871

package/components/common/wizards/network/add/steps/ipFourSettings/IpFourSettings.vue

@@ -1,144 +1,144 @@
-<template>
-  <component
-    :is="currentComponent"
-    v-model="fields"
-    :messages-fields="props.messagesFields"
-    :alert-messages="props.alertMessages"
-    @hide-alert="onHideAlert"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
-import type {
-  UI_I_ArbitraryObject,
-  UI_I_Localization,
-} from '~/lib/models/interfaces'
-import type {
-  UI_I_IpFourSettings,
-  UI_I_TCPStack,
-} from '~/components/common/wizards/network/add/lib/models/interfaces'
-import {
-  removeIpFourSettingsValidationLocal,
-  validateAddressIpFourSettingsLocal,
-  validateGatewayIpFourSettingsLocal,
-  validateMaskIpFourSettingsLocal,
-} from '~/components/common/wizards/network/add/validations/validations'
-import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/lib/models/enums'
-
-const props = defineProps<{
-  wizard: Wizard
-  ipFourSettings: UI_I_IpFourSettings
-  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-  alertMessages: string[]
-  tcp: string
-  gatewayFlag: boolean
-  tcpStacks?: UI_I_TCPStack[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'change-ip-four-settings', ipFourSettings: UI_I_IpFourSettings): void
-  (event: 'change-gateway-flag', value: boolean): void
-  (event: 'hide-alert', stepId: 4): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./IpFourSettingsNew.vue'))
-    : defineAsyncComponent(() => import('./IpFourSettingsOld.vue'))
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const fields = ref<UI_I_IpFourSettings>(useDeepCopy(props.ipFourSettings))
-
-let oldFields = useDeepCopy(fields.value)
-
-watch(
-  fields,
-  (newFields: UI_I_IpFourSettings) => {
-    if (newFields.ipSettings === '1') {
-      ;(oldFields.ipSettings === '0' ||
-        oldFields.static.ipFourAddress !== newFields.static.ipFourAddress) &&
-        validateAddressIpFourSettingsLocal(
-          localization.value,
-          newFields,
-          props.wizard
-        )
-      ;(oldFields.ipSettings === '0' ||
-        oldFields.static.subnetMask !== newFields.static.subnetMask) &&
-        validateMaskIpFourSettingsLocal(
-          localization.value,
-          newFields,
-          props.wizard
-        )
-
-      const isGatewayChanged =
-        newFields.static.defaultGateway &&
-        oldFields.static.defaultGateway.value !==
-          newFields.static.defaultGateway.value
-
-      emits('change-gateway-flag', true)
-
-      if (
-        oldFields.static.defaultGateway.override &&
-        !newFields.static.defaultGateway.override
-      ) {
-        fields.value.static.defaultGateway.value = props.tcpStacks.find(
-          (tcp: UI_I_TCPStack) => tcp.id === props.tcp
-        ).gateway
-        props.wizard.removeValidationLocal(
-          4,
-          UI_E_ValidationFields.IPV_SETTINGS_GATEWAY
-        )
-      }
-
-      ;(oldFields.ipSettings === '0' || isGatewayChanged) &&
-        validateGatewayIpFourSettingsLocal(
-          localization.value,
-          newFields,
-          props.wizard
-        )
-    } else {
-      removeIpFourSettingsValidationLocal(props.wizard)
-    }
-
-    oldFields = useDeepCopy(fields.value)
-
-    emits('change-ip-four-settings', newFields)
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.tcpStacks,
-  (newValue: UI_I_TCPStack[]) => {
-    if (fields.value.static.defaultGateway.value === '') {
-      fields.value.static.defaultGateway.value = newValue?.[0]?.gateway || ''
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => props.tcp,
-  (newValue: string) => {
-    if (newValue && !props.gatewayFlag) {
-      fields.value.static.defaultGateway.value = props.tcpStacks.find(
-        (tcp: UI_I_TCPStack) => tcp.id === newValue
-      ).gateway
-    }
-  },
-  { immediate: true }
-)
-
-const onHideAlert = (): void => {
-  emits('hide-alert', 4)
-}
-</script>
-<style lang="scss" scoped></style>
+<template>
+  <component
+    :is="currentComponent"
+    v-model="fields"
+    :messages-fields="props.messagesFields"
+    :alert-messages="props.alertMessages"
+    @hide-alert="onHideAlert"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_IpFourSettings,
+  UI_I_TCPStack,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import {
+  removeIpFourSettingsValidationLocal,
+  validateAddressIpFourSettingsLocal,
+  validateGatewayIpFourSettingsLocal,
+  validateMaskIpFourSettingsLocal,
+} from '~/components/common/wizards/network/add/validations/validations'
+import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/lib/models/enums'
+
+const props = defineProps<{
+  wizard: Wizard
+  ipFourSettings: UI_I_IpFourSettings
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+  alertMessages: string[]
+  tcp: string
+  gatewayFlag: boolean
+  tcpStacks?: UI_I_TCPStack[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'change-ip-four-settings', ipFourSettings: UI_I_IpFourSettings): void
+  (event: 'change-gateway-flag', value: boolean): void
+  (event: 'hide-alert', stepId: 4): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./IpFourSettingsNew.vue'))
+    : defineAsyncComponent(() => import('./IpFourSettingsOld.vue'))
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const fields = ref<UI_I_IpFourSettings>(useDeepCopy(props.ipFourSettings))
+
+let oldFields = useDeepCopy(fields.value)
+
+watch(
+  fields,
+  (newFields: UI_I_IpFourSettings) => {
+    if (newFields.ipSettings === '1') {
+      ;(oldFields.ipSettings === '0' ||
+        oldFields.static.ipFourAddress !== newFields.static.ipFourAddress) &&
+        validateAddressIpFourSettingsLocal(
+          localization.value,
+          newFields,
+          props.wizard
+        )
+      ;(oldFields.ipSettings === '0' ||
+        oldFields.static.subnetMask !== newFields.static.subnetMask) &&
+        validateMaskIpFourSettingsLocal(
+          localization.value,
+          newFields,
+          props.wizard
+        )
+
+      const isGatewayChanged =
+        newFields.static.defaultGateway &&
+        oldFields.static.defaultGateway.value !==
+          newFields.static.defaultGateway.value
+
+      emits('change-gateway-flag', true)
+
+      if (
+        oldFields.static.defaultGateway.override &&
+        !newFields.static.defaultGateway.override
+      ) {
+        fields.value.static.defaultGateway.value = props.tcpStacks.find(
+          (tcp: UI_I_TCPStack) => tcp.id === props.tcp
+        ).gateway
+        props.wizard.removeValidationLocal(
+          4,
+          UI_E_ValidationFields.IPV_SETTINGS_GATEWAY
+        )
+      }
+
+      ;(oldFields.ipSettings === '0' || isGatewayChanged) &&
+        validateGatewayIpFourSettingsLocal(
+          localization.value,
+          newFields,
+          props.wizard
+        )
+    } else {
+      removeIpFourSettingsValidationLocal(props.wizard)
+    }
+
+    oldFields = useDeepCopy(fields.value)
+
+    emits('change-ip-four-settings', newFields)
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.tcpStacks,
+  (newValue: UI_I_TCPStack[]) => {
+    if (fields.value.static.defaultGateway.value === '') {
+      fields.value.static.defaultGateway.value = newValue?.[0]?.gateway || ''
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.tcp,
+  (newValue: string) => {
+    if (newValue && !props.gatewayFlag) {
+      fields.value.static.defaultGateway.value = props.tcpStacks.find(
+        (tcp: UI_I_TCPStack) => tcp.id === newValue
+      ).gateway
+    }
+  },
+  { immediate: true }
+)
+
+const onHideAlert = (): void => {
+  emits('hide-alert', 4)
+}
+</script>
+<style lang="scss" scoped></style>

package/components/common/wizards/network/add/steps/ipFourSettings/IpFourSettingsNew.vue

@@ -76,17 +76,35 @@
           {{ localization.common.defaultGateway }}
         </h4>
         <div class="col-right pt-2">
-          <ui-checkbox
+          <ui-tooltip
             id="default-gateway-override-input"
-            v-model="fields.static.defaultGateway.override"
-            class="mb-3"
-            :label-text="
-              localization.common.overrideDefaultGatewayForThisAdapter
-            "
-            :disabled="fields.ipSettings === '0'"
-            test-id="default-gateway-override-input"
+            test-id="default-gateway-override-input-tooltip"
             size="md"
-          />
+            position="bottom"
+            position-by-tooltip="center"
+            show-type="variant-1"
+            timing="660"
+            width="214"
+          >
+            <template #target>
+              <ui-checkbox
+                id="default-gateway-override-input"
+                v-model="fields.static.defaultGateway.override"
+                class="mb-3"
+                :label-text="
+                  localization.common.overrideDefaultGatewayForThisAdapter
+                "
+                :disabled="fields.ipSettings === '0'"
+                test-id="default-gateway-override-input"
+                size="md"
+              />
+            </template>
+            <template #content>
+              <div class="tooltip-text">
+                {{ localization.common.overrideDefaultGatewayForThisAdapter }}
+              </div>
+            </template>
+          </ui-tooltip>
           <ui-input
             id="default-gateway-input"
             v-model="fields.static.defaultGateway.value"
@@ -197,6 +215,9 @@ const fields = computed({
     &-left {
       padding-top: 8px;
       width: calc((100% - 8px) / 3);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
     &-right {
@@ -213,6 +234,10 @@ const fields = computed({
   }
 }
 
+:deep(input[type='radio'] ~ .radio-label .radio-label__text) {
+  padding-top: 1px;
+}
+
 @media (max-width: 896px) {
   .radio-container {
     display: flex;
@@ -221,4 +246,18 @@ const fields = computed({
     margin: 16px 0;
   }
 }
+:deep(.ui-checkbox-label) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .ui-checkbox-label-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+.tooltip-text {
+  word-wrap: break-word;
+}
 </style>