bfg-common 1.5.442 → 1.5.443

package/components/common/wizards/network/add/steps/selectTargetDevice/SelectTargetDevice.vue

@@ -0,0 +1,183 @@
+<template>
+  <common-wizards-network-add-steps-select-target-device-new
+    v-if="isNewView"
+    v-model:fields="fields"
+    :wizard="props.wizard"
+    :connection-type="props.connectionType"
+    :messages-fields="props.messagesFields"
+    :is-connection-type-first-two="isConnectionTypeFirstTwo"
+    :standard-switches-initial="props.standardSwitchesInitial"
+    :selected-switch-id="props.selectedSwitchId"
+    @show-modal="onShowModal"
+    @change-target-device="onChangeTargetDevice"
+  />
+  <common-wizards-network-add-steps-select-target-device-old
+    v-else
+    v-model:fields="fields"
+    :wizard="props.wizard"
+    :connection-type="props.connectionType"
+    :messages-fields="props.messagesFields"
+    :is-connection-type-first-two="isConnectionTypeFirstTwo"
+    :alert-messages="props.alertMessages"
+    @hide-alert="onHideAlert"
+    @show-modal="onShowModal"
+    @change-target-device="onChangeTargetDevice"
+  />
+  <common-wizards-network-add-steps-select-target-device-modals
+    :standard-switches-initial="props.standardSwitchesInitial"
+    :is-show-standard-switch-modal="isShowStandardSwitchModal"
+    :is-show-switch-modal="isShowSwitchModal"
+    :is-show-network-modal="isShowNetworkModal"
+    @hide-modal="onHideModal"
+    @select-standard-switch="onSelectStandardSwitch"
+    @select-switch="onSelectSwitch"
+    @select-network="onSelectNetwork"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_TargetDevice,
+  UI_I_Switch,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/lib/models/enums'
+import { validateMtuTargetDeviceLocal } from '~/components/common/wizards/network/add/validations/validations'
+
+const props = defineProps<{
+  wizard: Wizard
+  targetDevice: UI_I_TargetDevice
+  connectionType: string
+  standardSwitchesInitial: UI_I_Switch[]
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+  alertMessages: string[]
+  selectedStandardSwitchId: string
+  selectedSwitchId: string
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const emits = defineEmits<{
+  (event: 'change-target-device', value: UI_I_TargetDevice): void
+  (event: 'hide-alert', value: 1): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isConnectionTypeFirstTwo = computed<boolean>(() =>
+  ['0', '1'].includes(props.connectionType)
+)
+
+const isShowStandardSwitchModal = ref<boolean>(false)
+const isShowSwitchModal = ref<boolean>(false)
+const isShowNetworkModal = ref<boolean>(false)
+
+const onShowModal = (value: string): void => {
+  switch (value) {
+    case 'select-standard-switch':
+      isShowStandardSwitchModal.value = true
+      break
+    case 'select-switch':
+      isShowSwitchModal.value = true
+      break
+    case 'select-network':
+      isShowNetworkModal.value = true
+      break
+  }
+}
+
+const onHideModal = (value: string): void => {
+  switch (value) {
+    case 'select-standard-switch':
+      isShowStandardSwitchModal.value = false
+      break
+    case 'select-switch':
+      isShowSwitchModal.value = false
+      break
+    case 'select-network':
+      isShowNetworkModal.value = false
+      break
+  }
+}
+
+const onHideAlert = (): void => {
+  emits('hide-alert', 1)
+}
+
+const onChangeTargetDevice = (value: UI_I_TargetDevice): void => {
+  emits('change-target-device', value)
+}
+
+const fields = ref<UI_I_TargetDevice>(useDeepCopy(props.targetDevice))
+
+const onSelectStandardSwitch = (value: string): void => {
+  fields.value.standardSwitch = value
+  onHideModal('select-standard-switch')
+}
+const onSelectSwitch = (value: string): void => {
+  fields.value.switch = value
+  onHideModal('select-switch')
+}
+const onSelectNetwork = (value: string): void => {
+  fields.value.network = value
+  onHideModal('select-network')
+}
+
+let prevValue = useDeepCopy(fields.value)
+
+watch(
+  fields,
+  (newFields: UI_I_TargetDevice) => {
+    newFields.standardSwitch &&
+      !prevValue.standardSwitch &&
+      props.wizard.removeValidationLocal(
+        1,
+        UI_E_ValidationFields.TARGET_DEVICE_STANDARD_SWITCH
+      )
+
+    if (newFields.selected !== prevValue.selected) {
+      props.wizard.removeValidationLocal(
+        1,
+        UI_E_ValidationFields.TARGET_DEVICE_STANDARD_SWITCH
+      )
+      props.wizard.removeValidationLocal(
+        1,
+        UI_E_ValidationFields.TARGET_DEVICE_NETWORK
+      )
+      props.wizard.removeValidationLocal(
+        1,
+        UI_E_ValidationFields.TARGET_DEVICE_SWITCH
+      )
+      props.wizard.removeValidationLocal(
+        1,
+        UI_E_ValidationFields.TARGET_DEVICE_MTU
+      )
+    }
+
+    ;(newFields.mtu !== prevValue.mtu ||
+      (prevValue.selected !== '3' && newFields.selected === '3')) &&
+      validateMtuTargetDeviceLocal(localization.value, newFields, props.wizard)
+
+    prevValue = useDeepCopy(newFields)
+
+    emits('change-target-device', newFields)
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  !fields.value.standardSwitch &&
+    (fields.value.standardSwitch = props.selectedStandardSwitchId)
+
+  !fields.value.switch && (fields.value.switch = props.selectedSwitchId)
+})
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/wizards/network/add/steps/selectTargetDevice/SelectTargetDeviceNew.vue

@@ -0,0 +1,393 @@
+<template>
+  <div class="content">
+    <div>
+      <h4 class="content-subtitle">{{ localization.common.targetDevice }}</h4>
+
+      <div class="radio-container">
+        <div
+          v-show="props.connectionType === '0'"
+          :class="['radio-block', { selected: fieldsLocal.selected === '0' }]"
+          @click="fieldsLocal.selected = '0'"
+        >
+          <ui-radio
+            v-model="fieldsLocal.selected"
+            :label="localization.common.existingNetwork"
+            value="0"
+            test-id="existing-network-radio"
+            size="md"
+          />
+        </div>
+
+        <div
+          v-show="props.isConnectionTypeFirstTwo"
+          :class="['radio-block', { selected: fieldsLocal.selected === '1' }]"
+          @click="fieldsLocal.selected = '1'"
+        >
+          <ui-radio
+            v-model="fieldsLocal.selected"
+            :label="localization.common.existingStandardSwitch"
+            value="1"
+            test-id="existing-standard-switch-radio"
+            size="md"
+          />
+        </div>
+
+        <div
+          v-show="props.connectionType === '2'"
+          :class="['radio-block', { selected: fieldsLocal.selected === '2' }]"
+          @click="fieldsLocal.selected = '2'"
+        >
+          <ui-radio
+            v-model="fieldsLocal.selected"
+            :label="localization.common.existingSwitch"
+            value="2"
+            test-id="existing-switch-radio"
+            size="md"
+          />
+        </div>
+
+        <!-- v-permission="'Networks.CreateSwitch'" -->
+        <div
+          :class="['radio-block', { selected: fieldsLocal.selected === '3' }]"
+          @click="fieldsLocal.selected = '3'"
+        >
+          <ui-radio
+            v-model="fieldsLocal.selected"
+            :label="localization.common.newStandardSwitch"
+            value="3"
+            test-id="standard-switch-radio"
+            size="md"
+          />
+        </div>
+      </div>
+      <ui-line margin="0 0 16px" />
+
+      <div
+        v-show="props.connectionType === '0' && fieldsLocal.selected === '0'"
+      >
+        <div class="col">
+          <h4 class="content-subtitle col-left">
+            {{ localization.common.network }}
+          </h4>
+          <div class="col-right">
+            <ui-select
+              v-model="fieldsLocal.network"
+              :items="[
+                {
+                  text: localization.common.browseDoted,
+                  value: 'browse',
+                  selected: false,
+                  disabled: true,
+                  iconName: 'browse',
+                },
+              ]"
+              select-width="100%"
+              show-text
+              test-id="network-input"
+              :placeholder="localization.common.selectANetwork"
+              :error="!!props.messagesFields.network.field"
+              :error-text="
+                !!props.messagesFields.network.field &&
+                localization.common.fieldRequired
+              "
+            >
+              <template #row="{ item }">
+                <div v-if="item.iconName" class="browse-btn">
+                  <ui-button
+                    test-id="button-1"
+                    type="primary"
+                    variant="text"
+                    size="lg"
+                    is-without-sizes
+                    min-width="100%"
+                    @click="onShowModal('select-network')"
+                  >
+                    <span>{{ item.text }}</span>
+                  </ui-button>
+                </div>
+              </template>
+            </ui-select>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-show="props.isConnectionTypeFirstTwo && fieldsLocal.selected === '1'"
+      >
+        <div class="col">
+          <h4 class="content-subtitle col-left">
+            {{ localization.common.standardSwitch }}
+          </h4>
+          <div class="col-right">
+            <ui-select
+              v-model="fieldsLocal.standardSwitch"
+              :items="selectItems"
+              select-width="100%"
+              show-text
+              test-id="standard-switch-input"
+              :placeholder="localization.common.selectASwitch"
+              :error="!!props.messagesFields.switch.field"
+              :error-text="
+                !!props.messagesFields.switch.field &&
+                localization.common.fieldRequired
+              "
+            >
+              <template #row="{ item }">
+                <div v-if="item.iconName" class="browse-btn">
+                  <ui-button
+                    test-id="button-1"
+                    type="primary"
+                    variant="text"
+                    size="lg"
+                    is-without-sizes
+                    min-width="100%"
+                    @click="onShowModal('select-standard-switch')"
+                  >
+                    <span>{{ item.text }}</span>
+                  </ui-button>
+                </div>
+              </template>
+            </ui-select>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-show="props.connectionType === '2' && fieldsLocal.selected === '2'"
+      >
+        <div class="col">
+          <h4 class="content-subtitle col-left">
+            {{ localization.common.switch }}
+          </h4>
+          <div class="col-right">
+            <ui-select
+              v-model="fieldsLocal.switch"
+              :items="selectItems"
+              select-width="100%"
+              show-text
+              test-id="switch-input"
+              :placeholder="localization.common.selectASwitch"
+              :error="!!props.messagesFields.switch2.field"
+              :error-text="
+                !!props.messagesFields.switch2.field &&
+                localization.common.fieldRequired
+              "
+            >
+              <template #row="{ item }">
+                <div v-if="item.iconName" class="browse-btn">
+                  <ui-button
+                    test-id="button-1"
+                    type="primary"
+                    variant="text"
+                    size="lg"
+                    is-without-sizes
+                    min-width="100%"
+                    @click="onShowModal('select-switch')"
+                  >
+                    <span>{{ item.text }}</span>
+                  </ui-button>
+                </div>
+              </template>
+            </ui-select>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="fieldsLocal.selected === '3'">
+        <!-- v-permission="'Networks.CreateSwitch'" -->
+
+        <div class="col">
+          <h4 class="content-subtitle col-left">
+            {{ localization.common.mtuBytes }}
+          </h4>
+          <div class="col-right">
+            <ui-input
+              id="mtu"
+              v-model="fieldsLocal.mtu"
+              test-id="mtu-input"
+              type="number"
+              :placeholder="localization.common.mtuBytes"
+              size="md"
+              :error="props.messagesFields['new_switch.mtu'].field"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/select/lib/models/interfaces'
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_TargetDevice,
+  UI_I_Switch,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+
+const props = defineProps<{
+  fields: UI_I_TargetDevice
+  connectionType: string
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+  wizard: Wizard
+  isConnectionTypeFirstTwo: boolean
+  standardSwitchesInitial: UI_I_Switch[]
+  selectedSwitchId: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'change-target-device', targetDevice: UI_I_TargetDevice): void
+  (event: 'show-modal', modalName: string): void
+  (event: 'update:fields', value: UI_I_TargetDevice): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onShowModal = (value: string): void => {
+  emits('show-modal', value)
+}
+
+const fieldsLocal = computed({
+  get() {
+    return props.fields
+  },
+  set(value: UI_I_TargetDevice) {
+    emits('update:fields', value)
+  },
+})
+
+const selectItems = ref<UI_I_Dropdown[]>([])
+
+watch(
+  () => props.standardSwitchesInitial,
+  (newValue) => {
+    selectItems.value = [
+      ...newValue.map((item) => ({
+        text: item.name,
+        value: item.id,
+        selected: props.selectedSwitchId === item.id,
+      })),
+      {
+        text: localization.value.common.browseDoted,
+        value: 'browse',
+        selected: false,
+        disabled: true,
+        iconName: 'browse',
+      },
+    ]
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.content {
+  padding: 16px 0;
+
+  &-subtitle {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 20px;
+    letter-spacing: 0;
+    vertical-align: middle;
+    color: var(--title-form-first-color);
+  }
+
+  .radio-container {
+    display: flex;
+    column-gap: 12px;
+    margin: 16px 0;
+  }
+
+  .col {
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+
+    &-left {
+      width: calc((100% - 8px) / 3);
+    }
+
+    &-right {
+      width: calc(((100% - 8px) / 3) * 2);
+    }
+  }
+
+  :deep(.ui-dropdown-menu-item.disabled) {
+    opacity: 1 !important;
+  }
+
+  .browse-btn {
+    width: 100%;
+
+    :deep(.ui-btn) {
+      justify-content: flex-start;
+      height: 32px;
+
+      span {
+        text-align: left;
+        color: var(--select-text);
+      }
+
+      &:hover {
+        span {
+          color: var(--dropdown-item-hover-color);
+        }
+      }
+    }
+  }
+
+  :root.dark-theme {
+    .radio-block:not(.selected).disabled {
+      background-color: #1b2a371f;
+      opacity: unset;
+    }
+  }
+  .radio-block {
+    width: 100%;
+    background-color: var(--radio-block-bg-color);
+    box-shadow: inset 0 0 0 1px var(--radio-block-border-color);
+    transition: box-shadow 0.1s ease-in-out;
+    padding: 12px;
+    border-radius: 8px;
+
+    &:not(.selected):not(.disabled) {
+      &:hover {
+        box-shadow: inset 0 0 0 1px var(--radio-block-border-hover-color);
+      }
+    }
+
+    &:not(.disabled) {
+      cursor: pointer;
+    }
+
+    &:not(.selected).disabled {
+      background-color: #ffffff;
+      opacity: 0.6;
+    }
+
+    &.selected {
+      background-color: var(--radio-block-selected-bg-color);
+      box-shadow: inset 0 0 0 1.5px var(--radio-block-selected-border-color);
+    }
+  }
+
+  :deep(.radio-label__container) {
+    align-items: unset !important;
+  }
+}
+
+@media (max-width: 896px) {
+  .radio-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+    margin: 16px 0;
+  }
+}
+</style>