bfg-common 1.5.487 → 1.5.488

package/components/common/adapterManager/{AddAdapterModal.vue → addAdapterModal/AddAdapterModalOld.vue}

@@ -1,13 +1,13 @@
 <template>
   <div>
     <atoms-modal
-      :width="props.width"
-      :height="props.height"
+      width="864px"
+      height="618px"
       :show="props.show"
       :title="localization.common.addPhysicalAdaptersToSwitch"
       test-id="add-adapter"
       class="diagram-action__edit"
-      @hide="onHideViewSettingsModal"
+      @hide="onHideAddAdapterModal"
       @submit="onAddSelectedAdapters"
     >
       <template #modalBody>
@@ -19,7 +19,7 @@
               :full-mode="false"
               :is-add-modal="true"
               :adapters="props.adapters"
-              :existing-adapters-for-adding="existingAdaptersAsText"
+              :existing-adapters-for-adding="props.existingAdaptersAsText"
               :selected-add-adapter-id="props.selectedAddAdapterId"
               test-id="adapter-manager"
               class="free-adapters"
@@ -38,62 +38,32 @@ import type {
   UI_I_Localization,
   UI_I_ItemsWithTotalCounts,
 } from '~/lib/models/interfaces'
-import type {
-  UI_I_Adapter,
-  UI_I_SwitchAdapterItem,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    isAddModal: boolean
-    isDarkMode: boolean
-    show: boolean
-    width: string
-    height: string
-    modalName: string
-    viewName: string
-    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-    existingAdaptersForAdding: (UI_I_Adapter | UI_I_SwitchAdapterItem)[]
-    selectedAddAdapterId: string
-  }>(),
-  {
-    existingAdaptersForAdding: () => [],
-    adapters: () => ({
-      total_items: 0,
-      total_pages: 0,
-      items: [],
-    }),
-  }
-)
+import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  isDarkMode: boolean
+  show: boolean
+  existingAdaptersAsText: string[]
+  selectedAddAdapterId: string
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+}>()
 
-// UI_I_Localization
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-// Modal and add adapter to top
 const emits = defineEmits<{
   (event: 'hide'): void
-  (event: 'add-adapter', adapterId: string): void
+  (event: 'add-adapter'): void
   (event: 'select-add-adapter', adapterId: string): void
 }>()
 
-const existingAdaptersAsText = computed<string[]>(() =>
-  props.existingAdaptersForAdding.map(
-    (adapter: UI_I_SwitchAdapterItem) => adapter.name
-  )
-)
-
-// Selected adapter for adding
 const onSelectAddAdapter = (adapterId: string): void => {
   emits('select-add-adapter', adapterId)
 }
-const onHideViewSettingsModal = (): void => {
+const onHideAddAdapterModal = (): void => {
   emits('hide')
-  emits('select-add-adapter', '')
 }
 const onAddSelectedAdapters = (): void => {
-  props.selectedAddAdapterId && emits('add-adapter', props.selectedAddAdapterId)
-  emits('select-add-adapter', '')
+  emits('add-adapter')
 }
 </script>
 

package/components/common/adapterManager/addAdapterWarningModal/AddAdapterWarningModal.vue

@@ -0,0 +1,32 @@
+<template>
+  <common-adapter-manager-add-adapter-warning-modal-new
+    v-if="isNewView"
+    :test-id="props.testId"
+    :show="props.show"
+    @hide="emits('hide')"
+  />
+  <common-adapter-manager-add-adapter-warning-modal-old
+    v-else
+    :test-id="props.testId"
+    :show="props.show"
+    @hide="emits('hide')"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  show: boolean
+  title: string
+  testId: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/adapterManager/addAdapterWarningModal/AddAdapterWarningModalNew.vue

@@ -0,0 +1,38 @@
+<template>
+  <ui-popup
+    v-if="props.show"
+    :test-id="`${props.testId}-modal-close-button`"
+    icon-name="circle-warning"
+    :title="localization.common.warning"
+    :message="localization.common.noFreeNetworkAdaptersAddSwitch"
+    @hide="emits('hide')"
+  >
+    <template #footerContent>
+      <ui-button
+        :test-id="`${props.testId}-modal-close-button`"
+        variant="outline"
+        size="md"
+        @click="emits('hide')"
+      >
+        <span>{{ localization.common.close }}</span>
+      </ui-button>
+    </template>
+  </ui-popup>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+  testId: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/adapterManager/{AddAdapterWarningModal.vue → addAdapterWarningModal/AddAdapterWarningModalOld.vue}

@@ -4,9 +4,9 @@
       test-id="add-adapter-warning"
       width="576"
       :show="props.show"
-      :title="props.title"
+      :title="localization.common.warning"
       class="diagram-action__remove"
-      @hide="onHideModal"
+      @hide="emits('hide')"
     >
       <template #modalBody>
         <div class="modal-body-content modal-body-content__confirmation">
@@ -25,7 +25,7 @@
             :data-id="`${props.testId}-close-button`"
             type="button"
             class="btn btn-primary"
-            @click="onHideModal"
+            @click="emits('hide')"
           >
             {{ localization.common.ok }}
           </button>
@@ -38,25 +38,16 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-// Props from up
 const props = defineProps<{
   show: boolean
-  modalName: string
-  viewName: string
-  title: string
   testId: string
 }>()
 
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// Modal
 const emits = defineEmits<{
   (event: 'hide'): void
 }>()
-const onHideModal = (): void => {
-  emits('hide')
-}
+
+const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style scoped lang="scss">

package/components/common/adapterManager/noActiveAdaptersModal/NoActiveAdaptersModal.vue

@@ -0,0 +1,31 @@
+<template>
+  <common-adapter-manager-no-active-adapters-modal-new
+    v-if="isNewView"
+    :show="props.show"
+    @hide="emits('hide')"
+    @submit="emits('submit')"
+  />
+  <common-adapter-manager-no-active-adapters-modal-old
+    v-else
+    :show="props.show"
+    @hide="emits('hide')"
+    @submit="emits('submit')"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/adapterManager/noActiveAdaptersModal/NoActiveAdaptersModalNew.vue

@@ -0,0 +1,34 @@
+<template>
+  <ui-popup
+    v-if="props.show"
+    test-id="no-active-adapters"
+    icon-name="circle-warning"
+    :texts="texts"
+    :title="localization.common.noActivePhysicalNetworkAdaptersTitle"
+    :message="localization.common.noActivePhysicalNetworkAdaptersMessage"
+    @hide="emits('hide')"
+    @submit="emits('submit')"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.continue,
+}))
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/adapterManager/{NoActiveAdaptersModal.vue → noActiveAdaptersModal/NoActiveAdaptersModalOld.vue}

@@ -5,8 +5,8 @@
       width="576px"
       :show="props.show"
       :title="localization.common.physicalNetworkAdaptersWarning"
-      @hide="onHide"
-      @submit="onSubmit"
+      @hide="emits('hide')"
+      @submit="emits('submit')"
     >
       <template #modalBody>
         <div class="modal-body-content modal-body-content__confirmation">
@@ -31,7 +31,6 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
   show: boolean
-  title: string
 }>()
 
 const emits = defineEmits<{
@@ -39,9 +38,6 @@ const emits = defineEmits<{
   (event: 'submit'): void
 }>()
 
-const onHide = () => emits('hide')
-const onSubmit = () => emits('submit')
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 

package/components/common/adapterManager/noConnectedActiveAdaptersModal/NoConnectedActiveAdaptersModal.vue

@@ -0,0 +1,31 @@
+<template>
+  <common-adapter-manager-no-connected-active-adapters-modal-new
+    v-if="isNewView"
+    :show="props.show"
+    @hide="emits('hide')"
+    @submit="emits('submit')"
+  />
+  <common-adapter-manager-no-connected-active-adapters-modal-old
+    v-else
+    :show="props.show"
+    @hide="emits('hide')"
+    @submit="emits('submit')"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/adapterManager/noConnectedActiveAdaptersModal/NoConnectedActiveAdaptersModalNew.vue

@@ -0,0 +1,34 @@
+<template>
+  <ui-popup
+    v-if="props.show"
+    test-id="no-connected-active-adapter"
+    icon-name="circle-warning"
+    :texts="texts"
+    :title="localization.common.noConnectedPhysicalNetworkAdaptersTitle"
+    :message="localization.common.noConnectedPhysicalNetworkAdaptersMessage"
+    @hide="emits('hide')"
+    @submit="emits('submit')"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.continue,
+}))
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/adapterManager/{NoConnectedActiveAdaptersModal.vue → noConnectedActiveAdaptersModal/NoConnectedActiveAdaptersModalOld.vue}

@@ -5,8 +5,8 @@
       width="576px"
       :show="props.show"
       :title="localization.common.physicalNetworkAdaptersWarning"
-      @hide="onHide"
-      @submit="onSubmit"
+      @hide="emits('hide')"
+      @submit="emits('submit')"
     >
       <template #modalBody>
         <div class="modal-body-content modal-body-content__confirmation">
@@ -31,7 +31,6 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
   show: boolean
-  title: string
 }>()
 
 const emits = defineEmits<{
@@ -39,9 +38,6 @@ const emits = defineEmits<{
   (event: 'submit'): void
 }>()
 
-const onHide = () => emits('hide')
-const onSubmit = () => emits('submit')
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 

package/components/common/adapterManager/ui/actions/bar/Bar.vue

@@ -0,0 +1,57 @@
+<template>
+  <common-adapter-manager-ui-actions-bar-new
+    v-if="isNewView"
+    :is-add-modal="props.isAddModal"
+    :selected-is-header="props.selectedIsHeader"
+    :is-disabled-move-up="props.isDisabledMoveUp"
+    :is-disabled-move-down="props.isDisabledMoveDown"
+    @move-up-adapter="onMoveUp"
+    @move-down-adapter="onMoveDown"
+  />
+  <common-adapter-manager-ui-actions-bar-old
+    v-else
+    :full-mode="props.fullMode"
+    :is-add-modal="props.isAddModal"
+    :selected-is-header="props.selectedIsHeader"
+    :is-disabled-move-up="props.isDisabledMoveUp"
+    :is-disabled-move-down="props.isDisabledMoveDown"
+    :is-disabled-remove="props.isDisabledRemove"
+    @move-up-adapter="onMoveUp"
+    @move-down-adapter="onMoveDown"
+    @show-add-adapter-modal="onShowAddAdapterModal"
+    @remove-adapter="onRemove"
+  />
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    fullMode?: boolean
+    isAddModal: boolean
+    selectedIsHeader: boolean
+    isDisabledMoveUp: boolean
+    isDisabledMoveDown: boolean
+    isDisabledRemove?: boolean
+  }>(),
+  {
+    fullMode: false,
+    isDisabledRemove: false,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'show-add-adapter-modal'): void
+  (event: 'remove-adapter'): void
+  (event: 'move-up-adapter'): void
+  (event: 'move-down-adapter'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const onShowAddAdapterModal = () => emits('show-add-adapter-modal')
+const onMoveDown = () => emits('move-down-adapter')
+const onMoveUp = () => emits('move-up-adapter')
+const onRemove = () => emits('remove-adapter')
+</script>

package/components/common/adapterManager/ui/actions/bar/BarNew.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="!props.isAddModal">
+    <ul class="adapter-manager-actions">
+      <common-adapter-manager-ui-actions-move-up-adapter-button
+        :is-disabled-move-up="props.isDisabledMoveUp"
+        @move-up-adapter="onMoveUp"
+      />
+      <common-adapter-manager-ui-actions-move-down-adapter-button
+        :is-disabled-move-down="props.isDisabledMoveDown"
+        @move-down-adapter="onMoveDown"
+      />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  isAddModal: boolean
+  isDisabledMoveUp: boolean
+  isDisabledMoveDown: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'move-down-adapter'): void
+  (event: 'move-up-adapter'): void
+}>()
+
+const onMoveDown = () => emits('move-down-adapter')
+const onMoveUp = () => emits('move-up-adapter')
+</script>
+
+<style scoped lang="scss">
+.adapter-manager-actions {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+</style>

package/components/common/adapterManager/ui/actions/moveDownAdapterButton/MoveDownAdapterButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <common-adapter-manager-ui-actions-move-down-adapter-button-new
+    v-if="isNewView"
+    :is-disabled-move-down="props.isDisabledMoveDown"
+    @move-down-adapter="onMoveDown"
+  />
+  <common-adapter-manager-ui-actions-move-down-adapter-button-old
+    v-else
+    :is-disabled-move-down="props.isDisabledMoveDown"
+    @move-down-adapter="onMoveDown"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  isDisabledMoveDown: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'move-down-adapter'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const onMoveDown = () => emits('move-down-adapter')
+</script>

package/components/common/adapterManager/ui/actions/moveDownAdapterButton/MoveDownAdapterButtonNew.vue

@@ -0,0 +1,75 @@
+<template>
+  <li class="action">
+    <span
+      :class="[
+        'action-link',
+        {
+          disabled: props.isDisabledMoveDown,
+        },
+      ]"
+      :title="localization.common.moveDown"
+      data-id="move-down-adapter-button"
+      @click="onMoveDown"
+    >
+      <ui-icon name="sort-arrow" width="16" height="16" />
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  isDisabledMoveDown: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'move-down-adapter'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onMoveDown = () => emits('move-down-adapter')
+</script>
+
+<style scoped lang="scss">
+.action {
+  width: 100%;
+  height: 28px;
+
+  &-link {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--table-container-in-modal-border);
+    border-radius: 6px;
+    background: #ffffff;
+    color: var(--table-text-first);
+
+    &:hover {
+      background: #f6f7f8;
+    }
+
+    &.disabled {
+      background: #f7f8f8;
+      color: var(--table-disabled-btn);
+    }
+  }
+}
+
+:root.dark-theme {
+  .action-link {
+    background: #203241;
+
+    &:hover {
+      background: #283948;
+    }
+
+    &.disabled {
+      background: #334351;
+    }
+  }
+}
+</style>

package/components/common/adapterManager/ui/actions/{MoveDownAdapterButton.vue → moveDownAdapterButton/MoveDownAdapterButtonOld.vue}

@@ -19,15 +19,9 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-const props = withDefaults(
-  defineProps<{
-    isDisabledMoveDown: boolean
-    testId?: string
-  }>(),
-  {
-    testId: '',
-  }
-)
+const props = defineProps<{
+  isDisabledMoveDown: boolean
+}>()
 
 const emits = defineEmits<{
   (event: 'move-down-adapter'): void

package/components/common/adapterManager/ui/actions/moveUpAdapterButton/MoveUpAdapterButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <common-adapter-manager-ui-actions-move-up-adapter-button-new
+    v-if="isNewView"
+    :is-disabled-move-up="props.isDisabledMoveUp"
+    @move-up-adapter="onMoveUp"
+  />
+  <common-adapter-manager-ui-actions-move-up-adapter-button-old
+    v-else
+    :is-disabled-move-up="props.isDisabledMoveUp"
+    @move-up-adapter="onMoveUp"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  isDisabledMoveUp: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'move-up-adapter'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const onMoveUp = () => emits('move-up-adapter')
+</script>