bfg-common 1.5.442 → 1.5.444

package/components/common/wizards/network/add/steps/{SelectedTargetDevice.vue → selectTargetDevice/SelectTargetDeviceOld.vue}

@@ -13,7 +13,7 @@
           <div class="radio">
             <input
               id="existing-network"
-              v-model="fields.selected"
+              v-model="fieldsLocal.selected"
               data-id="existing-network-radio"
               type="radio"
               value="0"
@@ -25,13 +25,13 @@
           </div>
           <fieldset
             :class="{
-              disabled: fields.selected !== '0',
+              disabled: fieldsLocal.selected !== '0',
             }"
           >
             <div>
               <atoms-tooltip-error
                 :has-error="
-                  fields.selected === '0' &&
+                  fieldsLocal.selected === '0' &&
                   !!props.messagesFields.network.field
                 "
               >
@@ -39,12 +39,12 @@
                   <fieldset class="fieldset-block">
                     <div>
                       <input
-                        v-model="fields.network"
+                        v-model="fieldsLocal.network"
                         :class="[
                           'tooltip-field show-arrow',
                           {
                             'danger-not-valid':
-                              fields.selected === '0' &&
+                              fieldsLocal.selected === '0' &&
                               props.messagesFields.network.field,
                           },
                         ]"
@@ -71,43 +71,43 @@
           </fieldset>
         </div>
 
-        <div v-show="isConnectionTypeFirstTwo">
+        <div v-show="props.isConnectionTypeFirstTwo">
           <div class="radio">
             <input
               id="existing-standard-switch"
-              v-model="fields.selected"
+              v-model="fieldsLocal.selected"
               data-id="existing-standard-switch-radio"
               type="radio"
               value="1"
               name="target-device"
             />
 
-            <!--              :checked="isConnectionTypeFirstTwo"-->
             <label for="existing-standard-switch">
               {{ localization.common.selectExistingStandardSwitch }}
             </label>
           </div>
           <fieldset
             :class="{
-              disabled: fields.selected !== '1',
+              disabled: fieldsLocal.selected !== '1',
             }"
           >
             <div>
               <atoms-tooltip-error
                 :has-error="
-                  fields.selected === '1' && !!props.messagesFields.switch.field
+                  fieldsLocal.selected === '1' &&
+                  !!props.messagesFields.switch.field
                 "
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
                     <div>
                       <input
-                        v-model="fields.standardSwitch"
+                        v-model="fieldsLocal.standardSwitch"
                         :class="[
                           'tooltip-field show-arrow',
                           {
                             'danger-not-valid':
-                              fields.selected === '1' &&
+                              fieldsLocal.selected === '1' &&
                               props.messagesFields.switch.field,
                           },
                         ]"
@@ -138,26 +138,25 @@
           <div class="radio">
             <input
               id="existing-switch"
-              v-model="fields.selected"
+              v-model="fieldsLocal.selected"
               data-id="existing-switch-radio"
               type="radio"
               value="2"
               name="target-device"
             />
-            <!--              :checked="props.connectionType === '2'"-->
             <label for="existing-switch">
               {{ localization.common.selectExistingSwitch }}
             </label>
           </div>
           <fieldset
             :class="{
-              disabled: fields.selected !== '2',
+              disabled: fieldsLocal.selected !== '2',
             }"
           >
             <div>
               <atoms-tooltip-error
                 :has-error="
-                  fields.selected === '2' &&
+                  fieldsLocal.selected === '2' &&
                   !!props.messagesFields.switch2.field
                 "
               >
@@ -165,12 +164,12 @@
                   <fieldset class="fieldset-block">
                     <div>
                       <input
-                        v-model="fields.switch"
+                        v-model="fieldsLocal.switch"
                         :class="[
                           'tooltip-field show-arrow',
                           {
                             'danger-not-valid':
-                              fields.selected === '2' &&
+                              fieldsLocal.selected === '2' &&
                               props.messagesFields.switch2.field,
                           },
                         ]"
@@ -197,11 +196,12 @@
           </fieldset>
         </div>
 
-        <div v-permission="'Networks.CreateSwitch'">
+        <div>
+          <!--            v-permission="'Networks.CreateSwitch'"-->
           <div class="radio">
             <input
               id="standard-switch"
-              v-model="fields.selected"
+              v-model="fieldsLocal.selected"
               data-id="standard-switch-radio"
               type="radio"
               value="3"
@@ -214,7 +214,7 @@
           </div>
           <fieldset
             :class="{
-              disabled: fields.selected !== '3',
+              disabled: fieldsLocal.selected !== '3',
             }"
           >
             <div class="horizontal-flex-container">
@@ -232,7 +232,7 @@
                       <template #elem>
                         <input
                           id="mtu"
-                          v-model="fields.mtu"
+                          v-model="fieldsLocal.mtu"
                           :class="[
                             'tooltip-field show-arrow',
                             {
@@ -259,146 +259,49 @@
       </form>
     </div>
   </div>
-  <teleport to="body">
-    <common-wizards-network-add-modals-select-standard-switch
-      :title="localization.common.selectSwitch"
-      :standard-switches-initial="props.standardSwitchesInitial"
-      :show="isShowStandardSwitchModal"
-      modal-name="select-standard-switch-modal"
-      view-name="select-standard-switch"
-      width="576px"
-      height="468px"
-      @select-standard-switch="onSelectStandardSwitch"
-      @hide="onHideStandardSwitchModal"
-    />
-    <common-wizards-network-add-modals-select-switch
-      :title="localization.common.selectSwitch"
-      :data="props.standardSwitchesInitial"
-      :show="isShowSwitchModal"
-      modal-name="select-switch-modal"
-      view-name="select-switch"
-      width="576px"
-      height="468px"
-      @select-switch="onSelectSwitch"
-      @hide="onHideSwitchModal"
-    />
-    <common-wizards-network-add-modals-select-network
-      :title="localization.common.selectNetwork"
-      :data="[]"
-      :show="isShowNetworkModal"
-      modal-name="select-network-modal"
-      view-name="select-network"
-      width="576px"
-      height="468px"
-      @select-network="onSelectNetwork"
-      @hide="onHideNetworkModal"
-    />
-  </teleport>
 </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 type { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
-import { validateMtuTargetDeviceLocal } from '~/components/common/wizards/network/add/validations/validations'
 
-const props = withDefaults(
-  defineProps<{
-    targetDevice: UI_I_TargetDevice
-    connectionType: string
-    standardSwitchesInitial: UI_I_Switch[]
-    alertMessages: string[]
-    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-    wizard: Wizard
-    selectedStandardSwitchId?: string
-    selectedSwitchId?: string
-  }>(),
-  {
-    selectedStandardSwitchId: '',
-    selectedSwitchId: '',
-  }
-)
+const props = defineProps<{
+  fields: UI_I_TargetDevice
+  wizard: Wizard
+  connectionType: string
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+  alertMessages: string[]
+  isConnectionTypeFirstTwo: boolean
+}>()
 
 const emits = defineEmits<{
   (event: 'change-target-device', targetDevice: UI_I_TargetDevice): void
   (event: 'hide-alert', stepId: 1): void
+  (event: 'show-modal', modalName: string): void
+  (event: 'update:fields', value: UI_I_TargetDevice): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isConnectionTypeFirstTwo = computed<boolean>(() =>
-  ['0', '1'].includes(props.connectionType)
-)
-
-const fields = ref<UI_I_TargetDevice>(useDeepCopy(props.targetDevice))
-
-let prevMtu = fields.value.mtu
-
-watch(
-  fields,
-  (newFields: UI_I_TargetDevice) => {
-    newFields.mtu !== prevMtu &&
-      validateMtuTargetDeviceLocal(localization.value, newFields, props.wizard)
-
-    prevMtu = newFields.mtu
-
-    emits('change-target-device', newFields)
+const fieldsLocal = computed({
+  get() {
+    return props.fields
   },
-  { deep: true }
-)
-
-// The switches selection modal hide and show functionality
-const isShowStandardSwitchModal = ref<boolean>(false)
-const onHideStandardSwitchModal = (): void => {
-  isShowStandardSwitchModal.value = false
-}
-const isShowSwitchModal = ref<boolean>(false)
-const onHideSwitchModal = (): void => {
-  isShowSwitchModal.value = false
-}
-const isShowNetworkModal = ref<boolean>(false)
-const onHideNetworkModal = (): void => {
-  isShowNetworkModal.value = false
-}
+  set(value: UI_I_TargetDevice) {
+    emits('update:fields', value)
+  },
+})
 
 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
-  }
-}
-
-// Switches selection functionality
-const onSelectSwitch = (selectedSwitchId: string): void => {
-  fields.value.switch = selectedSwitchId
+  emits('show-modal', value)
 }
-const onSelectStandardSwitch = (selectedStandardSwitchId: string): void => {
-  fields.value.standardSwitch = selectedStandardSwitchId
-}
-const onSelectNetwork = (_selectedNetworkId: string): void => {
-  fields.value.network = ''
-}
-
-onMounted(() => {
-  !fields.value.standardSwitch &&
-    (fields.value.standardSwitch = props.selectedStandardSwitchId)
-
-  !fields.value.switch && (fields.value.switch = props.selectedSwitchId)
-})
 
 const onHideAlert = (): void => {
   emits('hide-alert', 1)

package/components/common/wizards/network/add/steps/selectTargetDevice/modals/Modals.vue

@@ -0,0 +1,55 @@
+<template>
+  <teleport to="body">
+    <common-wizards-network-add-steps-select-target-device-modals-select-standard-switch
+      :show="props.isShowStandardSwitchModal"
+      :data="props.standardSwitchesInitial"
+      @select-standard-switch="onSelectStandardSwitch"
+      @hide="emits('hide-modal', 'select-standard-switch')"
+    />
+    <common-wizards-network-add-steps-select-target-device-modals-select-switch
+      :show="props.isShowSwitchModal"
+      :data="props.standardSwitchesInitial"
+      @select-switch="onSelectSwitch"
+      @hide="emits('hide-modal', 'select-switch')"
+    />
+    <common-wizards-network-add-steps-select-target-device-modals-select-network
+      :show="props.isShowNetworkModal"
+      :data="[]"
+      @select-network="onSelectNetwork"
+      @hide="emits('hide-modal', 'select-network')"
+    />
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Switch } from '~/components/common/wizards/network/add/lib/models/interfaces'
+
+const props = defineProps<{
+  standardSwitchesInitial: UI_I_Switch[]
+  isShowStandardSwitchModal: boolean
+  isShowSwitchModal: boolean
+  isShowNetworkModal: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide-modal', value: string): void
+  (event: 'select-standard-switch', value: string): void
+  (event: 'select-switch', value: string): void
+  (event: 'select-network', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSelectStandardSwitch = (value: string): void => {
+  emits('select-standard-switch', value)
+}
+const onSelectSwitch = (value: string): void => {
+  emits('select-switch', value)
+}
+const onSelectNetwork = (_value: string): void => {
+  emits('select-network', value)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/wizards/network/add/steps/selectTargetDevice/modals/SelectNetwork.vue

@@ -0,0 +1,64 @@
+<template>
+  <common-wizards-network-add-steps-select-target-device-modals-new-select-network
+    v-if="isNewView"
+    :data="networks"
+    :show="props.show"
+    @select-network="onSelectNetwork"
+    @hide="onHideModal"
+  />
+  <common-wizards-network-add-steps-select-target-device-modals-old-select-network
+    v-else
+    :data="networks"
+    :show="props.show"
+    :is-show-alert="isShowAlert"
+    @select-network="onSelectNetwork"
+    @show-alert="isShowAlert = true"
+    @hide-alert="onHideAlert"
+    @hide="onHideModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_NetworkForAdding } from '~/components/common/wizards/network/add/lib/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+  data: UI_I_NetworkForAdding[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide-modal', value: string): void
+  (event: 'select-network', networkId: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const networks = ref<UI_I_NetworkForAdding[]>(props.data)
+
+watch(
+  () => props.data,
+  (newNetworks: UI_I_NetworkForAdding[]) => {
+    networks.value = newNetworks
+  },
+  { deep: true, immediate: true }
+)
+
+const isShowAlert = ref<boolean>(false)
+const onHideAlert = (): void => {
+  isShowAlert.value = false
+}
+
+const onSelectNetwork = (selectedNetworkId: string): void => {
+  emits('select-network', selectedNetworkId)
+  onHideAlert()
+}
+
+const onHideModal = (): void => {
+  onHideAlert()
+  emits('hide-modal', 'select-network')
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/wizards/network/add/steps/selectTargetDevice/modals/SelectStandardSwitch.vue

@@ -0,0 +1,64 @@
+<template>
+  <common-wizards-network-add-steps-select-target-device-modals-new-select-standard-switch
+    v-if="isNewView"
+    :data="standardSwitches"
+    :show="props.show"
+    @select-standard-switch="onSelectSwitch"
+    @hide="onHideModal"
+  />
+  <common-wizards-network-add-steps-select-target-device-modals-old-select-standard-switch
+    v-else
+    :data="standardSwitches"
+    :show="props.show"
+    :is-show-alert="isShowAlert"
+    @select-standard-switch="onSelectSwitch"
+    @show-alert="isShowAlert = true"
+    @hide-alert="onHideAlert"
+    @hide="onHideModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Switch } from '~/components/common/wizards/network/add/lib/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+  data: UI_I_Switch[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide-modal', value: string): void
+  (event: 'select-standard-switch', switchId: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const standardSwitches = ref<UI_I_Switch[]>(props.data)
+
+watch(
+  () => props.data,
+  (newStandardSwitches: UI_I_Switch[]) => {
+    standardSwitches.value = newStandardSwitches
+  },
+  { deep: true, immediate: true }
+)
+
+const isShowAlert = ref<boolean>(false)
+const onHideAlert = (): void => {
+  isShowAlert.value = false
+}
+
+const onSelectSwitch = (selectedSwitchId: string): void => {
+  emits('select-standard-switch', selectedSwitchId)
+  onHideAlert()
+}
+
+const onHideModal = (): void => {
+  onHideAlert()
+  emits('hide-modal', 'select-standard-switch')
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/wizards/network/add/steps/selectTargetDevice/modals/SelectSwitch.vue

@@ -0,0 +1,64 @@
+<template>
+  <common-wizards-network-add-steps-select-target-device-modals-new-select-switch
+    v-if="isNewView"
+    :data="switches"
+    :show="props.show"
+    @select-switch="onSelectSwitch"
+    @hide="onHideModal"
+  />
+  <common-wizards-network-add-steps-select-target-device-modals-old-select-switch
+    v-else
+    :data="switches"
+    :show="props.show"
+    :is-show-alert="isShowAlert"
+    @select-switch="onSelectSwitch"
+    @show-alert="isShowAlert = true"
+    @hide-alert="onHideAlert"
+    @hide="onHideModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Switch } from '~/components/common/wizards/network/add/lib/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+  data: UI_I_Switch[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide-modal', value: string): void
+  (event: 'select-switch', switchId: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const switches = ref<UI_I_Switch[]>(props.data)
+
+watch(
+  () => props.data,
+  (newSwitches: UI_I_Switch[]) => {
+    switches.value = newSwitches
+  },
+  { deep: true, immediate: true }
+)
+
+const isShowAlert = ref<boolean>(false)
+const onHideAlert = (): void => {
+  isShowAlert.value = false
+}
+
+const onSelectSwitch = (selectedSwitchId: string): void => {
+  emits('select-switch', selectedSwitchId)
+  onHideAlert()
+}
+
+const onHideModal = (): void => {
+  onHideAlert()
+  emits('hide-modal', 'select-switch')
+}
+</script>
+
+<style scoped lang="scss"></style>