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)