bfg-common 1.0.13 → 1.0.15

package/components/common/diagramMain/modals/ManagePhysicalAdaptersModal.vue

@@ -1,236 +1,236 @@
-<template>
-  <div>
-    <atoms-modal
-      :width="props.width"
-      :height="props.height"
-      :show="props.show"
-      :title="localization.managePhysicalNetworkAdapters"
-      :second-title="props.switchName"
-      class="diagram-action__edit"
-      @hide="onHideManagePhysicalAdaptersModal"
-      @submit="onSendManageAdapter"
-    >
-      <template #modalBody>
-        <div class="wizard-content__container">
-          <div class="wizard-content">
-            <common-adapter-manager
-              test-id="manage-physical-adapter"
-              :is-active="true"
-              :full-mode="true"
-              :adapters="props.adapters"
-              :free-adapters="props.freeAdapters"
-              :added-adapters="addedAdapters"
-              :adapter-status="props.adapterStatus"
-              :is-show-no-connected-active-adapters-modal="
-                isShowNoConnectedActiveAdaptersModal
-              "
-              :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
-              @hide-no-connected-active-adapters-modal="
-                onHideNoConnectedActiveAdaptersModal
-              "
-              @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
-              @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
-              @change-added-adapters="onChangeAddedAdapters"
-              @change-adapter-status="onChangeAdapterStatus"
-              @get-free-adapters="onGetFreeAdapters"
-            />
-          </div>
-        </div>
-        <atoms-loader v-show="isShowLoader" />
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import {
-  UI_I_Adapter,
-  UI_I_AdapterStatus,
-  UI_I_SwitchAdapterItem,
-  UI_I_SwitchAdapters,
-} from '~/components/common/diagramMain/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    switchName: string
-    show: boolean
-    viewName: string
-    width: string
-    height: string
-    freeAdapters: UI_I_Adapter[]
-    adapterStatus: UI_I_AdapterStatus
-    adapters: UI_I_SwitchAdapters
-    initialAdapterStatus: UI_I_AdapterStatus
-  }>(),
-  {
-    switchName: '',
-    adapterStatus: () => ({
-      active: [],
-      standBy: [],
-      unused: [],
-    }),
-  }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowLoader = ref(false)
-
-const showLoader = () => {
-  isShowLoader.value = true
-}
-const hideLoader = () => {
-  isShowLoader.value = false
-}
-
-const addedAdapters = ref<string[]>()
-
-const onChangeAddedAdapters = (addedAdaptersNew: string[]) => {
-  addedAdapters.value = addedAdaptersNew
-}
-
-const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus) => {
-  emits('change-adapter-status', adapterStatusNew)
-}
-
-const isShowNoConnectedActiveAdaptersModal = ref(false)
-const isShowNoActiveAdaptersModal = ref(false)
-
-const showNoConnectedActiveAdaptersModal = () => {
-  isShowNoConnectedActiveAdaptersModal.value = true
-}
-const onHideNoConnectedActiveAdaptersModal = () => {
-  isShowNoConnectedActiveAdaptersModal.value = false
-}
-const showNoActiveAdaptersModal = () => {
-  isShowNoActiveAdaptersModal.value = true
-}
-const onHideNoActiveAdaptersModal = () => {
-  isShowNoActiveAdaptersModal.value = false
-}
-
-const onSendManagePhysicalAdaptersData = (
-  adapterStatus: UI_I_AdapterStatus,
-  switchName: string,
-  hideManagePhysicalAdaptersModal: () => void,
-  hideLoader: () => void
-) => {
-  showLoader()
-  emits(
-    'send-manage-physical-adapters-data',
-    adapterStatus,
-    switchName,
-    hideManagePhysicalAdaptersModal,
-    hideLoader
-  )
-}
-const onConfirmNoActiveAdaptersModal = () => {
-  onSendManagePhysicalAdaptersData(
-    props.adapterStatus,
-    props.switchName,
-    onHideManagePhysicalAdaptersModal,
-    hideLoader
-  )
-  onHideNoConnectedActiveAdaptersModal()
-  onHideNoActiveAdaptersModal()
-}
-
-const onSendManageAdapter = () => {
-  if (props.adapterStatus.active.length === 0) {
-    showNoActiveAdaptersModal()
-    return
-  }
-
-  const activeAndConnectedAdapters = props.adapterStatus.active.filter(
-    (adapterName: string) =>
-      props.adapters.items.find(
-        (ad: UI_I_SwitchAdapterItem) => ad.name === adapterName
-      )?.carrier
-  )
-  if (activeAndConnectedAdapters.length === 0) {
-    showNoConnectedActiveAdaptersModal()
-    return
-  }
-
-  onSendManagePhysicalAdaptersData(
-    props.adapterStatus,
-    props.switchName,
-    onHideManagePhysicalAdaptersModal,
-    hideLoader
-  )
-}
-
-// Modal
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'get-free-adapters', showAddAdapterModal: () => void): void
-  (event: 'change-added-adapters', addedAdapters: string[]): void
-  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
-  (
-    event: 'send-manage-physical-adapters-data',
-    adapterStatus: UI_I_AdapterStatus,
-    switchName: string,
-    hideModalCB: () => void,
-    hideLoaderCB: () => void
-  ): void
-}>()
-
-const onGetFreeAdapters = (showAddAdapterModal: () => void) => {
-  showLoader()
-  emits('get-free-adapters', () => {
-    hideLoader()
-    showAddAdapterModal()
-  })
-}
-
-const onHideManagePhysicalAdaptersModal = (): void => {
-  addedAdapters.value = []
-  emits('change-adapter-status', props.initialAdapterStatus)
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.secondary-title) {
-  font-size: 18px;
-  font-weight: 200;
-}
-
-:deep(.modal-body-content.modal-body-content__confirmation) {
-  display: flex;
-
-  .confirm-icon-container {
-    margin-right: 20px;
-  }
-
-  .preserve-newlines {
-    white-space: pre-line;
-    font-size: 15px;
-  }
-}
-
-.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;
-  }
-}
-
-:deep(.table-fixed-height) {
-  height: 290px;
-  max-height: 290px;
-}
-</style>
+<template>
+  <div>
+    <atoms-modal
+      :width="props.width"
+      :height="props.height"
+      :show="props.show"
+      :title="localization.managePhysicalNetworkAdapters"
+      :second-title="props.switchName"
+      class="diagram-action__edit"
+      @hide="onHideManagePhysicalAdaptersModal"
+      @submit="onSendManageAdapter"
+    >
+      <template #modalBody>
+        <div class="wizard-content__container">
+          <div class="wizard-content">
+            <common-adapter-manager
+              test-id="manage-physical-adapter"
+              :is-active="true"
+              :full-mode="true"
+              :adapters="props.adapters"
+              :free-adapters="props.freeAdapters"
+              :added-adapters="addedAdapters"
+              :adapter-status="props.adapterStatus"
+              :is-show-no-connected-active-adapters-modal="
+                isShowNoConnectedActiveAdaptersModal
+              "
+              :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
+              @hide-no-connected-active-adapters-modal="
+                onHideNoConnectedActiveAdaptersModal
+              "
+              @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
+              @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
+              @change-added-adapters="onChangeAddedAdapters"
+              @change-adapter-status="onChangeAdapterStatus"
+              @get-free-adapters="onGetFreeAdapters"
+            />
+          </div>
+        </div>
+        <atoms-loader v-show="isShowLoader" />
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+  UI_I_SwitchAdapters,
+} from '~/components/common/diagramMain/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    switchName: string
+    show: boolean
+    viewName: string
+    width: string
+    height: string
+    freeAdapters: UI_I_Adapter[]
+    adapterStatus: UI_I_AdapterStatus
+    adapters: UI_I_SwitchAdapters
+    initialAdapterStatus: UI_I_AdapterStatus
+  }>(),
+  {
+    switchName: '',
+    adapterStatus: () => ({
+      active: [],
+      standBy: [],
+      unused: [],
+    }),
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowLoader = ref(false)
+
+const showLoader = () => {
+  isShowLoader.value = true
+}
+const hideLoader = () => {
+  isShowLoader.value = false
+}
+
+const addedAdapters = ref<string[]>()
+
+const onChangeAddedAdapters = (addedAdaptersNew: string[]) => {
+  addedAdapters.value = addedAdaptersNew
+}
+
+const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus) => {
+  emits('change-adapter-status', adapterStatusNew)
+}
+
+const isShowNoConnectedActiveAdaptersModal = ref(false)
+const isShowNoActiveAdaptersModal = ref(false)
+
+const showNoConnectedActiveAdaptersModal = () => {
+  isShowNoConnectedActiveAdaptersModal.value = true
+}
+const onHideNoConnectedActiveAdaptersModal = () => {
+  isShowNoConnectedActiveAdaptersModal.value = false
+}
+const showNoActiveAdaptersModal = () => {
+  isShowNoActiveAdaptersModal.value = true
+}
+const onHideNoActiveAdaptersModal = () => {
+  isShowNoActiveAdaptersModal.value = false
+}
+
+const onSendManagePhysicalAdaptersData = (
+  adapterStatus: UI_I_AdapterStatus,
+  switchName: string,
+  hideManagePhysicalAdaptersModal: () => void,
+  hideLoader: () => void
+) => {
+  showLoader()
+  emits(
+    'send-manage-physical-adapters-data',
+    adapterStatus,
+    switchName,
+    hideManagePhysicalAdaptersModal,
+    hideLoader
+  )
+}
+const onConfirmNoActiveAdaptersModal = () => {
+  onSendManagePhysicalAdaptersData(
+    props.adapterStatus,
+    props.switchName,
+    onHideManagePhysicalAdaptersModal,
+    hideLoader
+  )
+  onHideNoConnectedActiveAdaptersModal()
+  onHideNoActiveAdaptersModal()
+}
+
+const onSendManageAdapter = () => {
+  if (props.adapterStatus.active.length === 0) {
+    showNoActiveAdaptersModal()
+    return
+  }
+
+  const activeAndConnectedAdapters = props.adapterStatus.active.filter(
+    (adapterName: string) =>
+      props.adapters.items.find(
+        (ad: UI_I_SwitchAdapterItem) => ad.name === adapterName
+      )?.carrier
+  )
+  if (activeAndConnectedAdapters.length === 0) {
+    showNoConnectedActiveAdaptersModal()
+    return
+  }
+
+  onSendManagePhysicalAdaptersData(
+    props.adapterStatus,
+    props.switchName,
+    onHideManagePhysicalAdaptersModal,
+    hideLoader
+  )
+}
+
+// Modal
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'get-free-adapters', showAddAdapterModal: () => void): void
+  (event: 'change-added-adapters', addedAdapters: string[]): void
+  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
+  (
+    event: 'send-manage-physical-adapters-data',
+    adapterStatus: UI_I_AdapterStatus,
+    switchName: string,
+    hideModalCB: () => void,
+    hideLoaderCB: () => void
+  ): void
+}>()
+
+const onGetFreeAdapters = (showAddAdapterModal: () => void) => {
+  showLoader()
+  emits('get-free-adapters', () => {
+    hideLoader()
+    showAddAdapterModal()
+  })
+}
+
+const onHideManagePhysicalAdaptersModal = (): void => {
+  addedAdapters.value = []
+  emits('change-adapter-status', props.initialAdapterStatus)
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.secondary-title) {
+  font-size: 18px;
+  font-weight: 200;
+}
+
+:deep(.modal-body-content.modal-body-content__confirmation) {
+  display: flex;
+
+  .confirm-icon-container {
+    margin-right: 20px;
+  }
+
+  .preserve-newlines {
+    white-space: pre-line;
+    font-size: 15px;
+  }
+}
+
+.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;
+  }
+}
+
+:deep(.table-fixed-height) {
+  height: 290px;
+  max-height: 290px;
+}
+</style>