bfg-common 1.3.199 → 1.3.201

package/components/common/diagramMain/modals/editSettings/tabs/TrafficShaping.vue

@@ -1,522 +1,522 @@
-<template>
-  <div class="wizard-content__container">
-    <div class="wizard-content">
-      <atoms-alert
-        v-if="isShowErrorMessage"
-        status="alert-danger"
-        :items="validationMessagesArray"
-        @remove="onHideErrorMessageAlert"
-      />
-      <form id="traffic-shaping-form" action="">
-        <div class="horizontal-flex-container">
-          <span class="flex-property-label-group large">
-            {{ localization.status }}
-          </span>
-
-          <div class="flex-property-value-group overridable-dropdown">
-            <div class="horizontal-flex-container no-margin">
-              <div class="flex-property-value-group">
-                <div class="horizontal-flex-container">
-                  <div
-                    v-if="!props.isSwitch"
-                    class="flex-property-label-group small checkbox-inline"
-                  >
-                    <input
-                      id="status"
-                      v-model="fieldsValues.status.checked"
-                      type="checkbox"
-                    />
-                    <label for="status" class="normal-weight">
-                      {{ localization.override }}
-                    </label>
-                  </div>
-                  <div v-if="!props.isSwitch" class="flex-property-value-group">
-                    <div class="select">
-                      <select
-                        id="traffic-shaping-select"
-                        v-model="fieldsValues.status.selected"
-                        :disabled="!fieldsValues.status.checked"
-                        name="selectName"
-                      >
-                        <option :label="localization.enabled" value="1">
-                          {{ localization.enabled }}
-                        </option>
-                        <option :label="localization.disabled" value="0">
-                          {{ localization.disabled }}
-                        </option>
-                      </select>
-                    </div>
-                  </div>
-                  <div v-else class="flex-property-value-group">
-                    <div class="select">
-                      <select
-                        id="traffic-shaping-select"
-                        v-model.number="fieldsValues.status.selected"
-                        :disabled="!fieldsValues.status.checked"
-                        name="selectName"
-                      >
-                        <option :label="localization.enabled" value="1">
-                          {{ localization.enabled }}
-                        </option>
-                        <option :label="localization.disabled" value="0">
-                          {{ localization.disabled }}
-                        </option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="horizontal-flex-container">
-          <span class="flex-property-label-group large">
-            {{ localization.averageBandwidthKbit }}
-          </span>
-
-          <div class="flex-property-value-group">
-            <div class="horizontal-flex-container no-margin">
-              <div class="flex-property-value-group">
-                <div class="horizontal-flex-container">
-                  <div
-                    v-if="!props.isSwitch"
-                    class="flex-property-label-group small checkbox-inline dummy"
-                  >
-                    <input
-                      id="traffic-shaping-override-average-input"
-                      type="checkbox"
-                    />
-                    <label
-                      for="traffic-shaping-override-input"
-                      class="normal-weight"
-                    >
-                      {{ localization.override }}
-                    </label>
-                  </div>
-                  <div
-                    v-if="!props.isSwitch"
-                    class="property-value-group tooltip-field-container"
-                  >
-                    <atoms-tooltip-error
-                      :has-error="!!props.errorMessages.average"
-                    >
-                      <template #elem>
-                        <input
-                          id="average"
-                          v-model="fieldsValues.average"
-                          type="number"
-                          :disabled="
-                            !fieldsValues.status.checked ||
-                            fieldsValues.status.selected === '0'
-                          "
-                          name="average"
-                          :class="[
-                            'tooltip-field',
-                            {
-                              'danger-not-valid':
-                                fieldsValues.status.checked &&
-                                fieldsValues.status.selected !== '0' &&
-                                props.errorMessages.average,
-                            },
-                          ]"
-                          @click.stop
-                        />
-                      </template>
-                      <template #content>
-                        {{ props.errorMessages.average }}
-                      </template>
-                    </atoms-tooltip-error>
-                  </div>
-                  <div
-                    v-else
-                    class="property-value-group tooltip-field-container"
-                  >
-                    <atoms-tooltip-error
-                      :has-error="!!props.errorMessages.average"
-                    >
-                      <template #elem>
-                        <input
-                          id="average"
-                          v-model="fieldsValues.average"
-                          type="number"
-                          :disabled="
-                            !fieldsValues.status.checked ||
-                            fieldsValues.status.selected === 0
-                          "
-                          name="average"
-                          :class="[
-                            'tooltip-field',
-                            {
-                              'danger-not-valid':
-                                fieldsValues.status.checked &&
-                                fieldsValues.status.selected !== 0 &&
-                                props.errorMessages.average,
-                            },
-                          ]"
-                          @click.stop
-                        />
-                      </template>
-                      <template #content>
-                        {{ props.errorMessages.average }}
-                      </template>
-                    </atoms-tooltip-error>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="horizontal-flex-container">
-          <span class="flex-property-label-group large">
-            {{ localization.peakBandwidthKbit }}
-          </span>
-
-          <div class="flex-property-value-group">
-            <div class="horizontal-flex-container no-margin">
-              <div class="flex-property-value-group">
-                <div class="horizontal-flex-container">
-                  <div
-                    v-if="!props.isSwitch"
-                    class="flex-property-label-group small checkbox-inline dummy"
-                  >
-                    <input
-                      id="traffic-shaping-override-peak-input"
-                      type="checkbox"
-                    />
-                    <label
-                      for="traffic-shaping-override-peak-input"
-                      class="normal-weight"
-                    >
-                      {{ localization.override }}
-                    </label>
-                  </div>
-                  <div
-                    v-if="!props.isSwitch"
-                    class="property-value-group tooltip-field-container"
-                  >
-                    <atoms-tooltip-error
-                      :has-error="!!props.errorMessages.peak"
-                    >
-                      <template #elem>
-                        <input
-                          id="peak"
-                          v-model="fieldsValues.peak"
-                          type="number"
-                          :disabled="
-                            !fieldsValues.status.checked ||
-                            fieldsValues.status.selected === '0'
-                          "
-                          name="peak"
-                          :class="[
-                            'tooltip-field',
-                            {
-                              'danger-not-valid':
-                                fieldsValues.status.checked &&
-                                fieldsValues.status.selected !== '0' &&
-                                props.errorMessages.peak,
-                            },
-                          ]"
-                          @click.stop
-                        />
-                      </template>
-                      <template #content>
-                        {{ props.errorMessages.peak }}
-                      </template>
-                    </atoms-tooltip-error>
-                  </div>
-                  <div
-                    v-else
-                    class="property-value-group tooltip-field-container"
-                  >
-                    <atoms-tooltip-error
-                      :has-error="!!props.errorMessages.peak"
-                    >
-                      <template #elem>
-                        <input
-                          id="peak"
-                          v-model="fieldsValues.peak"
-                          type="number"
-                          :disabled="
-                            !fieldsValues.status.checked ||
-                            fieldsValues.status.selected === 0
-                          "
-                          name="peak"
-                          :class="[
-                            'tooltip-field',
-                            {
-                              'danger-not-valid':
-                                fieldsValues.status.checked &&
-                                fieldsValues.status.selected !== 0 &&
-                                props.errorMessages.peak,
-                            },
-                          ]"
-                          @click.stop
-                        />
-                      </template>
-                      <template #content>
-                        {{ props.errorMessages.peak }}
-                      </template>
-                    </atoms-tooltip-error>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="horizontal-flex-container">
-          <span class="flex-property-label-group large">
-            {{ localization.burstSizeKb }}
-          </span>
-
-          <div class="flex-property-value-group">
-            <div class="horizontal-flex-container no-margin">
-              <div class="flex-property-value-group">
-                <div class="horizontal-flex-container">
-                  <div
-                    v-if="!props.isSwitch"
-                    class="flex-property-label-group small checkbox-inline dummy"
-                  >
-                    <input
-                      id="traffic-shaping-override-burst-size-input"
-                      type="checkbox"
-                    />
-                    <label
-                      for="traffic-shaping-override-burst-size-input"
-                      class="normal-weight"
-                    >
-                      {{ localization.override }}
-                    </label>
-                  </div>
-                  <div
-                    v-if="!props.isSwitch"
-                    class="property-value-group tooltip-field-container"
-                  >
-                    <atoms-tooltip-error
-                      :has-error="!!props.errorMessages.burstSize"
-                    >
-                      <template #elem>
-                        <input
-                          id="burst-size"
-                          v-model="fieldsValues.burstSize"
-                          type="number"
-                          :disabled="
-                            !fieldsValues.status.checked ||
-                            fieldsValues.status.selected === '0'
-                          "
-                          name="burst-size"
-                          :class="[
-                            'tooltip-field',
-                            {
-                              'danger-not-valid':
-                                fieldsValues.status.checked &&
-                                fieldsValues.status.selected !== '0' &&
-                                props.errorMessages.burstSize,
-                            },
-                          ]"
-                          @click.stop
-                        />
-                      </template>
-                      <template #content>
-                        {{ props.errorMessages.burstSize }}
-                      </template>
-                    </atoms-tooltip-error>
-                  </div>
-                  <div
-                    v-else
-                    class="property-value-group tooltip-field-container"
-                  >
-                    <atoms-tooltip-error
-                      :has-error="!!props.errorMessages.burstSize"
-                    >
-                      <template #elem>
-                        <input
-                          id="burst-size"
-                          v-model="fieldsValues.burstSize"
-                          type="number"
-                          :disabled="
-                            !fieldsValues.status.checked ||
-                            fieldsValues.status.selected === 0
-                          "
-                          name="burst-size"
-                          :class="[
-                            'tooltip-field',
-                            {
-                              'danger-not-valid':
-                                fieldsValues.status.checked &&
-                                fieldsValues.status.selected !== 0 &&
-                                props.errorMessages.burstSize,
-                            },
-                          ]"
-                          @click.stop
-                        />
-                      </template>
-                      <template #content>
-                        {{ props.errorMessages.burstSize }}
-                      </template>
-                    </atoms-tooltip-error>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import {
-  UI_I_ModalsInitialData,
-  UI_I_TrafficShapingFields,
-  UI_I_EditSettingsErrorMessage,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import { UI_T_TrafficShapingFieldName } from '~/components/common/diagramMain/lib/models/types'
-import { validationMessagesArrayFunc } from '~/components/common/diagramMain/modals/lib/utils'
-import {
-  trafficShapingFieldsInitialFunc,
-  trafficShapingNetworkFieldsInitialFunc,
-} from '~/components/common/diagramMain/modals/lib/config'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    isShowErrorMessageAlert: boolean
-    initialData?: UI_I_ModalsInitialData
-    errorMessages: UI_I_EditSettingsErrorMessage
-    hasErrorMessages?: boolean
-    isSwitch: boolean
-  }>(),
-  {
-    initialData: () => ({}),
-    isSwitch: false,
-  }
-)
-
-const validationMessagesArray = computed(() =>
-  validationMessagesArrayFunc(
-    ['average', 'peak', 'burstSize'],
-    props.errorMessages
-  )
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// For showing component validation errors on the top of modal
-const isShowErrorMessage = computed<boolean>(
-  () => props.isShowErrorMessageAlert && props.hasErrorMessages
-)
-
-const fieldsValues = ref<UI_I_TrafficShapingFields>(
-  props.isSwitch
-    ? trafficShapingFieldsInitialFunc(props.isSwitch, props.initialData)
-    : trafficShapingNetworkFieldsInitialFunc(props.isSwitch, props.initialData)
-)
-
-// Validation
-const emits = defineEmits<{
-  (
-    event: 'change-error-messages',
-    errorMessage: string,
-    fieldName: keyof UI_I_EditSettingsErrorMessage
-  ): void
-  (event: 'hide-error-message-alert'): void
-  (
-    event: 'change-edit-traffic-shaping-data',
-    trafficShapingData: UI_I_TrafficShapingFields
-  ): void
-}>()
-
-const onHideErrorMessageAlert = (): void => emits('hide-error-message-alert')
-
-const onChangeData = (data: UI_I_TrafficShapingFields) =>
-  emits('change-edit-traffic-shaping-data', data)
-
-const messageTexts = (local: UI_I_Localization) => ({
-  average: local.averageInvalidError,
-  peak: local.peakInvalidError,
-  burstSize: local.burstSizeInvalidError,
-  averageBig: local.averageBigInvalidError,
-  peakBig: local.peakBigInvalidError,
-  burstSizeBig: local.burstSizeBigInvalidError,
-})
-
-const changeErrorMessage = (
-  errorMessage: string,
-  fieldName: keyof UI_I_EditSettingsErrorMessage
-) => emits('change-error-messages', errorMessage, fieldName)
-
-const MAX_BANDWIDTH = 9_007_199_254_740_991
-const setMessageOnChangedField = (
-  values: number[],
-  index: number,
-  name: UI_T_TrafficShapingFieldName,
-  text1: string,
-  text2: string
-): void => {
-  if (
-    !fieldsValues.value.status.checked ||
-    fieldsValues.value.status.selected === '0'
-  ) {
-    changeErrorMessage('', 'average')
-    changeErrorMessage('', 'peak')
-    changeErrorMessage('', 'burstSize')
-    return
-  }
-
-  if (values[index] >= 1 && values[index] <= MAX_BANDWIDTH) {
-    changeErrorMessage('', name)
-  } else if (values[index] < 1) {
-    changeErrorMessage(text1, name)
-  } else if (values[index] > MAX_BANDWIDTH) {
-    changeErrorMessage(text2, name)
-  }
-}
-
-watch(
-  fieldsValues,
-  (newFieldsValues: UI_I_TrafficShapingFields): void => {
-    const { average, peak, burstSize } = newFieldsValues
-    const arrayValues = [average, peak, burstSize]
-
-    setMessageOnChangedField(
-      arrayValues,
-      0,
-      'average',
-      messageTexts(localization.value).average,
-      messageTexts(localization.value).averageBig
-    )
-    setMessageOnChangedField(
-      arrayValues,
-      1,
-      'peak',
-      messageTexts(localization.value).peak,
-      messageTexts(localization.value).peakBig
-    )
-    setMessageOnChangedField(
-      arrayValues,
-      2,
-      'burstSize',
-      messageTexts(localization.value).burstSize,
-      messageTexts(localization.value).burstSizeBig
-    )
-
-    onChangeData(newFieldsValues)
-    !props.hasErrorMessages && onHideErrorMessageAlert()
-  },
-  {
-    deep: true,
-  }
-)
-
-onMounted(() => {
-  onChangeData(fieldsValues.value)
-})
-onUnmounted((): void => {
-  onHideErrorMessageAlert()
-})
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div class="wizard-content__container">
+    <div class="wizard-content">
+      <atoms-alert
+        v-if="isShowErrorMessage"
+        status="alert-danger"
+        :items="validationMessagesArray"
+        @remove="onHideErrorMessageAlert"
+      />
+      <form id="traffic-shaping-form" action="">
+        <div class="horizontal-flex-container">
+          <span class="flex-property-label-group large">
+            {{ localization.status }}
+          </span>
+
+          <div class="flex-property-value-group overridable-dropdown">
+            <div class="horizontal-flex-container no-margin">
+              <div class="flex-property-value-group">
+                <div class="horizontal-flex-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="flex-property-label-group small checkbox-inline"
+                  >
+                    <input
+                      id="status"
+                      v-model="fieldsValues.status.checked"
+                      type="checkbox"
+                    />
+                    <label for="status" class="normal-weight">
+                      {{ localization.override }}
+                    </label>
+                  </div>
+                  <div v-if="!props.isSwitch" class="flex-property-value-group">
+                    <div class="select">
+                      <select
+                        id="traffic-shaping-select"
+                        v-model="fieldsValues.status.selected"
+                        :disabled="!fieldsValues.status.checked"
+                        name="selectName"
+                      >
+                        <option :label="localization.enabled" value="1">
+                          {{ localization.enabled }}
+                        </option>
+                        <option :label="localization.disabled" value="0">
+                          {{ localization.disabled }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                  <div v-else class="flex-property-value-group">
+                    <div class="select">
+                      <select
+                        id="traffic-shaping-select"
+                        v-model.number="fieldsValues.status.selected"
+                        :disabled="!fieldsValues.status.checked"
+                        name="selectName"
+                      >
+                        <option :label="localization.enabled" value="1">
+                          {{ localization.enabled }}
+                        </option>
+                        <option :label="localization.disabled" value="0">
+                          {{ localization.disabled }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="horizontal-flex-container">
+          <span class="flex-property-label-group large">
+            {{ localization.averageBandwidthKbit }}
+          </span>
+
+          <div class="flex-property-value-group">
+            <div class="horizontal-flex-container no-margin">
+              <div class="flex-property-value-group">
+                <div class="horizontal-flex-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="flex-property-label-group small checkbox-inline dummy"
+                  >
+                    <input
+                      id="traffic-shaping-override-average-input"
+                      type="checkbox"
+                    />
+                    <label
+                      for="traffic-shaping-override-input"
+                      class="normal-weight"
+                    >
+                      {{ localization.override }}
+                    </label>
+                  </div>
+                  <div
+                    v-if="!props.isSwitch"
+                    class="property-value-group tooltip-field-container"
+                  >
+                    <atoms-tooltip-error
+                      :has-error="!!props.errorMessages.average"
+                    >
+                      <template #elem>
+                        <input
+                          id="average"
+                          v-model="fieldsValues.average"
+                          type="number"
+                          :disabled="
+                            !fieldsValues.status.checked ||
+                            fieldsValues.status.selected === '0'
+                          "
+                          name="average"
+                          :class="[
+                            'tooltip-field',
+                            {
+                              'danger-not-valid':
+                                fieldsValues.status.checked &&
+                                fieldsValues.status.selected !== '0' &&
+                                props.errorMessages.average,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.errorMessages.average }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </div>
+                  <div
+                    v-else
+                    class="property-value-group tooltip-field-container"
+                  >
+                    <atoms-tooltip-error
+                      :has-error="!!props.errorMessages.average"
+                    >
+                      <template #elem>
+                        <input
+                          id="average"
+                          v-model="fieldsValues.average"
+                          type="number"
+                          :disabled="
+                            !fieldsValues.status.checked ||
+                            fieldsValues.status.selected === 0
+                          "
+                          name="average"
+                          :class="[
+                            'tooltip-field',
+                            {
+                              'danger-not-valid':
+                                fieldsValues.status.checked &&
+                                fieldsValues.status.selected !== 0 &&
+                                props.errorMessages.average,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.errorMessages.average }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="horizontal-flex-container">
+          <span class="flex-property-label-group large">
+            {{ localization.peakBandwidthKbit }}
+          </span>
+
+          <div class="flex-property-value-group">
+            <div class="horizontal-flex-container no-margin">
+              <div class="flex-property-value-group">
+                <div class="horizontal-flex-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="flex-property-label-group small checkbox-inline dummy"
+                  >
+                    <input
+                      id="traffic-shaping-override-peak-input"
+                      type="checkbox"
+                    />
+                    <label
+                      for="traffic-shaping-override-peak-input"
+                      class="normal-weight"
+                    >
+                      {{ localization.override }}
+                    </label>
+                  </div>
+                  <div
+                    v-if="!props.isSwitch"
+                    class="property-value-group tooltip-field-container"
+                  >
+                    <atoms-tooltip-error
+                      :has-error="!!props.errorMessages.peak"
+                    >
+                      <template #elem>
+                        <input
+                          id="peak"
+                          v-model="fieldsValues.peak"
+                          type="number"
+                          :disabled="
+                            !fieldsValues.status.checked ||
+                            fieldsValues.status.selected === '0'
+                          "
+                          name="peak"
+                          :class="[
+                            'tooltip-field',
+                            {
+                              'danger-not-valid':
+                                fieldsValues.status.checked &&
+                                fieldsValues.status.selected !== '0' &&
+                                props.errorMessages.peak,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.errorMessages.peak }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </div>
+                  <div
+                    v-else
+                    class="property-value-group tooltip-field-container"
+                  >
+                    <atoms-tooltip-error
+                      :has-error="!!props.errorMessages.peak"
+                    >
+                      <template #elem>
+                        <input
+                          id="peak"
+                          v-model="fieldsValues.peak"
+                          type="number"
+                          :disabled="
+                            !fieldsValues.status.checked ||
+                            fieldsValues.status.selected === 0
+                          "
+                          name="peak"
+                          :class="[
+                            'tooltip-field',
+                            {
+                              'danger-not-valid':
+                                fieldsValues.status.checked &&
+                                fieldsValues.status.selected !== 0 &&
+                                props.errorMessages.peak,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.errorMessages.peak }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="horizontal-flex-container">
+          <span class="flex-property-label-group large">
+            {{ localization.burstSizeKb }}
+          </span>
+
+          <div class="flex-property-value-group">
+            <div class="horizontal-flex-container no-margin">
+              <div class="flex-property-value-group">
+                <div class="horizontal-flex-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="flex-property-label-group small checkbox-inline dummy"
+                  >
+                    <input
+                      id="traffic-shaping-override-burst-size-input"
+                      type="checkbox"
+                    />
+                    <label
+                      for="traffic-shaping-override-burst-size-input"
+                      class="normal-weight"
+                    >
+                      {{ localization.override }}
+                    </label>
+                  </div>
+                  <div
+                    v-if="!props.isSwitch"
+                    class="property-value-group tooltip-field-container"
+                  >
+                    <atoms-tooltip-error
+                      :has-error="!!props.errorMessages.burstSize"
+                    >
+                      <template #elem>
+                        <input
+                          id="burst-size"
+                          v-model="fieldsValues.burstSize"
+                          type="number"
+                          :disabled="
+                            !fieldsValues.status.checked ||
+                            fieldsValues.status.selected === '0'
+                          "
+                          name="burst-size"
+                          :class="[
+                            'tooltip-field',
+                            {
+                              'danger-not-valid':
+                                fieldsValues.status.checked &&
+                                fieldsValues.status.selected !== '0' &&
+                                props.errorMessages.burstSize,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.errorMessages.burstSize }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </div>
+                  <div
+                    v-else
+                    class="property-value-group tooltip-field-container"
+                  >
+                    <atoms-tooltip-error
+                      :has-error="!!props.errorMessages.burstSize"
+                    >
+                      <template #elem>
+                        <input
+                          id="burst-size"
+                          v-model="fieldsValues.burstSize"
+                          type="number"
+                          :disabled="
+                            !fieldsValues.status.checked ||
+                            fieldsValues.status.selected === 0
+                          "
+                          name="burst-size"
+                          :class="[
+                            'tooltip-field',
+                            {
+                              'danger-not-valid':
+                                fieldsValues.status.checked &&
+                                fieldsValues.status.selected !== 0 &&
+                                props.errorMessages.burstSize,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.errorMessages.burstSize }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  UI_I_ModalsInitialData,
+  UI_I_TrafficShapingFields,
+  UI_I_EditSettingsErrorMessage,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import { UI_T_TrafficShapingFieldName } from '~/components/common/diagramMain/lib/models/types'
+import { validationMessagesArrayFunc } from '~/components/common/diagramMain/modals/lib/utils'
+import {
+  trafficShapingFieldsInitialFunc,
+  trafficShapingNetworkFieldsInitialFunc,
+} from '~/components/common/diagramMain/modals/lib/config'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    isShowErrorMessageAlert: boolean
+    initialData?: UI_I_ModalsInitialData
+    errorMessages: UI_I_EditSettingsErrorMessage
+    hasErrorMessages?: boolean
+    isSwitch: boolean
+  }>(),
+  {
+    initialData: () => ({}),
+    isSwitch: false,
+  }
+)
+
+const validationMessagesArray = computed(() =>
+  validationMessagesArrayFunc(
+    ['average', 'peak', 'burstSize'],
+    props.errorMessages
+  )
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// For showing component validation errors on the top of modal
+const isShowErrorMessage = computed<boolean>(
+  () => props.isShowErrorMessageAlert && props.hasErrorMessages
+)
+
+const fieldsValues = ref<UI_I_TrafficShapingFields>(
+  props.isSwitch
+    ? trafficShapingFieldsInitialFunc(props.isSwitch, props.initialData)
+    : trafficShapingNetworkFieldsInitialFunc(props.isSwitch, props.initialData)
+)
+
+// Validation
+const emits = defineEmits<{
+  (
+    event: 'change-error-messages',
+    errorMessage: string,
+    fieldName: keyof UI_I_EditSettingsErrorMessage
+  ): void
+  (event: 'hide-error-message-alert'): void
+  (
+    event: 'change-edit-traffic-shaping-data',
+    trafficShapingData: UI_I_TrafficShapingFields
+  ): void
+}>()
+
+const onHideErrorMessageAlert = (): void => emits('hide-error-message-alert')
+
+const onChangeData = (data: UI_I_TrafficShapingFields) =>
+  emits('change-edit-traffic-shaping-data', data)
+
+const messageTexts = (local: UI_I_Localization) => ({
+  average: local.averageInvalidError,
+  peak: local.peakInvalidError,
+  burstSize: local.burstSizeInvalidError,
+  averageBig: local.averageBigInvalidError,
+  peakBig: local.peakBigInvalidError,
+  burstSizeBig: local.burstSizeBigInvalidError,
+})
+
+const changeErrorMessage = (
+  errorMessage: string,
+  fieldName: keyof UI_I_EditSettingsErrorMessage
+) => emits('change-error-messages', errorMessage, fieldName)
+
+const MAX_BANDWIDTH = 9_007_199_254_740_991
+const setMessageOnChangedField = (
+  values: number[],
+  index: number,
+  name: UI_T_TrafficShapingFieldName,
+  text1: string,
+  text2: string
+): void => {
+  if (
+    !fieldsValues.value.status.checked ||
+    fieldsValues.value.status.selected === '0'
+  ) {
+    changeErrorMessage('', 'average')
+    changeErrorMessage('', 'peak')
+    changeErrorMessage('', 'burstSize')
+    return
+  }
+
+  if (values[index] >= 1 && values[index] <= MAX_BANDWIDTH) {
+    changeErrorMessage('', name)
+  } else if (values[index] < 1) {
+    changeErrorMessage(text1, name)
+  } else if (values[index] > MAX_BANDWIDTH) {
+    changeErrorMessage(text2, name)
+  }
+}
+
+watch(
+  fieldsValues,
+  (newFieldsValues: UI_I_TrafficShapingFields): void => {
+    const { average, peak, burstSize } = newFieldsValues
+    const arrayValues = [average, peak, burstSize]
+
+    setMessageOnChangedField(
+      arrayValues,
+      0,
+      'average',
+      messageTexts(localization.value).average,
+      messageTexts(localization.value).averageBig
+    )
+    setMessageOnChangedField(
+      arrayValues,
+      1,
+      'peak',
+      messageTexts(localization.value).peak,
+      messageTexts(localization.value).peakBig
+    )
+    setMessageOnChangedField(
+      arrayValues,
+      2,
+      'burstSize',
+      messageTexts(localization.value).burstSize,
+      messageTexts(localization.value).burstSizeBig
+    )
+
+    onChangeData(newFieldsValues)
+    !props.hasErrorMessages && onHideErrorMessageAlert()
+  },
+  {
+    deep: true,
+  }
+)
+
+onMounted(() => {
+  onChangeData(fieldsValues.value)
+})
+onUnmounted((): void => {
+  onHideErrorMessageAlert()
+})
+</script>
+
+<style scoped lang="scss"></style>