bfg-common 1.6.89 → 1.6.91

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/modals/managePhysicalAdapters/ManagePhysicalAdapters.vue

@@ -1,164 +0,0 @@
-<template>
-  <div>
-    <component
-      :is="currentComponent"
-      :switch-name="props.switchName"
-      :is-dark-mode="props.isDarkMode"
-      :adapters="props.adapters"
-      :free-adapters="props.freeAdapters"
-      :added-adapters="addedAdapters"
-      :adapter-status="props.adapterStatus"
-      :is-show-no-connected-active-adapters-modal="
-        isShowNoConnectedActiveAdaptersModal
-      "
-      :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
-      :is-manage-adapters-modal-loading="props.isManageAdaptersModalLoading"
-      @get-free-adapters="onGetFreeAdapters"
-      @change-added-adapters="onChangeAddedAdapters"
-      @change-adapter-status="onChangeAdapterStatus"
-      @hide-no-connected-active-adapters-modal="
-        onHideNoConnectedActiveAdaptersModal
-      "
-      @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
-      @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
-      @send-manage-adapter="onSendManageAdapter"
-      @hide="onHideManagePhysicalAdaptersModal"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ItemsWithTotalCounts } from '~/lib/models/interfaces'
-import type {
-  UI_I_Adapter,
-  UI_I_AdapterStatus,
-  UI_I_SwitchAdapterItem,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    switchName?: string
-    freeAdapters: UI_I_Adapter[]
-    adapterStatus?: UI_I_AdapterStatus
-    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-    initialAdapterStatus: UI_I_AdapterStatus
-    isDarkMode?: boolean
-    isManageAdaptersModalLoading?: boolean
-  }>(),
-  {
-    switchName: '',
-    adapterStatus: () => ({
-      active: [],
-      standby: [],
-      unused: [],
-    }),
-    isDarkMode: false,
-    isManageAdaptersModalLoading: false,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'get-free-adapters', showModal: () => void): void
-  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
-  (
-    event: 'send-manage-physical-adapters-data',
-    adapterStatus: UI_I_AdapterStatus,
-    switchName: string,
-    hideModal: () => void
-  ): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./ManagePhysicalAdaptersNew.vue'))
-    : defineAsyncComponent(() => import('./ManagePhysicalAdaptersOld.vue'))
-)
-
-const addedAdapters = ref<string[]>([])
-
-const onChangeAddedAdapters = (addedAdaptersNew: string[]) => {
-  addedAdapters.value = addedAdaptersNew
-}
-
-const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus) => {
-  emits('change-adapter-status', adapterStatusNew)
-}
-
-const isShowNoConnectedActiveAdaptersModal = ref(false)
-const isShowNoActiveAdaptersModal = ref(false)
-
-const showNoConnectedActiveAdaptersModal = () => {
-  isShowNoConnectedActiveAdaptersModal.value = true
-}
-const onHideNoConnectedActiveAdaptersModal = () => {
-  isShowNoConnectedActiveAdaptersModal.value = false
-}
-const showNoActiveAdaptersModal = () => {
-  isShowNoActiveAdaptersModal.value = true
-}
-const onHideNoActiveAdaptersModal = () => {
-  isShowNoActiveAdaptersModal.value = false
-}
-
-const onSendManagePhysicalAdaptersData = (
-  adapterStatus: UI_I_AdapterStatus,
-  switchName: string,
-  hideModal: () => void
-) => {
-  emits(
-    'send-manage-physical-adapters-data',
-    adapterStatus,
-    switchName,
-    hideModal
-  )
-}
-
-const onConfirmNoActiveAdaptersModal = () => {
-  onSendManagePhysicalAdaptersData(
-    props.adapterStatus,
-    props.switchName,
-    onHideManagePhysicalAdaptersModal
-  )
-  onHideNoConnectedActiveAdaptersModal()
-  onHideNoActiveAdaptersModal()
-}
-
-const onSendManageAdapter = () => {
-  if (props.adapterStatus.active.length === 0) {
-    showNoActiveAdaptersModal()
-    return
-  }
-
-  const activeAndConnectedAdapters = props.adapterStatus.active.filter(
-    (adapterName: string) =>
-      props.adapters.items.find(
-        (ad: UI_I_SwitchAdapterItem) => ad.name === adapterName
-      )?.carrier
-  )
-  if (activeAndConnectedAdapters.length === 0) {
-    showNoConnectedActiveAdaptersModal()
-    return
-  }
-
-  onSendManagePhysicalAdaptersData(
-    props.adapterStatus,
-    props.switchName,
-    onHideManagePhysicalAdaptersModal
-  )
-}
-
-const onGetFreeAdapters = (showModal: () => void) => {
-  emits('get-free-adapters', showModal)
-}
-
-const onHideManagePhysicalAdaptersModal = (): void => {
-  addedAdapters.value = []
-  emits('change-adapter-status', props.initialAdapterStatus)
-  emits('hide')
-}
-</script>