bfg-common 1.5.701 → 1.5.702

package/components/common/pages/hardwareHealth/tableView/TableView.vue

@@ -1,202 +1,202 @@
-<template>
-  <div class="data-table-view">
-    <div class="data-table-view__inner">
-      <atoms-table-data-grid
-        v-model:column-keys="columnKeys"
-        v-model:selected-row="selectedRow"
-        :head-items="headItems"
-        :body-items="bodyItems"
-        :total-items="props.totalItems"
-        :total-pages="props.totalPages"
-        :page-size="100"
-        :page="1"
-        :type="tableType"
-        :loading="props.loading"
-        class="data-table"
-        test-id="hardware-health-table"
-        hide-page-size
-        server-off
-      >
-        <template v-if="hasNonEmptySelEntries" #toggleBlock="{ item }">
-          <div class="row-details">
-            <div class="row-details__headline">
-              {{ localization.common.eventLogEntries }}
-            </div>
-
-            <div
-              v-for="(entries, key) in item[0].data.current.sel_entries"
-              :key="key"
-              class="row-details__content"
-            >
-              <span>{{ entries.event }}</span>
-              <span>{{ entries.time }}</span>
-            </div>
-          </div>
-        </template>
-
-        <template #icon="{ item }">
-          <atoms-the-icon
-            v-if="!item.data.isSprite"
-            :name="item.data.iconClassName"
-            class="icon"
-          />
-          <span v-else :class="['icon', item.data.iconClassName]"></span>
-          {{ item.text }}
-
-          <a
-            v-if="item.data.warning"
-            id="sensor-item-warning"
-            :data-id="item.data.testId"
-            href="javascript:void(0)"
-            class="row-details__text"
-            @click="onShowFieldWarning(item.data.warning)"
-            >{{ localization.common.details }}...
-          </a>
-        </template>
-      </atoms-table-data-grid>
-    </div>
-  </div>
-
-  <common-pages-hardware-health-table-view-modal-sensor-warning
-    v-if="isShowSensorWarningDetails"
-    :error="sensorWarningError"
-    @close-modal="isShowSensorWarningDetails = false"
-  />
-</template>
-
-<script lang="ts" setup>
-import type {
-  UI_I_HeadItem,
-  UI_I_ColumnKey,
-  UI_I_BodyItem,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
-import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
-import type { UI_T_DataGridType } from '~/components/atoms/table/dataGrid/lib/models/types'
-import * as sensorTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/sensorTable'
-import * as storageSensorTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/storageSensorTable'
-import * as alertWarningTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/alertWarningTable'
-import * as systemLogTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/systemLogTable'
-import * as historyTestimonyTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/historyTestimonyTable'
-
-const props = defineProps<{
-  selectedGraphView: string
-  dataTable: UI_I_HardwareHealthSensors[]
-  loading: boolean
-  totalItems: number
-  totalPages: number
-  tableMode: UI_T_HardwareHealthTabMode
-}>()
-const selectedRow = defineModel<number[]>('selectedRow')
-
-const { $store }: any = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const table: any = {
-  sensor: sensorTable,
-  'storage-sensor': storageSensorTable,
-  'alert-warning': alertWarningTable,
-  'system-log': systemLogTable,
-  'history-testimony': historyTestimonyTable,
-}
-
-const tableType = computed<UI_T_DataGridType | undefined>(() =>
-  props.tableMode === 'history-testimony' ? 'checkbox' : undefined
-)
-
-const hasNonEmptySelEntries = computed<boolean>(() => {
-  return (
-    props.dataTable.some(
-      (item) => item.sel_entries && item.sel_entries.length > 0
-    ) && props.tableMode === 'sensor'
-  )
-})
-
-const columnKeys = ref<UI_I_ColumnKey[]>(
-  table[props.tableMode].columnKeys(localization.value)
-)
-const headItems = computed<UI_I_HeadItem[]>(() =>
-  table[props.tableMode].headItems(localization.value)
-)
-
-const updateTimeFormatAndInterfaceLang = computed<number>(
-  () => $store.getters['main/getUpdateTimeFormatAndInterfaceLang']
-)
-
-const bodyItems = computed<UI_I_BodyItem[][]>(() => {
-  if (!updateTimeFormatAndInterfaceLang.value) return []
-  // const tableData = ['sensor'].includes(props.tableMode) ? props.dataTable : [] // TODO временно так
-  let tableData = props.dataTable
-
-  switch (props.tableMode) {
-    case 'storage-sensor':
-      tableData = []
-      break
-    case 'alert-warning':
-      tableData = tableData.filter((sensor: UI_I_HardwareHealthSensors) =>
-        [2, 3].includes(sensor.status)
-      )
-      break
-    case 'system-log':
-      tableData = []
-      break
-  }
-
-  return table[props.tableMode].bodyItems(
-    tableData,
-    localization.value,
-    props.selectedGraphView
-  )
-})
-
-const isShowSensorWarningDetails = ref<boolean>(false)
-const sensorWarningError = ref<string | null>(null)
-const onShowFieldWarning = (error: string): void => {
-  isShowSensorWarningDetails.value = true
-  sensorWarningError.value = error
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.data-table-view {
-  overflow: hidden;
-  height: inherit;
-  margin-bottom: 10px;
-  &__inner {
-    height: inherit;
-  }
-  :deep(.data-table) {
-    height: inherit;
-    .datagrid-outer-wrapper {
-      height: inherit;
-      padding-top: 0;
-    }
-
-    .row-details {
-      width: 100%;
-      &__headline {
-        font-weight: 500;
-        border-bottom: 2px solid #ccc;
-      }
-      &__content {
-        @include flex($just: space-between);
-        &:first-child {
-          margin-top: 5px;
-        }
-      }
-      &__text {
-        margin-left: 8px;
-      }
-    }
-    .icon {
-      width: 18px;
-      display: block;
-      min-width: 18px;
-      margin-right: 5px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="data-table-view">
+    <div class="data-table-view__inner">
+      <atoms-table-data-grid
+        v-model:column-keys="columnKeys"
+        v-model:selected-row="selectedRow"
+        :head-items="headItems"
+        :body-items="bodyItems"
+        :total-items="props.totalItems"
+        :total-pages="props.totalPages"
+        :page-size="100"
+        :page="1"
+        :type="tableType"
+        :loading="props.loading"
+        class="data-table"
+        test-id="hardware-health-table"
+        hide-page-size
+        server-off
+      >
+        <template v-if="hasNonEmptySelEntries" #toggleBlock="{ item }">
+          <div class="row-details">
+            <div class="row-details__headline">
+              {{ localization.common.eventLogEntries }}
+            </div>
+
+            <div
+              v-for="(entries, key) in item[0].data.current.sel_entries"
+              :key="key"
+              class="row-details__content"
+            >
+              <span>{{ entries.event }}</span>
+              <span>{{ entries.time }}</span>
+            </div>
+          </div>
+        </template>
+
+        <template #icon="{ item }">
+          <atoms-the-icon
+            v-if="!item.data.isSprite"
+            :name="item.data.iconClassName"
+            class="icon"
+          />
+          <span v-else :class="['icon', item.data.iconClassName]"></span>
+          {{ item.text }}
+
+          <a
+            v-if="item.data.warning"
+            id="sensor-item-warning"
+            :data-id="item.data.testId"
+            href="javascript:void(0)"
+            class="row-details__text"
+            @click="onShowFieldWarning(item.data.warning)"
+            >{{ localization.common.details }}...
+          </a>
+        </template>
+      </atoms-table-data-grid>
+    </div>
+  </div>
+
+  <common-pages-hardware-health-table-view-modal-sensor-warning
+    v-if="isShowSensorWarningDetails"
+    :error="sensorWarningError"
+    @close-modal="isShowSensorWarningDetails = false"
+  />
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_HeadItem,
+  UI_I_ColumnKey,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
+import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
+import type { UI_T_DataGridType } from '~/components/atoms/table/dataGrid/lib/models/types'
+import * as sensorTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/sensorTable'
+import * as storageSensorTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/storageSensorTable'
+import * as alertWarningTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/alertWarningTable'
+import * as systemLogTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/systemLogTable'
+import * as historyTestimonyTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/historyTestimonyTable'
+
+const props = defineProps<{
+  selectedGraphView: string
+  dataTable: UI_I_HardwareHealthSensors[]
+  loading: boolean
+  totalItems: number
+  totalPages: number
+  tableMode: UI_T_HardwareHealthTabMode
+}>()
+const selectedRow = defineModel<number[]>('selectedRow')
+
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const table: any = {
+  sensor: sensorTable,
+  'storage-sensor': storageSensorTable,
+  'alert-warning': alertWarningTable,
+  'system-log': systemLogTable,
+  'history-testimony': historyTestimonyTable,
+}
+
+const tableType = computed<UI_T_DataGridType | undefined>(() =>
+  props.tableMode === 'history-testimony' ? 'checkbox' : undefined
+)
+
+const hasNonEmptySelEntries = computed<boolean>(() => {
+  return (
+    props.dataTable.some(
+      (item) => item.sel_entries && item.sel_entries.length > 0
+    ) && props.tableMode === 'sensor'
+  )
+})
+
+const columnKeys = ref<UI_I_ColumnKey[]>(
+  table[props.tableMode].columnKeys(localization.value)
+)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table[props.tableMode].headItems(localization.value)
+)
+
+const updateTimeFormatAndInterfaceLang = computed<number>(
+  () => $store.getters['main/getUpdateTimeFormatAndInterfaceLang']
+)
+
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  if (!updateTimeFormatAndInterfaceLang.value) return []
+  // const tableData = ['sensor'].includes(props.tableMode) ? props.dataTable : [] // TODO временно так
+  let tableData = props.dataTable
+
+  switch (props.tableMode) {
+    case 'storage-sensor':
+      tableData = []
+      break
+    case 'alert-warning':
+      tableData = tableData.filter((sensor: UI_I_HardwareHealthSensors) =>
+        [2, 3].includes(sensor.status)
+      )
+      break
+    case 'system-log':
+      tableData = []
+      break
+  }
+
+  return table[props.tableMode].bodyItems(
+    tableData,
+    localization.value,
+    props.selectedGraphView
+  )
+})
+
+const isShowSensorWarningDetails = ref<boolean>(false)
+const sensorWarningError = ref<string | null>(null)
+const onShowFieldWarning = (error: string): void => {
+  isShowSensorWarningDetails.value = true
+  sensorWarningError.value = error
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.data-table-view {
+  overflow: hidden;
+  height: inherit;
+  margin-bottom: 10px;
+  &__inner {
+    height: inherit;
+  }
+  :deep(.data-table) {
+    height: inherit;
+    .datagrid-outer-wrapper {
+      height: inherit;
+      padding-top: 0;
+    }
+
+    .row-details {
+      width: 100%;
+      &__headline {
+        font-weight: 500;
+        border-bottom: 2px solid #ccc;
+      }
+      &__content {
+        @include flex($just: space-between);
+        &:first-child {
+          margin-top: 5px;
+        }
+      }
+      &__text {
+        margin-left: 8px;
+      }
+    }
+    .icon {
+      width: 18px;
+      display: block;
+      min-width: 18px;
+      margin-right: 5px;
+    }
+  }
+}
+</style>