bfg-common 1.6.95 → 1.6.97

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableNew/lib/config/tableData.ts

@@ -0,0 +1,73 @@
+import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { constructTable } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableNew/lib/utils/constructTable'
+import type {
+  UI_I_HardwareHealthCounterItem
+} from "~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/lib/models/interfaces";
+
+export const tableDataFunc = (
+  localization: UI_I_Localization,
+  items: UI_I_HardwareHealthCounterItem[],
+  selectedKeys: number[]
+): UI_I_DataTable => {
+  const currentBody = constructTable(items)
+  const selectedRows: number[] = []
+
+  currentBody.forEach((item) => {
+    if (selectedKeys.includes(item.row)) {
+      selectedRows.push(item.row)
+    }
+  })
+
+  return {
+    id: 'chart-options-table',
+    selectedRows,
+    isAllSelected: false,
+    title: `${localization.common.counters} (${items.length})`,
+    subTitle: '',
+    header: [
+      {
+        col: 'col0',
+        colName: 'name',
+        text: localization.common.name,
+        isSortable: true,
+        sort: 'asc',
+        width: '20%',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col1',
+        colName: 'description',
+        text: localization.common.description,
+        isSortable: true,
+        sort: 'asc',
+        width: '50%',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col2',
+        colName: 'measurement',
+        text: localization.common.measurement,
+        isSortable: true,
+        sort: 'asc',
+        width: '20%',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col3',
+        colName: 'units',
+        text: localization.common.units,
+        isSortable: true,
+        sort: 'asc',
+        width: '10%',
+        show: true,
+        filter: true,
+      },
+    ],
+
+    body: currentBody,
+  }
+}

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableNew/lib/utils/constructTable.ts

@@ -0,0 +1,31 @@
+import type { UI_I_DataTableBody } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {
+  UI_I_HardwareHealthCounterItem
+} from "~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/lib/models/interfaces";
+
+export const constructTable = (
+  items: UI_I_HardwareHealthCounterItem[]
+): UI_I_DataTableBody[] =>
+  items.map((item) => {
+    return {
+      row: item.id,
+      data: [
+        {
+          col: 'col0',
+          text: item.name,
+        },
+        {
+          col: 'col1',
+          text: item.description,
+        },
+        {
+          col: 'col2',
+          text: item.measurement,
+        },
+        {
+          col: 'col3',
+          text: item.units,
+        },
+      ],
+    }
+  })

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableOld/TableOld.vue

@@ -0,0 +1,103 @@
+<template>
+  <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="props.pagination.pageSize"
+      v-model:page="props.pagination.page"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="totalItems"
+      :total-pages="totalPages"
+      type="checkbox"
+      class="data-table"
+      test-id="chart-options-table"
+      hide-footer
+      server-off
+      @change="emits('select-row', $event)"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import * as table from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableOld/lib/config/tableConfig'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type {
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+
+const selectedCounters = defineModel<number[]>('selectedCounters', {
+  required: true,
+})
+
+const props = defineProps<{
+  pagination: UI_I_Pagination
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  chart: UI_T_Chart
+  totalItems: number
+  totalPages: number
+}>()
+const emits = defineEmits<{
+  (events: 'select-row', value: number[]): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+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(
+  () => [
+    props.powerCountersTableData,
+    props.temperatureCountersTableData,
+    props.chart,
+  ],
+  (newValue) => {
+    if (
+      (!newValue[0].length && newValue[2] === 'power') ||
+      (!newValue[1].length && newValue[2] === 'temperature')
+    )
+      return
+
+    let currentBody: UI_I_HardwareHealthSensorsGraph[] = []
+    switch (newValue[2]) {
+      case 'power':
+        currentBody = newValue[0]
+        break
+      case 'temperature':
+        currentBody = newValue[1]
+        break
+    }
+
+    bodyItems.value = table.bodyItems(currentBody)
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<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/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/{lib → tableOld/lib}/config/tableConfig.ts

@@ -5,11 +5,13 @@ import type {
   UI_I_HeadItem,
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
-import type { UI_T_SensorsGraphCountersColumnKey } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/lib/models/types'
 import {
   constructColumnKey,
   constructHeadItem,
 } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+import type {
+  UI_T_SensorsGraphCountersColumnKey
+} from "~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableOld/lib/models/types";
 
 export const countersTableKey: UI_T_SensorsGraphCountersColumnKey[] = [
   'name',

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/timespan/Timespan.vue

@@ -1,28 +1,50 @@
 <template>
-  <div class="timespan-objects-section-direction">
-    <common-chart-options-modal-counters-timespan-form
-      :language="props.language"
-      :selected-chart-type="props.selectedChartType"
-      :selected-timespan-type="props.selectedTimespanType"
-      :units-count="props.unitsCount"
-      :period-type="props.periodType"
-      :selected-custom-time="props.selectedCustomTime"
-      :custom-date-from="props.customDateFrom"
-      :custom-date-to="props.customDateTo"
-      :custom-time-from="props.customTimeFrom"
-      :custom-time-to="props.customTimeTo"
-      :valid-date-end="props.validDateEnd"
-      @update-chart-type="emits('update-chart-type', $event)"
-      @update-custom-time="emits('update-custom-time', $event)"
-      @update-timespan-type="emits('update-timespan-type', $event)"
-      @update-unit-count="emits('update-unit-count', $event)"
-      @update-period-type="emits('update-period-type', $event)"
-      @update-custom-date-from="emits('update-custom-date-from', $event)"
-      @update-custom-date-to="emits('update-custom-date-to', $event)"
-      @update-custom-time-from="emits('update-custom-time-from', $event)"
-      @update-custom-time-to="emits('update-custom-time-to', $event)"
-    />
-  </div>
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-timespan-new
+    v-if="isNewView"
+    :language="props.language"
+    :selected-chart-type="props.selectedChartType"
+    :selected-timespan-type="props.selectedTimespanType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :valid-date-end="props.validDateEnd"
+    @update-chart-type="emits('update-chart-type', $event)"
+    @update-custom-time="emits('update-custom-time', $event)"
+    @update-timespan-type="emits('update-timespan-type', $event)"
+    @update-unit-count="emits('update-unit-count', $event)"
+    @update-period-type="emits('update-period-type', $event)"
+    @update-custom-date-from="emits('update-custom-date-from', $event)"
+    @update-custom-date-to="emits('update-custom-date-to', $event)"
+    @update-custom-time-from="emits('update-custom-time-from', $event)"
+    @update-custom-time-to="emits('update-custom-time-to', $event)"
+  />
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-timespan-old
+    v-else
+    :language="props.language"
+    :selected-chart-type="props.selectedChartType"
+    :selected-timespan-type="props.selectedTimespanType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :valid-date-end="props.validDateEnd"
+    @update-chart-type="emits('update-chart-type', $event)"
+    @update-custom-time="emits('update-custom-time', $event)"
+    @update-timespan-type="emits('update-timespan-type', $event)"
+    @update-unit-count="emits('update-unit-count', $event)"
+    @update-period-type="emits('update-period-type', $event)"
+    @update-custom-date-from="emits('update-custom-date-from', $event)"
+    @update-custom-date-to="emits('update-custom-date-to', $event)"
+    @update-custom-time-from="emits('update-custom-time-from', $event)"
+    @update-custom-time-to="emits('update-custom-time-to', $event)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -51,16 +73,11 @@ const emits = defineEmits<{
   (event: 'update-custom-time-from', value: string): void
   (event: 'update-custom-time-to', value: string): void
 }>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
 <style scoped lang="scss">
-.timespan-objects-section-direction {
-  display: flex;
-  flex-direction: row;
-}
-@media (max-width: 1024px) {
-  .timespan-objects-section-direction {
-    flex-direction: column;
-  }
-}
 </style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/timespan/TimespanNew.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="timespan-container">
+    <common-chart-options-modal-counters-timespan-form
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $event)"
+      @update-timespan-type="emits('update-timespan-type', $event)"
+      @update-unit-count="emits('update-unit-count', $event)"
+      @update-period-type="emits('update-period-type', $event)"
+      @update-custom-date-from="emits('update-custom-date-from', $event)"
+      @update-custom-date-to="emits('update-custom-date-to', $event)"
+      @update-custom-time-from="emits('update-custom-time-from', $event)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+    />
+    <div class="chart-type-container">
+      <p class="title-block">{{ localization.inventoryMonitor.chartType }}</p>
+      <div class="radio-buttons-container">
+        <div class="ui-radio-block">
+          <ui-radio
+            v-model="chartTypeLocal"
+            :label="localization.inventoryMonitor.lineGraph"
+            test-id="line-graph"
+            value="line_graph"
+            size="md"
+          />
+        </div>
+        <div class="ui-radio-block">
+          <ui-radio
+            v-model="chartTypeLocal"
+            :label="localization.inventoryMonitor.stackedGraph"
+            test-id="stacked-graph"
+            value="stacked_graph"
+            size="md"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const chartTypeLocal = ref<string>('line_graph')
+
+watch(
+  chartTypeLocal,
+  (newValue) => {
+    let currentValue = 'spline'
+
+    if (newValue === 'line_graph') currentValue = 'spline'
+    else if (newValue === 'stacked_graph') currentValue = 'area'
+
+    emits('update-chart-type', currentValue)
+  },
+  { immediate: true }
+)
+
+const setCurrentChartType = (): void => {
+  const selected = props.selectedChartType
+  let result = 'line_graph'
+
+  if (selected === 'spline') result = 'line_graph'
+  else if (selected === 'area') result = 'stacked_graph'
+
+  chartTypeLocal.value = result
+}
+
+watch(
+  () => props.selectedChartType,
+  () => {
+    setCurrentChartType()
+  },
+  { immediate: true }
+)
+</script>
+<style scoped lang="scss">
+.timespan-container {
+  display: grid;
+  grid-template-columns: 55% 45%;
+  grid-gap: 12px;
+  margin-top: 12px;
+  padding-right: 14px;
+  padding-bottom: 5px;
+
+  .chart-type-container {
+    padding: 12px;
+    background: var(--chart-options-timespan-blocks-bg);
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.0784313725);
+    border-radius: 8px;
+
+    .title-block {
+      color: var(--chart-options-timespan-blocks-title-color);
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 16px;
+      line-height: 18px;
+    }
+
+    .radio-buttons-container {
+      display: flex;
+      flex-direction: column;
+      grid-gap: 12px;
+
+      .ui-radio-block {
+        height: 20px;
+        display: flex;
+      }
+    }
+  }
+
+  :deep(.ui-input-with-datepicker) {
+    .ui-slot-icon-content {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &.disabled {
+      .time-icon,.calendar-icon {
+        color: #bdc3c7;
+        opacity: 0.44;
+      }
+    }
+  }
+}
+
+
+@media (max-width: 920px) {
+  .timespan-container {
+    grid-template-columns: 1fr;
+    padding-right: 0;
+
+    .chart-type-container {
+      .radio-buttons-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+  }
+}
+</style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/timespan/TimespanOld.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="timespan-objects-section-direction">
+    <common-chart-options-modal-counters-timespan-form
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $event)"
+      @update-timespan-type="emits('update-timespan-type', $event)"
+      @update-unit-count="emits('update-unit-count', $event)"
+      @update-period-type="emits('update-period-type', $event)"
+      @update-custom-date-from="emits('update-custom-date-from', $event)"
+      @update-custom-date-to="emits('update-custom-date-to', $event)"
+      @update-custom-time-from="emits('update-custom-time-from', $event)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+}>()
+</script>
+<style scoped lang="scss">
+.timespan-objects-section-direction {
+  display: flex;
+  flex-direction: row;
+}
+
+@media (max-width: 1024px) {
+  .timespan-objects-section-direction {
+    flex-direction: column;
+  }
+}
+</style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/metrics/Metrics.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="chart-option-groups-container">
-    <span>{{ localization.inventoryMonitor.chartMetrics }}</span>
-    <atoms-tabs-vertical-tabs
-      v-model="selectedMetric"
-      :items="props.metricsItems"
-    />
-  </div>
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-metrics-new
+    v-if="isNewView"
+    v-model:selected-metric="selectedMetric"
+    :metrics-items="props.metricsItems"
+  />
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-metrics-old
+    v-else
+    v-model:selected-metric="selectedMetric"
+    :metrics-items="props.metricsItems"
+  />
 </template>
 
 <script setup lang="ts">
@@ -13,13 +16,16 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
 import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
 
+const selectedMetric = defineModel<UI_T_Chart>('selectedMetric')
+
 const props = defineProps<{
   metricsItems: UI_I_VerticalTabs[]
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store } = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
-const selectedMetric = defineModel<UI_T_Chart>('selectedMetric')
 </script>
 
 <style scoped lang="scss">