bfg-common 1.2.197 → 1.2.198

package/components/common/diagramMain/modals/steps/ConnectionSettings.vue

@@ -1,221 +0,0 @@
-<template>
-  <div class="wizard-content-container add-networking-step">
-    <common-diagram-main-modals-steps-header
-      :title="props.title"
-      :text="props.text"
-    />
-    <div class="wizard-content wizard-content-port">
-      <atoms-alert
-        v-if="isShowErrorMessage"
-        status="alert-danger"
-        :items="props.errorMessages"
-        @remove="onHideErrorMessageAlert"
-      />
-      <form id-connection-settings-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" for="">
-            {{ 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"
-                    @click.stop
-                  />
-                  <div
-                    v-show="fieldsErrorMessages.vlanId"
-                    class="flex-align-center"
-                  >
-                    <div class="tooltip">
-                      <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[]
-}>()
-
-// 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
-}>()
-
-// Component binding data
-const fields = ref<UI_I_ConnectionSettings>({ ...props.connectionSettings })
-
-// Validation error check for this step
-const isShowErrorMessage = computed<boolean>(
-  () => props.isShowErrorMessageAlert && !!props.errorMessages.length
-)
-
-// Validation
-const fieldsErrorMessages = ref<UI_I_ConnectionSettingsFieldsErrorMessages>(
-  connectionSettingsFieldsErrorMessages
-)
-
-const messageTexts = (
-  local: UI_I_Localization
-): UI_I_ArbitraryObject<string> => ({
-  networkLabel: local.vlanIdInvalidMessage,
-  vlanId: local.networkLabelInvalidMessage,
-})
-
-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] = ''
-}
-
-// Changing data and validate they
-watch(
-  fields,
-  (newFields: UI_I_ConnectionSettings) => {
-    setMessageOnChangedField(
-      newFields.vlanId,
-      'vlanId',
-      messageTexts(localization.value).vlanId
-    )
-    setMessageOnChangedField(
-      newFields.networkLabel,
-      'networkLabel',
-      messageTexts(localization.value).networkLabel
-    )
-    const fieldsErrorMessagesFiltered = Object.values(
-      fieldsErrorMessages.value
-    ).filter((v) => v !== '')
-    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>
-
-<style scoped lang="scss">
-.wizard-content-container {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  flex: 1 1 100%;
-  box-sizing: border-box;
-  padding: 16px 15px 10px 10px;
-  overflow-y: auto;
-  color: #333;
-  order: 2;
-  width: 100%;
-}
-</style>

package/components/common/diagramMain/modals/steps/Header.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="wizard-content-header-area">
-    <div>
-      <div class="title">
-        {{ props.title }}
-      </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;
-  }
-
-  .title {
-    font-weight: 700;
-    font-size: 13px;
-    margin: 0;
-    color: #333;
-  }
-
-  .description,
-  .select {
-    flex: 1 1 100%;
-    margin-right: 5px;
-  }
-
-  :deep(select) {
-    background-color: transparent;
-    border-color: var(--type-list-border-color);
-  }
-}
-</style>