diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml
index e4c3a4158f..2bcbafe228 100644
--- a/config/locales/js-en.yml
+++ b/config/locales/js-en.yml
@@ -561,6 +561,7 @@ en:
notifications:
title: "Notifications"
channel: "Channel"
+ no_unread: "No unread notifications"
channels:
in_app: "In-app"
mail: "Email"
diff --git a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html
index 42badb39af..6b8cbab0a6 100644
--- a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html
+++ b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html
@@ -66,7 +66,7 @@
class="generic-table--no-results-title"
>
- {{ text.no_results }}
+ {{ noResultText$ | async }}
diff --git a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts
index c897fc3fa1..4115b2c56c 100644
--- a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts
+++ b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts
@@ -1,5 +1,10 @@
import {
- ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnInit,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ Inject,
+ OnInit,
} from '@angular/core';
import { OpModalComponent } from 'core-app/shared/components/modal/modal.component';
import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
@@ -8,6 +13,7 @@ import { I18nService } from 'core-app/core/i18n/i18n.service';
import { InAppNotificationsQuery } from 'core-app/features/in-app-notifications/store/in-app-notifications.query';
import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service';
import { NOTIFICATIONS_MAX_SIZE } from 'core-app/features/in-app-notifications/store/in-app-notification.model';
+import { map } from 'rxjs/operators';
@Component({
selector: 'op-in-app-notification-center',
@@ -26,6 +32,12 @@ export class InAppNotificationCenterComponent extends OpModalComponent implement
hasMoreThanPageSize$ = this.ianQuery.hasMoreThanPageSize$;
+ noResultText$ = this
+ .activeFacet$
+ .pipe(
+ map((facet:'unread'|'all') => this.text.no_results[facet] || this.text.no_results.unread),
+ );
+
maxSize = NOTIFICATIONS_MAX_SIZE;
facets:string[] = ['unread', 'all'];
@@ -34,7 +46,10 @@ export class InAppNotificationCenterComponent extends OpModalComponent implement
title: this.I18n.t('js.notifications.title'),
mark_all_read: this.I18n.t('js.notifications.center.mark_all_read'),
button_close: this.I18n.t('js.button_close'),
- no_results: this.I18n.t('js.notice_no_results_to_display'),
+ no_results: {
+ unread: this.I18n.t('js.notifications.no_unread'),
+ all: this.I18n.t('js.notice_no_results_to_display'),
+ },
facets: {
unread: this.I18n.t('js.notifications.facets.unread'),
all: this.I18n.t('js.notifications.facets.all'),
@@ -56,17 +71,17 @@ export class InAppNotificationCenterComponent extends OpModalComponent implement
this.ianService.get();
}
- markAllRead() {
+ markAllRead():void {
this.ianService.markAllRead();
this.closeMe();
}
- activateFacet(facet:string) {
+ activateFacet(facet:string):void {
this.ianService.setActiveFacet(facet);
this.ianService.get();
}
- totalCountWarning() {
+ totalCountWarning():string {
const state = this.ianQuery.getValue();
return this.I18n.t(
diff --git a/frontend/src/app/features/in-app-notifications/store/in-app-notifications.store.ts b/frontend/src/app/features/in-app-notifications/store/in-app-notifications.store.ts
index 796100e090..c53b8280da 100644
--- a/frontend/src/app/features/in-app-notifications/store/in-app-notifications.store.ts
+++ b/frontend/src/app/features/in-app-notifications/store/in-app-notifications.store.ts
@@ -5,6 +5,8 @@ import { InAppNotification } from './in-app-notification.model';
export interface InAppNotificationsState extends EntityState {
/** The entities in the store might not all be unread so we keep separate count */
unreadCount:number;
+ /** Number of elements not showing after max values loaded */
+ notShowing:number;
activeFacet:string;
expanded:boolean;
}
diff --git a/spec/support/components/notifications/center.rb b/spec/support/components/notifications/center.rb
index 8b3713d3e1..eecb1850bf 100644
--- a/spec/support/components/notifications/center.rb
+++ b/spec/support/components/notifications/center.rb
@@ -93,7 +93,7 @@ module Components
end
def expect_empty
- expect(page).to have_text I18n.t('js.notice_no_results_to_display')
+ expect(page).to have_text 'No unread notifications'
end
def expect_bell_count(count)