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