bfg-common 1.6.86 → 1.6.87

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

@@ -1,427 +0,0 @@
-<template>
-  <div class="data-table-view">
-    <atoms-table-data-grid
-      v-model:selected-row="selectedRow"
-      :head-items="headItems"
-      :body-items="bodyItems"
-      :total-items="bodyItems.length"
-      :total-pages="1"
-      :page-size="100"
-      :page="1"
-      class="data-table h-full"
-      type="any"
-      test-id="vm-kernel-adapters-table"
-      with-info
-      server-off
-      hide-page-size
-      hide-pagination
-      @filtering="onFiltering"
-    >
-      <template #type="{ item }">
-        <div class="data-table__action-icon">
-          <atoms-popover
-            :test-id="`${item[1].text}-${item[2].text}`"
-            @click="onShowTooltipToRemove(item)"
-          >
-            <template #elem>
-              <atoms-the-icon name="ellipsis-vertical" />
-            </template>
-            <template #content>
-              <div v-if="showTooltip && item[0].id === selectedGroupMember.id">
-                <div class="action-container">
-                  <div class="action-wrap relative">
-                    <button
-                      :data-id="`${item[1].text}-${item[2].text}-edit-button`"
-                      class="action"
-                      @click="onShowPortEditSettingsModal"
-                    >
-                      {{ localization.common.edit }}
-                    </button>
-                    <button
-                      :data-id="`${item[1].text}-${item[2].text}-remove-button`"
-                      class="action"
-                      @click="onShowRemoveModal"
-                    >
-                      {{ localization.common.remove }}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </atoms-popover>
-        </div>
-      </template>
-
-      <template #icon="{ item }">
-        <span :class="['icon', item.data.iconClassName]" />
-        <span class="text-ellipsis">
-          {{ item.text }}
-        </span>
-      </template>
-
-      <template #hiddenInfo="{ item }">
-        <h3 class="hiddenInfo__head">
-          {{ localization.common.vmKernelNetworkAdapter }}: {{ item[1].text }}
-        </h3>
-        <div class="hiddenInfo__body">
-          <common-diagram-main-modals-view-settings-info
-            :selected-tab="1"
-            :modal-tabs="tabs"
-            :full-mode="false"
-            :view-settings-fields="viewSettingsFields"
-            height="10px"
-            show
-            with-collapse
-          />
-        </div>
-      </template>
-    </atoms-table-data-grid>
-  </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"
-    width="872px"
-    height="558px"
-    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_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_Network,
-  UI_I_ModalsInitialData,
-  UI_I_EditFieldsData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type {
-  UI_I_BodyItem,
-  UI_I_HeadItem,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { I_VmKernelAdapter } from '~/components/common/configure/vmkernelAdapters/tableView/lib/models/interfaces'
-import * as vmKernelAdaptersTable from '~/components/common/configure/vmkernelAdapters/tableView/lib/config/vmKernelAdaptersTableConfig'
-import { constructNetworkTableFunc } from '~/components/common/configure/vmkernelAdapters/tableView/mappers/mappers'
-import {
-  portViewSettingsModalTabsFunc,
-  portViewSettingsFunc,
-  portEditSettingsTabsFunc,
-} from '~/components/common/configure/vmkernelAdapters/tableView/lib/config/settings'
-
-const props = withDefaults(
-  defineProps<{
-    networkData: UI_I_Network[]
-    isDarkMode: boolean
-    isRemoveModalLoading?: boolean
-    isEditModalLoading?: boolean
-  }>(),
-  {
-    isRemoveModalLoading: false,
-    isEditModalLoading: false,
-  }
-)
-
-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
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedRow = ref<number>()
-const actionOnRow = ref<string>('')
-
-const portEditInitialData = ref<UI_I_ModalsInitialData>({})
-
-const networkTableData = computed<I_VmKernelAdapter[]>(() => {
-  return constructNetworkTableFunc(props.networkData, localization.value)
-})
-
-const selectedGroupMember = ref<UI_I_BodyItem | null>(null)
-const showTooltip = ref<boolean>(false)
-const onShowTooltipToRemove = (group: UI_I_BodyItem[]): void => {
-  selectedGroupMember.value = group[0]
-  showTooltip.value = true
-  actionOnRow.value = group[1].text as string
-}
-
-const vmKernelToAction = computed<UI_I_Network | undefined>(() =>
-  props.networkData.find(
-    (network: UI_I_Network) => network.sysx?.id === actionOnRow.value
-  )
-)
-
-const onRemove = (id: string, type: string): void => {
-  emits('remove', id, type, onHideRemoveModal)
-}
-
-const tabs = computed(() => portViewSettingsModalTabsFunc(localization.value))
-const viewSettingsFields = computed(
-  () =>
-    typeof selectedRow.value === 'number' &&
-    portViewSettingsFunc(
-      localization.value,
-      props.networkData[selectedRow.value]
-    )
-)
-
-const hideActionsPopover = (): void => {
-  showTooltip.value = false
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    window.addEventListener('click', hideActionsPopover)
-  })
-})
-onUnmounted(() => {
-  window.removeEventListener('click', hideActionsPopover)
-})
-
-const onFiltering = (e: [string, string][]): void => {
-  console.log('F I L T E R I N G . . .', e)
-}
-
-const headItems = computed<UI_I_HeadItem[]>(() =>
-  vmKernelAdaptersTable.headItems(localization.value)
-)
-
-const bodyItems = ref<UI_I_BodyItem[][]>([])
-watch(
-  () => networkTableData.value,
-  (newValue) => {
-    if (!newValue?.length) {
-      bodyItems.value = []
-      return
-    }
-    bodyItems.value = vmKernelAdaptersTable.bodyItems(newValue)
-  },
-  { deep: true, immediate: true }
-)
-
-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 = {
-      portName: vmKernelToAction.value?.sysx?.id,
-      networkLabel: vmKernelToAction.value?.title,
-      vlanId: vmKernelToAction.value?.vlanId,
-      tcpIp: vmKernelToAction.value?.sysx?.tcp_stack,
-      mtu: vmKernelToAction.value?.sysx?.mtu,
-      services: {
-        vMotion: vmKernelToAction.value?.sysx?.services.VMotion,
-        provisioning: vmKernelToAction.value?.sysx?.services.Provisioning,
-        faultToleranceLogging:
-          vmKernelToAction.value?.sysx?.services.FaultToleranceLogging,
-        management: vmKernelToAction.value?.sysx?.services.Management,
-        replication: vmKernelToAction.value?.sysx?.services.VSphereReplication,
-        replicationNFC:
-          vmKernelToAction.value?.sysx?.services.VSphereReplicationNFC,
-        vSAN: vmKernelToAction.value?.sysx?.services.VSAN,
-        backupNFC: vmKernelToAction.value?.sysx?.services.VSphereBackupNFC,
-        nVMeOverTCP: vmKernelToAction.value?.sysx?.services.NVMeOverTCP,
-        nVMeOverRDMA: vmKernelToAction.value?.sysx?.services.NVMeOverRDMA,
-      },
-      tcpConfig: {
-        ipv4Settings: vmKernelToAction.value?.sysx?.ipv4_settings.auto
-          ? '0'
-          : '1',
-        ipv4Address: vmKernelToAction.value?.sysx?.ipv4_settings.ipv4,
-        subnetMask: vmKernelToAction.value?.sysx?.ipv4_settings.mask,
-        defaultGateway: {
-          checked: vmKernelToAction.value?.sysx?.ipv4_settings.gateway_override,
-          value: vmKernelToAction.value?.sysx?.ipv4_settings.gateway,
-        },
-      },
-    }
-    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<any>(() =>
-  portEditSettingsTabsFunc(localization.value)
-)
-</script>
-
-<style scoped lang="scss">
-.data-table {
-  &__action-icon {
-    width: 16px;
-    height: 16px;
-    padding-top: 3px;
-    cursor: pointer;
-    position: relative;
-    fill: var(--ellipsis-vertical-icon-color);
-  }
-}
-:deep(.datagrid) {
-  margin-top: 0;
-}
-.data-table-view {
-  height: 100%;
-  overflow: hidden;
-
-  :deep(.data-table) {
-    height: inherit;
-    .datagrid-outer-wrapper {
-      height: inherit;
-    }
-    .active .double-arrow {
-      margin: 2px 0;
-      height: 0.6rem;
-      transform: rotate(90deg);
-      width: 0.6rem;
-      fill: var(--modal-bg-color);
-    }
-    .double-arrow {
-      margin: 2px 0;
-      height: 0.6rem;
-      width: 0.6rem;
-      transform: rotate(90deg);
-      fill: var(--global-font-color);
-
-      &.arrow-selected {
-        fill: white;
-      }
-    }
-  }
-}
-.hiddenInfo {
-  &__head {
-    font-size: 0.8rem;
-    color: var(--global-font-color2) !important;
-    line-height: 1.6rem;
-  }
-  &__body {
-    div {
-      color: var(--global-font-color2) !important;
-      line-height: 1.2rem;
-      font-size: 13px;
-      font-weight: 400;
-    }
-  }
-}
-.signpost {
-  :deep(h3) {
-    font-size: 1rem;
-    color: var(--global-font-color);
-    line-height: 1.7rem;
-  }
-  div {
-    line-height: 1.2rem;
-    font-size: 13px;
-    font-weight: 400;
-  }
-}
-.icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 10px;
-}
-.vertical-divider {
-  width: 1px;
-  height: 22px;
-  background: #bbb;
-  margin: 2px 2px 0 -5px;
-}
-
-.action-container {
-  position: absolute;
-  top: -33px;
-  left: 5px;
-  background: var(--block-view-bg-color2);
-  border: 1px solid var(--block-border-color);
-  padding: 5px 6px;
-  border-radius: 3px;
-}
-.action-wrap {
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    background: var(--block-view-bg-color2);
-    transform: rotate(45deg);
-    left: -11px;
-    bottom: calc(50% - 4px);
-    border-left: 0.5px solid var(--block-border-color);
-    border-bottom: 0.5px solid var(--block-border-color);
-    z-index: var(--z-dropdown);
-  }
-}
-.action {
-  border: none;
-  padding: 1px 20px;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  background: var(--block-view-bg-color2);
-  color: var(--global-font-color3);
-
-  &:hover {
-    background: var(--vertical-nav-hover-bg-color);
-  }
-}
-
-:deep(.table-fixed-height) {
-  all: unset;
-  .table-fixed-full-height {
-    all: unset;
-  }
-}
-</style>