bfg-common 1.6.76 → 1.6.77

package/components/common/diagramMain/modals/editSettings/tabs/trafficShaping/TrafficShapingNew.vue

@@ -1,348 +0,0 @@
-<template>
-  <div class="content">
-    <div class="content-fields">
-      <div class="content-fields-title">
-        {{ localization.common.trafficShaping }}
-      </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="traffic-shaping-alert"
-            size="md"
-            @hide="onHideMessage(messageObject.key)"
-          />
-        </div>
-      </div>
-
-      <div class="content-fields-block">
-        <div class="col">
-          <h4
-            :class="[
-              'content-subtitle col-left text',
-              {
-                'without-padding': !props.isSwitch,
-              },
-            ]"
-          >
-            {{ localization.common.status }}
-          </h4>
-          <div
-            :class="[
-              'col-right text',
-              {
-                'without-padding': !props.isSwitch,
-              },
-            ]"
-          >
-            <div v-if="!props.isSwitch" class="field-checkbox">
-              <ui-checkbox
-                v-model="fieldsValues.status.checked"
-                test-id="status-input"
-                :label-text="localization.common.override"
-                size="md"
-              />
-            </div>
-
-            <ui-switch
-              v-model="status"
-              test-id="traffic-shaping-select"
-              :disabled="!fieldsValues.status.checked"
-            />
-          </div>
-        </div>
-
-        <ui-line margin="16px 0" />
-
-        <div class="col">
-          <h4 class="content-subtitle col-left">
-            {{ localization.common.averageBandwidthKbit }}
-          </h4>
-          <div class="col-right combobox">
-            <ui-input
-              id="average-input"
-              v-model="fieldsValues.average"
-              test-id="average-input"
-              type="number"
-              :placeholder="localization.common.kbitS"
-              size="md"
-              error-type="tooltip"
-              :error="
-                fieldsValues.status.checked &&
-                fieldsValues.status.selected !== 0 &&
-                props.errorMessages.average
-              "
-              :disabled="
-                !fieldsValues.status.checked ||
-                fieldsValues.status.selected === 0
-              "
-            />
-          </div>
-        </div>
-
-        <ui-line margin="16px 0" />
-
-        <div class="col">
-          <h4 class="content-subtitle col-left">
-            {{ localization.common.peakBandwidthKbit }}
-          </h4>
-          <div class="col-right combobox">
-            <ui-input
-              id="peak-input"
-              v-model="fieldsValues.peak"
-              test-id="peak-input"
-              type="number"
-              :placeholder="localization.common.kbitS"
-              size="md"
-              error-type="tooltip"
-              :error="
-                fieldsValues.status.checked &&
-                fieldsValues.status.selected !== 0 &&
-                props.errorMessages.peak
-              "
-              :disabled="
-                !fieldsValues.status.checked ||
-                fieldsValues.status.selected === 0
-              "
-            />
-          </div>
-        </div>
-
-        <ui-line margin="16px 0" />
-
-        <div class="col">
-          <h4 class="content-subtitle col-left">
-            {{ localization.common.burstSizeKb }}
-          </h4>
-          <div class="col-right combobox">
-            <ui-input
-              id="burst-input"
-              v-model="fieldsValues.burstSize"
-              test-id="burst-input"
-              type="number"
-              :placeholder="localization.common.kb"
-              size="md"
-              error-type="tooltip"
-              :error="
-                fieldsValues.status.checked &&
-                fieldsValues.status.selected !== 0 &&
-                props.errorMessages.burstSize
-              "
-              :disabled="
-                !fieldsValues.status.checked ||
-                fieldsValues.status.selected === 0
-              "
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_TrafficShapingFields,
-  UI_I_EditSettingsErrorMessage,
-} 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
-  isSwitch: boolean
-  flagSendData: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide-error-message-alert'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const fieldsValues = defineModel<UI_I_TrafficShapingFields>()
-
-const status = computed({
-  get() {
-    return !!fieldsValues.value.status.selected
-  },
-  set(newValue) {
-    fieldsValues.value.status.selected = Number(newValue)
-  },
-})
-
-const keys = ref<keyof UI_I_EditSettingsErrorMessage>([
-  'average',
-  'peak',
-  'burstSize',
-])
-
-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 = ['average', 'peak', 'burstSize']
-  }
-}
-
-watch(
-  () => props.flagSendData,
-  () => {
-    keys.value = ['average', 'peak', 'burstSize']
-  }
-)
-</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;
-
-      &.text {
-        padding: 8px 0;
-        line-height: 20px;
-      }
-
-      &.without-padding {
-        padding: 0;
-      }
-    }
-
-    &-right {
-      width: calc(((100% - 8px) / 3) * 2);
-
-      &.text {
-        padding: 8px 0;
-        max-width: 400px;
-        line-height: 20px;
-      }
-
-      &.combobox {
-        max-width: 200px;
-      }
-
-      .field-checkbox {
-        margin-bottom: 16px;
-      }
-
-      &.without-padding {
-        padding: 0;
-      }
-    }
-  }
-
-  &-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%;
-
-        &.text {
-          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%;
-
-        &.text {
-          max-width: 400px;
-        }
-
-        &.combobox {
-          max-width: 200px;
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1,31 +0,0 @@
-<template>
-  <div class="diagram-header-skeleton">
-    <div class="diagram-header-skeleton-title">
-      <ui-skeleton-item width="160" height="22" />
-    </div>
-    <div class="diagram-header-skeleton-buttons">
-      <ui-skeleton-item width="112" height="36" border-radius="8" />
-      <ui-skeleton-item width="160" height="36" border-radius="8" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.diagram-header-skeleton {
-  padding: 16px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  row-gap: 24px;
-  column-gap: 24px;
-
-  &-buttons {
-    display: flex;
-    column-gap: 16px;
-    margin-left: auto;
-  }
-}
-</style>

package/components/common/diagramMain/skeleton/Switch.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="diagram-skeleton">
-    <div class="diagram-skeleton-item-header">
-      <div class="diagram-skeleton-item-header-icon">
-        <ui-icon
-          class="diagram-skeleton-item-header-icon-arrow"
-          name="arrow"
-          width="20"
-          height="20"
-        />
-      </div>
-      <ui-skeleton-item width="160" height="20" />
-      <div class="diagram-skeleton-item-header-line"></div>
-      <ui-skeleton-item width="400" height="20" />
-    </div>
-    <div class="diagram-skeleton-container">
-      <ui-skeleton-switch width="712" />
-    </div>
-    <div class="diagram-skeleton-footer">
-      <ui-skeleton-item width="80" height="20" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.diagram-skeleton {
-  margin: 0 16px 16px;
-  border-radius: 8px;
-  background: var(--diagram-container-bg);
-  box-shadow: 0 1px 4px 0 #00000014;
-  padding: 16px;
-  overflow-clip-margin: content-box;
-  overflow: clip;
-
-  &-item-header {
-    display: flex;
-    column-gap: 16px;
-
-    &-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--select-arrow);
-
-      &-arrow {
-        transform: rotate(180deg);
-        margin-right: -4px;
-      }
-    }
-
-    &-line {
-      height: 20px;
-      border-left: 1px solid var(--horizontal-line);
-    }
-  }
-
-  &-container {
-    display: flex;
-    justify-content: center;
-    min-width: 759px;
-    padding: 48px 23.5px 24px 23.5px;
-
-    //:deep(svg) {
-    //  padding: 22px 14.5px;
-    //}
-  }
-
-  &-footer {
-    padding-top: 16px;
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-</style>