MOBILE-2567 notifications: Add spiner on notifications mark all as read

main
Pau Ferrer Ocaña 2018-09-05 12:04:23 +02:00
parent 0fbb1e2fd2
commit 307aab820a
2 changed files with 27 additions and 14 deletions

View File

@ -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>

View File

@ -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;
});
} }
/** /**