bfg-common 1.6.76 → 1.6.77

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

@@ -1,286 +0,0 @@
-<template>
-  <div class="content">
-    <div class="content-fields">
-      <div class="content-fields-title">
-        {{ localization.common.portProperties }}
-      </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="port-properties-alert"
-            size="md"
-            @hide="onHideMessage(messageObject.key)"
-          />
-        </div>
-      </div>
-
-      <div class="content-fields-block">
-        <div class="content-fields-subtitle">
-          {{ localization.common.vmKernelPortSettings }}
-        </div>
-
-        <div class="col">
-          <h4 class="content-subtitle col-left text">
-            {{ localization.common.tcpIpStack }}
-          </h4>
-          <div class="col-right text">
-            {{ localization.common[fieldsValues.tcpIp] }}
-          </div>
-        </div>
-
-        <ui-line margin="16px 0" />
-
-        <div class="col">
-          <h4 class="content-subtitle col-left text">
-            {{ localization.common.mtuBytes }}
-          </h4>
-          <div class="col-right combobox">
-            <ui-input
-              id="mtu-input"
-              v-model="fieldsValues.mtu"
-              test-id="mtu-input"
-              type="number"
-              :placeholder="localization.common.bytes"
-              size="md"
-              error-type="tooltip"
-              :error="props.errorMessages.mtu"
-            />
-          </div>
-        </div>
-
-        <ui-line margin="16px 0" />
-
-        <div class="content-fields-subtitle">
-          {{ localization.common.availableServices }}
-        </div>
-
-        <div class="col mb-4">
-          <h4 class="content-subtitle col-left">
-            {{ localization.common.enabledServices }}
-          </h4>
-          <div class="col-right content-fields-services">
-            <template
-              v-for="enabledService in props.portPropertiesEnabledServices"
-              :key="enabledService.modelValue"
-            >
-              <ui-checkbox
-                :id="enabledService.testId"
-                v-model="fieldsValues.services[enabledService.modelValue]"
-                :label-text="enabledService.label"
-                :test-id="`${enabledService.testId}-checkbox`"
-                size="md"
-              />
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_PortPropertiesFields,
-  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
-  portPropertiesEnabledServices: any
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide-error-message-alert'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const fieldsValues = defineModel<UI_I_PortPropertiesFields>()
-
-const keys = ref<keyof UI_I_EditSettingsErrorMessage>(['mtu'])
-
-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 = ['mtu']
-  }
-}
-
-watch(
-  () => props.flagSendData,
-  () => {
-    keys.value = ['mtu']
-  }
-)
-</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;
-  }
-
-  &-fields-subtitle {
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 20px;
-    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;
-      }
-    }
-
-    &-right {
-      width: calc(((100% - 8px) / 3) * 2);
-
-      &.text {
-        padding: 8px 0;
-        max-width: 400px;
-        font-weight: 400;
-        font-size: 13px;
-        line-height: 20px;
-        letter-spacing: 0;
-        color: var(--title-color);
-      }
-
-      &.combobox {
-        max-width: 200px;
-      }
-    }
-  }
-
-  &-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;
-        }
-      }
-    }
-
-    &-services {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      row-gap: 12px;
-      column-gap: 12px;
-      padding-top: 8px;
-    }
-  }
-}
-
-@media (max-width: 896px) {
-  .content-fields {
-    &-services {
-      grid-template-columns: 1fr;
-    }
-
-    &-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/editSettings/tabs/security/Security.vue

@@ -1,209 +0,0 @@
-<template>
-  <div class="security">
-    <component
-      :is="currentComponent"
-      v-model="fieldsValues"
-      :is-switch="props.isSwitch"
-    />
-  </div>
-
-<!--  <div class="wizard-content__container">-->
-<!--    <div class="wizard-content">-->
-<!--      <form action="">-->
-<!--        <div class="horizontal-flex-container">-->
-<!--          <span class="flex-property-label-group large">-->
-<!--            {{ localization.common.promiscuousMode }}-->
-<!--          </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="promiscuous-mode"-->
-<!--                      v-model="fieldsValues.promiscuousMode.checked"-->
-<!--                      data-id="promiscuous-mode-input"-->
-<!--                      type="checkbox"-->
-<!--                    />-->
-<!--                    <label for="promiscuous-mode" class="normal-weight">-->
-<!--                      {{ localization.common.override }}-->
-<!--                    </label>-->
-<!--                  </div>-->
-<!--                  <div class="flex-property-value-group">-->
-<!--                    <div class="select">-->
-<!--                      <select-->
-<!--                        id="promiscuous-mode-select"-->
-<!--                        v-model="fieldsValues.promiscuousMode.selected"-->
-<!--                        :disabled="!fieldsValues.promiscuousMode.checked"-->
-<!--                        data-id="promiscuous-mode-select"-->
-<!--                        name="selectName"-->
-<!--                      >-->
-<!--                        <option :value="2" :label="localization.common.reject">-->
-<!--                          {{ localization.common.reject }}-->
-<!--                        </option>-->
-<!--                        <option :value="1" :label="localization.common.accept">-->
-<!--                          {{ localization.common.accept }}-->
-<!--                        </option>-->
-<!--                      </select>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        <div class="horizontal-flex-container">-->
-<!--          <span class="flex-property-label-group large">-->
-<!--            {{ localization.common.macAddressChanges }}-->
-<!--          </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="mac-address-changes"-->
-<!--                      v-model="fieldsValues.macAddressChanges.checked"-->
-<!--                      data-id="mac-address-changes"-->
-<!--                      type="checkbox"-->
-<!--                    />-->
-<!--                    <label for="mac-address-changes" class="normal-weight">-->
-<!--                      {{ localization.common.override }}-->
-<!--                    </label>-->
-<!--                  </div>-->
-<!--                  <div class="flex-property-value-group">-->
-<!--                    <div class="select">-->
-<!--                      <select-->
-<!--                        id="mac-address-select"-->
-<!--                        v-model="fieldsValues.macAddressChanges.selected"-->
-<!--                        :disabled="!fieldsValues.macAddressChanges.checked"-->
-<!--                        data-id="mac-address-select"-->
-<!--                        name="selectName"-->
-<!--                      >-->
-<!--                        <option :value="2" :label="localization.common.reject">-->
-<!--                          {{ localization.common.reject }}-->
-<!--                        </option>-->
-<!--                        <option :value="1" :label="localization.common.accept">-->
-<!--                          {{ localization.common.accept }}-->
-<!--                        </option>-->
-<!--                      </select>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        <div class="horizontal-flex-container">-->
-<!--          <span class="flex-property-label-group large">-->
-<!--            {{ localization.common.forgedTransmits }}-->
-<!--          </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="forged-transmits"-->
-<!--                      v-model="fieldsValues.forgedTransmits.checked"-->
-<!--                      data-id="forged-transmits-input"-->
-<!--                      type="checkbox"-->
-<!--                    />-->
-<!--                    <label for="forged-transmits" class="normal-weight">-->
-<!--                      {{ localization.common.override }}-->
-<!--                    </label>-->
-<!--                  </div>-->
-<!--                  <div class="flex-property-value-group">-->
-<!--                    <div class="select">-->
-<!--                      <select-->
-<!--                        id="forged-transmits"-->
-<!--                        v-model="fieldsValues.forgedTransmits.selected"-->
-<!--                        :disabled="!fieldsValues.forgedTransmits.checked"-->
-<!--                        data-id="forged-transmits-select"-->
-<!--                        name="selectName"-->
-<!--                      >-->
-<!--                        <option :value="2" :label="localization.common.reject">-->
-<!--                          {{ localization.common.reject }}-->
-<!--                        </option>-->
-<!--                        <option :value="1" :label="localization.common.accept">-->
-<!--                          {{ localization.common.accept }}-->
-<!--                        </option>-->
-<!--                      </select>-->
-<!--                    </div>-->
-<!--                  </div>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </form>-->
-<!--    </div>-->
-<!--  </div>-->
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ModalsInitialData,
-  UI_I_SecurityFields,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import { securityFieldsInitialFunc } from '~/components/common/diagramMain/modals/lib/config'
-
-const props = withDefaults(
-  defineProps<{
-    isSwitch: boolean
-    initialData?: UI_I_ModalsInitialData
-  }>(),
-  {
-    isSwitch: false,
-    initialData: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'change-edit-security-data', securityData: UI_I_SecurityFields): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./SecurityNew.vue'))
-    : defineAsyncComponent(() => import('./SecurityOld.vue'))
-)
-
-const fieldsValues = ref<UI_I_SecurityFields>(
-  securityFieldsInitialFunc(props.isSwitch, props.initialData)
-)
-
-onMounted(() => {
-  emits('change-edit-security-data', fieldsValues.value)
-})
-
-watch(
-  fieldsValues,
-  (newFieldsValues: UI_I_SecurityFields) => {
-    emits('change-edit-security-data', newFieldsValues)
-  },
-  { deep: true }
-)
-</script>
-
-<style scoped lang="scss">
-.security {
-  width: 100%;
-}
-</style>