Migrate to Bootstrap 5 and remove Vue compat plugin
Complete migration from Bootstrap 4 (bootstrap-vue) to Bootstrap 5
(bootstrap-vue-next) and remove the @vue/compat plugin to finalize
the Vue 3 migration.
Bundle size impact:
- Before (Bootstrap 4 + bootstrap-vue): 535 KiB gzipped
- After (Bootstrap 5 + bootstrap-vue-next): 511 KiB gzipped
- Reduction: 24 KiB (4.5% smaller)
Package updates:
- Update bootstrap 4.6.2 -> 5.3.8
- Update bootstrap-vue 2.23.1 -> bootstrap-vue-next 0.40.8
- Remove @vue/compat plugin
- Update vue 3.4.29 -> 3.5.24 and related packages
- Add mitt 3.0.1 for global event bus
- Add vue-demi 0.14.10 for library compatibility
Bootstrap 5 CSS updates:
- Replace directional classes: ml/mr/pl/pr -> ms/me/ps/pe
- Replace text-left/right -> text-start/end
- Replace sr-only -> visually-hidden / visually-hidden-focusable
- Update media breakpoint xs -> sm (Bootstrap 5 removed xs)
- Update color functions: gray("700") -> $gray-700
- Add form-switch border-radius for curved toggles
- Update alert, table, toast, form, and button styles
Bootstrap-Vue-Next API changes:
- Use createBootstrap() for plugin registration
- Update modal footer slots: #modal-footer -> #footer
- Fix form select events: @change -> @update:model-value
- Add v-model bindings to modals instead of manual show()/hide()
- Update toast system with custom plugin wrapping useToast()
- Register components and directives explicitly
Vue 3 specific updates:
- Replace $root.$emit with mitt event bus (eventBus.js)
- Update render function from h(App) to createApp(App)
- Add emits option to components
- Use h() instead of $createElement in mixins
- Add Vue 3 compile-time feature flags with documentation
- Update event listeners: $on/$off to eventBus methods
- Add beforeUnmount cleanup for event listeners
New components and significant additions:
- src/plugins/toast.js - Custom toast plugin wrapping useToast() for
Options API compatibility
- src/components/Global/ConfirmModal.vue - Global confirmation dialog
shim to replace Bootstrap 4's removed bvModal.msgBoxConfirm
- src/eventBus.js - mitt-based event bus with Vue 2-compatible API
- Navigation state preservation on page refresh implemented
Critical fixes:
- Add global API interceptor to strip Vue reactivity from payloads
- Preserve binary data (File, Blob, FormData) in API requests
- Fix Generate CSR modal v-model binding for proper open/close
- Remove debug logging and fix jest configuration
- Fix responsive text visibility in AppHeader
- Update BVTableSelectableMixin for proper row selection
- Fix BVToastMixin VNode rendering for Vue 3
Vue 3 modal fixes (lazy-loaded components):
- Add v-model support to network modals (ModalIpv4, ModalIpv6, ModalDns,
ModalHostname, ModalMacAddress, ModalDefaultGateway) by adding
modelValue prop, watcher on modelValue that triggers show(), and
update:modelValue emit in resetForm
- Remove lazy loading from TableIpv4, TableIpv6, TableDns to ensure
modal component refs are available when v-model triggers
- Fix modal title accessibility by adding title prop to modals
(ModalAddDestination, ModalUser, ModalAddRoleGroup, etc.)
i18n fixes (computed properties):
- Fix computed properties using i18n translations in ModalAddRoleGroup,
ModalUser, and ModalUploadCertificate
- Move useI18n() call from data() to setup() and return i18n object
- Use i18n.t() instead of $t in computed properties and templates
- Prevents "this.$t is not a function" and "_ctx.$t is not a function"
errors in Vue 3
Toast notification fixes:
- Fix toast progress bar visibility by setting progressProps to
undefined (documented way to opt-out) instead of false
- Change modelValue prop to interval for auto-dismiss timing
- Remove temporary CSS display:none hack from _toasts.scss
Network settings fixes:
- Fix checkbox @change event sending Vue reactive proxy object instead
of boolean by casting with !! operator in changeDomainNameState and
related methods in NetworkGlobalSettings.vue
- Ensures API receives plain boolean values in PATCH requests
Navigation fixes:
- Fix nav-link styling for navigation items without children by
replacing b-nav-item with router-link in AppNavigation.vue
- Prevents blue font color from .nav-link CSS class
Configuration updates:
- Remove vue-compat webpack configuration
- Add Vue 3 feature flags (__VUE_OPTIONS_API__, etc.)
- Add .cursor to .gitignore
Accessibility improvements:
- Add autocomplete attributes to password and credential inputs
- Add modal title props for screen reader support
Build completes successfully and UI behavior matches pre-migration.
Extracted features (to be submitted in follow-up PRs):
The following features were removed from this migration PR to keep it
focused on the Bootstrap 5 upgrade. They will be submitted separately:
1. UnresponsiveModal - Server connectivity watchdog with auto-retry
2. Auth token persistence - sessionStorage support for X-Auth-Token
3. Hardware store error handling - try/catch, dynamic discovery
4. Login page connecting indicator - Backend polling with spinner
5. Test updates - Jest setup and snapshot updates for
Bootstrap-Vue-Next
6. Documentation updates - Vue 3 and Vue I18n v9+ API documentation
7. Enhanced ConfirmModal - Feature-rich confirmation dialog with
custom actions
Change-Id: Ib76a58f324b3c926cf536e6e4626e4271639de38
Signed-off-by: Jason Westover <jwestover@nvidia.com>
diff --git a/src/views/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
index 4783f82..d500c36 100644
--- a/src/views/Logs/Dumps/Dumps.vue
+++ b/src/views/Logs/Dumps/Dumps.vue
@@ -18,7 +18,7 @@
@change-search="onChangeSearchInput"
@clear-search="onClearSearchInput"
/>
- <div class="ml-sm-4">
+ <div class="ms-sm-4">
<table-cell-count
:filtered-items-count="filteredRows"
:total-number-of-cells="allDumps.length"
@@ -30,7 +30,7 @@
</b-col>
</b-row>
<b-row>
- <b-col class="text-right">
+ <b-col class="text-end">
<table-filter
:filters="tableFilters"
@filter-change="onFilterChange"
@@ -38,7 +38,9 @@
</b-col>
</b-row>
<table-toolbar
- :selected-items-count="selectedRows.length"
+ :selected-items-count="
+ Array.isArray(selectedRows) ? selectedRows.length : 0
+ "
:actions="batchActions"
@clear-selected="clearSelectedRows($refs.table)"
@batch-action="onTableBatchAction"
@@ -48,12 +50,13 @@
show-empty
hover
sort-icon-left
- no-sort-reset
- sort-desc
+ must-sort
+ thead-class="table-light"
+ :sort-desc="[true]"
selectable
no-select-on-click
responsive="md"
- sort-by="dateTime"
+ :sort-by="['dateTime']"
:fields="fields"
:items="filteredDumps"
:empty-text="$t('global.table.emptyMessage')"
@@ -61,16 +64,18 @@
:filter="searchFilter"
:busy="isBusy"
@filtered="onFiltered"
- @row-selected="onRowSelected($event, filteredTableItems.length)"
+ @row-selected="onRowSelected($event, filteredRows)"
>
<!-- Checkbox column -->
<template #head(checkbox)>
<b-form-checkbox
v-model="tableHeaderCheckboxModel"
:indeterminate="tableHeaderCheckboxIndeterminate"
- @change="onChangeHeaderCheckbox($refs.table)"
+ @change="onChangeHeaderCheckbox($refs.table, $event)"
>
- <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectAll') }}
+ </span>
</b-form-checkbox>
</template>
<template #cell(checkbox)="row">
@@ -78,7 +83,9 @@
v-model="row.rowSelected"
@change="toggleSelectRow($refs.table, row.index)"
>
- <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectItem') }}
+ </span>
</b-form-checkbox>
</template>
@@ -135,7 +142,7 @@
first-number
last-number
:per-page="perPage"
- :total-rows="getTotalRowCount()"
+ :total-rows="getTotalRowCount(filteredRows)"
aria-controls="table-dump-entries"
/>
</b-col>
@@ -173,6 +180,7 @@
import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
import i18n from '@/i18n';
import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
components: {
@@ -202,6 +210,10 @@
this.hideLoader();
next();
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
@@ -235,7 +247,7 @@
key: 'actions',
sortable: false,
label: '',
- tdClass: 'text-right text-nowrap',
+ tdClass: 'text-end text-nowrap',
},
],
batchActions: [
@@ -328,78 +340,60 @@
this.filterStartDate = fromDate;
this.filterEndDate = toDate;
},
- onTableRowAction(action, dump) {
+ async onTableRowAction(action, item) {
if (action === 'delete') {
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t('pageDumps.modal.deleteDumpConfirmation'),
- {
- title: i18n.global.t('pageDumps.modal.deleteDump'),
- okTitle: i18n.global.t('pageDumps.modal.deleteDump'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfrimed) => {
- if (deleteConfrimed) {
- this.$store
- .dispatch('dumps/deleteDumps', [dump])
- .then((messages) => {
- messages.forEach(({ type, message }) => {
- if (type === 'success') {
- this.successToast(message);
- } else if (type === 'error') {
- this.errorToast(message);
- }
- });
- });
- }
+ const ok = await this.confirmDialog(
+ i18n.global.t('pageDumps.modal.deleteDumpConfirmation', 1),
+ {
+ title: i18n.global.t('pageDumps.modal.deleteDump', 1),
+ okTitle: i18n.global.t('pageDumps.modal.deleteDump', 1),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ },
+ );
+ if (ok)
+ this.$store.dispatch('dumps/deleteDumps', [item]).then((messages) => {
+ messages.forEach(({ type, message }) => {
+ if (type === 'success') {
+ this.successToast(message);
+ } else if (type === 'error') {
+ this.errorToast(message);
+ }
+ });
});
}
},
- onTableBatchAction(action) {
+ async onTableBatchAction(action) {
if (action === 'delete') {
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t(
- 'pageDumps.modal.deleteDumpConfirmation',
- this.selectedRows.length,
- ),
- {
- title: i18n.global.t(
- 'pageDumps.modal.deleteDump',
- this.selectedRows.length,
- ),
- okTitle: i18n.global.t(
- 'pageDumps.modal.deleteDump',
- this.selectedRows.length,
- ),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfrimed) => {
- if (deleteConfrimed) {
- if (this.selectedRows.length === this.dumps.length) {
- this.$store
- .dispatch('dumps/deleteAllDumps')
- .then((success) => this.successToast(success))
- .catch(({ message }) => this.errorToast(message));
- } else {
- this.$store
- .dispatch('dumps/deleteDumps', this.selectedRows)
- .then((messages) => {
- messages.forEach(({ type, message }) => {
- if (type === 'success') {
- this.successToast(message);
- } else if (type === 'error') {
- this.errorToast(message);
- }
- });
- });
- }
- }
- });
+ const ids = (this.selectedRows || []).map((r) => r.Id);
+ const count = ids.length;
+ const ok = await this.confirmDialog(
+ i18n.global.t('pageDumps.modal.deleteDumpConfirmation', count),
+ {
+ title: i18n.global.t('pageDumps.modal.deleteDump', count),
+ okTitle: i18n.global.t('pageDumps.modal.deleteDump', count),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ },
+ );
+ if (ok) {
+ if (this.selectedRows.length === this.dumps.length) {
+ this.$store
+ .dispatch('dumps/deleteAllDumps')
+ .then((success) => this.successToast(success))
+ .catch(({ message }) => this.errorToast(message));
+ } else {
+ this.$store
+ .dispatch('dumps/deleteDumps', this.selectedRows)
+ .then((messages) => {
+ messages.forEach(({ type, message }) => {
+ if (type === 'success') {
+ this.successToast(message);
+ } else if (type === 'error') {
+ this.errorToast(message);
+ }
+ });
+ });
+ }
+ }
}
},
exportFileName(row) {
@@ -407,6 +401,9 @@
filename = filename.replace(RegExp(' ', 'g'), '_');
return filename;
},
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
+ },
},
};
</script>
diff --git a/src/views/Logs/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue
index b27aeba..af9df83 100644
--- a/src/views/Logs/Dumps/DumpsForm.vue
+++ b/src/views/Logs/Dumps/DumpsForm.vue
@@ -24,14 +24,16 @@
<alert variant="info" class="mb-3" :show="selectedDumpType === 'system'">
{{ $t('pageDumps.form.systemDumpInfo') }}
</alert>
- <b-button variant="primary" type="submit" form="form-new-dump">
+ <b-button
+ variant="primary"
+ type="submit"
+ form="form-new-dump"
+ class="mt-3"
+ >
{{ $t('pageDumps.form.initiateDump') }}
</b-button>
</b-form>
- <modal-confirmation
- :require-confirmation="selectedDumpType === 'system'"
- @ok="createSystemDump"
- />
+ <modal-confirmation v-model="showConfirmation" @ok="createSystemDump" />
</div>
</template>
@@ -44,19 +46,23 @@
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import i18n from '@/i18n';
import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
components: { Alert, ModalConfirmation },
mixins: [BVToastMixin, VuelidateMixin],
setup() {
+ const bvModal = useModal();
return {
v$: useVuelidate(),
+ bvModal,
};
},
data() {
return {
$t: useI18n().t,
selectedDumpType: null,
+ showConfirmation: false,
dumpTypeOptions: [
{ value: 'bmc', text: i18n.global.t('pageDumps.dumpTypes.bmcDump') },
{
@@ -99,7 +105,7 @@
}
},
showConfirmationModal() {
- this.$bvModal.show('modal-confirmation');
+ this.showConfirmation = true;
},
createSystemDump() {
this.$store
diff --git a/src/views/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
index 77f03b0..466f6ce 100644
--- a/src/views/Logs/Dumps/DumpsModalConfirmation.vue
+++ b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
@@ -26,7 +26,7 @@
>
{{ $t('global.form.required') }}
</b-form-invalid-feedback>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('global.action.cancel') }}
</b-button>
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 392125c..e149739 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -9,7 +9,7 @@
@change-search="onChangeSearchInput"
@clear-search="onClearSearchInput"
/>
- <div class="ml-sm-4">
+ <div class="ms-sm-4">
<table-cell-count
:filtered-items-count="filteredRows"
:total-number-of-cells="allLogs.length"
@@ -21,7 +21,7 @@
</b-col>
</b-row>
<b-row>
- <b-col class="text-right">
+ <b-col class="text-end">
<table-filter :filters="tableFilters" @filter-change="onFilterChange" />
<b-button
variant="link"
@@ -74,13 +74,13 @@
no-select-on-click
sort-icon-left
hover
- no-sort-reset
- sort-desc
+ must-sort
+ thead-class="table-light"
+ :sort-desc="[true]"
show-empty
- sort-by="id"
+ :sort-by="['id']"
:fields="fields"
:items="filteredLogs"
- :sort-compare="onSortCompare"
:empty-text="$t('global.table.emptyMessage')"
:empty-filtered-text="$t('global.table.emptySearchMessage')"
:per-page="perPage"
@@ -96,9 +96,11 @@
v-model="tableHeaderCheckboxModel"
data-test-id="eventLogs-checkbox-selectAll"
:indeterminate="tableHeaderCheckboxIndeterminate"
- @change="onChangeHeaderCheckbox($refs.table)"
+ @change="onChangeHeaderCheckbox($refs.table, $event)"
>
- <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectAll') }}
+ </span>
</b-form-checkbox>
</template>
<template #cell(checkbox)="row">
@@ -107,7 +109,9 @@
:data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
@change="toggleSelectRow($refs.table, row.index)"
>
- <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectItem') }}
+ </span>
</b-form-checkbox>
</template>
@@ -120,7 +124,8 @@
class="btn-icon-only"
@click="toggleRowDetails(row)"
>
- <icon-chevron />
+ <icon-chevron v-if="!row.detailsShowing" />
+ <icon-chevron-up v-else />
</b-button>
</template>
@@ -181,7 +186,9 @@
<span v-if="row.item.status">
{{ $t('pageEventLogs.resolved') }}
</span>
- <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
+ <span v-else>
+ {{ $t('pageEventLogs.unresolved') }}
+ </span>
</b-form-checkbox>
</template>
<template #cell(filterByStatus)="{ value }">
@@ -244,6 +251,7 @@
import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
import IconExport from '@carbon/icons-vue/es/document--export/20';
import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import IconChevronUp from '@carbon/icons-vue/es/chevron--up/20';
import IconDownload from '@carbon/icons-vue/es/download/20';
import { omit } from 'lodash';
@@ -280,6 +288,7 @@
} from '@/components/Mixins/SearchFilterMixin';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
components: {
@@ -287,6 +296,7 @@
IconExport,
IconTrashcan,
IconChevron,
+ IconChevronUp,
IconDownload,
PageTitle,
Search,
@@ -315,6 +325,10 @@
this.hideLoader();
next();
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
@@ -361,7 +375,7 @@
key: 'actions',
sortable: false,
label: '',
- tdClass: 'text-right text-nowrap',
+ tdClass: 'text-end text-nowrap',
},
],
tableFilters:
@@ -495,23 +509,23 @@
})
.catch(({ message }) => this.errorToast(message));
},
- deleteAllLogs() {
- this.$bvModal
- .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteAllMessage'), {
+ async deleteAllLogs() {
+ const ok = await this.confirmDialog(
+ i18n.global.t('pageEventLogs.modal.deleteAllMessage'),
+ {
title: i18n.global.t('pageEventLogs.modal.deleteAllTitle'),
okTitle: i18n.global.t('global.action.delete'),
okVariant: 'danger',
cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'cancel',
- })
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.$store
- .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
- .then((message) => this.successToast(message))
- .catch(({ message }) => this.errorToast(message));
- }
- });
+ },
+ );
+ if (ok) {
+ this.$store
+ .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
+ .then((message) => this.successToast(message))
+ .catch(({ message }) => this.errorToast(message));
+ }
},
deleteLogs(uris) {
this.$store
@@ -537,66 +551,48 @@
onFilterChange({ activeFilters }) {
this.activeFilters = activeFilters;
},
- onSortCompare(a, b, key) {
- if (key === 'severity') {
- return this.sortStatus(a, b, key);
- }
- },
onTableRowAction(action, { uri }) {
if (action === 'delete') {
- this.$bvModal
- .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteMessage'), {
- title: i18n.global.t('pageEventLogs.modal.deleteTitle'),
+ this.confirmDialog(i18n.global.t('pageEventLogs.modal.deleteMessage'), {
+ title: i18n.global.t('pageEventLogs.modal.deleteTitle'),
+ okTitle: i18n.global.t('global.action.delete'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ }).then((deleteConfirmed) => {
+ if (deleteConfirmed) this.deleteLogs([uri]);
+ });
+ }
+ },
+ async onBatchAction(action) {
+ if (action === 'delete') {
+ const uris = this.selectedRows.map((row) => row.uri);
+ const count = this.selectedRows.length;
+ const ok = await this.confirmDialog(
+ i18n.global.t('pageEventLogs.modal.deleteMessage', count),
+ {
+ title: i18n.global.t('pageEventLogs.modal.deleteTitle', count),
okTitle: i18n.global.t('global.action.delete'),
cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
- })
- .then((deleteConfirmed) => {
- if (deleteConfirmed) this.deleteLogs([uri]);
- });
- }
- },
- onBatchAction(action) {
- if (action === 'delete') {
- const uris = this.selectedRows.map((row) => row.uri);
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t(
- 'pageEventLogs.modal.deleteMessage',
- this.selectedRows.length,
- ),
- {
- title: i18n.global.t(
- 'pageEventLogs.modal.deleteTitle',
- this.selectedRows.length,
- ),
- okTitle: i18n.global.t('global.action.delete'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- if (this.selectedRows.length === this.allLogs.length) {
- this.$store
- .dispatch(
- 'eventLog/deleteAllEventLogs',
- this.selectedRows.length,
- )
- .then(() => {
- this.successToast(
- i18n.global.t(
- 'pageEventLogs.toast.successDelete',
- uris.length,
- ),
- );
- })
- .catch(({ message }) => this.errorToast(message));
- } else {
- this.deleteLogs(uris);
- }
- }
- });
+ },
+ );
+ if (ok) {
+ if (this.selectedRows.length === this.allLogs.length) {
+ this.$store
+ .dispatch('eventLog/deleteAllEventLogs', this.selectedRows.length)
+ .then(() => {
+ this.successToast(
+ i18n.global.t(
+ 'pageEventLogs.toast.successDelete',
+ uris.length,
+ ),
+ );
+ })
+ .catch(({ message }) => this.errorToast(message));
+ } else {
+ this.deleteLogs(uris);
+ }
+ }
}
},
onChangeDateTimeFilter({ fromDate, toDate }) {
@@ -647,6 +643,9 @@
});
});
},
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
+ },
},
};
</script>
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index 6d8ff90..62caccf 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -8,7 +8,7 @@
@change-search="onChangeSearchInput"
@clear-search="onClearSearchInput"
/>
- <div class="ml-sm-4">
+ <div class="ms-sm-4">
<table-cell-count
:filtered-items-count="filteredRows"
:total-number-of-cells="allLogs.length"
@@ -20,7 +20,7 @@
</b-col>
</b-row>
<b-row>
- <b-col xl="12" class="text-right">
+ <b-col xl="12" class="text-end">
<b-button
variant="link"
:disabled="allLogs.length === 0"
@@ -34,7 +34,8 @@
:download="exportFileNameByDate()"
:href="href"
>
- <icon-export /> {{ $t('pagePostCodeLogs.button.exportAll') }}
+ <icon-export />
+ {{ $t('pagePostCodeLogs.button.exportAll') }}
</b-button>
</b-col>
</b-row>
@@ -42,7 +43,9 @@
<b-col>
<table-toolbar
ref="toolbar"
- :selected-items-count="selectedRows.length"
+ :selected-items-count="
+ Array.isArray(selectedRows) ? selectedRows.length : 0
+ "
@clear-selected="clearSelectedRows($refs.table)"
>
<template #toolbar-buttons>
@@ -60,10 +63,11 @@
no-select-on-click
sort-icon-left
hover
- no-sort-reset
- sort-desc
+ must-sort
+ thead-class="table-light"
+ :sort-desc="[true]"
show-empty
- sort-by="id"
+ :sort-by="['id']"
:fields="fields"
:items="filteredLogs"
:empty-text="$t('global.table.emptyMessage')"
@@ -81,9 +85,11 @@
v-model="tableHeaderCheckboxModel"
data-test-id="postCode-checkbox-selectAll"
:indeterminate="tableHeaderCheckboxIndeterminate"
- @change="onChangeHeaderCheckbox($refs.table)"
+ @change="onChangeHeaderCheckbox($refs.table, $event)"
>
- <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectAll') }}
+ </span>
</b-form-checkbox>
</template>
<template #cell(checkbox)="row">
@@ -92,7 +98,9 @@
:data-test-id="`postCode-checkbox-selectRow-${row.index}`"
@change="toggleSelectRow($refs.table, row.index)"
>
- <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectItem') }}
+ </span>
</b-form-checkbox>
</template>
<!-- Date column -->
@@ -111,9 +119,12 @@
:row-data="row.item"
:btn-icon-only="true"
:export-name="exportFileNameByDate(action.value)"
- :download-location="row.item.uri"
- :download-in-new-tab="true"
- :show-button="false"
+ :download-location="
+ action.value === 'download' ? '' : row.item.uri
+ "
+ :download-in-new-tab="false"
+ :show-button="action.value === 'download' ? true : false"
+ @click-table-action="onRowAction(action.value, row.item)"
>
<template #icon>
<icon-export v-if="action.value === 'export'" />
@@ -188,6 +199,7 @@
} from '@/components/Mixins/SearchFilterMixin';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
components: {
@@ -218,6 +230,10 @@
this.hideLoader();
next();
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
@@ -247,7 +263,7 @@
{
key: 'actions',
label: '',
- tdClass: 'text-right text-nowrap',
+ tdClass: 'text-end text-nowrap',
},
],
expandRowLabel,
@@ -317,23 +333,37 @@
});
},
methods: {
- deleteAllLogs() {
- this.$bvModal
- .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteAllMessage'), {
+ onRowAction(action, item) {
+ if (action === 'download') {
+ this.$store
+ .dispatch('postCodeLogs/downloadEntry', item.uri)
+ .then((blob) => {
+ const link = document.createElement('a');
+ link.href = URL.createObjectURL(blob);
+ link.download = this.exportFileNameByDate('download');
+ link.click();
+ URL.revokeObjectURL(link.href);
+ })
+ .catch(({ message }) => this.errorToast(message));
+ }
+ },
+ async deleteAllLogs() {
+ const deleteConfirmed = await this.confirmDialog(
+ i18n.global.t('pageEventLogs.modal.deleteAllMessage'),
+ {
title: i18n.global.t('pageEventLogs.modal.deleteAllTitle'),
okTitle: i18n.global.t('global.action.delete'),
okVariant: 'danger',
cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'cancel',
- })
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.$store
- .dispatch('postCodeLogs/deleteAllPostCodeLogs', this.allLogs)
- .then((message) => this.successToast(message))
- .catch(({ message }) => this.errorToast(message));
- }
- });
+ },
+ );
+ if (deleteConfirmed) {
+ this.$store
+ .dispatch('postCodeLogs/deleteAllPostCodeLogs', this.allLogs)
+ .then((message) => this.successToast(message))
+ .catch(({ message }) => this.errorToast(message));
+ }
},
exportAllLogsString() {
{
@@ -372,6 +402,9 @@
}
return fileName + date;
},
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
+ },
},
};
</script>