bfg-common 1.5.487 → 1.5.488

package/components/common/adapterManager/AdapterManagerNew.vue

@@ -0,0 +1,300 @@
+<template>
+  <div
+    :class="[
+      'edit-pg-failover-order-with-details',
+      {
+        'element-disabled': !props.isActive,
+        'full-height': props.fullMode,
+        'add-adapter-view': props.isAddModal,
+        'is-dark': props.isDarkMode,
+      },
+    ]"
+  >
+    <div class="failover-order-with-details flex-grow-auto relative-container">
+      <div class="flex-container flex-row fill-parent">
+        <div class="failover-order-master relative-container">
+          <div class="manager-wrapper">
+            <common-adapter-manager-ui-actions-bar
+              :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-table
+              :is-add-modal="props.isAddModal"
+              :selected-add-adapter-id="props.selectedAddAdapterId"
+              :selected-adapter-id="props.selectedAdapterId"
+              :removed-adapters="props.removedAdapters"
+              :existing-adapters-for-adding="props.existingAdaptersForAdding"
+              :adapter-status="props.adapterStatus"
+              :core-adapters="props.coreAdapters"
+              :is-active-header="props.isActiveHeader"
+              :is-standby-header="props.isStandbyHeader"
+              :is-unused-header="props.isUnusedHeader"
+              :is-disabled-remove="props.isDisabledRemove"
+              :full-mode="props.fullMode"
+              @show-add-adapter-modal="onShowAddAdapterModal"
+              @remove-adapter="onRemove"
+              @select-add-adapter="onSelectAddAdapter"
+              @select-adapter="onSelectAdapter"
+              @click-empty-space="onClickEmptySpace"
+            />
+          </div>
+        </div>
+        <div class="failover-order-details relative-container">
+          <div class="absolute-container fill-parent">
+            <div
+              :class="[
+                'fill-parent',
+                {
+                  'full-width-adapter-info': props.fullMode,
+                  'no-selected-adapter': !props.hasSelectedAdapter,
+                },
+              ]"
+            >
+              <common-diagram-main-modals-view-settings-info
+                v-if="props.hasSelectedAdapter"
+                modal-name="network-settings-modal"
+                :show="true"
+                :view-name="localization.common.onPhysicalNetworkAdapter"
+                :modal-tabs="props.adapterViewSettingsModalTabs"
+                :view-settings-fields="props.viewSettingsFields"
+              />
+              <common-adapter-manager-ui-no-selected-adapter v-else />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+  UI_I_ViewSettingsFields,
+  UI_I_NavigationItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  isActive: boolean
+  fullMode: boolean
+  isAddModal: boolean
+  coreAdapters: string[]
+  isDarkMode: boolean
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  adapterStatus: UI_I_AdapterStatus
+  existingAdaptersForAdding: (UI_I_Adapter | UI_I_SwitchAdapterItem)[]
+  selectedAddAdapterId: string
+  selectedIsHeader: boolean
+  isDisabledMoveUp: boolean
+  isDisabledMoveDown: boolean
+  isDisabledRemove: boolean
+  selectedAdapterId: string
+  viewSettingsFields: UI_I_ViewSettingsFields[]
+  isActiveHeader: boolean
+  isUnusedHeader: boolean
+  isStandbyHeader: boolean
+  hasSelectedAdapter: boolean
+  removedAdapters: string[]
+  adapterViewSettingsModalTabs: UI_I_NavigationItem
+}>()
+
+const emits = defineEmits<{
+  (event: 'get-free-adapters', cb: () => void): void
+  (event: 'select-add-adapter', value: string): void
+  (event: 'remove-adapter', value: string): void
+  (event: 'select-adapter', value: string): void
+  (event: 'move-down'): void
+  (event: 'move-up'): void
+  (event: 'click-empty-space', value: Event): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSelectAdapter = (adapterId: string): void => {
+  emits('select-adapter', adapterId)
+}
+
+const onSelectAddAdapter = (adapterId: string): void => {
+  emits('select-add-adapter', adapterId)
+}
+
+const onMoveDown = () => {
+  emits('move-down')
+}
+
+const onMoveUp = () => {
+  emits('move-up')
+}
+
+const onRemove = (id: string) => {
+  emits('remove-adapter', id)
+}
+
+const onClickEmptySpace = (event: Event): void => {
+  emits('click-empty-space', event)
+}
+
+const onShowAddAdapterModal = (): void => {
+  emits('get-free-adapters')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.failover-order-details) {
+  width: 100%;
+
+  .full-width-adapter-info > div {
+    width: 100%;
+  }
+  .info-container {
+    padding-top: 0;
+    padding-left: 0;
+    width: 100%;
+
+    .table-fixed-height {
+      min-height: 263px;
+      max-height: 263px;
+      padding-right: 0;
+
+      .row-name-container {
+        min-width: unset !important;
+      }
+    }
+  }
+}
+
+.flex-container {
+  column-gap: 16px;
+}
+:deep(.table-fixed-height) {
+  .info-block-container {
+    padding-right: 19px !important;
+  }
+}
+.manager-wrapper {
+  height: 100%;
+  min-width: 224px;
+  width: 100%;
+}
+
+.add-adapter-view {
+  .manager-wrapper {
+    height: 100%;
+    max-height: 504px;
+    min-width: 240px;
+    width: 100%;
+  }
+
+  .for-full-width {
+    width: 100%;
+  }
+
+  :deep(.table-fixed-height) {
+    min-height: 100px !important;
+    max-height: 467.4px !important;
+
+    //.info-block-container {
+    //  padding-right: 19px !important;
+    //}
+  }
+}
+
+@media (max-width: 1084px) {
+  .edit-pg-failover-order-with-details:not(.add-adapter-view) {
+    :deep(.tabs-container) {
+      padding-right: 19px !important;
+    }
+    :deep(.manager) {
+      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;
+      row-gap: 16px;
+
+      .manager-wrapper {
+        width: 100%;
+        padding-right: 18px;
+      }
+    }
+  }
+}
+
+.edit-pg-failover-order-with-details.add-adapter-view {
+  height: 100%;
+
+  .failover-order-with-details {
+    height: 100%;
+  }
+}
+
+@media (max-width: 650px) {
+  .edit-pg-failover-order-with-details.add-adapter-view {
+    :deep(.tabs-container) {
+      padding-right: 19px !important;
+    }
+    :deep(.manager) {
+      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;
+      row-gap: 16px;
+
+      .manager-wrapper {
+        width: 100%;
+        padding-right: 18px;
+      }
+    }
+  }
+}
+
+.no-selected-adapter {
+  align-items: center;
+}
+
+:deep(.ui-main-no-items-found.md) {
+  font-size: 13px;
+  line-height: 16px;
+  padding: 0 56px 0 24px;
+
+  svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  span {
+    color: var(--title-form-first-color);
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 19px;
+    margin-bottom: 6px;
+  }
+}
+</style>