bfg-common 1.4.838 → 1.4.839

package/components/common/monitor/advanced/table/Table.vue

@@ -1,93 +1,31 @@
-<template>
-  <div class="chart-legend">
-    <span class="title">{{
-      localization.inventoryMonitor.performanceChartLegend
-    }}</span>
-    <client-only>
-      <atoms-table-data-grid
-        v-model:selected-row="selectedRow"
-        v-model:column-keys="columnKeys"
-        v-model:page-size="pageSize"
-        v-model:page="page"
-        type="checkbox"
-        class="data-table"
-        test-id="advances-table"
-        :head-items="headAInfo"
-        :body-items="dataBody"
-        :total-items="dataBody.length"
-        :total-pages="1"
-        hide-page-size
-      >
-        <template #col1="{ item }">
-          <div
-            class="datagrid-column-color-block"
-            :style="[{ backgroundColor: item.data.color }]"
-          ></div>
-        </template>
-      </atoms-table-data-grid>
-    </client-only>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_HeadItem,
-  UI_I_BodyItem,
-  UI_I_ColumnKey,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import * as table from '~/components/common/monitor/advanced/table/lib/config/performanceDatatable'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  data: UI_I_PerformanceItem[]
-}>()
-const emits = defineEmits<{
-  (event: 'select', str: number[]): void
-}>()
-
-const selectedRow = ref<number[]>([])
-const pageSize = ref<number>(100)
-const page = ref<number>(1)
-const headAInfo = computed<UI_I_HeadItem[]>(() =>
-  table.headItems(localization.value)
-)
-const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
-watch([localization], () => {
-  columnKeys.value = table.columnKeys(localization.value)
-})
-const dataBody = ref<UI_I_BodyItem[][]>([])
-
-watch(
-  () => props.data,
-  (newValue) => {
-    if (!newValue) return
-
-    dataBody.value = table.bodyItems(newValue)
-  },
-  { immediate: true }
-)
-watch(
-  selectedRow,
-  (newValue) => {
-    emits('select', newValue)
-  },
-  { deep: true }
-)
-</script>
-
-<style scoped lang="scss">
-.chart-legend {
-  .title {
-    font-weight: 700;
-    height: 20px;
-  }
-
-  .datagrid-column-color-block {
-    width: 16px;
-    height: 16px;
-  }
-}
-</style>
+<template>
+  <common-monitor-advanced-table-table-new
+    v-if="isNewView"
+    :loading="props.loading"
+    :items="props.data"
+    @select="emits('select', $event)"
+  />
+  <common-monitor-advanced-table-table-old
+    v-else
+    :data="props.data"
+    @select="emits('select', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+
+const props = defineProps<{
+  loading: boolean
+  data: UI_I_PerformanceItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'select', str: number[]): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/monitor/advanced/table/tableNew/TableNew.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="advanced-main-table">
+    <ui-data-table
+      test-id="advanced-table"
+      :data="data"
+      :options="options"
+      :loading="props.loading"
+      :texts="tableTexts"
+      @select-row="onSelectRow"
+    >
+      <template #icon="{ item }">
+        <div
+          class="color-circle"
+          :style="{ backgroundColor: item.data.color }"
+        ></div>
+      </template>
+      <template #zone="{ item }">
+        <span class="zone-item-block">
+          <span class="icon vsphere-icon-vcenter"></span>
+          <span>{{ item.text }}</span>
+        </span>
+      </template>
+    </ui-data-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableOptions,
+  UI_I_DataTableBody,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import {
+  bodyOptions,
+  headOptions,
+} from '~/components/common/monitor/advanced/table/tableNew/lib/config/options'
+import { tableTextsFunc } from '~/lib/config/uiTable'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  loading: boolean
+  items: UI_I_PerformanceItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'select', str: number[]): void
+}>()
+
+const data = computed<UI_I_DataTable>(() =>
+  bodyOptions(localization.value, props.items)
+)
+
+const options = computed<UI_I_DataTableOptions>(() => headOptions())
+
+const onSelectRow = (data: UI_I_DataTableBody[]): void => {
+  emits(
+    'select',
+    data.map((item) => item.row)
+  )
+}
+
+const tableTexts = computed<UI_I_TableTexts>(() =>
+  tableTextsFunc(localization.value)
+)
+</script>
+
+<style scoped lang="scss">
+.advanced-main-table {
+  margin: 12px 6px 0 6px;
+
+  .color-circle {
+    width: 18px;
+    height: 18px;
+    border-radius: 32px;
+  }
+  .zone-item-block {
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
+  }
+}
+</style>

package/components/common/monitor/advanced/table/tableNew/lib/config/options.ts

@@ -0,0 +1,139 @@
+import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_DataTableOptions } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import { constructUsersAndGroupsTableItems } from '~/components/common/monitor/advanced/table/tableNew/lib/utils/constructBody'
+
+export const bodyOptions = (
+  localization: UI_I_Localization,
+  items: UI_I_PerformanceItem[]
+): UI_I_DataTable => {
+  const currentBody = constructUsersAndGroupsTableItems(items)
+
+  return {
+    id: 'find-user-or-group-modal-table-config',
+    title: `${localization.inventoryMonitor.performanceChartLegend} (${items.length})`,
+    selectedRows: [],
+    isAllSelected: false,
+    header: [
+      {
+        col: 'col0',
+        colName: 'key',
+        text: localization.common.key,
+        width: '150px',
+        isSortable: false,
+        sort: 'asc',
+        show: true,
+        filter: false,
+      },
+      {
+        col: 'col1',
+        colName: 'object',
+        text: localization.common.object,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col2',
+        colName: 'measurement',
+        text: localization.common.measurement,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col3',
+        colName: 'rollup',
+        text: localization.common.rollup,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col4',
+        colName: 'units',
+        text: localization.common.units,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col5',
+        colName: 'latest',
+        text: localization.common.latest,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col6',
+        colName: 'maximum',
+        text: localization.common.maximum,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col7',
+        colName: 'minimum',
+        text: localization.common.minimum,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col8',
+        colName: 'average',
+        text: localization.common.average,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col9',
+        colName: 'default-actions',
+        text: '',
+        show: true,
+      },
+    ],
+
+    body: currentBody,
+  }
+}
+
+export const headOptions = (): UI_I_DataTableOptions => {
+  return {
+    selectType: 'checkbox',
+    perPageOptions: [
+      { text: '20', value: 20, default: true },
+      { text: '50', value: 50 },
+      { text: '100', value: 100 },
+    ],
+    inBlock: true,
+    isSelectable: true,
+    showPagination: false,
+    showPageInfo: false,
+    isSortable: true,
+    server: false,
+    isResizable: true,
+    showSearch: false,
+    showColumnManager: true,
+  }
+}

package/components/common/monitor/advanced/table/tableNew/lib/utils/constructBody.ts

@@ -0,0 +1,27 @@
+import type { UI_I_DataTableBody } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+
+export const constructUsersAndGroupsTableItems = (
+  items: UI_I_PerformanceItem[]
+): UI_I_DataTableBody[] => {
+  const result: UI_I_DataTableBody[] = []
+
+  items.forEach((item: UI_I_PerformanceItem, key: number) => {
+    result.push({
+      row: key,
+      data: [
+        { col: 'col0', key: 'icon', text: '', data: { color: item.key } },
+        { col: 'col1', key: 'zone', text: item.relatedDeviceName },
+        { col: 'col2', text: item.measurement },
+        { col: 'col3', text: item.rollupType },
+        { col: 'col4', text: item.units },
+        { col: 'col5', text: String(item.latest) },
+        { col: 'col6', text: String(item.maximum) },
+        { col: 'col7', text: String(item.minimum) },
+        { col: 'col8', text: String(item.average) },
+      ],
+    })
+  })
+
+  return result
+}

package/components/common/monitor/advanced/table/tableOld/TableOld.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="chart-legend">
+    <span class="title">{{
+      localization.inventoryMonitor.performanceChartLegend
+    }}</span>
+    <client-only>
+      <atoms-table-data-grid
+        v-model:selected-row="selectedRow"
+        v-model:column-keys="columnKeys"
+        v-model:page-size="pageSize"
+        v-model:page="page"
+        type="checkbox"
+        class="data-table"
+        test-id="advances-table"
+        :head-items="headAInfo"
+        :body-items="dataBody"
+        :total-items="dataBody.length"
+        :total-pages="1"
+        hide-page-size
+      >
+        <template #col1="{ item }">
+          <div
+            class="datagrid-column-color-block"
+            :style="[{ backgroundColor: item.data.color }]"
+          ></div>
+        </template>
+      </atoms-table-data-grid>
+    </client-only>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import * as table from '~/components/common/monitor/advanced/table/tableOld/lib/config/performanceDatatable'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  data: UI_I_PerformanceItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'select', str: number[]): void
+}>()
+
+const selectedRow = ref<number[]>([])
+const pageSize = ref<number>(100)
+const page = ref<number>(1)
+const headAInfo = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
+watch([localization], () => {
+  columnKeys.value = table.columnKeys(localization.value)
+})
+const dataBody = ref<UI_I_BodyItem[][]>([])
+
+watch(
+  () => props.data,
+  (newValue) => {
+    if (!newValue) return
+
+    dataBody.value = table.bodyItems(newValue)
+  },
+  { immediate: true }
+)
+watch(
+  selectedRow,
+  (newValue) => {
+    emits('select', newValue)
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.chart-legend {
+  .title {
+    font-weight: 700;
+    height: 20px;
+  }
+
+  .datagrid-column-color-block {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>