diff --git a/src/plugins/notificationIndicator/components/NotificationIndicator.vue b/src/plugins/notificationIndicator/components/NotificationIndicator.vue index 099c2227fb..28a9e9bda0 100644 --- a/src/plugins/notificationIndicator/components/NotificationIndicator.vue +++ b/src/plugins/notificationIndicator/components/NotificationIndicator.vue @@ -43,6 +43,7 @@ :notifications="notifications" @close="toggleNotificationsList" @clear-all="dismissAllNotifications" + @dismissed="updateNotifications" /> @@ -72,8 +73,8 @@ export default { this.openmct.notifications.on('dismiss-all', this.updateNotifications); }, unmounted() { - this.openmct.notifications.of('notification', this.updateNotifications); - this.openmct.notifications.of('dismiss-all', this.updateNotifications); + this.openmct.notifications.off('notification', this.updateNotifications); + this.openmct.notifications.off('dismiss-all', this.updateNotifications); }, methods: { dismissAllNotifications() { diff --git a/src/plugins/notificationIndicator/components/NotificationMessage.vue b/src/plugins/notificationIndicator/components/NotificationMessage.vue index 0118b173f2..569017ea0f 100644 --- a/src/plugins/notificationIndicator/components/NotificationMessage.vue +++ b/src/plugins/notificationIndicator/components/NotificationMessage.vue @@ -72,16 +72,9 @@ export default { notification: { type: Object, required: true - }, - closeOverlay: { - type: Function, - required: true - }, - notificationsCount: { - type: Number, - required: true } }, + emits: ['dismissed'], data() { return { isProgressNotification: false, @@ -98,6 +91,8 @@ export default { } }, mounted() { + this.notification.once('destroy', this.dismissNotification); + if (this.notification.model.progressPerc) { this.isProgressNotification = true; this.notification.on('progress', this.updateProgressBar); @@ -110,9 +105,13 @@ export default { }, dismiss() { this.notification.dismiss(); - if (this.notificationsCount === 1) { - this.closeOverlay(); + }, + dismissNotification() { + if (this.isProgressNotification) { + this.notification.off('progress', this.updateProgressBar); } + + this.$emit('dismissed'); } } }; diff --git a/src/plugins/notificationIndicator/components/NotificationsList.vue b/src/plugins/notificationIndicator/components/NotificationsList.vue index 1a6d92fd1a..4ec07aeb55 100644 --- a/src/plugins/notificationIndicator/components/NotificationsList.vue +++ b/src/plugins/notificationIndicator/components/NotificationsList.vue @@ -31,9 +31,8 @@ @@ -53,12 +52,15 @@ export default { required: true } }, - emits: ['clear-all', 'close'], + emits: ['clear-all', 'close', 'dismissed'], computed: { + notificationsCount() { + return this.notifications.length; + }, notificationsCountDisplayMessage() { - return this.notifications.length > 1 || this.notifications.length === 0 - ? `Displaying ${this.notifications.length} notifications` - : `Displaying ${this.notifications.length} notification`; + return this.notificationsCount > 1 || this.notificationsCount === 0 + ? `Displaying ${this.notificationsCount} notifications` + : `Displaying ${this.notificationsCount} notification`; } }, mounted() { @@ -85,8 +87,12 @@ export default { } }); }, - closeOverlay() { - this.overlay.dismiss(); + notificationDismissed() { + if (this.notificationsCount === 1) { + this.overlay.dismiss(); + } + + this.$emit('dismissed'); } } };