bfg-common 1.6.104 → 1.6.105

package/components/common/configure/vmkernelAdapters/tableView/TableViewNew.vue

@@ -1,451 +1,466 @@
-<template>
-  <div class="vmkernel-adapters-table">
-    <ui-data-table
-      :data="data"
-      :options="options"
-      :total-items="props.networkData.total_items"
-      :total-pages="props.networkData.total_pages"
-      :texts="texts"
-      :skeleton="skeletonDataLocal"
-      :actions="actions"
-      :loading="props.isLoading"
-      test-id="vmkernel-adapters-table"
-      class="vmkernel-adapters-table"
-      server-off
-      @select-row="onSelectRow"
-      @action="onSelectAction"
-    >
-      <template #insteadOfTitleActions>
-        <div class="title-actions">
-          <ui-button
-            test-id="refresh-vmkernel-adapters-btn"
-            class="refresh-btn"
-            size="md"
-            variant="outline"
-            @click="emits('global-refresh')"
-          >
-            <template #icon> <ui-icon name="reset" width="24" /> </template>
-            {{ localization.common.refresh }}
-          </ui-button>
-          <ui-button
-            v-permission="
-              'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
-            "
-            test-id="add-vmkernel-adapters-btn"
-            class="add-btn"
-            size="md"
-            @click="emits('show-add-networking-modal')"
-          >
-            <template #icon> <ui-icon name="plus" width="24" /> </template>
-            {{ localization.common.addNetworkingWithDots }}
-          </ui-button>
-        </div>
-      </template>
-
-      <template #icon="{ item }">
-        <div class="cell">
-          <div
-            :class="[
-              'cell-icon',
-              {
-                'cell-icon-device': item.col === 'col0',
-              },
-            ]"
-          >
-            <ui-icon
-              v-if="item.col === 'col0'"
-              :name="item.data.icon"
-              width="18"
-              height="18"
-            />
-            <div v-else :class="item.data.icon"></div>
-          </div>
-          <span class="cell-text">
-            {{ item.text }}
-          </span>
-        </div>
-      </template>
-
-      <template #default-actions="{ item }">
-        <span
-          :id="`vmkernel-adapters-item-${item.data.id}-action`"
-          v-permission="'Networks.UpdateSysx Networks.RemoveSysx'"
-          :class="[
-            'action-button',
-            {
-              'action-button-active': selectedActionId === item.data.id,
-            },
-          ]"
-          @click.stop="onToggleActions(item.data.id)"
-        >
-          <ui-icon name="vertical-dotes" width="20" height="20" />
-        </span>
-        <Teleport to="body">
-          <ui-dropdown
-            v-permission="'Networks.UpdateSysx Networks.RemoveSysx'"
-            :test-id="`data-table-vmkernel-adapters-dropdown-${item.data.id}`"
-            :show="selectedActionId === item.data.id"
-            :items="actionItems"
-            :elem-id="`vmkernel-adapters-item-${item.data.id}-action`"
-            width="max-content"
-            @select="(action) => onSelectAction(action, true)"
-            @hide="selectedActionId = -1"
-          />
-        </Teleport>
-      </template>
-
-      <template #skeleton-header>
-        <div class="skeleton-header">
-          <div class="left-skeleton">
-            <ui-skeleton-item width="80" height="20" />
-          </div>
-          <div class="right-skeleton">
-            <ui-skeleton-item width="112" height="36" border-radius="8" />
-            <ui-skeleton-item width="160" height="36" border-radius="8" />
-          </div>
-        </div>
-      </template>
-    </ui-data-table>
-  </div>
-
-  <common-diagram-main-modals-remove-modal
-    v-if="isShowPortRemoveModal"
-    :id="vmKernelToAction?.sysx?.id || ''"
-    :title="localization.common.removeVMkernelAdapter"
-    :show="isShowPortRemoveModal"
-    :is-show-loader="props.isRemoveModalLoading"
-    modal-name="port-remove-modal"
-    view-name="port-remove"
-    :switch-name="vmKernelToAction.switchName"
-    type="port"
-    @remove="onRemove"
-    @hide="onHideRemoveModal"
-  />
-  <common-diagram-main-modals-edit-settings-modal
-    v-if="isShowPortEditSettingsModal"
-    :show="isShowPortEditSettingsModal"
-    :title="portEditInitialData.portName || ''"
-    :initial-data="portEditInitialData"
-    :items="portEditSettingsTabs"
-    :is-dark-mode="props.isDarkMode"
-    :is-edit-modal-loading="props.isEditModalLoading"
-    view-name="port-edit"
-    width="872px"
-    height="558px"
-    @send-edit-data="onSendEditData"
-    @change-edit-fields-data="onChangeEditFieldsData"
-    @hide="onHidePortEditSettingsModal"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ButtonsGroup } from '~/node_modules/bfg-uikit/components/ui/button/group/lib/models/interfaces'
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type {
-  UI_I_DataTableBody,
-  UI_I_DataTableHeader,
-  UI_I_TableTexts,
-  UI_I_DataTableSkeleton,
-  UI_I_DataTable,
-} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_Network,
-  UI_I_ModalsInitialData,
-  UI_I_EditFieldsData,
-  UI_I_ModalTab,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { I_VmKernelAdapter } from '~/components/common/configure/vmkernelAdapters/tableView/lib/models/interfaces'
-import { constructNetworkTableFunc } from '~/components/common/configure/vmkernelAdapters/tableView/mappers/mappers'
-import {
-  portEditSettingsTabsFunc,
-  portEditInitialDataFunc,
-} from '~/components/common/configure/vmkernelAdapters/tableView/lib/config/settings'
-import {
-  getBodyDataFunc,
-  getHeaderDataFunc,
-  options,
-  skeletonData,
-  getActions,
-  getHeaderActions,
-} from '~/components/common/configure/vmkernelAdapters/tableView/lib/config/vmKernelAdaptersTableConfigNew'
-
-const props = defineProps<{
-  isLoading: boolean
-  networkData: UI_I_Network[]
-  isDarkMode: boolean
-  isRemoveModalLoading: boolean
-  isEditModalLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'remove', id: string, type: string, hideModal: () => void): void
-  (
-    event: 'send-edit-data',
-    type: string,
-    data: UI_I_EditFieldsData,
-    hideModal: () => void,
-    name?: string
-  ): void
-  (event: 'global-refresh'): void
-  (event: 'show-add-networking-modal'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedRow = defineModel<number>()
-
-const onSelectRow = (value: UI_I_DataTableBody[]): void => {
-  if (typeof value[0].row !== 'number') return
-  selectedRow.value = value[0].row
-}
-
-const texts = computed<UI_I_TableTexts>(() => ({
-  searchHere: localization.value.common.searchHere,
-  rowsPerPage: localization.value.common.rowsPerPage,
-  of: localization.value.common.of,
-  selected: localization.value.common.selected,
-  columns: localization.value.common.columns,
-  previous: localization.value.common.previous,
-  next: localization.value.common.next,
-  noItemsFound: localization.value.common.noItemsFound,
-  exportAll: localization.value.common.exportAll,
-  exportSelected: localization.value.common.exportSelected,
-  all: localization.value.common.all,
-  filter: localization.value.common.filter,
-}))
-
-const skeletonDataLocal = ref<UI_I_DataTableSkeleton>(skeletonData)
-
-const data = computed<UI_I_DataTable>(() => ({
-  id: 'vmkernel-adapters-table',
-  selectedRows: [],
-  isAllSelected: false,
-  header: headItems.value,
-  body: bodyItems.value,
-}))
-
-const headItems = computed<UI_I_DataTableHeader[]>(() =>
-  getHeaderDataFunc(localization.value)
-)
-const bodyItems = ref<UI_I_DataTableBody[]>([])
-
-const networkTableData = computed<I_VmKernelAdapter[]>(() => {
-  return constructNetworkTableFunc(props.networkData, localization.value)
-})
-
-const selectedSysx = ref<string>('')
-
-watch(
-  networkTableData,
-  (newValue: I_VmKernelAdapter[]) => {
-    if (!newValue?.length) {
-      selectedSysx.value = ''
-      selectedRow.value = undefined
-      bodyItems.value = []
-    } else {
-      if (
-        !newValue?.find?.(
-          (network: I_VmKernelAdapter) => network.device === selectedSysx.value
-        )
-      ) {
-        selectedSysx.value = ''
-        selectedRow.value = undefined
-      }
-      bodyItems.value = getBodyDataFunc(
-        newValue,
-        selectedRow.value,
-        localization.value
-      )
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-const hasSelectedAdapter = computed<boolean>(
-  () => typeof selectedRow.value === 'number'
-)
-
-const actions = computed<UI_I_ButtonsGroup[]>(() =>
-  getHeaderActions(localization.value, hasSelectedAdapter.value)
-)
-
-const selectedActionId = ref<number>(-1)
-
-const onToggleActions = (id: number): void => {
-  if (selectedActionId.value === id) {
-    selectedActionId.value = ''
-    return
-  }
-  selectedActionId.value = id
-}
-
-const onSelectAction = (action: string, isDropdownAction?: boolean): void => {
-  selectedSysx.value = isDropdownAction
-    ? selectedActionId.value
-    : data.value.body?.find?.((row) => row.row === selectedRow.value)?.data?.[0]
-        .data?.id
-
-  action === 'edit' ? onShowPortEditSettingsModal() : onShowRemoveModal()
-}
-
-const actionItems = computed<UI_I_Dropdown[]>(() =>
-  getActions(localization.value, 'data-table-vmkernel-adapters-action-item')
-)
-
-const portEditInitialData = ref<UI_I_ModalsInitialData>({})
-
-const vmKernelToAction = computed<UI_I_Network | undefined>(() =>
-  props.networkData.find(
-    (network: UI_I_Network) => network.sysx?.id === selectedSysx.value
-  )
-)
-
-const onRemove = (id: string, type: string): void => {
-  emits('remove', id, type, onHideRemoveModal)
-}
-
-const isShowPortRemoveModal = ref<boolean>(false)
-
-const onShowRemoveModal = (): void => {
-  isShowPortRemoveModal.value = true
-}
-const onHideRemoveModal = (): void => {
-  isShowPortRemoveModal.value = false
-}
-
-const isShowPortEditSettingsModal = ref<boolean>(false)
-
-const onShowPortEditSettingsModal = (): void => {
-  if (vmKernelToAction.value) {
-    portEditInitialData.value = portEditInitialDataFunc(vmKernelToAction.value)
-    isShowPortEditSettingsModal.value = true
-  }
-}
-const onHidePortEditSettingsModal = (): void => {
-  isShowPortEditSettingsModal.value = false
-}
-
-const editFieldsData = ref<UI_I_EditFieldsData>({})
-
-const onSendEditData = (
-  type: string,
-  hideModal: () => void,
-  name?: string
-): void => {
-  emits('send-edit-data', type, editFieldsData.value, hideModal, name)
-}
-
-const onChangeEditFieldsData = (
-  newEditFieldsData: UI_I_EditFieldsData
-): void => {
-  editFieldsData.value = newEditFieldsData
-}
-
-const portEditSettingsTabs = computed<UI_I_ModalTab[]>(() =>
-  portEditSettingsTabsFunc(localization.value)
-)
-</script>
-
-<style scoped lang="scss">
-.vmkernel-adapters-table {
-  height: calc(100% - 52px);
-}
-
-:deep(.table-container) {
-  height: 100%;
-  grid-template-rows: min-content auto min-content;
-
-  .title-container {
-    margin-right: 16px;
-  }
-
-  &.full-width-search {
-    grid-template-rows: min-content min-content auto min-content;
-  }
-}
-
-.actions {
-  justify-content: flex-end;
-  padding-right: 4px;
-
-  .action-icon {
-    height: 20px;
-    width: 20px;
-    color: var(--actions-icon-color);
-
-    &:hover {
-      color: var(--actions-icon-icative-color);
-    }
-  }
-}
-
-.title-actions {
-  display: flex;
-  column-gap: 16px;
-
-  :deep(.ui-btn) {
-    white-space: nowrap;
-  }
-}
-
-:deep(.ui-button-group) {
-  padding-left: 0;
-}
-
-:deep(.table-fixed-height) {
-  all: unset;
-  .table-fixed-full-height {
-    all: unset;
-  }
-}
-
-:deep(.data-table-skeleton) {
-  height: 100%;
-  grid-template-rows: min-content auto min-content;
-  &.full-width-search {
-    grid-template-rows: min-content min-content auto min-content;
-  }
-
-  .body.with-actions {
-    height: calc(100% - 92px);
-  }
-}
-
-.skeleton-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .right-skeleton {
-    display: flex;
-    column-gap: 16px;
-  }
-}
-
-.cell {
-  display: flex;
-  column-gap: 4px;
-
-  &-icon {
-    height: 18px;
-
-    &.cell-icon-device {
-      color: var(--checkbox-stroke-checked);
-    }
-  }
-  &-text {
-    line-height: 18px;
-  }
-}
-
-:deep(.status-container) {
-  span:not(.icon-container) {
-    white-space: nowrap;
-  }
-}
-
-:deep(.ui-button-group-dots-icon) {
-  padding-left: 0;
-}
-</style>
+<template>
+  <div class="vmkernel-adapters-table">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :total-items="props.networkData.total_items"
+      :total-pages="props.networkData.total_pages"
+      :texts="texts"
+      :skeleton="skeletonDataLocal"
+      :actions="actions"
+      :loading="props.isLoading"
+      test-id="vmkernel-adapters-table"
+      class="vmkernel-adapters-table"
+      server-off
+      @select-row="onSelectRow"
+      @action="onSelectAction"
+    >
+      <template #insteadOfTitleActions>
+        <div class="title-actions">
+          <ui-button
+            test-id="refresh-vmkernel-adapters-btn"
+            class="refresh-btn"
+            size="md"
+            variant="outline"
+            @click="emits('global-refresh')"
+          >
+            <template #icon> <ui-icon name="reset" width="24" /> </template>
+            {{ localization.common.refresh }}
+          </ui-button>
+          <ui-button
+            v-permission="
+              'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
+            "
+            test-id="add-vmkernel-adapters-btn"
+            class="add-btn"
+            size="md"
+            @click="emits('show-add-networking-modal')"
+          >
+            <template #icon> <ui-icon name="plus" width="24" /> </template>
+            {{ localization.common.addNetworkingWithDots }}
+          </ui-button>
+        </div>
+      </template>
+
+      <template #icon="{ item }">
+        <div class="cell">
+          <div
+            :class="[
+              'cell-icon',
+              {
+                'cell-icon-device': item.col === 'col0',
+              },
+            ]"
+          >
+            <ui-icon
+              v-if="item.col === 'col0'"
+              :name="item.data.icon"
+              width="18"
+              height="18"
+            />
+            <div v-else :class="item.data.icon"></div>
+          </div>
+          <span class="cell-text">
+            {{ item.text }}
+          </span>
+        </div>
+      </template>
+
+      <template #default-actions="{ item }">
+        <span
+          :id="`vmkernel-adapters-item-${item.data.id}-action`"
+          v-permission="'Networks.UpdateSysx Networks.RemoveSysx'"
+          :class="[
+            'action-button',
+            {
+              'action-button-active': selectedActionId === item.data.id,
+            },
+          ]"
+          @click.stop="onToggleActions(item.data.id)"
+        >
+          <ui-icon name="vertical-dotes" width="20" height="20" />
+        </span>
+        <Teleport to="body">
+          <ui-dropdown
+            v-permission="'Networks.UpdateSysx Networks.RemoveSysx'"
+            :test-id="`data-table-vmkernel-adapters-dropdown-${item.data.id}`"
+            :show="selectedActionId === item.data.id"
+            :items="actionItems"
+            :elem-id="`vmkernel-adapters-item-${item.data.id}-action`"
+            width="max-content"
+            @select="(action) => onSelectAction(action, true)"
+            @hide="selectedActionId = -1"
+          />
+        </Teleport>
+      </template>
+
+      <template #skeleton-header>
+        <div class="skeleton-header">
+          <div class="left-skeleton">
+            <ui-skeleton-item width="80" height="20" />
+          </div>
+          <div class="right-skeleton">
+            <ui-skeleton-item width="112" height="36" border-radius="8" />
+            <ui-skeleton-item width="160" height="36" border-radius="8" />
+          </div>
+        </div>
+      </template>
+    </ui-data-table>
+  </div>
+
+  <common-diagram-main-modals-remove-modal
+    v-if="isShowPortRemoveModal"
+    :id="vmKernelToAction?.sysx?.id || ''"
+    :title="localization.common.removeVMkernelAdapter"
+    :show="isShowPortRemoveModal"
+    :is-show-loader="props.isRemoveModalLoading"
+    modal-name="port-remove-modal"
+    view-name="port-remove"
+    :switch-name="vmKernelToAction.switchName"
+    type="port"
+    @remove="onRemove"
+    @hide="onHideRemoveModal"
+  />
+  <common-diagram-main-modals-edit-settings-modal
+    v-if="isShowPortEditSettingsModal"
+    :show="isShowPortEditSettingsModal"
+    :title="portEditInitialData.portName || ''"
+    :initial-data="portEditInitialData"
+    :items="portEditSettingsTabs"
+    :is-dark-mode="props.isDarkMode"
+    :is-edit-modal-loading="props.isEditModalLoading"
+    view-name="port-edit"
+    width="872px"
+    height="558px"
+    @send-edit-data="onSendEditData"
+    @change-edit-fields-data="onChangeEditFieldsData"
+    @hide="onHidePortEditSettingsModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ButtonsGroup } from '~/node_modules/bfg-uikit/components/ui/button/group/lib/models/interfaces'
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type {
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader,
+  UI_I_TableTexts,
+  UI_I_DataTableSkeleton,
+  UI_I_DataTable,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Network,
+  UI_I_ModalsInitialData,
+  UI_I_EditFieldsData,
+  UI_I_ModalTab,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type { I_VmKernelAdapter } from '~/components/common/configure/vmkernelAdapters/tableView/lib/models/interfaces'
+import { constructNetworkTableFunc } from '~/components/common/configure/vmkernelAdapters/tableView/mappers/mappers'
+import {
+  portEditSettingsTabsFunc,
+  portEditInitialDataFunc,
+} from '~/components/common/configure/vmkernelAdapters/tableView/lib/config/settings'
+import {
+  getBodyDataFunc,
+  getHeaderDataFunc,
+  options,
+  skeletonData,
+  getActions,
+  getHeaderActions,
+} from '~/components/common/configure/vmkernelAdapters/tableView/lib/config/vmKernelAdaptersTableConfigNew'
+
+const props = defineProps<{
+  isLoading: boolean
+  networkData: UI_I_Network[]
+  isDarkMode: boolean
+  isRemoveModalLoading: boolean
+  isEditModalLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'remove', id: string, type: string, hideModal: () => void): void
+  (
+    event: 'send-edit-data',
+    type: string,
+    data: UI_I_EditFieldsData,
+    hideModal: () => void,
+    name?: string
+  ): void
+  (event: 'global-refresh'): void
+  (event: 'show-add-networking-modal'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = defineModel<number>()
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  if (typeof value[0].row !== 'number') return
+  selectedRow.value = value[0].row
+}
+
+const texts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+
+const skeletonDataLocal = ref<UI_I_DataTableSkeleton>(skeletonData)
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'vmkernel-adapters-table',
+  selectedRows: [],
+  isAllSelected: false,
+  header: headItems.value,
+  body: bodyItems.value,
+}))
+
+const headItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
+)
+const bodyItems = ref<UI_I_DataTableBody[]>([])
+
+const networkTableData = computed<I_VmKernelAdapter[]>(() => {
+  return constructNetworkTableFunc(props.networkData, localization.value)
+})
+
+const selectedSysx = ref<string>('')
+
+watch(
+  networkTableData,
+  (newValue: I_VmKernelAdapter[]) => {
+    if (!newValue?.length) {
+      selectedSysx.value = ''
+      selectedRow.value = undefined
+      bodyItems.value = []
+    } else {
+      if (
+        !newValue?.find?.(
+          (network: I_VmKernelAdapter) => network.device === selectedSysx.value
+        )
+      ) {
+        selectedSysx.value = ''
+        selectedRow.value = undefined
+      }
+      bodyItems.value = getBodyDataFunc(
+        newValue,
+        selectedRow.value,
+        localization.value
+      )
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const hasSelectedAdapter = computed<boolean>(
+  () => typeof selectedRow.value === 'number'
+)
+
+const actions = computed<UI_I_ButtonsGroup[]>(() =>
+  getHeaderActions(localization.value, hasSelectedAdapter.value)
+)
+
+const selectedActionId = ref<number>(-1)
+
+const onToggleActions = (id: number): void => {
+  if (selectedActionId.value === id) {
+    selectedActionId.value = ''
+    return
+  }
+  selectedActionId.value = id
+}
+
+const onSelectAction = (action: string, isDropdownAction?: boolean): void => {
+  selectedSysx.value = isDropdownAction
+    ? selectedActionId.value
+    : data.value.body?.find?.((row) => row.row === selectedRow.value)?.data?.[0]
+        .data?.id
+
+  action === 'edit' ? onShowPortEditSettingsModal() : onShowRemoveModal()
+}
+
+const actionItems = computed<UI_I_Dropdown[]>(() =>
+  getActions(localization.value, 'data-table-vmkernel-adapters-action-item')
+)
+
+const portEditInitialData = ref<UI_I_ModalsInitialData>({})
+
+const vmKernelToAction = computed<UI_I_Network | undefined>(() =>
+  props.networkData.find(
+    (network: UI_I_Network) => network.sysx?.id === selectedSysx.value
+  )
+)
+
+const onRemove = (id: string, type: string): void => {
+  emits('remove', id, type, onHideRemoveModal)
+}
+
+const isShowPortRemoveModal = ref<boolean>(false)
+
+const onShowRemoveModal = (): void => {
+  isShowPortRemoveModal.value = true
+}
+const onHideRemoveModal = (): void => {
+  isShowPortRemoveModal.value = false
+}
+
+const isShowPortEditSettingsModal = ref<boolean>(false)
+
+const onShowPortEditSettingsModal = (): void => {
+  if (vmKernelToAction.value) {
+    portEditInitialData.value = portEditInitialDataFunc(vmKernelToAction.value)
+    isShowPortEditSettingsModal.value = true
+  }
+}
+const onHidePortEditSettingsModal = (): void => {
+  isShowPortEditSettingsModal.value = false
+}
+
+const editFieldsData = ref<UI_I_EditFieldsData>({})
+
+const onSendEditData = (
+  type: string,
+  hideModal: () => void,
+  name?: string
+): void => {
+  emits('send-edit-data', type, editFieldsData.value, hideModal, name)
+}
+
+const onChangeEditFieldsData = (
+  newEditFieldsData: UI_I_EditFieldsData
+): void => {
+  editFieldsData.value = newEditFieldsData
+}
+
+const portEditSettingsTabs = computed<UI_I_ModalTab[]>(() =>
+  portEditSettingsTabsFunc(localization.value)
+)
+</script>
+
+<style scoped lang="scss">
+.vmkernel-adapters-table {
+  height: calc(100% - 52px);
+}
+
+:deep(.table-container) {
+  height: 100%;
+  grid-template-rows: min-content auto min-content;
+
+  .title-container {
+    margin-right: 16px;
+  }
+
+  &.full-width-search {
+    grid-template-rows: min-content min-content auto min-content;
+  }
+}
+
+.actions {
+  justify-content: flex-end;
+  padding-right: 4px;
+
+  .action-icon {
+    height: 20px;
+    width: 20px;
+    color: var(--actions-icon-color);
+
+    &:hover {
+      color: var(--actions-icon-icative-color);
+    }
+  }
+}
+
+.title-actions {
+  display: flex;
+  column-gap: 16px;
+
+  :deep(.ui-btn) {
+    white-space: nowrap;
+  }
+}
+
+:deep(.ui-button-group) {
+  padding-left: 0;
+}
+
+:deep(.table-fixed-height) {
+  all: unset;
+  .table-fixed-full-height {
+    all: unset;
+  }
+}
+
+:deep(.data-table-skeleton) {
+  height: 100%;
+  grid-template-rows: min-content auto min-content;
+  &.full-width-search {
+    grid-template-rows: min-content min-content auto min-content;
+  }
+
+  .body.with-actions {
+    height: calc(100% - 92px);
+  }
+}
+
+.skeleton-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .right-skeleton {
+    display: flex;
+    column-gap: 16px;
+  }
+}
+
+.cell {
+  display: flex;
+  column-gap: 4px;
+
+  &-icon {
+    height: 18px;
+
+    &.cell-icon-device {
+      color: var(--checkbox-stroke-checked);
+    }
+  }
+  &-text {
+    line-height: 18px;
+  }
+}
+
+:deep(.status-container) {
+  span:not(.icon-container) {
+    white-space: nowrap;
+  }
+}
+
+:deep(.ui-button-group-dots-icon) {
+  padding-left: 0;
+}
+
+.action-button {
+  width: 20px;
+  height: 20px;
+  color: var(--close-icon);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--btn-table-manager-color-hover);
+  }
+
+  &.action-button-active {
+    color: var(--btn-primary-fill-bg-color);
+  }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.6.104",
+  "version": "1.6.105",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",