bfg-common 1.6.78 → 1.6.80

package/components/common/diagramMain/modals/managePhysicalAdapters/ManagePhysicalAdapters.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <component
+      :is="currentComponent"
+      :switch-name="props.switchName"
+      :is-dark-mode="props.isDarkMode"
+      :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"
+      :is-manage-adapters-modal-loading="props.isManageAdaptersModalLoading"
+      @get-free-adapters="onGetFreeAdapters"
+      @change-added-adapters="onChangeAddedAdapters"
+      @change-adapter-status="onChangeAdapterStatus"
+      @hide-no-connected-active-adapters-modal="
+        onHideNoConnectedActiveAdaptersModal
+      "
+      @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
+      @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
+      @send-manage-adapter="onSendManageAdapter"
+      @hide="onHideManagePhysicalAdaptersModal"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ItemsWithTotalCounts } from '~/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    switchName?: string
+    freeAdapters: UI_I_Adapter[]
+    adapterStatus?: UI_I_AdapterStatus
+    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+    initialAdapterStatus: UI_I_AdapterStatus
+    isDarkMode?: boolean
+    isManageAdaptersModalLoading?: boolean
+  }>(),
+  {
+    switchName: '',
+    adapterStatus: () => ({
+      active: [],
+      standby: [],
+      unused: [],
+    }),
+    isDarkMode: false,
+    isManageAdaptersModalLoading: false,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'get-free-adapters', showModal: () => void): void
+  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
+  (
+    event: 'send-manage-physical-adapters-data',
+    adapterStatus: UI_I_AdapterStatus,
+    switchName: string,
+    hideModal: () => void
+  ): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./ManagePhysicalAdaptersNew.vue'))
+    : defineAsyncComponent(() => import('./ManagePhysicalAdaptersOld.vue'))
+)
+
+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,
+  hideModal: () => void
+) => {
+  emits(
+    'send-manage-physical-adapters-data',
+    adapterStatus,
+    switchName,
+    hideModal
+  )
+}
+
+const onConfirmNoActiveAdaptersModal = () => {
+  onSendManagePhysicalAdaptersData(
+    props.adapterStatus,
+    props.switchName,
+    onHideManagePhysicalAdaptersModal
+  )
+  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
+  )
+}
+
+const onGetFreeAdapters = (showModal: () => void) => {
+  emits('get-free-adapters', showModal)
+}
+
+const onHideManagePhysicalAdaptersModal = (): void => {
+  addedAdapters.value = []
+  emits('change-adapter-status', props.initialAdapterStatus)
+  emits('hide')
+}
+</script>

package/components/common/diagramMain/modals/managePhysicalAdapters/ManagePhysicalAdaptersNew.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="manage-physical-adapters">
+    <ui-modal
+      :texts="modalTextsLocal"
+      :title="localization.common.managePhysicalNetworkAdapters"
+      :subtitle="props.switchName"
+      test-id="manage-physical-adapters-modal"
+      width="880px"
+      size="md"
+      :is-loading="props.isManageAdaptersModalLoading"
+      @hide="emits('hide')"
+      @submit="emits('send-manage-adapter')"
+    >
+      <template #content>
+        <div class="modal-content">
+          <common-adapter-manager
+            :adapters="props.adapters"
+            :free-adapters="props.freeAdapters"
+            :added-adapters="props.addedAdapters"
+            :adapter-status="props.adapterStatus"
+            :is-dark-mode="props.isDarkMode"
+            test-id="manage-physical-adapter"
+            :is-active="true"
+            :full-mode="true"
+            :is-show-no-connected-active-adapters-modal="
+              props.isShowNoConnectedActiveAdaptersModal
+            "
+            :is-show-no-active-adapters-modal="
+              props.isShowNoActiveAdaptersModal
+            "
+            @hide-no-connected-active-adapters-modal="
+              emits('hide-no-connected-active-adapters-modal')
+            "
+            @hide-no-active-adapters-modal="
+              emits('hide-no-active-adapters-modal')
+            "
+            @submit-from-modal="emits('confirm-no-active-adapters-modal')"
+            @change-added-adapters="onChangeAddedAdapters"
+            @change-adapter-status="onChangeAdapterStatus"
+            @get-free-adapters="onGetFreeAdapters"
+          />
+        </div>
+      </template>
+      <template #footerLeftContent><span></span></template>
+    </ui-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  switchName: string
+  freeAdapters: UI_I_Adapter[]
+  adapterStatus: UI_I_AdapterStatus
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  addedAdapters: string[]
+  isDarkMode: boolean
+  isManageAdaptersModalLoading: boolean
+  isShowNoConnectedActiveAdaptersModal: boolean
+  isShowNoActiveAdaptersModal: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'get-free-adapters', showModal: () => void): void
+  (event: 'change-added-adapters', addedAdapters: string[]): void
+  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
+  (event: 'hide-no-connected-active-adapters-modal'): void
+  (event: 'hide-no-active-adapters-modal'): void
+  (event: 'confirm-no-active-adapters-modal'): void
+  (event: 'send-manage-adapter'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTextsLocal = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.save,
+}))
+
+const onChangeAddedAdapters = (addedAdaptersNew: string[]) => {
+  emits('change-added-adapters', addedAdaptersNew)
+}
+
+const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus) => {
+  emits('change-adapter-status', adapterStatusNew)
+}
+
+const onGetFreeAdapters = (showModal: () => void) => {
+  emits('get-free-adapters', showModal)
+}
+</script>
+
+<style scoped lang="scss">
+.modal-content {
+  padding: 8px 0 8px 32px;
+
+  :deep(.manager) {
+    height: calc(100vh - 316px - 36px);
+    max-height: 331px;
+    min-height: unset;
+    width: 240px !important;
+  }
+
+  :deep(.info-container) {
+    .table-fixed-height {
+      height: calc(100vh - 316px - 36px);
+      max-height: 331px;
+      min-height: unset;
+    }
+  }
+}
+
+:deep(.modal-body) {
+  overflow: hidden;
+  height: 100%;
+
+  .modal-content {
+    max-height: calc(100vh - 300px);
+
+    .edit-pg-failover-order-with-details.full-height {
+      max-height: calc(100vh - 316px);
+
+      .failover-order-with-details {
+        max-height: calc(100vh - 316px);
+
+        .flex-container.flex-row.fill-parent {
+          max-height: calc(100vh - 316px);
+
+          .failover-order-master.relative-container {
+            max-height: calc(100vh - 316px);
+
+            .manager-wrapper {
+              max-height: calc(100vh - 316px);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ui-main-no-items-found {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .full-width-adapter-info.no-selected-adapter {
+    overflow: hidden;
+  }
+}
+
+:deep(.modal-footer-transparent-block) {
+  display: block !important;
+  width: calc(100% - 224px - 32px - 16px - 24px);
+  right: 16px;
+  top: -22px;
+}
+
+@media (max-width: 1084px) {
+  :deep(.edit-pg-failover-order-with-details:not(.add-adapter-view)) {
+    .failover-order-details {
+      width: 100%;
+    }
+    .tabs-container {
+      padding-right: 32px !important;
+    }
+    .manager {
+      height: calc(100vh - 316px - 36px) !important;
+      max-height: 331px !important;
+      min-height: unset !important;
+      width: 240px !important;
+    }
+
+    .info-container {
+      .table-fixed-height {
+        height: calc(100vh - 316px - 36px) !important;
+        max-height: 331px !important;
+        min-height: unset !important;
+      }
+    }
+
+    .table-fixed-height {
+      min-height: unset !important;
+      max-height: unset !important;
+
+      .info-block-container {
+        padding-right: 19px !important;
+      }
+    }
+    .flex-container {
+      flex-direction: row !important;
+      row-gap: 16px;
+
+      .manager-wrapper {
+        width: 100%;
+        padding-right: 0;
+      }
+    }
+    .no-selected-adapter {
+      padding-bottom: unset;
+    }
+  }
+}
+
+@media (max-width: 650px) {
+  :deep(.modal-body) {
+    overflow-y: auto !important;
+    scrollbar-gutter: stable;
+    height: 383px !important;
+
+    .modal-content {
+      max-height: 100% !important;
+      height: 100% !important;
+
+      .edit-pg-failover-order-with-details.full-height {
+        max-height: 100% !important;
+        height: 100% !important;
+        .failover-order-with-details {
+          max-height: 100% !important;
+          height: 100% !important;
+          .flex-container.flex-row.fill-parent {
+            max-height: 100% !important;
+            height: 100% !important;
+            .manager-wrapper {
+              max-height: 100% !important;
+              height: 100% !important;
+            }
+            .failover-order-details.relative-container {
+              max-height: 100% !important;
+              height: 100% !important;
+            }
+          }
+        }
+      }
+    }
+  }
+  .modal-content {
+    padding: 8px 0 8px 32px;
+    height: 100%;
+
+    :deep(.manager) {
+      width: 100% !important;
+    }
+    :deep(.info-container) {
+      .table-fixed-height {
+        height: unset;
+      }
+    }
+  }
+
+  :deep(.modal-footer-transparent-block) {
+    display: block !important;
+    width: calc(100% - 14px) !important;
+    right: 14px !important;
+    top: -16px !important;
+  }
+
+  :deep(.edit-pg-failover-order-with-details:not(.add-adapter-view)) {
+    .manager {
+      height: unset !important;
+      max-height: unset !important;
+      min-height: unset !important;
+      width: 100% !important;
+    }
+
+    .info-container {
+      .table-fixed-height {
+        height: unset !important;
+        max-height: unset !important;
+        min-height: unset !important;
+      }
+    }
+
+    :deep(.table-fixed-height) {
+      min-height: unset !important;
+      max-height: unset !important;
+
+      .info-block-container {
+        padding-right: 19px !important;
+      }
+    }
+    .flex-container {
+      flex-direction: column !important;
+      column-gap: 16px;
+
+      .manager-wrapper {
+        width: 100%;
+        padding-right: 18px;
+      }
+    }
+    .no-selected-adapter {
+      padding-bottom: 16px;
+    }
+  }
+}
+</style>