bfg-common 1.0.0

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="no-items-selected-container">
+    <span v-if="props.isAddModal" class="no-items-selected-text">
+      {{ localization.noItemSelected }}
+    </span>
+    <span v-else class="no-items-selected-text">
+      {{ localization.selectPhysicalNetworkAdapterFromListToViewItsDetails }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  isAddModal: boolean
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.no-items-selected-container {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.no-items-selected-text {
+  font-size: 16px;
+  font-weight: 700;
+  color: #a0a0a0;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <div :class="['secondary-title', { 'with-margins': !props.isAddModal }]">
+    <label>
+      {{ secondaryTitle }}
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  isAddModal: boolean
+}>()
+
+// UI_I_Localization
+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.networkAdapters
+    : localization.value.assignedAdapters
+)
+</script>
+
+<style scoped lang="scss">
+.secondary-title {
+  &.with-margins {
+    margin: 12px 0 3px 0;
+  }
+  label {
+    font-size: 16px;
+    color: #000;
+  }
+}
+</style>

package/components/common/adapterManager/ui/actions/ActionsBar.vue

@@ -0,0 +1,93 @@
+<template>
+  <div v-if="!props.isAddModal" class="vui-action-bar">
+    <ul>
+      <common-adapter-manager-ui-actions-add-adapter-button
+        :full-mode="props.fullMode"
+        @show-add-adapter-modal="onShowAddAdapterModal"
+      />
+      <common-adapter-manager-ui-actions-vertical-separator
+        v-if="props.fullMode"
+      />
+      <common-adapter-manager-ui-actions-remove-adapter-button
+        :full-mode="props.fullMode"
+        :selected-is-header="props.selectedIsHeader"
+        @remove-adapter="onRemove"
+      />
+      <common-adapter-manager-ui-actions-move-up-adapter-button
+        :is-disabled-move-up="props.isDisabledMoveUp"
+        @move-up-adapter="onMoveUp"
+      />
+      <common-adapter-manager-ui-actions-move-down-adapter-button
+        :is-disabled-move-down="props.isDisabledMoveDown"
+        @move-down-adapter="onMoveDown"
+      />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  fullMode: boolean
+  isAddModal: boolean
+  selectedIsHeader: boolean
+  isDisabledMoveUp: boolean
+  isDisabledMoveDown: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-add-adapter-modal'): void
+  (event: 'remove-adapter'): void
+  (event: 'move-up-adapter'): void
+  (event: 'move-down-adapter'): void
+}>()
+
+const onShowAddAdapterModal = () => emits('show-add-adapter-modal')
+const onMoveDown = () => emits('move-down-adapter')
+const onMoveUp = () => emits('move-up-adapter')
+const onRemove = () => emits('remove-adapter')
+</script>
+
+<style scoped lang="scss">
+:deep(.action-link-container) {
+  cursor: pointer;
+
+  svg {
+    transform: translateY(3px);
+  }
+}
+
+ul :deep(li span:hover:not(.disabled)) {
+  text-decoration: none;
+  background-color: #e9f6fd;
+  border: 1px solid #c7e9ff;
+}
+
+ul :deep(li span) {
+  padding: 4px;
+  line-height: 22px;
+  border: 1px solid transparent;
+}
+
+ul :deep(li span.disabled) {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.vui-action-bar ul {
+  margin: 0 0 3px;
+}
+
+ol,
+ul {
+  list-style-position: inside;
+  padding-left: 0;
+}
+
+.vui-action-bar ul :deep(li) {
+  padding-right: 4px;
+  display: inline-block;
+  list-style: none;
+  vertical-align: middle;
+  line-height: 20px;
+}
+</style>

package/components/common/adapterManager/ui/actions/AddAdapterButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <li v-if="props.fullMode">
+    <span
+      class="action-link-container"
+      :title="localization.addAdapters"
+      @click="onShowAddAdapterModal"
+    >
+      <atoms-diagram-icon name="add-adapter" />
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  fullMode: boolean
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'show-add-adapter-modal'): void
+}>()
+
+const onShowAddAdapterModal = () => emits('show-add-adapter-modal')
+</script>

package/components/common/adapterManager/ui/actions/MoveDownAdapterButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <li>
+    <span
+      :class="[
+        'action-link-container',
+        {
+          disabled: props.isDisabledMoveDown,
+        },
+      ]"
+      :title="localization.moveDown"
+      @click="onMoveDown"
+    >
+      <atoms-diagram-icon name="arrow-down" />
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  isDisabledMoveDown: boolean
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'move-down-adapter'): void
+}>()
+
+const onMoveDown = () => emits('move-down-adapter')
+</script>

package/components/common/adapterManager/ui/actions/MoveUpAdapterButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <li>
+    <span
+      :class="[
+        'action-link-container',
+        {
+          disabled: props.isDisabledMoveUp,
+        },
+      ]"
+      :title="localization.moveUp"
+      @click="onMoveUp"
+    >
+      <atoms-diagram-icon name="arrow-up" />
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  isDisabledMoveUp: boolean
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'move-up-adapter'): void
+}>()
+
+const onMoveUp = () => emits('move-up-adapter')
+</script>

package/components/common/adapterManager/ui/actions/RemoveAdapterButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <li v-if="props.fullMode">
+    <span
+      :class="[
+        'action-link-container',
+        {
+          disabled: props.selectedIsHeader,
+        },
+      ]"
+      :title="localization.removeSelected"
+      @click="onRemove"
+    >
+      <atoms-diagram-icon name="remove-adapter" />
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  fullMode: boolean
+  selectedIsHeader: boolean
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'remove-adapter'): void
+}>()
+
+const onRemove = () => emits('remove-adapter')
+</script>

package/components/common/adapterManager/ui/actions/VerticalSeparator.vue

@@ -0,0 +1,11 @@
+<template>
+  <span class="vertical-separator"></span>
+</template>
+
+<style lang="scss" scoped>
+.vertical-separator {
+  border: 1px solid #999;
+  border-left: none;
+  margin: 0 7px 0 4px;
+}
+</style>

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

@@ -0,0 +1,91 @@
+<template>
+  <template v-for="adapterId in props.adapters" :key="adapterId">
+    <tr
+      :class="{
+        'k-state-selected': props.selectedAdapterId === 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 = withDefaults(
+  defineProps<{
+    selectedAdapterId: string
+    adapters: string[]
+  }>(),
+  {
+    adapters: () => [],
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'select-adapter', id: 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.vue

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

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

@@ -0,0 +1,167 @@
+<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
+            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
+            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
+            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/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)[]
+  }>(),
+  {
+    isAddModal: false,
+    adapterStatus: () => ({
+      active: [],
+      standBy: [],
+      unused: [],
+    }),
+    isActiveHeader: false,
+    isStandbyHeader: false,
+    isUnusedHeader: false,
+    removedAdapters: () => [],
+    existingAdaptersForAdding: () => []
+  }
+)
+
+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-grid-content {
+//  width: auto;
+//  overflow-y: scroll;
+//  padding-right: 3px;
+//  height: 200px;
+//}
+.k-selectable {
+  height: auto;
+
+  col {
+    width: 150px;
+  }
+}
+//.k-grid-content {
+//  width: auto;
+//  overflow-y: scroll;
+//  padding-right: 3px;
+//  height: 273px;
+//}
+</style>