bfg-common 1.5.487 → 1.5.488

package/components/common/adapterManager/ui/actions/moveUpAdapterButton/MoveUpAdapterButtonNew.vue

@@ -0,0 +1,76 @@
+<template>
+  <li class="action">
+    <span
+      :class="[
+        'action-link',
+        {
+          disabled: props.isDisabledMoveUp,
+        },
+      ]"
+      :title="localization.common.moveUp"
+      data-id="move-up-adapter-button"
+      @click="onMoveUp"
+    >
+      <ui-icon name="sort-arrow" width="16" height="16" />
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  isDisabledMoveUp: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'move-up-adapter'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onMoveUp = () => emits('move-up-adapter')
+</script>
+
+<style scoped lang="scss">
+.action {
+  width: 100%;
+  height: 28px;
+
+  &-link {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: rotate(180deg);
+    border: 1px solid var(--table-container-in-modal-border);
+    border-radius: 6px;
+    background: #ffffff;
+    color: var(--table-text-first);
+
+    &:hover {
+      background: #f6f7f8;
+    }
+
+    &.disabled {
+      background: #f7f8f8;
+      color: var(--table-disabled-btn);
+    }
+  }
+}
+
+:root.dark-theme {
+  .action-link {
+    background: #203241;
+
+    &:hover {
+      background: #283948;
+    }
+
+    &.disabled {
+      background: #334351;
+    }
+  }
+}
+</style>

package/components/common/adapterManager/ui/actions/{MoveUpAdapterButton.vue → moveUpAdapterButton/MoveUpAdapterButtonOld.vue}

@@ -19,15 +19,9 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-const props = withDefaults(
-  defineProps<{
-    isDisabledMoveUp: boolean
-    testId?: string
-  }>(),
-  {
-    testId: '',
-  }
-)
+const props = defineProps<{
+  isDisabledMoveUp: boolean
+}>()
 
 const emits = defineEmits<{
   (event: 'move-up-adapter'): void

package/components/common/adapterManager/ui/noSelectedAdapter/NoSelectedAdapter.vue

@@ -0,0 +1,24 @@
+<template>
+  <common-adapter-manager-ui-no-selected-adapter-new v-if="isNewView" />
+  <common-adapter-manager-ui-no-selected-adapter-old
+    v-else
+    :is-add-modal="props.isAddModal"
+  />
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    isAddModal: boolean
+  }>(),
+  {
+    isAddModal: false,
+  }
+)
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/adapterManager/ui/noSelectedAdapter/NoSelectedAdapterNew.vue

@@ -0,0 +1,13 @@
+<template>
+  <ui-not-found :text="localization.common.noItemSelected">
+    {{ localization.common.noAdapterSelected }}
+  </ui-not-found>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/adapterManager/ui/secondTitle/SecondTitle.vue

@@ -0,0 +1,31 @@
+<template>
+  <common-adapter-manager-ui-second-title-new
+    v-if="isNewView"
+    :is-add-modal="props.isAddModal"
+    :count="props.count"
+  />
+  <common-adapter-manager-ui-second-title-old
+    v-else
+    :is-add-modal="props.isAddModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    isAddModal: boolean
+    count?: number
+  }>(),
+  {
+    count: 0,
+  }
+)
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/adapterManager/ui/secondTitle/SecondTitleNew.vue

@@ -0,0 +1,36 @@
+<template>
+  <label class="secondary-title">
+    {{ secondaryTitle }}
+  </label>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  isAddModal: boolean
+  count: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const secondaryTitle = computed<string>(() =>
+  props.isAddModal
+    ? `${localization.value.common.networkAdapters} (${props.count})`
+    : localization.value.common.assignedAdapters
+)
+</script>
+
+<style scoped lang="scss">
+.secondary-title {
+  display: block;
+  margin-bottom: 16px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  letter-spacing: 0;
+  color: var(--table-text-first);
+  word-wrap: break-word;
+  max-width: 214px;
+}
+</style>

package/components/common/adapterManager/ui/{SecondTitle.vue → secondTitle/SecondTitleOld.vue}

@@ -15,7 +15,6 @@ const props = defineProps<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-// Secondary title for the adapter manager, with the adding functionality and without it
 const secondaryTitle = computed<string>(() =>
   props.isAddModal
     ? localization.value.common.networkAdapters

package/components/common/adapterManager/ui/table/Table.vue

@@ -1,60 +1,38 @@
 <template>
-  <div
-    :data-id="props.testId"
-    class="k-grid-content"
-    @click.capture="onClickEmptySpace($event)"
-  >
-    <div v-if="props.isAddModal">
-      <table class="k-selectable">
-        <tbody>
-          <common-adapter-manager-ui-table-adapters
-            :adapters="props.existingAdaptersForAdding"
-            :selected-adapter-id="props.selectedAddAdapterId"
-            @select-adapter="onSelectAddAdapter"
-          />
-        </tbody>
-      </table>
-    </div>
-    <div v-else>
-      <table class="k-selectable">
-        <tbody>
-          <common-adapter-manager-ui-table-header
-            :is-selected="props.isActiveHeader"
-            title="header-active"
-            test-id="header-active"
-            @select-header="onSelectAdapter"
-          />
-          <common-adapter-manager-ui-table-adapters
-            :adapters="props.adapterStatus.active"
-            :selected-adapter-id="props.selectedAdapterId"
-            @select-adapter="onSelectAdapter"
-          />
-          <common-adapter-manager-ui-table-header
-            :is-selected="props.isStandbyHeader"
-            title="header-stand-by"
-            test-id="header-stand-by"
-            @select-header="onSelectAdapter"
-          />
-          <common-adapter-manager-ui-table-adapters
-            :adapters="props.adapterStatus.standby"
-            :selected-adapter-id="props.selectedAdapterId"
-            @select-adapter="onSelectAdapter"
-          />
-          <common-adapter-manager-ui-table-header
-            :is-selected="props.isUnusedHeader"
-            title="header-unused"
-            test-id="header-unused"
-            @select-header="onSelectAdapter"
-          />
-          <common-adapter-manager-ui-table-adapters
-            :adapters="props.adapterStatus.unused"
-            :selected-adapter-id="props.selectedAdapterId"
-            @select-adapter="onSelectAdapter"
-          />
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <common-adapter-manager-ui-table-new
+    v-if="isNewView"
+    :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"
+    :full-mode="props.fullMode"
+    @select-add-adapter="onSelectAddAdapter"
+    @select-adapter="onSelectAdapter"
+    @click-empty-space="onClickEmptySpace"
+    @show-add-adapter-modal="onShowAddAdapterModal"
+    @remove-adapter="onRemove"
+  />
+  <common-adapter-manager-ui-table-old
+    v-else
+    :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"
+    :is-active-header="props.isActiveHeader"
+    :is-standby-header="props.isStandbyHeader"
+    :is-unused-header="props.isUnusedHeader"
+    @select-add-adapter="onSelectAddAdapter"
+    @select-adapter="onSelectAdapter"
+    @click-empty-space="onClickEmptySpace"
+  />
 </template>
 
 <script setup lang="ts">
@@ -64,41 +42,32 @@ import type {
   UI_I_SwitchAdapterItem,
 } from '~/components/common/diagramMain/lib/models/interfaces'
 
-const props = withDefaults(
-  defineProps<{
-    isAddModal: boolean
-    selectedAdapterId: string
-    selectedAddAdapterId: string
-    removedAdapters: string[]
-    adapterStatus: UI_I_AdapterStatus
-    isActiveHeader: boolean
-    isStandbyHeader: boolean
-    isUnusedHeader: boolean
-    existingAdaptersForAdding?: (UI_I_Adapter | UI_I_SwitchAdapterItem)[]
-    testId?: string
-  }>(),
-  {
-    isAddModal: false,
-    adapterStatus: () => ({
-      active: [],
-      standby: [],
-      unused: [],
-    }),
-    isActiveHeader: false,
-    isStandbyHeader: false,
-    isUnusedHeader: false,
-    removedAdapters: () => [],
-    existingAdaptersForAdding: () => [],
-    testId: '',
-  }
-)
+const props = defineProps<{
+  isAddModal: boolean
+  fullMode: boolean
+  coreAdapters: string[]
+  selectedAdapterId: string
+  selectedAddAdapterId: string
+  removedAdapters: string[]
+  adapterStatus: UI_I_AdapterStatus
+  isActiveHeader: boolean
+  isStandbyHeader: boolean
+  isUnusedHeader: boolean
+  existingAdaptersForAdding?: (UI_I_Adapter | UI_I_SwitchAdapterItem)[]
+}>()
 
 const emits = defineEmits<{
   (event: 'click-empty-space', value: Event): void
   (event: 'select-add-adapter', value: string): void
   (event: 'select-adapter', value: string): void
+  (event: 'show-add-adapter-modal'): void
+  (event: 'remove-adapter', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const onClickEmptySpace = (event: Event): void => {
   emits('click-empty-space', event)
 }
@@ -108,55 +77,12 @@ const onSelectAddAdapter = (id: string): void => {
 const onSelectAdapter = (id: string): void => {
   emits('select-adapter', id)
 }
-</script>
-
-<style scoped lang="scss">
-.k-grid-content {
-  width: auto;
-  overflow-y: scroll;
-  padding-right: 3px;
-  height: 200px;
-}
-.k-grid-content {
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-.k-grid-content {
-  background: #fff;
-}
-.k-grid-content {
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
+const onShowAddAdapterModal = (): void => {
+  emits('show-add-adapter-modal')
 }
-.k-grid-content {
-  min-height: 35px;
+const onRemove = (id: string) => {
+  emits('remove-adapter', id)
 }
-.k-grid-content {
-  white-space: normal;
-}
-.k-grid-content {
-  position: relative;
-  zoom: 1;
-}
-.k-grid-footer table {
-  table-layout: fixed;
-}
-table {
-  width: 100%;
-  margin: 0;
-  max-width: none;
-  border-collapse: separate;
-  border-spacing: 0;
-  empty-cells: show;
-  border-width: 0;
-  outline: 0;
-}
-
-.k-selectable {
-  height: auto;
+</script>
 
-  col {
-    width: 150px;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/adapterManager/ui/table/TableNew.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    :class="['manager', { 'add-adapter-modal': props.isAddModal }]"
+    @click.capture="onClickEmptySpace($event)"
+  >
+    <div v-if="props.isAddModal">
+      <common-adapter-manager-ui-second-title
+        :is-add-modal="props.isAddModal"
+        :count="props.existingAdaptersForAdding.length"
+      />
+      <common-adapter-manager-ui-table-adapters
+        :adapters="props.existingAdaptersForAdding"
+        :selected-adapter-id="props.selectedAddAdapterId"
+        :is-add-modal="props.isAddModal"
+        :full-mode="props.fullMode"
+        :core-adapters="props.coreAdapters"
+        @select-adapter="onSelectAddAdapter"
+      />
+    </div>
+    <div v-else>
+      <common-adapter-manager-ui-table-header
+        :is-selected="props.isActiveHeader"
+        :full-mode="props.fullMode"
+        title="header-active"
+        test-id="header-active"
+        @select-header="onSelectAdapter"
+        @show-add-adapter-modal="onShowAddAdapterModal"
+      />
+      <common-adapter-manager-ui-table-adapters
+        :adapters="props.adapterStatus.active"
+        :core-adapters="props.coreAdapters"
+        :selected-adapter-id="props.selectedAdapterId"
+        :is-add-modal="props.isAddModal"
+        :full-mode="props.fullMode"
+        @select-adapter="onSelectAdapter"
+        @remove-adapter="onRemove"
+      />
+      <common-adapter-manager-ui-table-header
+        :is-selected="props.isStandbyHeader"
+        title="header-stand-by"
+        test-id="header-stand-by"
+        @select-header="onSelectAdapter"
+      />
+      <common-adapter-manager-ui-table-adapters
+        :adapters="props.adapterStatus.standby"
+        :core-adapters="props.coreAdapters"
+        :selected-adapter-id="props.selectedAdapterId"
+        :is-add-modal="props.isAddModal"
+        :full-mode="props.fullMode"
+        @select-adapter="onSelectAdapter"
+        @remove-adapter="onRemove"
+      />
+      <common-adapter-manager-ui-table-header
+        :is-selected="props.isUnusedHeader"
+        title="header-unused"
+        test-id="header-unused"
+        @select-header="onSelectAdapter"
+      />
+      <common-adapter-manager-ui-table-adapters
+        :adapters="props.adapterStatus.unused"
+        :core-adapters="props.coreAdapters"
+        :selected-adapter-id="props.selectedAdapterId"
+        :is-add-modal="props.isAddModal"
+        :full-mode="props.fullMode"
+        @select-adapter="onSelectAdapter"
+        @remove-adapter="onRemove"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  isAddModal: boolean
+  fullMode: boolean
+  coreAdapters: string[]
+  selectedAdapterId: string
+  selectedAddAdapterId: string
+  removedAdapters: string[]
+  adapterStatus: UI_I_AdapterStatus
+  isActiveHeader: boolean
+  isStandbyHeader: boolean
+  isUnusedHeader: boolean
+  existingAdaptersForAdding?: (UI_I_Adapter | UI_I_SwitchAdapterItem)[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'click-empty-space', value: Event): void
+  (event: 'select-add-adapter', value: string): void
+  (event: 'select-adapter', value: string): void
+  (event: 'show-add-adapter-modal'): void
+  (event: 'remove-adapter', value: string): void
+}>()
+
+const onClickEmptySpace = (event: Event): void => {
+  emits('click-empty-space', event)
+}
+const onSelectAddAdapter = (id: string): void => {
+  emits('select-add-adapter', id)
+}
+const onSelectAdapter = (id: string): void => {
+  emits('select-adapter', id)
+}
+const onShowAddAdapterModal = (): void => {
+  emits('show-add-adapter-modal')
+}
+const onRemove = (id: string) => {
+  emits('remove-adapter', id)
+}
+</script>
+
+<style scoped lang="scss">
+.manager {
+  width: auto;
+  height: 262px;
+  overflow-y: auto;
+  margin-top: 8px;
+  background: var(--table-container-in-modal);
+  border: 1px solid var(--table-container-in-modal-border);
+  border-radius: 8px;
+  padding: 8px 12px;
+
+  &.add-adapter-modal {
+    height: 100%;
+    margin-top: 0;
+    padding: 12px;
+    max-width: 240px;
+  }
+}
+</style>