MOBILE-2567 notifications: Add spiner on notifications mark all as read
parent
0fbb1e2fd2
commit
307aab820a
|
@ -9,10 +9,13 @@
|
||||||
</ion-refresher>
|
</ion-refresher>
|
||||||
<core-loading [hideUntil]="notificationsLoaded">
|
<core-loading [hideUntil]="notificationsLoaded">
|
||||||
<div padding *ngIf="canMarkAllNotificationsAsRead">
|
<div padding *ngIf="canMarkAllNotificationsAsRead">
|
||||||
<button ion-button block (click)="markAllNotificationsAsRead()" color="light" icon-start>
|
<button ion-button block (click)="markAllNotificationsAsRead()" color="light" icon-start *ngIf="!loadingMarkAllNotificationsAsRead">
|
||||||
<core-icon name="fa-check"></core-icon>
|
<core-icon name="fa-check"></core-icon>
|
||||||
{{ 'addon.notifications.markallread' | translate }}
|
{{ 'addon.notifications.markallread' | translate }}
|
||||||
</button>
|
</button>
|
||||||
|
<button ion-button block color="light" icon-start *ngIf="loadingMarkAllNotificationsAsRead">
|
||||||
|
<ion-spinner></ion-spinner>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<ion-card *ngFor="let notification of notifications">
|
<ion-card *ngFor="let notification of notifications">
|
||||||
<ion-item>
|
<ion-item>
|
||||||
|
|
|
@ -37,6 +37,7 @@ export class AddonNotificationsListPage {
|
||||||
notificationsLoaded = false;
|
notificationsLoaded = false;
|
||||||
canLoadMore = false;
|
canLoadMore = false;
|
||||||
canMarkAllNotificationsAsRead = false;
|
canMarkAllNotificationsAsRead = false;
|
||||||
|
loadingMarkAllNotificationsAsRead = false;
|
||||||
|
|
||||||
protected readCount = 0;
|
protected readCount = 0;
|
||||||
protected unreadCount = 0;
|
protected unreadCount = 0;
|
||||||
|
@ -118,15 +119,6 @@ export class AddonNotificationsListPage {
|
||||||
this.canLoadMore = true;
|
this.canLoadMore = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if mark all notifications as read is enabled and there are some to read.
|
|
||||||
if (this.notificationsProvider.isMarkAllNotificationsAsReadEnabled()) {
|
|
||||||
promises.push(this.notificationsProvider.getUnreadNotificationsCount().then((unread) => {
|
|
||||||
this.canMarkAllNotificationsAsRead = unread > 0;
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
this.canMarkAllNotificationsAsRead = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.all(promises).then(() => {
|
return Promise.all(promises).then(() => {
|
||||||
// Mark retrieved notifications as read if they are not.
|
// Mark retrieved notifications as read if they are not.
|
||||||
this.markNotificationsAsRead(unread);
|
this.markNotificationsAsRead(unread);
|
||||||
|
@ -141,15 +133,17 @@ export class AddonNotificationsListPage {
|
||||||
* Mark all notifications as read.
|
* Mark all notifications as read.
|
||||||
*/
|
*/
|
||||||
markAllNotificationsAsRead(): void {
|
markAllNotificationsAsRead(): void {
|
||||||
this.notificationsProvider.markAllNotificationsAsRead().then(() => {
|
this.loadingMarkAllNotificationsAsRead = true;
|
||||||
|
this.notificationsProvider.markAllNotificationsAsRead().catch(() => {
|
||||||
|
// Omit failure.
|
||||||
|
}).finally(() => {
|
||||||
const siteId = this.sitesProvider.getCurrentSiteId();
|
const siteId = this.sitesProvider.getCurrentSiteId();
|
||||||
this.eventsProvider.trigger(AddonNotificationsProvider.READ_CHANGED_EVENT, null, siteId);
|
this.eventsProvider.trigger(AddonNotificationsProvider.READ_CHANGED_EVENT, null, siteId);
|
||||||
|
|
||||||
this.notificationsProvider.getUnreadNotificationsCount().then((unread) => {
|
this.notificationsProvider.getUnreadNotificationsCount().then((unread) => {
|
||||||
this.canMarkAllNotificationsAsRead = unread > 0;
|
this.canMarkAllNotificationsAsRead = unread > 0;
|
||||||
|
this.loadingMarkAllNotificationsAsRead = false;
|
||||||
});
|
});
|
||||||
}).catch(() => {
|
|
||||||
// Omit failure.
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -159,12 +153,14 @@ export class AddonNotificationsListPage {
|
||||||
* @param {any[]} notifications Array of notification objects.
|
* @param {any[]} notifications Array of notification objects.
|
||||||
*/
|
*/
|
||||||
protected markNotificationsAsRead(notifications: any[]): void {
|
protected markNotificationsAsRead(notifications: any[]): void {
|
||||||
|
let promise;
|
||||||
|
|
||||||
if (notifications.length > 0) {
|
if (notifications.length > 0) {
|
||||||
const promises = notifications.map((notification) => {
|
const promises = notifications.map((notification) => {
|
||||||
return this.notificationsProvider.markNotificationRead(notification.id);
|
return this.notificationsProvider.markNotificationRead(notification.id);
|
||||||
});
|
});
|
||||||
|
|
||||||
Promise.all(promises).catch(() => {
|
promise = Promise.all(promises).catch(() => {
|
||||||
// Ignore errors.
|
// Ignore errors.
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
this.notificationsProvider.invalidateNotificationsList().finally(() => {
|
this.notificationsProvider.invalidateNotificationsList().finally(() => {
|
||||||
|
@ -172,7 +168,21 @@ export class AddonNotificationsListPage {
|
||||||
this.eventsProvider.trigger(AddonNotificationsProvider.READ_CHANGED_EVENT, null, siteId);
|
this.eventsProvider.trigger(AddonNotificationsProvider.READ_CHANGED_EVENT, null, siteId);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
promise = Promise.resolve();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
promise.finally(() => {
|
||||||
|
// Check if mark all notifications as read is enabled and there are some to read.
|
||||||
|
if (this.notificationsProvider.isMarkAllNotificationsAsReadEnabled()) {
|
||||||
|
this.loadingMarkAllNotificationsAsRead = true;
|
||||||
|
return this.notificationsProvider.getUnreadNotificationsCount().then((unread) => {
|
||||||
|
this.canMarkAllNotificationsAsRead = unread > 0;
|
||||||
|
this.loadingMarkAllNotificationsAsRead = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.canMarkAllNotificationsAsRead = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue