From c5caf237a67249e309dc118af0f959e061789533 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Tue, 24 Aug 2021 15:03:26 +0200 Subject: [PATCH] Use new service methods to load notification data correctly (wip) --- .../in-app-notification-center.component.ts | 23 +++++++++++------- .../facet/activate-facet-button.component.ts | 1 - .../store/in-app-notifications.service.ts | 2 +- ...kage-mark-notification-button.component.ts | 18 +++----------- .../activity-base.controller.ts | 23 +++++++++--------- .../activity-panel/activity-tab.html | 2 +- .../wp-notifications-count.function.ts | 5 ++-- .../wp-full-view/wp-full-view.component.ts | 20 +++++++--------- .../routing/wp-full-view/wp-full-view.html | 2 +- .../wp-split-view/wp-split-view.component.ts | 24 ++++++++----------- .../routing/wp-split-view/wp-split-view.html | 2 +- 11 files changed, 54 insertions(+), 68 deletions(-) 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 99ab65ed7f..8d4f4aa390 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 @@ -30,17 +30,16 @@ export class InAppNotificationCenterComponent implements OnInit { activeFacet$ = this.ianQuery.activeFacet$; notifications$ = this - .ianQuery + .ianService + .query .aggregatedNotifications$ .pipe( map((items) => Object.values(items)), ); - notificationsCount$ = this.ianQuery.selectCount(); + hasNotifications$ = this.ianService.query.hasNotifications$; - hasNotifications$ = this.ianQuery.hasNotifications$; - - hasMoreThanPageSize$ = this.ianQuery.hasMoreThanPageSize$; + hasMoreThanPageSize$ = this.ianService.query.hasMoreThanPageSize$; noResultText$ = this .activeFacet$ @@ -48,10 +47,16 @@ export class InAppNotificationCenterComponent implements OnInit { map((facet:'unread'|'all') => this.text.no_results[facet] || this.text.no_results.unread), ); - totalCountWarning$ = this.ianQuery.notLoaded$.pipe(map((notLoaded:number) => this.I18n.t( - 'js.notifications.center.total_count_warning', - { newest_count: NOTIFICATIONS_MAX_SIZE, more_count: notLoaded }, - ))); + totalCountWarning$ = this + .ianService + .query + .notLoaded$ + .pipe( + map((notLoaded:number) => this.I18n.t( + 'js.notifications.center.total_count_warning', + { newest_count: NOTIFICATIONS_MAX_SIZE, more_count: notLoaded }, + )), + ); maxSize = NOTIFICATIONS_MAX_SIZE; diff --git a/frontend/src/app/features/in-app-notifications/center/toolbar/facet/activate-facet-button.component.ts b/frontend/src/app/features/in-app-notifications/center/toolbar/facet/activate-facet-button.component.ts index 14c4e38181..a005c620de 100644 --- a/frontend/src/app/features/in-app-notifications/center/toolbar/facet/activate-facet-button.component.ts +++ b/frontend/src/app/features/in-app-notifications/center/toolbar/facet/activate-facet-button.component.ts @@ -30,6 +30,5 @@ export class ActivateFacetButtonComponent { activateFacet(facet:string):void { this.ianService.setActiveFacet(facet); - this.ianService.get(); } } diff --git a/frontend/src/app/features/in-app-notifications/store/in-app-notifications.service.ts b/frontend/src/app/features/in-app-notifications/store/in-app-notifications.service.ts index 3220ed6797..2c51609ce0 100644 --- a/frontend/src/app/features/in-app-notifications/store/in-app-notifications.service.ts +++ b/frontend/src/app/features/in-app-notifications/store/in-app-notifications.service.ts @@ -13,7 +13,7 @@ import { InAppNotification, NOTIFICATIONS_MAX_SIZE } from './in-app-notification export class InAppNotificationsService { constructor( private store:InAppNotificationsStore, - private query:InAppNotificationsQuery, + public query:InAppNotificationsQuery, private apiV3Service:APIV3Service, private notifications:NotificationsService, ) { diff --git a/frontend/src/app/features/work-packages/components/wp-buttons/wp-mark-notification-button/work-package-mark-notification-button.component.ts b/frontend/src/app/features/work-packages/components/wp-buttons/wp-mark-notification-button/work-package-mark-notification-button.component.ts index 0fc61f64c3..6dcfd1417d 100644 --- a/frontend/src/app/features/work-packages/components/wp-buttons/wp-mark-notification-button/work-package-mark-notification-button.component.ts +++ b/frontend/src/app/features/work-packages/components/wp-buttons/wp-mark-notification-button/work-package-mark-notification-button.component.ts @@ -1,23 +1,20 @@ import { - Component, ChangeDetectionStrategy, Input, OnInit, + Component, ChangeDetectionStrategy, Input, } from '@angular/core'; import { I18nService } from 'core-app/core/i18n/i18n.service'; import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service'; import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource'; -import { InAppNotification } from 'core-app/features/in-app-notifications/store/in-app-notification.model'; @Component({ selector: 'op-work-package-mark-notification-button', templateUrl: './work-package-mark-notification-button.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class WorkPackageMarkNotificationButtonComponent implements OnInit { +export class WorkPackageMarkNotificationButtonComponent { @Input() public workPackage:WorkPackageResource; @Input() public buttonClasses:string; - private belongingNotifications:InAppNotification[]; - text = { mark_as_read: this.I18n.t('js.notifications.center.mark_as_read'), }; @@ -28,16 +25,7 @@ export class WorkPackageMarkNotificationButtonComponent implements OnInit { ) { } - ngOnInit():void { - this - .ianService - .notificationsOfWpLoaded - .subscribe((notifications) => { - this.belongingNotifications = notifications._embedded.elements; - }); - } - markAllBelongingWPsAsRead():void { - this.ianService.markAsRead(this.belongingNotifications); + this.ianService.markAllRead(); } } diff --git a/frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-base.controller.ts b/frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-base.controller.ts index b4ad7ab6f8..2cfb1967c4 100644 --- a/frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-base.controller.ts +++ b/frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-base.controller.ts @@ -35,8 +35,10 @@ import { WorkPackagesActivityService } from 'core-app/features/work-packages/com import { I18nService } from 'core-app/core/i18n/i18n.service'; import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin'; import { APIV3Service } from 'core-app/core/apiv3/api-v3.service'; -import { InAppNotification, NOTIFICATIONS_MAX_SIZE } from 'core-app/features/in-app-notifications/store/in-app-notification.model'; +import { InAppNotification } from 'core-app/features/in-app-notifications/store/in-app-notification.model'; import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; @Directive() export class ActivityPanelBaseController extends UntilDestroyedMixin implements OnInit { @@ -97,16 +99,9 @@ export class ActivityPanelBaseController extends UntilDestroyedMixin implements this.ianService.setActiveFacet('unread'); this.ianService.setActiveFilters([ - ['resourceId', '=', [workPackageId]], + ['resourceId', '=', [this.workPackageId]], ['resourceType', '=', ['WorkPackage']], ]); - this.ianService.fetchNotifications(); - - - this.ianService.loadNotificationsOfWorkPackage(this.workPackageId); - this.ianService.notificationsOfWpLoaded.subscribe((notificationCollection) => { - this.notifications = notificationCollection._embedded.elements; - }); } protected updateActivities(activities:HalResource[]) { @@ -138,8 +133,14 @@ export class ActivityPanelBaseController extends UntilDestroyedMixin implements .filter((activity:HalResource) => !!_.get(activity, 'comment.html')); } - protected hasUnreadNotification(activityHref:string):boolean { - return !!this.notifications.find((notification) => notification._links.activity?.href === activityHref); + protected hasUnreadNotification(activityHref:string):Observable { + return this + .ianService + .query + .unread$ + .pipe( + map((notifications) => !!notifications.find((notification) => notification._links.activity?.href === activityHref)), + ); } public toggleComments() { diff --git a/frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-tab.html b/frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-tab.html index 79e9437e83..dc32983e55 100644 --- a/frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-tab.html +++ b/frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-tab.html @@ -28,7 +28,7 @@ [workPackage]="workPackage" [activity]="inf.activity" [activityNo]="inf.number(inf.isReversed)" - [hasUnreadNotification]="hasUnreadNotification(inf.href)" + [hasUnreadNotification]="hasUnreadNotification(inf.href) | async" [isInitial]="inf.isInitial()" > diff --git a/frontend/src/app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-notifications-count.function.ts b/frontend/src/app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-notifications-count.function.ts index 760cb61a80..8137662cdc 100644 --- a/frontend/src/app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-notifications-count.function.ts +++ b/frontend/src/app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-notifications-count.function.ts @@ -12,9 +12,8 @@ export function workPackageNotificationsCount( ):Observable { const ianService = injector.get(InAppNotificationsService); - return ianService - .notificationsOfWpLoaded + return ianService.query.unread$ .pipe( - map((data) => data._embedded.elements.length), + map((data) => data.length), ); } diff --git a/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.component.ts b/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.component.ts index e548fa6e23..63a58f8afb 100644 --- a/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.component.ts +++ b/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.component.ts @@ -29,7 +29,7 @@ import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource'; import { StateService } from '@uirouter/core'; import { Component, Injector, OnInit } from '@angular/core'; -import { of } from 'rxjs'; +import { Observable, of } from 'rxjs'; import { WorkPackageViewSelectionService } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-selection.service'; import { WorkPackageSingleViewBase } from 'core-app/features/work-packages/routing/wp-view-base/work-package-single-view.base'; import { InAppNotificationsQuery } from 'core-app/features/in-app-notifications/store/in-app-notifications.query'; @@ -37,7 +37,6 @@ import { InAppNotificationsStore } from 'core-app/features/in-app-notifications/ import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service'; import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service'; import { WorkPackageNotificationService } from 'core-app/features/work-packages/services/notifications/work-package-notification.service'; -import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service'; @Component({ templateUrl: './wp-full-view.html', @@ -57,7 +56,7 @@ export class WorkPackagesFullViewComponent extends WorkPackageSingleViewBase imp public displayWatchButton:boolean; - displayNotificationsButton = false; + public displayNotificationsButton$:Observable = this.ianService.query.hasNotifications$; public watchers:any; @@ -90,7 +89,13 @@ export class WorkPackagesFullViewComponent extends WorkPackageSingleViewBase imp // Set Focused WP this.wpTableFocus.updateFocus(this.workPackage.id!); - this.ianService.loadNotificationsOfWorkPackage(this.workPackage.id || ''); + if (this.workPackage.id) { + this.ianService.setActiveFacet('unread'); + this.ianService.setActiveFilters([ + ['resourceId', '=', [this.workPackage.id]], + ['resourceType', '=', ['WorkPackage']], + ]); + } this.setWorkPackageScopeProperties(this.workPackage); } @@ -99,13 +104,6 @@ export class WorkPackagesFullViewComponent extends WorkPackageSingleViewBase imp this.isWatched = wp.hasOwnProperty('unwatch'); this.displayWatchButton = wp.hasOwnProperty('unwatch') || wp.hasOwnProperty('watch'); - this - .ianService - .notificationsOfWpLoaded - .subscribe((notifications) => { - this.displayNotificationsButton = notifications.count > 0; - }); - // watchers if (wp.watchers) { this.watchers = (wp.watchers as any).elements; diff --git a/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html b/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html index 8394796944..024b2bdf8e 100644 --- a/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html +++ b/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html @@ -30,7 +30,7 @@ [showText]="false"> -
  • +
  • = this.ianService.query.hasNotifications$; constructor( public injector:Injector, @@ -108,11 +106,13 @@ export class WorkPackageSplitViewComponent extends WorkPackageSingleViewBase imp } }); - this.ianService.loadNotificationsOfWorkPackage(wpId.toString()); - - this.ianService.notificationsOfWpLoaded.subscribe((notifications) => { - this.displayNotificationsButton = notifications.count > 0; - }); + if (wpId) { + this.ianService.setActiveFacet('unread'); + this.ianService.setActiveFilters([ + ['resourceId', '=', [wpId]], + ['resourceType', '=', ['WorkPackage']], + ]); + } } get shouldFocus():boolean { @@ -126,8 +126,4 @@ export class WorkPackageSplitViewComponent extends WorkPackageSingleViewBase imp backToList():void { this.backRouting.goToBaseState(); } - - showNotificationsButton():boolean { - return this.displayNotificationsButton && this.keepTab.currentTabIdentifier === 'activity'; - } } diff --git a/frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.html b/frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.html index cfbe403432..08463a9e72 100644 --- a/frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.html +++ b/frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.html @@ -10,7 +10,7 @@