bfg-common 1.6.113 → 1.6.114

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

@@ -1,345 +1,353 @@
-<template>
-  <div class="physical-adapters-table">
-    <ui-data-table
-      :data="data"
-      :options="options"
-      :total-items="props.adapters.total_items"
-      :total-pages="props.adapters.total_pages"
-      :texts="texts"
-      :skeleton="skeletonDataLocal"
-      :actions="actions"
-      :loading="props.isLoading"
-      test-id="physical-adapters-table"
-      class="physical-adapters-tables"
-      server-off
-      @action="onSelectAction"
-      @select-row="onSelectRow"
-    >
-      <template #insteadOfTitleActions>
-        <div class="title-actions">
-          <ui-button
-            test-id="refresh-physical-adapters-btn"
-            class="refresh-btn"
-            size="md"
-            variant="outline"
-            @click="emits('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-physical-adapters-btn"
-            class="add-btn"
-            size="md"
-            @click="emits('add')"
-          >
-            <template #icon> <ui-icon name="plus" width="24" /> </template>
-            {{ localization.common.addNetworkingWithDots }}
-          </ui-button>
-        </div>
-      </template>
-
-      <template #icon="{ item }">
-        <div v-if="item.data.icon !== 'pill'" 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"
-            />
-            <span v-else class="network-lib-ui-icon-vswitch"></span>
-          </div>
-          <span class="cell-text">
-            {{ item.text }}
-          </span>
-        </div>
-        <div v-else>
-          <ui-status-pill
-            :type="item.data.value ? 'success' : 'error'"
-            :text="item.text"
-            size="md"
-          />
-        </div>
-      </template>
-
-      <template #default-actions="{ item }">
-        <div class="actions flex w-full">
-          <ui-tooltip
-            :id="`host-item-${item.data.id}-action`"
-            :test-id="`host-item-${item.data.id}-action-tooltip`"
-            size="md"
-            position="bottom"
-            position-by-tooltip="center"
-            show-type="variant-1"
-            timing="660"
-          >
-            <template #target>
-              <ui-button
-                :id="`host-item-${item.data.id}-action`"
-                :test-id="`host-item-${item.data.id}-action`"
-                variant="text"
-                is-without-height
-                is-without-sizes
-                @click.stop="onShowEditModal(item.data.id)"
-              >
-                <span class="action-icon">
-                  <ui-icon name="edit" width="20" height="20" />
-                </span>
-              </ui-button>
-            </template>
-            <template #content>
-              <div class="tooltip-text">
-                {{ localization.common.edit }}
-              </div>
-            </template>
-          </ui-tooltip>
-        </div>
-      </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>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_DataTable,
-  UI_I_DataTableBody,
-  UI_I_DataTableHeader,
-  UI_I_DataTableSkeleton,
-  UI_I_TableTexts,
-} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_ButtonsGroup } from '~/node_modules/bfg-uikit/components/ui/button/group/lib/models/interfaces'
-import type {
-  UI_I_Localization,
-  UI_I_ItemsWithTotalCounts,
-} from '~/lib/models/interfaces'
-import type { UI_I_SwitchAdapterItem } 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 { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
-import type { UI_I_PhysicalAdapter } from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
-import {
-  getBodyDataFunc,
-  getHeaderDataFunc,
-  options,
-  skeletonData,
-} from '~/components/common/configure/physicalAdapters/tableView/lib/config/physicalAdaptersTableConfigNew'
-import { constructPhysicalAdaptersTableFunc } from '~/components/common/configure/physicalAdapters/tableView/mappers/mappers'
-
-const props = defineProps<{
-  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-  isLoading: boolean
-  hasSelectedAdapter: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'add'): void
-  (event: 'refresh'): void
-  (event: 'edit', id?: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const actions = computed<UI_I_ButtonsGroup>(() => [
-  {
-    text: localization.value.common.edit,
-    value: 'edit',
-    testId: 'edit-physical-adapted',
-    id: 'edit-physical-adapted',
-    iconName: 'edit',
-    disabled: !props.hasSelectedAdapter,
-    development: true,
-  },
-])
-
-const onSelectAction = (action: string): void => {
-  emits(action)
-}
-
-const selectedRow = defineModel<UI_T_SelectedRow>()
-
-const onSelectRow = (value: UI_I_DataTableBody[]): void => {
-  if (typeof value[0].row !== 'number') return
-  selectedRow.value = value[0].row
-}
-
-const networkTableData = computed<UI_I_PhysicalAdapter[]>(() =>
-  constructPhysicalAdaptersTableFunc(props.adapters.items, localization.value)
-)
-
-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 data = computed<UI_I_DataTable>(() => ({
-  id: 'physical-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[]>([])
-
-watch(
-  () => networkTableData.value,
-  (newValue: UI_I_PhysicalAdapter[]) => {
-    console.log(!newValue?.length)
-    if (!newValue?.length) {
-      bodyItems.value = []
-    } else {
-      bodyItems.value = getBodyDataFunc(newValue, selectedRow.value)
-    }
-  },
-  { deep: true }
-)
-
-const skeletonDataLocal = ref<UI_I_DataTableSkeleton>(skeletonData)
-
-const actionsIsShow = ref<string>()
-
-const onShowEditModal = (id: string): void => {
-  emits('edit', id)
-}
-</script>
-
-<style scoped lang="scss">
-.physical-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(--text-green);
-    }
-  }
-  &-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="physical-adapters-table">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :total-items="props.adapters.total_items"
+      :total-pages="props.adapters.total_pages"
+      :texts="texts"
+      :skeleton="skeletonDataLocal"
+      :actions="actions"
+      :loading="props.isLoading"
+      test-id="physical-adapters-table"
+      class="physical-adapters-tables"
+      server-off
+      @action="onSelectAction"
+      @select-row="onSelectRow"
+    >
+      <template #insteadOfTitleActions>
+        <div class="title-actions">
+          <ui-button
+            test-id="refresh-physical-adapters-btn"
+            class="refresh-btn"
+            size="md"
+            variant="outline"
+            @click="emits('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-physical-adapters-btn"
+            class="add-btn"
+            size="md"
+            @click="emits('add')"
+          >
+            <template #icon> <ui-icon name="plus" width="24" /> </template>
+            {{ localization.common.addNetworkingWithDots }}
+          </ui-button>
+        </div>
+      </template>
+
+      <template #icon="{ item }">
+        <div v-if="item.data.icon !== 'pill'" 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"
+            />
+            <span v-else class="network-lib-ui-icon-vswitch"></span>
+          </div>
+          <span class="cell-text">
+            {{ item.text }}
+          </span>
+        </div>
+        <div v-else>
+          <ui-status-pill
+            :type="item.data.value ? 'success' : 'error'"
+            :text="item.text"
+            size="md"
+          />
+        </div>
+      </template>
+
+      <template #default-actions="{ item }">
+        <!-- TODO Удалить
+                <div title="in-development" style="cursor: not-allowed"> и v-development="true"
+                когда будет апи для редактирования-->
+        <div title="in-development" style="cursor: not-allowed">
+          <div v-development="true" class="actions flex w-full">
+            <ui-tooltip
+              :id="`host-item-${item.data.id}-action`"
+              :test-id="`host-item-${item.data.id}-action-tooltip`"
+              size="md"
+              position="bottom"
+              position-by-tooltip="center"
+              show-type="variant-1"
+              timing="660"
+              style="pointer-event: none"
+            >
+              <template #target>
+                <ui-button
+                  :id="`host-item-${item.data.id}-action`"
+                  :test-id="`host-item-${item.data.id}-action`"
+                  variant="text"
+                  is-without-height
+                  is-without-sizes
+                  @click.stop="onShowEditModal(item.data.id)"
+                >
+                  <span class="action-icon">
+                    <ui-icon name="edit" width="20" height="20" />
+                  </span>
+                </ui-button>
+              </template>
+              <template #content>
+                <div class="tooltip-text">
+                  {{ localization.common.edit }}
+                </div>
+              </template>
+            </ui-tooltip>
+          </div>
+        </div>
+      </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>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader,
+  UI_I_DataTableSkeleton,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_ButtonsGroup } from '~/node_modules/bfg-uikit/components/ui/button/group/lib/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type { UI_I_SwitchAdapterItem } 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 { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type { UI_I_PhysicalAdapter } from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
+import {
+  getBodyDataFunc,
+  getHeaderDataFunc,
+  options,
+  skeletonData,
+} from '~/components/common/configure/physicalAdapters/tableView/lib/config/physicalAdaptersTableConfigNew'
+import { constructPhysicalAdaptersTableFunc } from '~/components/common/configure/physicalAdapters/tableView/mappers/mappers'
+
+const props = defineProps<{
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  isLoading: boolean
+  hasSelectedAdapter: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'add'): void
+  (event: 'refresh'): void
+  (event: 'edit', id?: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const actions = computed<UI_I_ButtonsGroup>(() => [
+  {
+    text: localization.value.common.edit,
+    value: 'edit',
+    testId: 'edit-physical-adapted',
+    id: 'edit-physical-adapted',
+    iconName: 'edit',
+    disabled: !props.hasSelectedAdapter,
+    development: true,
+  },
+])
+
+const onSelectAction = (action: string): void => {
+  emits(action)
+}
+
+const selectedRow = defineModel<UI_T_SelectedRow>()
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  if (typeof value[0].row !== 'number') return
+  selectedRow.value = value[0].row
+}
+
+const networkTableData = computed<UI_I_PhysicalAdapter[]>(() =>
+  constructPhysicalAdaptersTableFunc(props.adapters.items, localization.value)
+)
+
+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 data = computed<UI_I_DataTable>(() => ({
+  id: 'physical-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[]>([])
+
+watch(
+  () => networkTableData.value,
+  (newValue: UI_I_PhysicalAdapter[]) => {
+    console.log(!newValue?.length)
+    if (!newValue?.length) {
+      bodyItems.value = []
+    } else {
+      bodyItems.value = getBodyDataFunc(newValue, selectedRow.value)
+    }
+  },
+  { deep: true }
+)
+
+const skeletonDataLocal = ref<UI_I_DataTableSkeleton>(skeletonData)
+
+const actionsIsShow = ref<string>()
+
+const onShowEditModal = (id: string): void => {
+  emits('edit', id)
+}
+</script>
+
+<style scoped lang="scss">
+.physical-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;
+  // TODO Удалить когда будет апи для редактирования
+  pointer-events: none;
+
+  .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(--text-green);
+    }
+  }
+  &-text {
+    line-height: 18px;
+  }
+}
+
+:deep(.status-container) {
+  span:not(.icon-container) {
+    white-space: nowrap;
+  }
+}
+
+:deep(.ui-button-group-dots-icon) {
+  padding-left: 0;
+}
+</style>