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 #export>
42            <table-toolbar-export
43              :data="batchExportData"
44              :file-name="exportFileNameByDate('export')"
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          @filtered="onFiltered"
68          @row-selected="onRowSelected($event, filteredLogs.length)"
69        >
70          <!-- Checkbox column -->
71          <template #head(checkbox)>
72            <b-form-checkbox
73              v-model="tableHeaderCheckboxModel"
74              data-test-id="postCode-checkbox-selectAll"
75              :indeterminate="tableHeaderCheckboxIndeterminate"
76              @change="onChangeHeaderCheckbox($refs.table)"
77            >
78              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
79            </b-form-checkbox>
80          </template>
81          <template #cell(checkbox)="row">
82            <b-form-checkbox
83              v-model="row.rowSelected"
84              :data-test-id="`postCode-checkbox-selectRow-${row.index}`"
85              @change="toggleSelectRow($refs.table, row.index)"
86            >
87              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
88            </b-form-checkbox>
89          </template>
90          <!-- Date column -->
91          <template #cell(date)="{ value }">
92            <p class="mb-0">{{ value | formatDate }}</p>
93            <p class="mb-0">{{ value | formatTime }}</p>
94          </template>
95
96          <!-- Actions column -->
97          <template #cell(actions)="row">
98            <table-row-action
99              v-for="(action, index) in row.item.actions"
100              :key="index"
101              :value="action.value"
102              :title="action.title"
103              :row-data="row.item"
104              :btn-icon-only="true"
105              :export-name="exportFileNameByDate(action.value)"
106              :download-location="row.item.uri"
107              :download-in-new-tab="true"
108              :show-button="false"
109            >
110              <template #icon>
111                <icon-export v-if="action.value === 'export'" />
112                <icon-download v-if="action.value === 'download'" />
113              </template>
114            </table-row-action>
115          </template>
116        </b-table>
117      </b-col>
118    </b-row>
119
120    <!-- Table pagination -->
121    <b-row>
122      <b-col sm="6">
123        <b-form-group
124          class="table-pagination-select"
125          :label="$t('global.table.itemsPerPage')"
126          label-for="pagination-items-per-page"
127        >
128          <b-form-select
129            id="pagination-items-per-page"
130            v-model="perPage"
131            :options="itemsPerPageOptions"
132          />
133        </b-form-group>
134      </b-col>
135      <b-col sm="6">
136        <b-pagination
137          v-model="currentPage"
138          first-number
139          last-number
140          :per-page="perPage"
141          :total-rows="getTotalRowCount(filteredLogs.length)"
142          aria-controls="table-post-code-logs"
143        />
144      </b-col>
145    </b-row>
146  </b-container>
147</template>
148
149<script>
150import IconDownload from '@carbon/icons-vue/es/download/20';
151import IconExport from '@carbon/icons-vue/es/document--export/20';
152import { omit } from 'lodash';
153import PageTitle from '@/components/Global/PageTitle';
154import Search from '@/components/Global/Search';
155import TableCellCount from '@/components/Global/TableCellCount';
156import TableDateFilter from '@/components/Global/TableDateFilter';
157import TableRowAction from '@/components/Global/TableRowAction';
158import TableToolbar from '@/components/Global/TableToolbar';
159import TableToolbarExport from '@/components/Global/TableToolbarExport';
160import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
161import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
162import BVPaginationMixin, {
163  currentPage,
164  perPage,
165  itemsPerPageOptions,
166} from '@/components/Mixins/BVPaginationMixin';
167import BVTableSelectableMixin, {
168  selectedRows,
169  tableHeaderCheckboxModel,
170  tableHeaderCheckboxIndeterminate,
171} from '@/components/Mixins/BVTableSelectableMixin';
172import BVToastMixin from '@/components/Mixins/BVToastMixin';
173import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
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    TableDataFormatterMixin,
201    TableSortMixin,
202    TableRowExpandMixin,
203    SearchFilterMixin,
204  ],
205  beforeRouteLeave(to, from, next) {
206    // Hide loader if the user navigates to another page
207    // before request is fulfilled.
208    this.hideLoader();
209    next();
210  },
211  data() {
212    return {
213      fields: [
214        {
215          key: 'checkbox',
216          sortable: false,
217        },
218        {
219          key: 'date',
220          label: this.$t('pagePostCodeLogs.table.created'),
221        },
222        {
223          key: 'timeStampOffset',
224          label: this.$t('pagePostCodeLogs.table.timeStampOffset'),
225        },
226        {
227          key: 'bootCount',
228          label: this.$t('pagePostCodeLogs.table.bootCount'),
229        },
230        {
231          key: 'postCode',
232          label: this.$t('pagePostCodeLogs.table.postCode'),
233        },
234        {
235          key: 'actions',
236          label: '',
237          tdClass: 'text-right text-nowrap',
238        },
239      ],
240      expandRowLabel,
241      activeFilters: [],
242      currentPage: currentPage,
243      filterStartDate: null,
244      filterEndDate: null,
245      itemsPerPageOptions: itemsPerPageOptions,
246      perPage: perPage,
247      searchFilter: searchFilter,
248      searchTotalFilteredRows: 0,
249      selectedRows: selectedRows,
250      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
251      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
252    };
253  },
254  computed: {
255    href() {
256      return `data:text/json;charset=utf-8,${this.exportAllLogsString()}`;
257    },
258    filteredRows() {
259      return this.searchFilter
260        ? this.searchTotalFilteredRows
261        : this.filteredLogs.length;
262    },
263    allLogs() {
264      return this.$store.getters['postCodeLogs/allPostCodes'].map(
265        (postCodes) => {
266          return {
267            ...postCodes,
268            actions: [
269              {
270                value: 'export',
271                title: this.$t('pagePostCodeLogs.action.exportLogs'),
272              },
273              {
274                value: 'download',
275                title: this.$t('pagePostCodeLogs.action.downloadDetails'),
276              },
277            ],
278          };
279        }
280      );
281    },
282    batchExportData() {
283      return this.selectedRows.map((row) => omit(row, 'actions'));
284    },
285    filteredLogsByDate() {
286      return this.getFilteredTableDataByDate(
287        this.allLogs,
288        this.filterStartDate,
289        this.filterEndDate
290      );
291    },
292    filteredLogs() {
293      return this.getFilteredTableData(
294        this.filteredLogsByDate,
295        this.activeFilters
296      );
297    },
298  },
299  created() {
300    this.startLoader();
301    this.$store
302      .dispatch('postCodeLogs/getPostCodesLogData')
303      .finally(() => this.endLoader());
304  },
305  methods: {
306    exportAllLogsString() {
307      {
308        return this.$store.getters['postCodeLogs/allPostCodes'].map(
309          (postCodes) => {
310            const allLogsString = JSON.stringify(postCodes);
311            return allLogsString;
312          }
313        );
314      }
315    },
316    onFilterChange({ activeFilters }) {
317      this.activeFilters = activeFilters;
318    },
319    onChangeDateTimeFilter({ fromDate, toDate }) {
320      this.filterStartDate = fromDate;
321      this.filterEndDate = toDate;
322    },
323    onFiltered(filteredItems) {
324      this.searchTotalFilteredRows = filteredItems.length;
325    },
326    // Create export file name based on date and action
327    exportFileNameByDate(value) {
328      let date = new Date();
329      date =
330        date.toISOString().slice(0, 10) +
331        '_' +
332        date.toString().split(':').join('-').split(' ')[4];
333      let fileName;
334      if (value === 'download') {
335        fileName = this.$t('pagePostCodeLogs.downloadFilePrefix');
336      } else if (value === 'export') {
337        fileName = this.$t('pagePostCodeLogs.exportFilePrefix');
338      } else {
339        fileName = this.$t('pagePostCodeLogs.allExportFilePrefix');
340      }
341      return fileName + date;
342    },
343  },
344};
345</script>
346