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