bfg-common 1.5.487 → 1.5.489

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

@@ -0,0 +1,141 @@
+<template>
+  <div 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>
+</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
+  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
+}>()
+
+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)
+}
+</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;
+}
+.k-grid-content {
+  min-height: 35px;
+}
+.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;
+
+  col {
+    width: 150px;
+  }
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <common-adapter-manager-ui-table-adapters-new
+    v-if="isNewView"
+    :adapters="props.adapters"
+    :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-adapters-old
+    v-else
+    :adapters="props.adapters"
+    :selected-adapter-id="props.selectedAdapterId"
+    @select-adapter="onSelectAdapter"
+  />
+</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 { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const onSelectAdapter = (id: string) => emits('select-adapter', id)
+const onRemove = (id: string) => {
+  emits('remove-adapter', id)
+}
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,153 @@
+<template>
+  <template v-for="(adapter, index) in adapters" :key="adapter.id">
+    <div
+      :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>
+
+<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;
+  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: 214px;
+  }
+
+  &: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;
+
+    &-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;
+    }
+  }
+
+  &-remove {
+    width: 16px;
+    height: 16px;
+    color: #ea2333;
+    cursor: pointer;
+    display: none;
+
+    &.disabled {
+      color: #bdc3c7;
+      user-select: none;
+      pointer-events: none;
+    }
+
+    &.show {
+      display: unset;
+    }
+  }
+}
+
+:root.dark-theme {
+  .adapter.selected {
+    .adapter-info-icon {
+      color: #239332;
+    }
+  }
+}
+</style>

package/components/common/adapterManager/ui/table/{Adapters.vue → adapters/AdaptersOld.vue}

@@ -4,7 +4,7 @@
       :class="{
         'k-state-selected': props.selectedAdapterId === adapterId,
       }"
-      :data-id="adapterId.testId"
+      :data-id="`adapter-${adapterId}`"
       @click="onSelectAdapter(adapterId)"
     >
       <td>
@@ -21,15 +21,10 @@
 </template>
 
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    selectedAdapterId: string
-    adapters: string[] // Создать интерфейс для testId { ..., testId: '' }
-  }>(),
-  {
-    adapters: () => [],
-  }
-)
+const props = defineProps<{
+  selectedAdapterId: string
+  adapters: string[]
+}>()
 
 const emits = defineEmits<{
   (event: 'select-adapter', value: string): void

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

@@ -0,0 +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>

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

@@ -0,0 +1,77 @@
+<template>
+  <ui-line v-if="!isActive" margin="8px 0" />
+  <div
+    :class="[
+      'manager-header',
+      {
+        'is-active': isActive,
+      },
+    ]"
+  >
+    <span class="manager-header-title">
+      {{ props.title }}
+    </span>
+    <span
+      v-if="isActive && props.fullMode"
+      class="manager-header-add"
+      @click="onShowAddAdapterModal"
+    >
+      <ui-icon name="plus" width="18" height="18" />
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_HeaderTitle } from '~/components/common/adapterManager/ui/table/lib/models/types'
+
+const props = defineProps<{
+  title: string
+  id: UI_T_HeaderTitle
+  fullMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-add-adapter-modal'): void
+}>()
+
+const isActive = computed<boolean>(() => props.id === 'header-active')
+
+const onShowAddAdapterModal = (): void => {
+  emits('show-add-adapter-modal')
+}
+</script>
+
+<style scoped lang="scss">
+.manager-header {
+  min-height: 20px;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 8px;
+
+  &-title {
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 16px;
+    letter-spacing: 0;
+    vertical-align: middle;
+    margin-top: 2px;
+    color: var(--table-text-first);
+    max-width: 172px;
+    word-wrap: break-word;
+    user-select: none;
+  }
+
+  &-add {
+    display: block;
+    width: 18px;
+    height: 18px;
+    margin-top: 1px;
+    color: var(--table-text-first);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--table-text-hover);
+    }
+  }
+}
+</style>

package/components/common/adapterManager/ui/table/{Header.vue → header/HeaderOld.vue}

@@ -8,19 +8,16 @@
   >
     <td>
       <span class="assigned-pnic-sections">
-        {{ title }}
+        {{ props.title }}
       </span>
     </td>
   </tr>
 </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
+  title: string
   testId: string
 }>()
 
@@ -28,21 +25,7 @@ const emits = defineEmits<{
   (event: 'select-header', value: string): void
 }>()
 
-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 = () => emits('select-header', props.id)
-const onSelectAdapter = (): void => emits('select-header', props.title)
+const onSelectAdapter = (): void => emits('select-header')
 </script>
 
 <style scoped lang="scss">

package/components/common/browse/blocks/contents/filesNew/Skeleton.vue

@@ -1,18 +1,18 @@
-<template>
-  <div class="skeleton-wrap">
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.skeleton-wrap {
-  display: grid;
-  grid-gap: 12px;
-}
-</style>
+<template>
+  <div class="skeleton-wrap">
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  display: grid;
+  grid-gap: 12px;
+}
+</style>

package/components/common/browse/blocks/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_BlocksWidth = [number, number, number]
+export type UI_T_BlocksWidth = [number, number, number]

package/components/common/browse/lib/models/interfaces.ts

@@ -1,5 +1,5 @@
-export interface UI_I_FileInfo {
-  type: string
-  title: string
-  value: string | number
-}
+export interface UI_I_FileInfo {
+  type: string
+  title: string
+  value: string | number
+}

package/components/common/context/lib/models/interfaces.ts

@@ -1,33 +1,33 @@
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-export interface UI_I_ContextMenuByEvent {
-  event: any
-  node: UI_I_TreeNode
-}
-export interface UI_I_ContextMenu<T = string> {
-  x: number
-  y: number
-  id: string | number
-  type: T
-  titleText: string
-  titleIconClassName: string
-  items: UI_I_ContextMenuItem[]
-}
-export interface UI_I_ContextMenuItem<T = string> {
-  key: number
-  name: string
-  actionType: T | ''
-  iconClassName: string
-  items: UI_I_ContextMenuItem<T>[]
-  shortcut?: string
-  hasBorderTop?: boolean
-  isHeader?: boolean
-  disabled?: boolean
-  development?: boolean
-  permission?: string
-  isShowItems?: boolean
-  testId?: string
-  style?: {
-    color: string
-  }
-}
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+export interface UI_I_ContextMenuByEvent {
+  event: any
+  node: UI_I_TreeNode
+}
+export interface UI_I_ContextMenu<T = string> {
+  x: number
+  y: number
+  id: string | number
+  type: T
+  titleText: string
+  titleIconClassName: string
+  items: UI_I_ContextMenuItem[]
+}
+export interface UI_I_ContextMenuItem<T = string> {
+  key: number
+  name: string
+  actionType: T | ''
+  iconClassName: string
+  items: UI_I_ContextMenuItem<T>[]
+  shortcut?: string
+  hasBorderTop?: boolean
+  isHeader?: boolean
+  disabled?: boolean
+  development?: boolean
+  permission?: string
+  isShowItems?: boolean
+  testId?: string
+  style?: {
+    color: string
+  }
+}