bfg-common 1.4.853 → 1.4.855

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/Table.vue

@@ -1,23 +1,37 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-counters-table-table-new
-    v-if="isNewView"
-    v-model:selected-counters="selectedCounters"
-    :counters="counters"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-counters-table-table-old
-    v-else
-    v-model:selected-counters="selectedCounters"
-    v-model:pagination="pagination"
-    :counters="counters"
-    :total-items="totalItems"
-    :total-pages="totalPages"
-    @change-row="onChangeRow"
-  />
+  <div class="vertical-flex-container chart-option-counters-vertical-split">
+    <span class="chart-options-grid-title">{{
+      localization.inventoryMonitor.selectCountersForThisChart
+    }}</span>
+
+    <atoms-table-data-grid
+      v-model:selected-row="selectedCounters"
+      v-model:column-keys="columnItems"
+      v-model:page-size="pagination.pageSize"
+      v-model:page="pagination.page"
+      type="checkbox"
+      class="data-table"
+      test-id="chart-options-table"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="totalItems"
+      :total-pages="totalPages"
+      hide-footer
+      server-off
+      @change="onChangeRow"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/config/tableConfig'
 import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
 import type {
   UI_T_ChartHost,
@@ -38,10 +52,6 @@ const emits = defineEmits<{
   (event: 'total-items', value: number): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const counters = computed<UI_I_AdvancedCounterItem[]>(() =>
@@ -83,6 +93,24 @@ const pagination = ref<UI_I_Pagination>({
   pageSize: 35,
 })
 
+const columnItems = computed<UI_I_ColumnKey[]>(() =>
+  table.columnKeys(localization.value)
+)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+
+watch(
+  counters,
+  (newValue) => {
+    if (!newValue.length) return
+
+    bodyItems.value = table.bodyItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+
 const onChangeRow = (val: number[]): void => {
   const result: UI_I_AdvancedCounterItem[] = []
 
@@ -102,4 +130,15 @@ watch(
 )
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.chart-option-counters-vertical-split {
+  .chart-options-grid-title {
+    display: block;
+    margin-bottom: -20px;
+  }
+
+  :deep(.datagrid-table-wrapper) {
+    max-height: 176px;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/{tableOld/lib → lib}/config/tableConfig.ts

@@ -8,7 +8,7 @@ import {
   constructColumnKey,
   constructHeadItem,
 } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
-import type { UI_T_AdvancedCountersColumnKey } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableOld/lib/models/types'
+import type { UI_T_AdvancedCountersColumnKey } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/types'
 import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
 
 export const countersTableKey: UI_T_AdvancedCountersColumnKey[] = [