bfg-common 1.6.77 → 1.6.78

package/components/common/adapterManager/ui/table/adapters/AdaptersNew.vue

@@ -1,186 +1,187 @@
-<template>
-  <template v-for="(adapter, index) in adapters" :key="adapter.id">
-    <ui-tooltip
-      :id="`adapter-${adapter.id}`"
-      :test-id="`adapter-tooltip-${adapter.id}`"
-      size="md"
-      position="bottom"
-      position-by-tooltip="center"
-      show-type="variant-1"
-      timing="660"
-      width="214"
-    >
-      <template #target>
-        <div
-          :id="`adapter-${adapter.id}`"
-          :class="[
-            'adapter',
-            {
-              selected: props.selectedAdapterId === adapter.id,
-              'first-item': index === 0,
-              'last-item': props.adapters.length === index + 1,
-              'is-add-modal': props.isAddModal,
-            },
-          ]"
-          :data-id="`adapter-${adapter.id}`"
-          @click="onSelectAdapter(adapter.id)"
-        >
-          <div class="adapter-info">
-            <span class="adapter-info-icon">
-              <ui-icon name="diagram-physical-adapter" width="20" height="20" />
-            </span>
-            <span class="adapter-info-title">{{ adapter.id }}</span>
-          </div>
-          <span
-            v-if="!props.isAddModal && props.fullMode"
-            :class="[
-              'adapter-remove',
-              {
-                show: props.selectedAdapterId === adapter.id,
-                disabled: adapter.isCore,
-              },
-            ]"
-            @click.prevent.stop="onRemove(adapter.id)"
-          >
-            <ui-icon name="close" width="16" height="16" />
-          </span>
-        </div>
-      </template>
-      <template #content>
-        <div class="tooltip-text">
-          {{ adapter.id }}
-        </div>
-      </template>
-    </ui-tooltip>
-  </template>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  isAddModal: boolean
-  fullMode: boolean
-  selectedAdapterId: string
-  adapters: string[]
-  coreAdapters: string[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-adapter', value: string): void
-  (event: 'remove-adapter', value: string): void
-}>()
-
-const onSelectAdapter = (id: string) => emits('select-adapter', id)
-
-const onRemove = (id: string) => {
-  emits('remove-adapter', id)
-}
-
-const adapters = computed(() =>
-  props.adapters.map((adapter: string) => ({
-    id: adapter,
-    isCore: props.coreAdapters?.includes(adapter),
-  }))
-)
-</script>
-
-<style scoped lang="scss">
-.adapter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  column-gap: 8px;
-  padding: 6px 8px;
-  border-radius: 6px;
-  color: var(--table-text-first);
-
-  &:not(.last-item) {
-    margin-bottom: 4px;
-  }
-
-  &.first-item {
-    margin-top: 4px;
-  }
-
-  &.is-add-modal {
-    margin-top: 0;
-    width: 100%;
-    cursor: pointer;
-  }
-
-  &:hover {
-    background: var(--wizard-active-step-step-bg);
-
-    .adapter-remove {
-      display: unset;
-    }
-  }
-
-  &.selected {
-    background: var(--table-filter-close);
-    color: var(--accordion-selected-item-text);
-
-    .adapter-info-icon {
-      color: #3cae4c;
-    }
-  }
-
-  &-info {
-    display: flex;
-    align-items: center;
-    column-gap: 8px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    &-icon {
-      color: var(--text-green);
-      width: 20px;
-      height: 20px;
-    }
-
-    &-title {
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 20px;
-      letter-spacing: 0;
-      vertical-align: middle;
-      user-select: none;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-
-  &-remove {
-    width: 16px;
-    height: 16px;
-    color: #ea2333;
-    cursor: pointer;
-    display: none;
-
-    &.disabled {
-      //opacity: 64%;
-      display: none !important;
-      //color: var(--btn-text-disabled-color);
-      //user-select: none;
-      //pointer-events: none;
-    }
-
-    &.show {
-      display: unset;
-    }
-  }
-}
-
-:root.dark-theme {
-  .adapter.selected {
-    .adapter-info-icon {
-      color: #239332;
-    }
-  }
-}
-
-.tooltip-text {
-  word-wrap: break-word;
-}
-</style>
+<template>
+  <template v-for="(adapter, index) in adapters" :key="adapter.id">
+    <ui-tooltip
+      :id="`adapter-${adapter.id}`"
+      :test-id="`adapter-tooltip-${adapter.id}`"
+      size="md"
+      position="bottom"
+      position-by-tooltip="center"
+      show-type="variant-1"
+      timing="660"
+      width="214"
+    >
+      <template #target>
+        <div
+          :id="`adapter-${adapter.id}`"
+          :class="[
+            'adapter',
+            {
+              selected: props.selectedAdapterId === adapter.id,
+              'first-item': index === 0,
+              'last-item': props.adapters.length === index + 1,
+              'is-add-modal': props.isAddModal,
+            },
+          ]"
+          :data-id="`adapter-${adapter.id}`"
+          @click="onSelectAdapter(adapter.id)"
+        >
+          <div class="adapter-info">
+            <span class="adapter-info-icon">
+              <ui-icon name="diagram-physical-adapter" width="20" height="20" />
+            </span>
+            <span class="adapter-info-title">{{ adapter.id }}</span>
+          </div>
+          <span
+            v-if="!props.isAddModal && props.fullMode"
+            :class="[
+              'adapter-remove',
+              {
+                show: props.selectedAdapterId === adapter.id,
+                disabled: adapter.isCore,
+              },
+            ]"
+            @click.prevent.stop="onRemove(adapter.id)"
+          >
+            <ui-icon name="close" width="16" height="16" />
+          </span>
+        </div>
+      </template>
+      <template #content>
+        <div class="tooltip-text">
+          {{ adapter.id }}
+        </div>
+      </template>
+    </ui-tooltip>
+  </template>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  isAddModal: boolean
+  fullMode: boolean
+  selectedAdapterId: string
+  adapters: string[]
+  coreAdapters: string[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-adapter', value: string): void
+  (event: 'remove-adapter', value: string): void
+}>()
+
+const onSelectAdapter = (id: string) => emits('select-adapter', id)
+
+const onRemove = (id: string) => {
+  emits('remove-adapter', id)
+}
+
+const adapters = computed(() =>
+  props.adapters.map((adapter: string) => ({
+    id: adapter,
+    isCore: props.coreAdapters?.includes(adapter),
+  }))
+)
+</script>
+
+<style scoped lang="scss">
+.adapter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 8px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: var(--table-text-first);
+  cursor: pointer;
+
+  &:not(.last-item) {
+    margin-bottom: 4px;
+  }
+
+  &.first-item {
+    margin-top: 4px;
+  }
+
+  &.is-add-modal {
+    margin-top: 0;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  &:hover {
+    background: var(--wizard-active-step-step-bg);
+
+    .adapter-remove {
+      display: unset;
+    }
+  }
+
+  &.selected {
+    background: var(--table-filter-close);
+    color: var(--accordion-selected-item-text);
+
+    .adapter-info-icon {
+      color: #3cae4c;
+    }
+  }
+
+  &-info {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &-icon {
+      color: var(--text-green);
+      width: 20px;
+      height: 20px;
+    }
+
+    &-title {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0;
+      vertical-align: middle;
+      user-select: none;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  &-remove {
+    width: 16px;
+    height: 16px;
+    color: #ea2333;
+    cursor: pointer;
+    display: none;
+
+    &.disabled {
+      //opacity: 64%;
+      display: none !important;
+      //color: var(--btn-text-disabled-color);
+      //user-select: none;
+      //pointer-events: none;
+    }
+
+    &.show {
+      display: unset;
+    }
+  }
+}
+
+:root.dark-theme {
+  .adapter.selected {
+    .adapter-info-icon {
+      color: #239332;
+    }
+  }
+}
+
+.tooltip-text {
+  word-wrap: break-word;
+}
+</style>

package/components/common/adapterManager/ui/table/adapters/AdaptersOld.vue

@@ -1,87 +1,87 @@
-<template>
-  <template v-for="adapterId in props.adapters" :key="adapterId">
-    <tr
-      :class="{
-        'k-state-selected': props.selectedAdapterId === adapterId,
-      }"
-      :data-id="`adapter-${adapterId}`"
-      @click="onSelectAdapter(adapterId)"
-    >
-      <td>
-        <span>
-          <atoms-diagram-icon
-            name="adapter-icon"
-            class="adapter-icon-positioning"
-          />
-        </span>
-        <span>{{ adapterId }}</span>
-      </td>
-    </tr>
-  </template>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  selectedAdapterId: string
-  adapters: string[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-adapter', value: string): void
-}>()
-
-const onSelectAdapter = (id: string) => emits('select-adapter', id)
-</script>
-
-<style scoped lang="scss">
-tr {
-  background-color: #fff;
-  height: 24px;
-  color: #565656;
-  cursor: default;
-  user-select: none;
-
-  &.k-state-selected {
-    background-color: #29414e;
-    color: #ffffff;
-    border-bottom: 1px solid;
-    border-bottom-color: transparent;
-  }
-
-  &:not(.k-state-selected):hover {
-    background-color: #e8e8e8;
-    color: #454545;
-
-    td {
-      border-bottom: 1px solid #666666;
-    }
-  }
-
-  td {
-    border-width: 0 0 1px;
-    border-color: #ddd;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 24px;
-    padding: 0 12px;
-    border-style: solid;
-
-    * {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  span {
-    //TODO set font size to 13px when will add font
-    //font-family: ProximaNova;
-    font-size: 95%;
-    margin: 0 3px;
-
-    .adapter-icon-positioning {
-      transform: translate(-2px, 5px);
-    }
-  }
-}
-</style>
+<template>
+  <template v-for="adapterId in props.adapters" :key="adapterId">
+    <tr
+      :class="{
+        'k-state-selected': props.selectedAdapterId === adapterId,
+      }"
+      :data-id="`adapter-${adapterId}`"
+      @click="onSelectAdapter(adapterId)"
+    >
+      <td>
+        <span>
+          <atoms-diagram-icon
+            name="adapter-icon"
+            class="adapter-icon-positioning"
+          />
+        </span>
+        <span>{{ adapterId }}</span>
+      </td>
+    </tr>
+  </template>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  selectedAdapterId: string
+  adapters: string[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-adapter', value: string): void
+}>()
+
+const onSelectAdapter = (id: string) => emits('select-adapter', id)
+</script>
+
+<style scoped lang="scss">
+tr {
+  background-color: #fff;
+  height: 24px;
+  color: #565656;
+  cursor: default;
+  user-select: none;
+
+  &.k-state-selected {
+    background-color: #29414e;
+    color: #ffffff;
+    border-bottom: 1px solid;
+    border-bottom-color: transparent;
+  }
+
+  &:not(.k-state-selected):hover {
+    background-color: #e8e8e8;
+    color: #454545;
+
+    td {
+      border-bottom: 1px solid #666666;
+    }
+  }
+
+  td {
+    border-width: 0 0 1px;
+    border-color: #ddd;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 24px;
+    padding: 0 12px;
+    border-style: solid;
+
+    * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  span {
+    //TODO set font size to 13px when will add font
+    //font-family: ProximaNova;
+    font-size: 95%;
+    margin: 0 3px;
+
+    .adapter-icon-positioning {
+      transform: translate(-2px, 5px);
+    }
+  }
+}
+</style>

package/components/common/adapterManager/ui/table/header/Header.vue

@@ -1,57 +1,57 @@
-<template>
-  <common-adapter-manager-ui-table-header-new
-    v-if="isNewView"
-    :title="title"
-    :id="props.title"
-    :full-mode="props.fullMode"
-    @show-add-adapter-modal="onShowAddAdapterModal"
-  />
-  <common-adapter-manager-ui-table-header-old
-    v-else
-    :is-selected="props.isSelected"
-    :title="title"
-    :test-id="props.testId"
-    @select-header="onSelectAdapter"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_HeaderTitle } from '~/components/common/adapterManager/ui/table/lib/models/types'
-
-const props = defineProps<{
-  isSelected: boolean
-  title: UI_T_HeaderTitle
-  testId: string
-  fullMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-header', value: string): void
-  (event: 'show-add-adapter-modal'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const title = computed<string>(
-  () =>
-    (props.title === 'header-active' &&
-      localization.value.networks.activeAdapters) ||
-    (props.title === 'header-stand-by' &&
-      localization.value.common.standbyAdapters) ||
-    (props.title === 'header-unused' &&
-      localization.value.common.unusedAdapters) ||
-    ''
-)
-
-const onSelectAdapter = (): void => emits('select-header', props.title)
-const onShowAddAdapterModal = (): void => {
-  emits('show-add-adapter-modal')
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-adapter-manager-ui-table-header-new
+    v-if="isNewView"
+    :title="title"
+    :id="props.title"
+    :full-mode="props.fullMode"
+    @show-add-adapter-modal="onShowAddAdapterModal"
+  />
+  <common-adapter-manager-ui-table-header-old
+    v-else
+    :is-selected="props.isSelected"
+    :title="title"
+    :test-id="props.testId"
+    @select-header="onSelectAdapter"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_HeaderTitle } from '~/components/common/adapterManager/ui/table/lib/models/types'
+
+const props = defineProps<{
+  isSelected: boolean
+  title: UI_T_HeaderTitle
+  testId: string
+  fullMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-header', value: string): void
+  (event: 'show-add-adapter-modal'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const title = computed<string>(
+  () =>
+    (props.title === 'header-active' &&
+      localization.value.networks.activeAdapters) ||
+    (props.title === 'header-stand-by' &&
+      localization.value.common.standbyAdapters) ||
+    (props.title === 'header-unused' &&
+      localization.value.common.unusedAdapters) ||
+    ''
+)
+
+const onSelectAdapter = (): void => emits('select-header', props.title)
+const onShowAddAdapterModal = (): void => {
+  emits('show-add-adapter-modal')
+}
+</script>
+
+<style scoped lang="scss"></style>