1<template>
2  <b-container fluid="xl">
3    <page-title />
4    <b-row class="align-items-end">
5      <b-col sm="6" md="5" xl="4">
6        <search
7          :placeholder="$t('pageSensors.searchForSensors')"
8          data-test-id="sensors-input-searchForSensors"
9          @change-search="onChangeSearchInput"
10          @clear-search="onClearSearchInput"
11        />
12      </b-col>
13      <b-col sm="3" md="3" xl="2">
14        <table-cell-count
15          :filtered-items-count="filteredRows"
16          :total-number-of-cells="allSensors.length"
17        ></table-cell-count>
18      </b-col>
19      <b-col sm="3" md="4" xl="6" class="text-right">
20        <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
21      </b-col>
22    </b-row>
23    <b-row>
24      <b-col xl="12">
25        <table-toolbar
26          ref="toolbar"
27          :selected-items-count="selectedRows.length"
28          @clear-selected="clearSelectedRows($refs.table)"
29        >
30          <template #toolbar-buttons>
31            <table-toolbar-export
32              :data="selectedRows"
33              :file-name="exportFileNameByDate()"
34            />
35          </template>
36        </table-toolbar>
37        <b-table
38          ref="table"
39          responsive="md"
40          selectable
41          no-select-on-click
42          sort-icon-left
43          hover
44          no-sort-reset
45          sticky-header="75vh"
46          sort-by="status"
47          show-empty
48          :no-border-collapse="true"
49          :items="filteredSensors"
50          :fields="fields"
51          :sort-desc="true"
52          :sort-compare="sortCompare"
53          :filter="searchFilter"
54          :empty-text="$t('global.table.emptyMessage')"
55          :empty-filtered-text="$t('global.table.emptySearchMessage')"
56          @filtered="onFiltered"
57          @row-selected="onRowSelected($event, filteredSensors.length)"
58        >
59          <!-- Checkbox column -->
60          <template #head(checkbox)>
61            <b-form-checkbox
62              v-model="tableHeaderCheckboxModel"
63              :indeterminate="tableHeaderCheckboxIndeterminate"
64              @change="onChangeHeaderCheckbox($refs.table)"
65            >
66              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
67            </b-form-checkbox>
68          </template>
69          <template #cell(checkbox)="row">
70            <b-form-checkbox
71              v-model="row.rowSelected"
72              @change="toggleSelectRow($refs.table, row.index)"
73            >
74              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
75            </b-form-checkbox>
76          </template>
77
78          <template #cell(status)="{ value }">
79            <status-icon :status="statusIcon(value)" /> {{ value }}
80          </template>
81          <template #cell(currentValue)="data">
82            {{ data.value }} {{ data.item.units }}
83          </template>
84          <template #cell(lowerCaution)="data">
85            {{ data.value }} {{ data.item.units }}
86          </template>
87          <template #cell(upperCaution)="data">
88            {{ data.value }} {{ data.item.units }}
89          </template>
90          <template #cell(lowerCritical)="data">
91            {{ data.value }} {{ data.item.units }}
92          </template>
93          <template #cell(upperCritical)="data">
94            {{ data.value }} {{ data.item.units }}
95          </template>
96        </b-table>
97      </b-col>
98    </b-row>
99  </b-container>
100</template>
101
102<script>
103import PageTitle from '@/components/Global/PageTitle';
104import Search from '@/components/Global/Search';
105import StatusIcon from '@/components/Global/StatusIcon';
106import TableFilter from '@/components/Global/TableFilter';
107import TableToolbar from '@/components/Global/TableToolbar';
108import TableToolbarExport from '@/components/Global/TableToolbarExport';
109import TableCellCount from '@/components/Global/TableCellCount';
110
111import BVTableSelectableMixin, {
112  selectedRows,
113  tableHeaderCheckboxModel,
114  tableHeaderCheckboxIndeterminate,
115} from '@/components/Mixins/BVTableSelectableMixin';
116import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
117import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
118import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
119import TableSortMixin from '@/components/Mixins/TableSortMixin';
120import SearchFilterMixin, {
121  searchFilter,
122} from '@/components/Mixins/SearchFilterMixin';
123
124export default {
125  name: 'Sensors',
126  components: {
127    PageTitle,
128    Search,
129    StatusIcon,
130    TableCellCount,
131    TableFilter,
132    TableToolbar,
133    TableToolbarExport,
134  },
135  mixins: [
136    TableFilterMixin,
137    BVTableSelectableMixin,
138    LoadingBarMixin,
139    DataFormatterMixin,
140    TableSortMixin,
141    SearchFilterMixin,
142  ],
143  beforeRouteLeave(to, from, next) {
144    this.hideLoader();
145    next();
146  },
147  data() {
148    return {
149      fields: [
150        {
151          key: 'checkbox',
152          sortable: false,
153          label: '',
154        },
155        {
156          key: 'name',
157          sortable: true,
158          label: this.$t('pageSensors.table.name'),
159        },
160        {
161          key: 'status',
162          sortable: true,
163          label: this.$t('pageSensors.table.status'),
164          tdClass: 'text-nowrap',
165        },
166        {
167          key: 'lowerCritical',
168          formatter: this.dataFormatter,
169          label: this.$t('pageSensors.table.lowerCritical'),
170        },
171        {
172          key: 'lowerCaution',
173          formatter: this.dataFormatter,
174          label: this.$t('pageSensors.table.lowerWarning'),
175        },
176
177        {
178          key: 'currentValue',
179          formatter: this.dataFormatter,
180          label: this.$t('pageSensors.table.currentValue'),
181        },
182        {
183          key: 'upperCaution',
184          formatter: this.dataFormatter,
185          label: this.$t('pageSensors.table.upperWarning'),
186        },
187        {
188          key: 'upperCritical',
189          formatter: this.dataFormatter,
190          label: this.$t('pageSensors.table.upperCritical'),
191        },
192      ],
193      tableFilters: [
194        {
195          key: 'status',
196          label: this.$t('pageSensors.table.status'),
197          values: ['OK', 'Warning', 'Critical'],
198        },
199      ],
200      activeFilters: [],
201      searchFilter: searchFilter,
202      searchTotalFilteredRows: 0,
203      selectedRows: selectedRows,
204      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
205      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
206    };
207  },
208  computed: {
209    allSensors() {
210      return this.$store.getters['sensors/sensors'];
211    },
212    filteredRows() {
213      return this.searchFilter
214        ? this.searchTotalFilteredRows
215        : this.filteredSensors.length;
216    },
217    filteredSensors() {
218      return this.getFilteredTableData(this.allSensors, this.activeFilters);
219    },
220  },
221  created() {
222    this.startLoader();
223    this.$store
224      .dispatch('sensors/getAllSensors')
225      .finally(() => this.endLoader());
226  },
227  methods: {
228    sortCompare(a, b, key) {
229      if (key === 'status') {
230        return this.sortStatus(a, b, key);
231      }
232    },
233    onFilterChange({ activeFilters }) {
234      this.activeFilters = activeFilters;
235    },
236    onFiltered(filteredItems) {
237      this.searchTotalFilteredRows = filteredItems.length;
238    },
239    onChangeSearchInput(event) {
240      this.searchFilter = event;
241    },
242    exportFileNameByDate() {
243      // Create export file name based on date
244      let date = new Date();
245      date =
246        date.toISOString().slice(0, 10) +
247        '_' +
248        date.toString().split(':').join('-').split(' ')[4];
249      return this.$t('pageSensors.exportFilePrefix') + date;
250    },
251  },
252};
253</script>
254