bfg-common 1.5.486 → 1.5.488

package/components/common/adapterManager/AdapterManager.vue

@@ -1,142 +1,94 @@
 <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="absolute-container fill-parent">
-        <div class="flex-row fill-parent">
-          <div class="failover-order-master relative-container">
-            <div class="absolute-container fill-parent">
-              <div class="flex-column fill-parent">
-                <common-adapter-manager-ui-second-title
-                  :is-add-modal="props.isAddModal"
-                />
-                <div class="flex-grow-auto relative-container">
-                  <div class="absolute-container fill-parent">
-                    <div class="fill-parent">
-                      <div
-                        class="fill-parent no-column-header assigned-adapters-datagrid failover-order"
-                      >
-                        <div class="k-grid k-widget" style="height: 100%">
-                          <common-adapter-manager-ui-actions-bar
-                            :full-mode="props.fullMode"
-                            :is-add-modal="props.isAddModal"
-                            :selected-is-header="selectedIsHeader"
-                            :is-disabled-move-up="isDisabledMoveUp"
-                            :is-disabled-move-down="isDisabledMoveDown"
-                            :is-disabled-remove="isDisabledRemove"
-                            @show-add-adapter-modal="onShowAddAdapterModal"
-                            @remove-adapter="onRemove"
-                            @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="selectedAdapterId"
-                            :removed-adapters="removedAdapters"
-                            :existing-adapters-for-adding="
-                              props.existingAdaptersForAdding
-                            "
-                            :adapter-status="adapterStatus"
-                            :is-active-header="isActiveHeader"
-                            :is-standby-header="isStandbyHeader"
-                            :is-unused-header="isUnusedHeader"
-                            @select-add-adapter="onSelectAddAdapter"
-                            @select-adapter="onSelectAdapter"
-                            @click-empty-space="onClickEmptySpace"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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,
-                  },
-                ]"
-              >
-                <div v-if="hasSelectedAdapter">
-                  <common-diagram-main-modals-view-settings-info
-                    modal-name="network-settings-modal"
-                    :show="true"
-                    :view-name="localization.common.onPhysicalNetworkAdapter"
-                    :modal-tabs="adapterViewSettingsModalTabs"
-                    :view-settings-fields="
-                      props.isAddModal
-                        ? addAdapterViewSettings
-                        : adapterViewSettings
-                    "
-                  />
-                </div>
-                <common-adapter-manager-ui-no-selected-adapter
-                  v-else
-                  :is-add-modal="props.isAddModal"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <teleport to="body">
-      <common-adapter-manager-add-adapter-modal
-        v-if="!props.isAddModal && existingAdaptersForAdding.length"
-        modal-name="add-adapter-modal"
-        view-name="add-adapter"
-        width="864px"
-        height="618px"
-        :is-add-modal="props.isAddModal"
-        :is-dark-mode="props.isDarkMode"
-        :show="isShowAddAdapterModal"
-        :existing-adapters-for-adding="existingAdaptersForAdding"
-        :selected-add-adapter-id="selectedAddAdapterId"
-        :adapters="props.adapters"
-        @hide="onHideAddAdapterModal"
-        @add-adapter="onAddSelectedAdapters"
-        @select-add-adapter="onSelectAddAdapter"
-      />
-      <common-adapter-manager-add-adapter-warning-modal
-        v-if="!props.isAddModal && !existingAdaptersForAdding.length"
-        :test-id="props.testId"
-        modal-name="add-adapter-modal"
-        view-name="add-adapter"
-        :show="isShowAddAdapterModal"
-        :title="localization.common.warning"
-        @hide="onHideAddAdapterModal"
-      />
-      <common-adapter-manager-no-connected-active-adapters-modal
-        :show="props.isShowNoConnectedActiveAdaptersModal"
-        :title="localization.common.physicalNetworkAdaptersWarning"
-        @hide="onHideNoConnectedActiveAdaptersModal"
-        @submit="onConfirmNoActiveAdaptersModal"
-      />
-      <common-adapter-manager-no-active-adapters-modal
-        :show="props.isShowNoActiveAdaptersModal"
-        :title="localization.common.physicalNetworkAdaptersWarning"
-        @hide="onHideNoActiveAdaptersModal"
-        @submit="onConfirmNoActiveAdaptersModal"
-      />
-    </teleport>
-  </div>
+  <common-adapter-manager-new
+    v-if="isNewView"
+    :is-active="props.isActive"
+    :full-mode="props.fullMode"
+    :core-adapters="props.coreAdapters"
+    :is-add-modal="props.isAddModal"
+    :is-dark-mode="props.isDarkMode"
+    :adapters="props.adapters"
+    :adapter-status="adapterStatusLocal"
+    :existing-adapters-for-adding="props.existingAdaptersForAdding"
+    :selected-is-header="selectedIsHeader"
+    :is-disabled-move-up="isDisabledMoveUp"
+    :is-disabled-move-down="isDisabledMoveDown"
+    :is-disabled-remove="isDisabledRemove"
+    :selected-adapter-id="selectedAdapterId"
+    :view-settings-fields="viewSettingsFields"
+    :selected-add-adapter-id="selectedAddAdapterId"
+    :is-active-header="isActiveHeader"
+    :is-unused-header="isUnusedHeader"
+    :is-standby-header="isStandbyHeader"
+    :has-selected-adapter="hasSelectedAdapter"
+    :removed-adapters="removedAdapters"
+    :adapter-view-settings-modal-tabs="adapterViewSettingsModalTabs"
+    @get-free-adapters="onShowAddAdapterModal"
+    @select-add-adapter="onSelectAddAdapter"
+    @remove-adapter="onRemove"
+    @select-adapter="onSelectAdapter"
+    @move-down="onMoveDown"
+    @move-up="onMoveUp"
+    @click-empty-space="onClickEmptySpace"
+  />
+  <common-adapter-manager-old
+    v-else
+    :is-active="props.isActive"
+    :full-mode="props.fullMode"
+    :is-add-modal="props.isAddModal"
+    :is-dark-mode="props.isDarkMode"
+    :adapters="props.adapters"
+    :adapter-status="adapterStatusLocal"
+    :existing-adapters-for-adding="props.existingAdaptersForAdding"
+    :selected-is-header="selectedIsHeader"
+    :is-disabled-move-up="isDisabledMoveUp"
+    :is-disabled-move-down="isDisabledMoveDown"
+    :is-disabled-remove="isDisabledRemove"
+    :selected-adapter-id="selectedAdapterId"
+    :view-settings-fields="viewSettingsFields"
+    :selected-add-adapter-id="selectedAddAdapterId"
+    :is-active-header="isActiveHeader"
+    :is-unused-header="isUnusedHeader"
+    :is-standby-header="isStandbyHeader"
+    :has-selected-adapter="hasSelectedAdapter"
+    :removed-adapters="removedAdapters"
+    :adapter-view-settings-modal-tabs="adapterViewSettingsModalTabs"
+    @get-free-adapters="onShowAddAdapterModal"
+    @select-add-adapter="onSelectAddAdapter"
+    @remove-adapter="onRemove"
+    @select-adapter="onSelectAdapter"
+    @move-down="onMoveDown"
+    @move-up="onMoveUp"
+    @click-empty-space="onClickEmptySpace"
+  />
+  <teleport to="body">
+    <common-adapter-manager-add-adapter-modal
+      v-if="!props.isAddModal && existingAdaptersForAdding.length"
+      :is-dark-mode="props.isDarkMode"
+      :show="isShowAddAdapterModal"
+      :existing-adapters-for-adding="existingAdaptersForAdding"
+      :selected-add-adapter-id="selectedAddAdapterId"
+      :adapters="props.adapters"
+      @hide="onHideAddAdapterModal"
+      @add-adapter="onAddSelectedAdapters"
+      @select-add-adapter="onSelectAddAdapter"
+    />
+    <common-adapter-manager-add-adapter-warning-modal
+      v-if="!props.isAddModal && !existingAdaptersForAdding.length"
+      :test-id="props.testId"
+      :show="isShowAddAdapterModal"
+      @hide="onHideAddAdapterModal"
+    />
+    <common-adapter-manager-no-connected-active-adapters-modal
+      :show="props.isShowNoConnectedActiveAdaptersModal"
+      @hide="onHideNoConnectedActiveAdaptersModal"
+      @submit="onConfirmNoActiveAdaptersModal"
+    />
+    <common-adapter-manager-no-active-adapters-modal
+      :show="props.isShowNoActiveAdaptersModal"
+      @hide="onHideNoActiveAdaptersModal"
+      @submit="onConfirmNoActiveAdaptersModal"
+    />
+  </teleport>
 </template>
 
 <script setup lang="ts">
@@ -169,32 +121,30 @@ const props = withDefaults(
     coreAdapters?: string[]
     freeAdapters?: UI_I_Adapter[]
     adapterStatus?: UI_I_AdapterStatus
-    withInitial?: boolean
+    testId: string
     isShowNoConnectedActiveAdaptersModal?: boolean
     isShowNoActiveAdaptersModal?: boolean
     existingAdaptersForAdding?: (UI_I_Adapter | UI_I_SwitchAdapterItem)[]
     selectedAddAdapterId?: string
-    testId: string
   }>(),
   {
     isActive: true,
     fullMode: false,
     isAddModal: false,
-    adapterStatus: () => ({
-      active: [],
-      standby: [],
-      unused: [],
-    }),
-    initialData: () => ({}),
-    withInitial: false,
-    freeAdapters: () => [],
-    addedAdapters: () => [],
-    coreAdapters: () => [],
     adapters: () => ({
       total_items: 0,
       total_pages: 0,
       items: [],
     }),
+    initialData: () => ({}),
+    addedAdapters: () => [],
+    coreAdapters: () => [],
+    freeAdapters: () => [],
+    adapterStatus: () => ({
+      active: [],
+      standby: [],
+      unused: [],
+    }),
     isShowNoConnectedActiveAdaptersModal: false,
     isShowNoActiveAdaptersModal: false,
     existingAdaptersForAdding: () => [],
@@ -202,6 +152,10 @@ const props = withDefaults(
   }
 )
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const existingAdaptersForAdding = computed<
   (UI_I_Adapter | UI_I_SwitchAdapterItem)[]
 >(() =>
@@ -216,72 +170,64 @@ const existingAdaptersForAdding = computed<
   )
 )
 
-// UI_I_Localization
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isDisabledMoveUp = computed(
+const adapterStatusLocal = ref<UI_I_AdapterStatus>(
+  useDeepCopy(props.adapterStatus)
+)
+
+const isDisabledMoveUp = computed<boolean>(
   () =>
     selectedIsHeader.value ||
-    adapterStatus.value.active[0] === selectedAdapterId.value
+    adapterStatusLocal.value.active[0] === selectedAdapterId.value
 )
-const isDisabledMoveDown = computed(
+const isDisabledMoveDown = computed<boolean>(
   () =>
     selectedIsHeader.value ||
-    adapterStatus.value.unused[adapterStatus.value.unused.length - 1] ===
-      selectedAdapterId.value
+    adapterStatusLocal.value.unused[
+      adapterStatusLocal.value.unused.length - 1
+    ] === selectedAdapterId.value
 )
-const hasSelectedAdapter = computed(
+const hasSelectedAdapter = computed<boolean>(
   () =>
     (selectedAdapterId.value !== '' &&
       !selectedAdapterId.value.includes('header-')) ||
     selectedAddAdapterId.value !== ''
 )
-const isDisabledRemove = computed(() =>
+const isDisabledRemove = computed<boolean>(() =>
   props.coreAdapters.includes(selectedAdapterId.value)
 )
 
-// Some checking variables for template
 const selectedIsHeader = computed<boolean>(
   () => !selectedAdapterId.value || selectedAdapterId.value.includes('header-')
 )
-const isActiveHeader = computed(
+const isActiveHeader = computed<boolean>(
   () => selectedAdapterId.value === 'header-active'
 )
-const isUnusedHeader = computed(
+const isUnusedHeader = computed<boolean>(
   () => selectedAdapterId.value === 'header-unused'
 )
-const isStandbyHeader = computed(
+const isStandbyHeader = computed<boolean>(
   () => selectedAdapterId.value === 'header-stand-by'
 )
 
-// Temporary data for adapter manage
-const adapterStatus = ref<UI_I_AdapterStatus>(useDeepCopy(props.adapterStatus))
-
-// Sending adapters data to top component (TeamingFailover.vue)
-// watch(adapterStatus, (newAdapterStatus: UI_I_AdapterStatus) => {
-//
-// }, {deep: true, immediate: true})
-
 watch(
   () => props.adapterStatus,
   (newAdapterStatus: UI_I_AdapterStatus) => {
-    adapterStatus.value = useDeepCopy(newAdapterStatus)
+    adapterStatusLocal.value = useDeepCopy(newAdapterStatus)
   },
   { deep: true, immediate: true }
 )
 
-// Not existing adapters
 const removedAdapters = ref<string[]>([])
 const addedAdapters = ref<string[]>(props.addedAdapters)
 
-// Select Adapter
 const selectedAdapterId = ref<string>('')
 
 const onSelectAdapter = (adapterId: string): void => {
   selectedAdapterId.value = adapterId
 }
 
-// TODO Check it and AddAdapterModal.vue
 const selectedAddAdapterId = ref<string>('')
 
 const onSelectAddAdapter = (adapterId: string): void => {
@@ -289,22 +235,22 @@ const onSelectAddAdapter = (adapterId: string): void => {
   selectedAddAdapterId.value = adapterId
 }
 
-// Move down the selected adapter and change status
 const moveDownForStatusGroup = (
   status: UI_T_AdapterStatusNames,
   adapterId: string
 ): void => {
   const isActiveSelectedAdapter =
-    adapterStatus.value[status].includes(adapterId)
+    adapterStatusLocal.value[status].includes(adapterId)
 
   if (!isActiveSelectedAdapter) return
 
   const nextStatus: UI_T_AdapterStatusNames =
     status === 'active' ? 'standby' : 'unused'
 
-  const selectedAdapterIndex = adapterStatus.value[status].indexOf(adapterId)
+  const selectedAdapterIndex =
+    adapterStatusLocal.value[status].indexOf(adapterId)
 
-  const activeLength = adapterStatus.value[status].length
+  const activeLength = adapterStatusLocal.value[status].length
 
   const activeLastIndex = activeLength - 1
   const isNotLastOfActiveAdapters = selectedAdapterIndex !== activeLastIndex
@@ -312,44 +258,51 @@ const moveDownForStatusGroup = (
   const isLastOfActiveAdapters = selectedAdapterIndex === activeLastIndex
 
   if (isNotLastOfActiveAdapters) {
-    adapterStatus.value[status].splice(selectedAdapterIndex, 1)
-    adapterStatus.value[status].splice(selectedAdapterIndex + 1, 0, adapterId)
+    adapterStatusLocal.value[status].splice(selectedAdapterIndex, 1)
+    adapterStatusLocal.value[status].splice(
+      selectedAdapterIndex + 1,
+      0,
+      adapterId
+    )
   }
   if (isLastOfActiveAdapters && status !== 'unused') {
-    adapterStatus.value[status].splice(selectedAdapterIndex, 1)
-    adapterStatus.value[nextStatus].unshift(adapterId)
+    adapterStatusLocal.value[status].splice(selectedAdapterIndex, 1)
+    adapterStatusLocal.value[nextStatus].unshift(adapterId)
   }
-  emits('change-adapter-status', adapterStatus.value)
+  emits('change-adapter-status', adapterStatusLocal.value)
 }
 
-// Move up the selected adapter and change status
 const moveUpForStatusGroup = (
   status: UI_T_AdapterStatusNames,
   adapterId: string
 ): void => {
   const isActiveSelectedAdapter =
-    adapterStatus.value[status].includes(adapterId)
+    adapterStatusLocal.value[status].includes(adapterId)
 
   if (!isActiveSelectedAdapter) return
 
   const nextStatus: UI_T_AdapterStatusNames =
     status === 'unused' ? 'standby' : 'active'
-  const selectedAdapterIndex = adapterStatus.value[status].indexOf(adapterId)
+  const selectedAdapterIndex =
+    adapterStatusLocal.value[status].indexOf(adapterId)
   const activeFirstIndex = 0
   const isNotFirstOfActiveAdapters = selectedAdapterIndex !== activeFirstIndex
   const isFirstOfActiveAdapters = selectedAdapterIndex === activeFirstIndex
   if (isNotFirstOfActiveAdapters) {
-    adapterStatus.value[status].splice(selectedAdapterIndex, 1)
-    adapterStatus.value[status].splice(selectedAdapterIndex - 1, 0, adapterId)
+    adapterStatusLocal.value[status].splice(selectedAdapterIndex, 1)
+    adapterStatusLocal.value[status].splice(
+      selectedAdapterIndex - 1,
+      0,
+      adapterId
+    )
   }
   if (isFirstOfActiveAdapters && status !== 'active') {
-    adapterStatus.value[status].splice(selectedAdapterIndex, 1)
-    adapterStatus.value[nextStatus].push(adapterId)
+    adapterStatusLocal.value[status].splice(selectedAdapterIndex, 1)
+    adapterStatusLocal.value[nextStatus].push(adapterId)
   }
-  emits('change-adapter-status', adapterStatus.value)
+  emits('change-adapter-status', adapterStatusLocal.value)
 }
 
-// Move down the selected adapter
 const onMoveDownWithId = (adapterId: string): void => {
   moveDownForStatusGroup('unused', adapterId)
   moveDownForStatusGroup('standby', adapterId)
@@ -360,7 +313,6 @@ const onMoveDown = () => {
   onMoveDownWithId(selectedAdapterId.value)
 }
 
-// Move up the selected adapter
 const onMoveUpWithId = (adapterId: string): void => {
   moveUpForStatusGroup('active', adapterId)
   moveUpForStatusGroup('standby', adapterId)
@@ -371,18 +323,17 @@ const onMoveUp = () => {
   onMoveUpWithId(selectedAdapterId.value)
 }
 
-// Remove the adapter from list
 const onRemoveWithId = (adapterId: string): void => {
-  adapterStatus.value.active.includes(adapterId) &&
-    (adapterStatus.value.active = adapterStatus.value.active.filter(
+  adapterStatusLocal.value.active.includes(adapterId) &&
+    (adapterStatusLocal.value.active = adapterStatusLocal.value.active.filter(
       (id: string) => id !== adapterId
     ))
-  adapterStatus.value.standby.includes(adapterId) &&
-    (adapterStatus.value.standby = adapterStatus.value.standby.filter(
+  adapterStatusLocal.value.standby.includes(adapterId) &&
+    (adapterStatusLocal.value.standby = adapterStatusLocal.value.standby.filter(
       (id: string) => id !== adapterId
     ))
-  adapterStatus.value.unused.includes(adapterId) &&
-    (adapterStatus.value.unused = adapterStatus.value.unused.filter(
+  adapterStatusLocal.value.unused.includes(adapterId) &&
+    (adapterStatusLocal.value.unused = adapterStatusLocal.value.unused.filter(
       (id: string) => id !== adapterId
     ))
 
@@ -390,30 +341,43 @@ const onRemoveWithId = (adapterId: string): void => {
     (adapter: UI_I_Adapter) => adapter.name === adapterId
   ) && removedAdapters.value.push(adapterId)
   addedAdapters.value = [
-    ...adapterStatus.value.active,
-    ...adapterStatus.value.unused,
-    ...adapterStatus.value.standby,
+    ...adapterStatusLocal.value.active,
+    ...adapterStatusLocal.value.unused,
+    ...adapterStatusLocal.value.standby,
   ]
   emits('change-added-adapters', addedAdapters.value)
-  emits('change-adapter-status', adapterStatus.value)
+  emits('change-adapter-status', adapterStatusLocal.value)
+
+  if (isNewView.value && adapterId !== selectedAdapterId.value) {
+    return
+  }
   selectedAdapterId.value = ''
 }
 
-const onRemove = () => {
-  onRemoveWithId(selectedAdapterId.value)
+const onRemove = (id?: string) => {
+  onRemoveWithId(id || selectedAdapterId.value)
 }
 
-// Reactivate selected adapters
 const onClickEmptySpace = (event: Event): void => {
   const targetElement = event.target as HTMLElement
-  if (targetElement.classList.contains('k-grid-content')) {
+
+  if (isNewView.value) {
+    const addButton = targetElement.closest('.manager-header-add')
+    const removeButton = targetElement.closest('.adapter-remove')
+
+    if (!addButton && !removeButton) {
+      selectedAdapterId.value = ''
+      selectedAddAdapterId.value = ''
+      emits('select-add-adapter', '')
+    }
+  }
+  if (!isNewView.value && targetElement.classList.contains('k-grid-content')) {
     selectedAdapterId.value = ''
     selectedAddAdapterId.value = ''
     emits('select-add-adapter', '')
   }
 }
 
-// Add adapter modal
 const isShowAddAdapterModal = ref<boolean>(false)
 
 const onHideAddAdapterModal = (): void => {
@@ -426,7 +390,7 @@ const emits = defineEmits<{
   (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: 'submit-from-modal'): void
   (event: 'select-add-adapter', id: string): void
 }>()
 
@@ -437,7 +401,7 @@ const onHideNoActiveAdaptersModal = () => {
   emits('hide-no-active-adapters-modal')
 }
 const onConfirmNoActiveAdaptersModal = () => {
-  emits('confirm-no-active-adapters-modal')
+  emits('submit-from-modal')
 }
 
 const showAddAdapterModal = () => {
@@ -447,23 +411,21 @@ const onShowAddAdapterModal = (): void => {
   emits('get-free-adapters', showAddAdapterModal)
 }
 
-// Add selected adapters from AddAdapterModal.vue
 const onAddSelectedAdapters = (addAdapterId: string): void => {
-  adapterStatus.value.active.push(addAdapterId)
+  adapterStatusLocal.value.active.push(addAdapterId)
   removedAdapters.value = removedAdapters.value.filter(
     (id: string) => id !== addAdapterId
   )
   addedAdapters.value = [
-    ...adapterStatus.value.active,
-    ...adapterStatus.value.unused,
-    ...adapterStatus.value.standby,
+    ...adapterStatusLocal.value.active,
+    ...adapterStatusLocal.value.unused,
+    ...adapterStatusLocal.value.standby,
   ]
   emits('change-added-adapters', addedAdapters.value)
-  emits('change-adapter-status', adapterStatus.value)
-  isShowAddAdapterModal.value = false
+  emits('change-adapter-status', adapterStatusLocal.value)
+  onHideAddAdapterModal()
 }
 
-// Settings
 const adapterViewSettingsModalTabs = computed(() =>
   adapterViewSettingsModalTabsFunc(localization.value)
 )
@@ -477,7 +439,8 @@ const addAdapterViewSettings = computed(() =>
     localization.value,
     allAdapters.value.find(
       (adapter: UI_I_Adapter) => adapter.name === props.selectedAddAdapterId
-    ) || {}
+    ) || {},
+    isNewView.value
   )
 )
 
@@ -499,331 +462,12 @@ const adapterViewSettings = computed(() => {
   if (!selectedAdapterId.value) return []
   return adapterViewSettingsFunc(
     localization.value,
-    selectedAdapterData.value || selectedAdapterDataFromFree.value
+    selectedAdapterData.value || selectedAdapterDataFromFree.value,
+    isNewView.value
   )
 })
-</script>
-
-<style scoped lang="scss">
-div.edit-pg-failover-order-with-details {
-  flex: 1 1 auto;
-  flex-direction: column;
-  display: flex;
-}
-.flex-grow-auto {
-  flex: 1 0 auto;
-}
-.relative-container {
-  position: relative;
-}
-.fill-parent {
-  display: initial;
-  overflow: visible;
-  height: 100%;
-  width: 100%;
-}
-.absolute-container {
-  position: absolute;
-}
-.flex-row {
-  display: flex;
-  flex-direction: row;
-}
-.failover-order-master {
-  flex: 0 0 200px;
-  margin-right: 10px;
-  margin-bottom: 2px;
-}
-.absolute-container {
-  position: absolute;
-}
-.full-width-adapter-info {
-  display: block;
-}
-.flex-column {
-  display: flex;
-}
-.flex-column {
-  flex-direction: column;
-}
-
-.k-widget {
-  height: 100%;
-  box-sizing: border-box;
-  border: none;
-  box-shadow: none;
-}
 
-.k-grid .k-grid-header {
-  position: relative;
-  border-radius: 3px 3px 0 0;
-  overflow: hidden;
-  background-color: #fafafa;
-  padding-right: 18px;
-  border: none;
-
-  .k-grid-header-wrap {
-    display: none;
-    border-right: 0;
-    border-color: #ccc;
-  }
-}
-.k-grid-header table {
-  table-layout: fixed;
-}
-.k-grid-header-wrap > table {
-  margin-bottom: -1px;
-
-  col {
-    width: 150px;
-  }
-}
-.k-grid table {
-  width: 100%;
-  margin: 0;
-  max-width: none;
-  border-collapse: separate;
-  border-spacing: 0;
-  empty-cells: show;
-  border-width: 0;
-  outline: 0;
-}
-
-.k-grid-content {
-  width: auto;
-  overflow-y: scroll;
-  padding-right: 3px;
-  height: 200px;
-}
-.full-height {
-  .k-grid-content {
-    width: auto;
-    overflow-y: scroll;
-    padding-right: 3px;
-    height: 273px;
-  }
-}
-.add-adapter-view {
-  .k-grid-content {
-    width: auto;
-    overflow-y: scroll;
-    padding-right: 3px;
-    height: 430px;
-  }
-}
-.k-selectable {
-  height: auto;
-
-  col {
-    width: 150px;
-  }
-}
-
-.k-grid.k-widget .k-grid-content,
-.k-grid.k-widget .k-grid-content-locked {
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-.k-grid-content {
-  background: #fff;
-}
-.no-column-header .k-grid-content {
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-}
-.k-grid-content {
-  min-height: 35px;
-}
-.k-grid-content,
-.k-grid-content-locked,
-.k-pager-wrap {
-  white-space: normal;
-}
-.k-grid-content {
-  position: relative;
-  zoom: 1;
-}
-.k-widget {
-  line-height: normal;
-}
-.k-grid-content table,
-.k-grid-content-locked > table,
-.k-grid-footer table,
-.k-grid-header table {
-  table-layout: fixed;
-}
-
-.k-grid-content table,
-.k-grid-content-locked > table,
-.k-grid-footer table,
-.k-grid-header table {
-  table-layout: fixed;
-}
-.k-grid table {
-  width: 100%;
-  margin: 0;
-  max-width: none;
-  border-collapse: separate;
-  border-spacing: 0;
-  empty-cells: show;
-  border-width: 0;
-  outline: 0;
-}
-
-.assigned-pnic-sections {
-  font-weight: 700;
-  margin: 0 -9px;
-}
-
-.k-scrollbar-vertical {
-  top: 0;
-  right: 0;
-  width: 17px;
-  height: 100%;
-  overflow-x: hidden;
-}
-
-.k-scrollbar {
-  position: absolute;
-  overflow: scroll;
-}
-
-.absolute-container {
-  position: initial;
-}
-
-.failover-order-details {
-  flex: 1 0 auto;
-  border-left: 1px solid #ddd;
-
-  & > div {
-    padding-left: 10px;
-  }
-
-  .absolute-container {
-    position: absolute;
-  }
-}
-.compact {
-  padding-top: 0;
-}
-.failover-order-with-details-title {
-  margin: 0 !important;
-  padding-top: 0 !important;
-}
-.element-disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.add-adapter-view {
-  :deep(.table-fixed-full-height) {
-    height: 430px;
-  }
-  :deep(.table-fixed-height) {
-    height: 430px;
-    max-height: 415px;
-  }
-}
-
-div.edit-pg-failover-order-with-details.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>
+const viewSettingsFields = computed(() =>
+  props.isAddModal ? addAdapterViewSettings.value : adapterViewSettings.value
+)
+</script>