bfg-common 1.6.89 → 1.6.91

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

@@ -1,306 +0,0 @@
-<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>

package/components/common/diagramMain/skeleton/Header.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="diagram-header-skeleton">
-    <div class="diagram-header-skeleton-title">
-      <ui-skeleton-item width="160" height="22" />
-    </div>
-    <div class="diagram-header-skeleton-buttons">
-      <ui-skeleton-item width="112" height="36" border-radius="8" />
-      <ui-skeleton-item width="160" height="36" border-radius="8" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.diagram-header-skeleton {
-  padding: 16px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  row-gap: 24px;
-  column-gap: 24px;
-
-  &-buttons {
-    display: flex;
-    column-gap: 16px;
-    margin-left: auto;
-  }
-}
-</style>

package/components/common/diagramMain/skeleton/Switch.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="diagram-skeleton">
-    <div class="diagram-skeleton-item-header">
-      <div class="diagram-skeleton-item-header-icon">
-        <ui-icon
-          class="diagram-skeleton-item-header-icon-arrow"
-          name="arrow"
-          width="20"
-          height="20"
-        />
-      </div>
-      <ui-skeleton-item width="160" height="20" />
-      <div class="diagram-skeleton-item-header-line"></div>
-      <ui-skeleton-item width="400" height="20" />
-    </div>
-    <div class="diagram-skeleton-container">
-      <ui-skeleton-switch width="712" />
-    </div>
-    <div class="diagram-skeleton-footer">
-      <ui-skeleton-item width="80" height="20" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.diagram-skeleton {
-  margin: 0 16px 16px;
-  border-radius: 8px;
-  background: var(--diagram-container-bg);
-  box-shadow: 0 1px 4px 0 #00000014;
-  padding: 16px;
-  overflow-clip-margin: content-box;
-  overflow: clip;
-
-  &-item-header {
-    display: flex;
-    column-gap: 16px;
-
-    &-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--select-arrow);
-
-      &-arrow {
-        transform: rotate(180deg);
-        margin-right: -4px;
-      }
-    }
-
-    &-line {
-      height: 20px;
-      border-left: 1px solid var(--horizontal-line);
-    }
-  }
-
-  &-container {
-    display: flex;
-    justify-content: center;
-    min-width: 759px;
-    padding: 48px 23.5px 24px 23.5px;
-
-    //:deep(svg) {
-    //  padding: 22px 14.5px;
-    //}
-  }
-
-  &-footer {
-    padding-top: 16px;
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-</style>