1<template>
2  <b-container fluid="xl">
3    <page-title />
4    <b-row class="align-items-start">
5      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
6        <search
7          :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
8          @change-search="onChangeSearchInput"
9          @clear-search="onClearSearchInput"
10        />
11        <div class="ml-sm-4">
12          <table-cell-count
13            :filtered-items-count="filteredRows"
14            :total-number-of-cells="allLogs.length"
15          ></table-cell-count>
16        </div>
17      </b-col>
18      <b-col sm="8" md="7" xl="6">
19        <table-date-filter @change="onChangeDateTimeFilter" />
20      </b-col>
21    </b-row>
22    <b-row>
23      <b-col xl="12" class="text-right">
24        <b-button
25          variant="primary"
26          :disabled="allLogs.length === 0"
27          :download="exportFileNameByDate()"
28          :href="href"
29        >
30          <icon-export /> {{ $t('pagePostCodeLogs.button.exportAll') }}
31        </b-button>
32      </b-col>
33    </b-row>
34    <b-row>
35      <b-col>
36        <table-toolbar
37          ref="toolbar"
38          :selected-items-count="selectedRows.length"
39          @clear-selected="clearSelectedRows($refs.table)"
40        >
41          <template #toolbar-buttons>
42            <table-toolbar-export
43              :data="batchExportData"
44              :file-name="exportFileNameByDate()"
45            />
46          </template>
47        </table-toolbar>
48        <b-table
49          id="table-post-code-logs"
50          ref="table"
51          responsive="md"
52          selectable
53          no-select-on-click
54          sort-icon-left
55          hover
56          no-sort-reset
57          sort-desc
58          show-empty
59          sort-by="id"
60          :fields="fields"
61          :items="filteredLogs"
62          :empty-text="$t('global.table.emptyMessage')"
63          :empty-filtered-text="$t('global.table.emptySearchMessage')"
64          :per-page="perPage"
65          :current-page="currentPage"
66          :filter="searchFilter"
67          :busy="isBusy"
68          @filtered="onFiltered"
69          @row-selected="onRowSelected($event, filteredLogs.length)"
70        >
71          <!-- Checkbox column -->
72          <template #head(checkbox)>
73            <b-form-checkbox
74              v-model="tableHeaderCheckboxModel"
75              data-test-id="postCode-checkbox-selectAll"
76              :indeterminate="tableHeaderCheckboxIndeterminate"
77              @change="onChangeHeaderCheckbox($refs.table)"
78            >
79              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
80            </b-form-checkbox>
81          </template>
82          <template #cell(checkbox)="row">
83            <b-form-checkbox
84              v-model="row.rowSelected"
85              :data-test-id="`postCode-checkbox-selectRow-${row.index}`"
86              @change="toggleSelectRow($refs.table, row.index)"
87            >
88              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
89            </b-form-checkbox>
90          </template>
91          <!-- Date column -->
92          <template #cell(date)="{ value }">
93            <p class="mb-0">{{ value | formatDate }}</p>
94            <p class="mb-0">{{ value | formatTime }}</p>
95          </template>
96
97          <!-- Actions column -->
98          <template #cell(actions)="row">
99            <table-row-action
100              v-for="(action, index) in row.item.actions"
101              :key="index"
102              :value="action.value"
103              :title="action.title"
104              :row-data="row.item"
105              :btn-icon-only="true"
106              :export-name="exportFileNameByDate(action.value)"
107              :download-location="row.item.uri"
108              :download-in-new-tab="true"
109              :show-button="false"
110            >
111              <template #icon>
112                <icon-export v-if="action.value === 'export'" />
113                <icon-download v-if="action.value === 'download'" />
114              </template>
115            </table-row-action>
116          </template>
117        </b-table>
118      </b-col>
119    </b-row>
120
121    <!-- Table pagination -->
122    <b-row>
123      <b-col sm="6">
124        <b-form-group
125          class="table-pagination-select"
126          :label="$t('global.table.itemsPerPage')"
127          label-for="pagination-items-per-page"
128        >
129          <b-form-select
130            id="pagination-items-per-page"
131            v-model="perPage"
132            :options="itemsPerPageOptions"
133          />
134        </b-form-group>
135      </b-col>
136      <b-col sm="6">
137        <b-pagination
138          v-model="currentPage"
139          first-number
140          last-number
141          :per-page="perPage"
142          :total-rows="getTotalRowCount(filteredRows)"
143          aria-controls="table-post-code-logs"
144        />
145      </b-col>
146    </b-row>
147  </b-container>
148</template>
149
150<script>
151import IconDownload from '@carbon/icons-vue/es/download/20';
152import IconExport from '@carbon/icons-vue/es/document--export/20';
153import { omit } from 'lodash';
154import PageTitle from '@/components/Global/PageTitle';
155import Search from '@/components/Global/Search';
156import TableCellCount from '@/components/Global/TableCellCount';
157import TableDateFilter from '@/components/Global/TableDateFilter';
158import TableRowAction from '@/components/Global/TableRowAction';
159import TableToolbar from '@/components/Global/TableToolbar';
160import TableToolbarExport from '@/components/Global/TableToolbarExport';
161import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
162import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
163import BVPaginationMixin, {
164  currentPage,
165  perPage,
166  itemsPerPageOptions,
167} from '@/components/Mixins/BVPaginationMixin';
168import BVTableSelectableMixin, {
169  selectedRows,
170  tableHeaderCheckboxModel,
171  tableHeaderCheckboxIndeterminate,
172} from '@/components/Mixins/BVTableSelectableMixin';
173import BVToastMixin from '@/components/Mixins/BVToastMixin';
174import TableSortMixin from '@/components/Mixins/TableSortMixin';
175import TableRowExpandMixin, {
176  expandRowLabel,
177} from '@/components/Mixins/TableRowExpandMixin';
178import SearchFilterMixin, {
179  searchFilter,
180} from '@/components/Mixins/SearchFilterMixin';
181
182export default {
183  components: {
184    IconExport,
185    IconDownload,
186    PageTitle,
187    Search,
188    TableCellCount,
189    TableRowAction,
190    TableToolbar,
191    TableToolbarExport,
192    TableDateFilter,
193  },
194  mixins: [
195    BVPaginationMixin,
196    BVTableSelectableMixin,
197    BVToastMixin,
198    LoadingBarMixin,
199    TableFilterMixin,
200    TableSortMixin,
201    TableRowExpandMixin,
202    SearchFilterMixin,
203  ],
204  beforeRouteLeave(to, from, next) {
205    // Hide loader if the user navigates to another page
206    // before request is fulfilled.
207    this.hideLoader();
208    next();
209  },
210  data() {
211    return {
212      isBusy: true,
213      fields: [
214        {
215          key: 'checkbox',
216          sortable: false,
217        },
218        {
219          key: 'date',
220          label: this.$t('pagePostCodeLogs.table.created'),
221          sortable: true,
222        },
223        {
224          key: 'timeStampOffset',
225          label: this.$t('pagePostCodeLogs.table.timeStampOffset'),
226        },
227        {
228          key: 'bootCount',
229          label: this.$t('pagePostCodeLogs.table.bootCount'),
230        },
231        {
232          key: 'postCode',
233          label: this.$t('pagePostCodeLogs.table.postCode'),
234        },
235        {
236          key: 'actions',
237          label: '',
238          tdClass: 'text-right text-nowrap',
239        },
240      ],
241      expandRowLabel,
242      activeFilters: [],
243      currentPage: currentPage,
244      filterStartDate: null,
245      filterEndDate: null,
246      itemsPerPageOptions: itemsPerPageOptions,
247      perPage: perPage,
248      searchFilter: searchFilter,
249      searchTotalFilteredRows: 0,
250      selectedRows: selectedRows,
251      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
252      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
253    };
254  },
255  computed: {
256    href() {
257      return `data:text/json;charset=utf-8,${this.exportAllLogsString()}`;
258    },
259    filteredRows() {
260      return this.searchFilter
261        ? this.searchTotalFilteredRows
262        : this.filteredLogs.length;
263    },
264    allLogs() {
265      return this.$store.getters['postCodeLogs/allPostCodes'].map(
266        (postCodes) => {
267          return {
268            ...postCodes,
269            actions: [
270              {
271                value: 'export',
272                title: this.$t('pagePostCodeLogs.action.exportLogs'),
273              },
274              {
275                value: 'download',
276                title: this.$t('pagePostCodeLogs.action.downloadDetails'),
277              },
278            ],
279          };
280        }
281      );
282    },
283    batchExportData() {
284      return this.selectedRows.map((row) => omit(row, 'actions'));
285    },
286    filteredLogsByDate() {
287      return this.getFilteredTableDataByDate(
288        this.allLogs,
289        this.filterStartDate,
290        this.filterEndDate
291      );
292    },
293    filteredLogs() {
294      return this.getFilteredTableData(
295        this.filteredLogsByDate,
296        this.activeFilters
297      );
298    },
299  },
300  created() {
301    this.startLoader();
302    this.$store.dispatch('postCodeLogs/getPostCodesLogData').finally(() => {
303      this.endLoader();
304      this.isBusy = false;
305    });
306  },
307  methods: {
308    exportAllLogsString() {
309      {
310        return this.$store.getters['postCodeLogs/allPostCodes'].map(
311          (postCodes) => {
312            const allLogsString = JSON.stringify(postCodes);
313            return allLogsString;
314          }
315        );
316      }
317    },
318    onFilterChange({ activeFilters }) {
319      this.activeFilters = activeFilters;
320    },
321    onChangeDateTimeFilter({ fromDate, toDate }) {
322      this.filterStartDate = fromDate;
323      this.filterEndDate = toDate;
324    },
325    onFiltered(filteredItems) {
326      this.searchTotalFilteredRows = filteredItems.length;
327    },
328    // Create export file name based on date and action
329    exportFileNameByDate(value) {
330      let date = new Date();
331      date =
332        date.toISOString().slice(0, 10) +
333        '_' +
334        date.toString().split(':').join('-').split(' ')[4];
335      let fileName;
336      if (value === 'download') {
337        fileName = this.$t('pagePostCodeLogs.downloadFilePrefix');
338      } else if (value === 'export') {
339        fileName = this.$t('pagePostCodeLogs.exportFilePrefix');
340      } else {
341        fileName = this.$t('pagePostCodeLogs.allExportFilePrefix');
342      }
343      return fileName + date;
344    },
345  },
346};
347</script>
348