bfg-common 1.3.373 → 1.3.374

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

@@ -1,93 +1,93 @@
-<template>
-  <tr
-    :class="{
-      'k-state-selected': props.isSelected,
-    }"
-    :data-id="props.testId"
-    @click="onSelectAdapter"
-  >
-    <td>
-      <span class="assigned-pnic-sections">
-        {{ 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
-  testId: string
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const title = computed<string>(
-  () =>
-    (props.title === 'header-active' && localization.value.activeAdapters) ||
-    (props.title === 'header-stand-by' && localization.value.standbyAdapters) ||
-    (props.title === 'header-unused' && localization.value.unusedAdapters)
-)
-
-const emits = defineEmits<{
-  (event: 'select-header', id: string): void
-}>()
-
-// const onSelectAdapter = () => emits('select-header', props.id)
-const onSelectAdapter = (): void => emits('select-header', props.title)
-</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%;
-    font-weight: 700;
-    margin: 0 3px;
-  }
-}
-</style>
+<template>
+  <tr
+    :class="{
+      'k-state-selected': props.isSelected,
+    }"
+    :data-id="props.testId"
+    @click="onSelectAdapter"
+  >
+    <td>
+      <span class="assigned-pnic-sections">
+        {{ 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
+  testId: string
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const title = computed<string>(
+  () =>
+    (props.title === 'header-active' && localization.value.activeAdapters) ||
+    (props.title === 'header-stand-by' && localization.value.standbyAdapters) ||
+    (props.title === 'header-unused' && localization.value.unusedAdapters)
+)
+
+const emits = defineEmits<{
+  (event: 'select-header', id: string): void
+}>()
+
+// const onSelectAdapter = () => emits('select-header', props.id)
+const onSelectAdapter = (): void => emits('select-header', props.title)
+</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%;
+    font-weight: 700;
+    margin: 0 3px;
+  }
+}
+</style>

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

@@ -1,162 +1,162 @@
-<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
-            title="header-active"
-            test-id="header-active"
-            :is-selected="props.isActiveHeader"
-            @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
-            title="header-stand-by"
-            test-id="header-stand-by"
-            :is-selected="props.isStandbyHeader"
-            @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
-            title="header-unused"
-            test-id="header-unused"
-            :is-selected="props.isUnusedHeader"
-            @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 {
-  UI_I_Adapter,
-  UI_I_AdapterStatus,
-  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 emits = defineEmits<{
-  (event: 'click-empty-space', ev: Event): void
-  (event: 'select-add-adapter', id: string): void
-  (event: 'select-adapter', id: 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>
+<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
+            title="header-active"
+            test-id="header-active"
+            :is-selected="props.isActiveHeader"
+            @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
+            title="header-stand-by"
+            test-id="header-stand-by"
+            :is-selected="props.isStandbyHeader"
+            @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
+            title="header-unused"
+            test-id="header-unused"
+            :is-selected="props.isUnusedHeader"
+            @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 {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  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 emits = defineEmits<{
+  (event: 'click-empty-space', ev: Event): void
+  (event: 'select-add-adapter', id: string): void
+  (event: 'select-adapter', id: 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>