fix(ui): make notification countdown update reactively

The "Time Until" field in NotificationsView was not updating when
refresh was clicked or over time because the computed property used
Date.now() directly, which is evaluated once and doesn't trigger
reactive updates.

Changes:
- Add reactive currentTime property that updates every second
- Set up interval in mounted() to keep countdown live
- Clean up interval in beforeUnmount() to prevent memory leaks
- Update timeUntilNext computed to use reactive currentTime
- Update refreshNotifications() to immediately refresh currentTime

The countdown now updates automatically every second and immediately
when the refresh button is clicked, without requiring navigation away
and back to the view.
This commit is contained in:
Jose Olarte III
2026-01-06 17:38:59 +08:00
parent 20f15ebcea
commit f446362984

View File

@@ -139,9 +139,22 @@ class NotificationsView extends Vue {
errorMessage = ''
notificationStatus: NotificationStatus | null = null
rolloverInfo: RolloverInfo | null = null
currentTime = Date.now()
private timeUpdateInterval: number | null = null
async mounted() {
await this.refreshNotifications()
// Update current time every second to keep countdown reactive
this.timeUpdateInterval = window.setInterval(() => {
this.currentTime = Date.now()
}, 1000)
}
beforeUnmount() {
if (this.timeUpdateInterval !== null) {
clearInterval(this.timeUpdateInterval)
this.timeUpdateInterval = null
}
}
goBack() {
@@ -151,6 +164,8 @@ class NotificationsView extends Vue {
async refreshNotifications() {
this.isLoading = true
this.errorMessage = ''
// Update current time immediately to refresh countdown
this.currentTime = Date.now()
try {
const platform = Capacitor.getPlatform()
@@ -231,8 +246,7 @@ class NotificationsView extends Vue {
get timeUntilNext(): string | null {
if (!this.nextNotificationTime) return null
const now = Date.now()
const diff = this.nextNotificationTime - now
const diff = this.nextNotificationTime - this.currentTime
if (diff < 0) return 'Past due'