bfg-common 1.2.186 → 1.2.187

package/components/common/addNetworking/Wizard.vue

@@ -1,286 +0,0 @@
-<template>
-  <div v-if="props.show" class="modal clr-wizard wizard-xl">
-    <div class="modal-dialog modal-xl relative">
-      <div class="modal-content-wrapper">
-        <nav class="modal-nav clr-wizard-stepnav-wrapper">
-          <h1 class="clr-wizard-title">
-            {{ props.title }}
-          </h1>
-          <div :class="['clr-wizard-stepnav']">
-            <div class="clr-wizard-stepnav-list">
-              <div
-                v-for="currentStep in props.stepsWithStatus"
-                :key="currentStep.id"
-                :class="[
-                  'clr-wizard clr-wizard-stepnav-item clr-nav-link nav-item',
-                  { disabled: currentStep.status === UI_E_StepStatus.Disabled },
-                  {
-                    active:
-                      currentStep.status === UI_E_StepStatus.Selected ||
-                      currentStep.status === UI_E_StepStatus.CompleteSelected,
-                  },
-                  {
-                    complete:
-                      currentStep.status === UI_E_StepStatus.Complete ||
-                      currentStep.status === UI_E_StepStatus.CompleteSelected,
-                  },
-                ]"
-              >
-                <atoms-the-icon
-                  v-if="false"
-                  :style="{
-                    opacity:
-                      currentStep.status === UI_E_StepStatus.Complete ||
-                      currentStep.status === UI_E_StepStatus.CompleteSelected
-                        ? 1
-                        : 0,
-                  }"
-                  width="14px"
-                  fill="#3aab24"
-                  name="check"
-                />
-                <button
-                  class="btn btn-link clr-wizard-stepnav-link wizard-ml-8"
-                  :disabled="currentStep.status === UI_E_StepStatus.Disabled"
-                  @click="onSelectStep(currentStep.id)"
-                >
-                  <span class="clr-wizard-stepnav-link-title">
-                    {{ currentStep.name }}
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </nav>
-        <div class="modal-content">
-          <div class="modal-header--accessible">
-            <div class="modal-title-wrapper">
-              <h2 class="modal-title">
-                <span class="modal-title-text">{{ props.secondTitle }}</span>
-              </h2>
-            </div>
-            <button class="close" @click="onHideModal">
-              <atoms-the-icon class="close-icon" name="close" />
-            </button>
-          </div>
-          <div class="modal-body">
-            <slot name="modalBody" />
-          </div>
-          <div class="modal-footer">
-            <slot name="modalFooter">
-              <button class="btn btn-link" @click="onHideModal">
-                {{ localization.cancel }}
-              </button>
-              <button
-                v-show="!props.wizard.isSelectedStep(0)"
-                class="btn btn-outline"
-                @click="onBackStep"
-              >
-                {{ localization.back }}
-              </button>
-              <button
-                v-if="props.wizard.isSelectedStep(7)"
-                class="btn btn-success"
-                @click="onFinish"
-              >
-                {{ localization.finish }}
-              </button>
-              <button v-else class="btn btn-primary" @click="onNextStep">
-                {{ localization.next }}
-              </button>
-            </slot>
-          </div>
-        </div>
-      </div>
-
-      <div v-show="props.isShowLoader" class="loader">
-        <i class="fa clr-tree-node-caret-icon spinner spinner" />
-      </div>
-    </div>
-    <div class="modal-backdrop" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Step } from '~/components/common/addNetworking/models/interfaces'
-import { Wizard } from '~/components/common/addNetworking/utils'
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_E_StepStatus } from '~/components/common/addNetworking/models/enums'
-
-const props = defineProps<{
-  wizard: Wizard
-  stepsWithStatus: UI_I_Step[]
-  width: string
-  height: string
-  show: boolean
-  title: string
-  isShowLoader: boolean
-  secondTitle: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-step', id: number): void
-  (event: 'hide'): void
-  (event: 'next-step'): void
-  (event: 'finish'): void
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onHideModal = (): void => emits('hide')
-const onSelectStep = (id: number): void => emits('select-step', id)
-const onNextStep = (): void => emits('next-step')
-const onBackStep = (): void => props.wizard.goToBackStep()
-const onFinish = (): void => emits('finish')
-</script>
-
-<style scoped lang="scss">
-.modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 1050;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 48px;
-  overflow-y: auto;
-
-  .modal-nav {
-    background-color: var(--block-view-bg-color4);
-    .clr-wizard-title {
-      color: var(--main-color-mode);
-      font-size: 22px;
-      padding: 24px 12px 24px 24px;
-      //line-height: 1.2rem;
-    }
-  }
-
-  .modal-content-wrapper {
-    position: relative;
-    -webkit-animation-name: animateTop;
-    -webkit-animation-duration: 0.4s;
-    animation-name: animateTop;
-    animation-duration: 0.4s;
-  }
-
-  .modal-content {
-    background-color: var(--modal-bg-color);
-
-    .modal-header--accessible {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      width: 100%;
-      padding: 24px 19px 6px 24px;
-
-      .modal-title-text {
-        color: var(--main-color-mode);
-        font-size: 22px;
-      }
-
-      .close-icon {
-        fill: var(--close-icon);
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    .modal-body {
-      padding: 0 3px;
-    }
-
-    .modal-footer {
-      display: flex;
-      justify-content: flex-end;
-      padding: 24px;
-      flex: unset;
-      min-height: 0;
-      height: auto;
-    }
-  }
-
-  .loader {
-    position: absolute;
-    z-index: 1000;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.3);
-
-    .spinner {
-      left: unset;
-    }
-  }
-
-  .modal-backdrop {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-}
-h1,
-h2 {
-  // просмотреть если нигде не ломается переместит глобально
-  line-height: inherit;
-}
-
-.clr-wizard-stepnav {
-  &.check {
-    .clr-wizard-stepnav-item {
-      box-shadow: none;
-      display: flex;
-      align-items: center;
-
-      button {
-        height: auto;
-        font-size: 13px;
-        border-radius: 3px;
-        //margin-left: 4px;
-      }
-    }
-  }
-  .clr-wizard-stepnav-item {
-    padding: 0.3rem 0 0.4rem;
-
-    .wizard-ml-8 {
-      margin-left: 8px;
-    }
-
-    &.active {
-      button:hover,
-      button {
-        color: var(--vertical-steps-active-color);
-        background-color: var(--vertical-steps-active-bg-color);
-        cursor: default;
-        span {
-          color: var(--checkbox-mark-color);
-        }
-      }
-    }
-    &.complete:not(&.active) {
-      button {
-        background: var(--block-view-bg-color3);
-      }
-      button:hover {
-        color: var(--vertical-steps-complete-color);
-        background-color: var(--vertical-steps-complete-bg-color);
-        border-bottom: 1px solid var(--vertical-steps-hover-border-color);
-      }
-    }
-    button {
-      color: var(--add-vm-context-title);
-      .clr-wizard-stepnav-link-title {
-        font-size: 14px;
-      }
-    }
-  }
-}
-</style>

package/components/common/addNetworking/config/temporaryData.ts

@@ -1,8 +0,0 @@
-export const temporarySwitches = [
-    { name: 'vSwitch0', id: '0' },
-    { name: 'vSwitch1', id: '1' },
-]
-export const temporaryNetworks: {name: string, id: string}[] = [
-    // { name: 'net-1', id: '0' },
-    // { name: 'net-2', id: '1' },
-]

package/components/common/addNetworking/config/validation.ts

@@ -1,23 +0,0 @@
-export const connectionSettingsFieldsErrorMessages = {
-  networkLabel: '',
-  vlanId: '',
-}
-
-export const ipFourSettingsFieldsErrorMessages = {
-  ipFourAddress: '',
-  subnetMask: '',
-  defaultGateway: '',
-}
-
-export const portPropertiesFieldsErrorMessages = {
-  networkLabel: '',
-  vlanId: '',
-  mtu: '',
-}
-
-export const targetDeviceFieldsErrorMessages = {
-  network: '',
-  switch: '',
-  standardSwitch: '',
-  mtu: '',
-}

package/components/common/addNetworking/models/enums.ts

@@ -1,7 +0,0 @@
-export const enum UI_E_StepStatus {
-    Disabled,
-    Selected,
-    Active,
-    Complete,
-    CompleteSelected
-}

package/components/common/addNetworking/models/types.ts

@@ -1,13 +0,0 @@
-export type UI_T_ConnectionSettingsFieldName = 'networkLabel' | 'vlanId'
-export type UI_T_IpFourSettingsFieldName =
-  | 'ipFourAddress'
-  | 'subnetMask'
-  | 'defaultGateway'
-export type UI_T_PortPropertiesFieldName = 'networkLabel' | 'vlanId' | 'mtu'
-export type UI_T_TargetDeviceFieldName =
-  | 'network'
-  | 'switch'
-  | 'standardSwitch'
-  | 'mtu'
-export type UI_T_TCP = 'default' | '1' | '2'
-export type UI_T_Project = 'procurator' | 'sphere'

package/components/common/addNetworking/steps/ConnectionSettings.vue

@@ -1,269 +0,0 @@
-<template>
-  <div class="wizard-content-container add-networking-step">
-    <common-add-networking-steps-header
-      :title="props.title"
-      :text="props.text"
-    />
-    <div class="wizard-content wizard-content-port">
-      <atoms-alert
-        v-if="hasValidationError"
-        status="alert-danger"
-        :items="props.errorMessages"
-        @remove="onHideErrorMessageAlert"
-      />
-      <form>
-        <div class="horizontal-flex-container">
-          <label class="property-label-group" for="network-label">
-            {{ localization.networkLabel }}
-          </label>
-          <div class="margin-left-property-value-group">
-            <div class="property-value-group">
-              <fieldset>
-                <atoms-tooltip-error
-                  :has-error="!!fieldsErrorMessages.networkLabel"
-                >
-                  <template #elem>
-                    <input
-                      id="network-label"
-                      v-model="fields.networkLabel"
-                      name="network-label"
-                      type="text"
-                      :class="[
-                        'tooltip-field port-properties-network-label',
-                        {
-                          'danger-not-valid': fieldsErrorMessages.networkLabel,
-                        },
-                      ]"
-                      @click.stop
-                    />
-                  </template>
-                  <template #content>
-                    {{ fieldsErrorMessages.networkLabel }}
-                  </template>
-                </atoms-tooltip-error>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-
-        <div class="horizontal-flex-container port-properties-padding">
-          <label class="property-label-group">
-            {{ localization.vlanId }}
-          </label>
-          <div class="margin-left-property-value-group">
-            <div class="property-value-group">
-              <fieldset>
-                <div class="flex-align-center">
-                  <atoms-combobox
-                    v-model.trim="fields.vlanId"
-                    :items="vlanIdSelectData"
-                    :class="{
-                      'danger-not-valid': fieldsErrorMessages.vlanId,
-                    }"
-                    @click.stop
-                  />
-                  <div
-                    v-show="fieldsErrorMessages.vlanId"
-                    class="flex-align-center"
-                  >
-                    <div class="tooltip flex align-middle">
-                      <atoms-the-icon
-                        width="24px"
-                        height="24px"
-                        class="is-error tooltip-trigger"
-                        name="info"
-                      />
-                      <div class="tooltip-top-left tooltip-content error">
-                        {{ fieldsErrorMessages.vlanId }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_ArbitraryObject, UI_I_Localization } from '~/models/interfaces'
-import {
-  UI_I_ConnectionSettings,
-  UI_I_ConnectionSettingsFieldsErrorMessages,
-} from '~/components/common/addNetworking/models/interfaces'
-import { UI_T_ConnectionSettingsFieldName } from '~/components/common/addNetworking/models/types'
-import {
-  connectionSettingsFieldsErrorMessages,
-  vlanIdSelectData,
-} from '~/components/common/addNetworking/config'
-
-// Props from up
-
-const props = defineProps<{
-  title: string
-  text: string
-  stepId: number
-  connectionSettings: UI_I_ConnectionSettings
-  isShowErrorMessageAlert: boolean
-  errorMessages: string[]
-  networkLabelExistingErrorMessage: string
-  error: UI_I_ArbitraryObject<string>
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// Define emits for changing data and validation messages
-const emits = defineEmits<{
-  (
-    event: 'change-connection-settings',
-    connectionSettings: UI_I_ConnectionSettings
-  ): void
-  (
-    event: 'change-error-messages',
-    errorMessages: string[],
-    stepIndex: number
-  ): void
-  (event: 'hide-error-message-alert'): void
-  (event: 'set-error-empty', fieldName: string): void
-}>()
-
-// Checking network label existing
-watch(
-  () => props.networkLabelExistingErrorMessage,
-  (newValue: string) => {
-    if (fieldsErrorMessages.value.networkLabel) return
-
-    fieldsErrorMessages.value.networkLabel = newValue
-  }
-)
-
-// Validation error check for this step
-const hasValidationError = computed<boolean>(
-  () => props.isShowErrorMessageAlert && !!props.errorMessages.length
-)
-
-const fields = ref<UI_I_ConnectionSettings>(
-  useDeepCopy(props.connectionSettings)
-)
-
-const fieldsErrorMessages = ref<UI_I_ConnectionSettingsFieldsErrorMessages>(
-  connectionSettingsFieldsErrorMessages
-)
-
-const messageTexts = (
-  local: UI_I_Localization
-): UI_I_ArbitraryObject<string> => ({
-  networkLabel: local.networkLabelInvalidMessage,
-  vlanId: local.vlanIdInvalidMessage,
-})
-
-const isNumberInRange = (
-  value: number | string,
-  down: number,
-  up: number
-): boolean => isNaN(Number(value)) || Number(value) < down || Number(value) > up
-
-const setMessageOnChangedField = (
-  values: string | number,
-  name: UI_T_ConnectionSettingsFieldName,
-  text: string
-): void => {
-  if (name === 'networkLabel' && !values) {
-    fieldsErrorMessages.value[name] = text
-    return
-  }
-  if (
-    name === 'vlanId' &&
-    values !== 'None (0)' &&
-    values !== 'All (4095)' &&
-    (isNumberInRange(values, 0, 4095) || values === '')
-  ) {
-    fieldsErrorMessages.value[name] = text
-    return
-  }
-  fieldsErrorMessages.value[name] = ''
-}
-
-watch(
-  () => props.error,
-  (newError) => {
-    fieldsErrorMessages.value = {
-      networkLabel: newError.name,
-      vlanId: newError.vlan,
-    }
-
-    const fieldsErrorMessagesFiltered = Object.values(
-      fieldsErrorMessages.value
-    ).filter(
-      (errorMessage: string | undefined) =>
-        errorMessage !== '' && errorMessage !== undefined
-    )
-
-    emits('change-error-messages', fieldsErrorMessagesFiltered, props.stepId)
-  },
-  { deep: true, immediate: true }
-)
-
-const oldFields = ref<any>(useDeepCopy(fields.value))
-
-const cacheOldFields = (newFields: UI_I_ConnectionSettings): void => {
-  oldFields.value = useDeepCopy(newFields)
-}
-
-const setErrorEmpty = (
-  newValue: UI_I_ConnectionSettings,
-  oldValue: UI_I_ConnectionSettings,
-  fieldName: keyof UI_I_ConnectionSettings,
-  errFieldName: string
-): void => {
-  newValue[fieldName] !== oldValue[fieldName] &&
-    emits('set-error-empty', errFieldName)
-}
-
-// Changing data and validate they
-watch(
-  fields,
-  (newFields: UI_I_ConnectionSettings) => {
-    setErrorEmpty(newFields, oldFields.value, 'networkLabel', 'name')
-    setErrorEmpty(newFields, oldFields.value, 'vlanId', 'vlan')
-
-    cacheOldFields(newFields)
-
-    setMessageOnChangedField(
-      newFields.vlanId,
-      'vlanId',
-      messageTexts(localization.value).vlanId
-    )
-
-    setMessageOnChangedField(
-      newFields.networkLabel,
-      'networkLabel',
-      messageTexts(localization.value).networkLabel
-    )
-
-    const fieldsErrorMessagesFiltered = Object.values(
-      fieldsErrorMessages.value
-    ).filter((errorMessage: string) => errorMessage !== '')
-
-    fieldsErrorMessagesFiltered.length === 0 &&
-      emits('hide-error-message-alert')
-
-    emits('change-error-messages', fieldsErrorMessagesFiltered, props.stepId)
-
-    emits('change-connection-settings', newFields)
-  },
-  { deep: true, immediate: true }
-)
-
-// Validation message show and hide
-const onHideErrorMessageAlert = (): void => {
-  emits('hide-error-message-alert')
-}
-onUnmounted(() => {
-  emits('hide-error-message-alert')
-})
-</script>

package/components/common/addNetworking/steps/Header.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="wizard-content-header-area">
-    <div>
-      <div
-          class="description"
-      >
-        {{ props.text }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// Props from up
-
-const props = defineProps<{
-  title: string
-  text: string
-}>()
-</script>
-
-<style scoped lang="scss">
-
-.wizard-content-header-area {
-  flex-shrink: 0;
-  width: inherit;
-  height: auto;
-  background-color: transparent;
-  padding-bottom: 3px;
-  border-bottom: 1px solid #a6a6a6;
-}
-
-.wizard-content-header-area {
-  display: flex;
-  //padding-top: 12px;
-
-  .description {
-    color: #333333;
-    font-size: 13px;
-  }
-
-  .description,
-  .select {
-    flex: 1 1 100%;
-    margin-right: 5px;
-  }
-
-  :deep(select) {
-    background-color: transparent;
-    border-color: var(--type-list-border-color);
-  }
-}
-</style>