bfg-common 1.5.6 → 1.5.7

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

@@ -1,330 +1,330 @@
-<template>
-  <div>
-    <atoms-modal
-      :width="props.width"
-      :height="props.height"
-      :show="props.show"
-      :title="localization.common.managePhysicalNetworkAdapters"
-      :second-title="props.switchName"
-      :class="[
-        'diagram-action__edit',
-        {
-          'is-dark': props.isDarkMode,
-        },
-      ]"
-      @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-dark-mode="props.isDarkMode"
-              :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="props.isManageAdaptersModalLoading" />
-      </template>
-    </atoms-modal>
-  </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,
-} from '~/components/common/diagramMain/lib/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_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-    initialAdapterStatus: UI_I_AdapterStatus
-    isDarkMode?: boolean
-    isManageAdaptersModalLoading?: boolean
-  }>(),
-  {
-    switchName: '',
-    adapterStatus: () => ({
-      active: [],
-      standby: [],
-      unused: [],
-    }),
-    isDarkMode: false,
-    isManageAdaptersModalLoading: false,
-  }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-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
-  )
-}
-
-// Modal
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'get-free-adapters', showModal: () => 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,
-    hideModal: () => void
-  ): void
-}>()
-
-const onGetFreeAdapters = (showModal: () => void) => {
-  emits('get-free-adapters', showModal)
-}
-
-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;
-}
-
-:deep(.diagram-action__edit.is-dark) {
-  .property-label-group {
-    color: var(--main-color-mode2);
-  }
-  .flex-property-label-group {
-    color: var(--main-color-mode2);
-  }
-  .flex-property-value-group {
-    select {
-      color: #fff;
-    }
-  }
-  .failover-order-master {
-    .secondary-title label {
-      color: #fff;
-    }
-  }
-  .k-grid-content {
-    background-color: var(--modal-bg-color);
-  }
-  .vui-action-bar {
-    background-color: var(--pannel-bg-color);
-    color: var(--title-color);
-
-    .action-link-container:not(.disabled) {
-      &:hover {
-        background-color: #29414e;
-        border: 1px solid #c7e9ff;
-      }
-    }
-
-    svg {
-      fill: #fff;
-    }
-  }
-
-  .k-grid.k-widget .k-grid-content {
-    border-left: 1px solid #485764;
-    border-right: 1px solid #485764;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-
-    tbody tr {
-      background-color: var(--modal-bg-color);
-
-      td {
-        border-bottom: 1px solid #666666;
-        border-color: #666666;
-      }
-
-      &:hover {
-        background-color: #324f61;
-        color: var(--title-color);
-
-        td {
-          border-bottom: 1px solid #ffffff;
-        }
-      }
-
-      &.k-state-selected {
-        background-color: #d8e3e9;
-        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
-
-        td span {
-          color: #000;
-        }
-      }
-    }
-  }
-
-  .failover-order-details {
-    &.relative-container .absolute-container {
-      background-color: var(--pannel-bg-color);
-      color: var(--main-color-mode2);
-
-      &:has(.no-items-selected-container) {
-        background-color: transparent;
-      }
-    }
-
-    td span {
-      color: var(--main-color-mode2);
-    }
-    button span {
-      color: var(--main-color-mode2);
-
-      &:hover:not(.disabled) {
-        background-color: transparent;
-        border: 1px solid transparent;
-      }
-    }
-    button.active span {
-      color: #fff;
-    }
-  }
-
-  .select-adapter-info span {
-    color: var(--main-color-mode2);
-  }
-}
-</style>
+<template>
+  <div>
+    <atoms-modal
+      :width="props.width"
+      :height="props.height"
+      :show="props.show"
+      :title="localization.common.managePhysicalNetworkAdapters"
+      :second-title="props.switchName"
+      :class="[
+        'diagram-action__edit',
+        {
+          'is-dark': props.isDarkMode,
+        },
+      ]"
+      @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-dark-mode="props.isDarkMode"
+              :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="props.isManageAdaptersModalLoading" />
+      </template>
+    </atoms-modal>
+  </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,
+} from '~/components/common/diagramMain/lib/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_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+    initialAdapterStatus: UI_I_AdapterStatus
+    isDarkMode?: boolean
+    isManageAdaptersModalLoading?: boolean
+  }>(),
+  {
+    switchName: '',
+    adapterStatus: () => ({
+      active: [],
+      standby: [],
+      unused: [],
+    }),
+    isDarkMode: false,
+    isManageAdaptersModalLoading: false,
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+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
+  )
+}
+
+// Modal
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'get-free-adapters', showModal: () => 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,
+    hideModal: () => void
+  ): void
+}>()
+
+const onGetFreeAdapters = (showModal: () => void) => {
+  emits('get-free-adapters', showModal)
+}
+
+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;
+}
+
+:deep(.diagram-action__edit.is-dark) {
+  .property-label-group {
+    color: var(--main-color-mode2);
+  }
+  .flex-property-label-group {
+    color: var(--main-color-mode2);
+  }
+  .flex-property-value-group {
+    select {
+      color: #fff;
+    }
+  }
+  .failover-order-master {
+    .secondary-title label {
+      color: #fff;
+    }
+  }
+  .k-grid-content {
+    background-color: var(--modal-bg-color);
+  }
+  .vui-action-bar {
+    background-color: var(--pannel-bg-color);
+    color: var(--title-color);
+
+    .action-link-container:not(.disabled) {
+      &:hover {
+        background-color: #29414e;
+        border: 1px solid #c7e9ff;
+      }
+    }
+
+    svg {
+      fill: #fff;
+    }
+  }
+
+  .k-grid.k-widget .k-grid-content {
+    border-left: 1px solid #485764;
+    border-right: 1px solid #485764;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+
+    tbody tr {
+      background-color: var(--modal-bg-color);
+
+      td {
+        border-bottom: 1px solid #666666;
+        border-color: #666666;
+      }
+
+      &:hover {
+        background-color: #324f61;
+        color: var(--title-color);
+
+        td {
+          border-bottom: 1px solid #ffffff;
+        }
+      }
+
+      &.k-state-selected {
+        background-color: #d8e3e9;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+
+        td span {
+          color: #000;
+        }
+      }
+    }
+  }
+
+  .failover-order-details {
+    &.relative-container .absolute-container {
+      background-color: var(--pannel-bg-color);
+      color: var(--main-color-mode2);
+
+      &:has(.no-items-selected-container) {
+        background-color: transparent;
+      }
+    }
+
+    td span {
+      color: var(--main-color-mode2);
+    }
+    button span {
+      color: var(--main-color-mode2);
+
+      &:hover:not(.disabled) {
+        background-color: transparent;
+        border: 1px solid transparent;
+      }
+    }
+    button.active span {
+      color: #fff;
+    }
+  }
+
+  .select-adapter-info span {
+    color: var(--main-color-mode2);
+  }
+}
+</style>