Use new service methods to load notification data correctly (wip)

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;
 

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();
   }
 }

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,
   ) {

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();
   }
 }

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<boolean> {
+    return this
+      .ianService
+      .query
+      .unread$
+      .pipe(
+        map((notifications) => !!notifications.find((notification) => notification._links.activity?.href === activityHref)),
+      );
   }
 
   public toggleComments() {

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()"
           ></activity-entry>
         </div>

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<number> {
   const ianService = injector.get(InAppNotificationsService);
 
-  return ianService
-    .notificationsOfWpLoaded
+  return ianService.query.unread$
     .pipe(
-      map((data) => data._embedded.elements.length),
+      map((data) => data.length),
     );
 }

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<boolean> = 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;

frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html

@@ -30,7 +30,7 @@
                                [showText]="false">
             </wp-watcher-button>
           </li>
-          <li class="toolbar-item" *ngIf="displayNotificationsButton">
+          <li class="toolbar-item" *ngIf="displayNotificationsButton$ | async">
             <op-work-package-mark-notification-button
               [workPackage]="workPackage"
               buttonClasses="toolbar-icon"

frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.component.ts

@@ -26,9 +26,7 @@
 // See docs/COPYRIGHT.rdoc for more details.
 //++
 
-import {
-  ChangeDetectionStrategy, Component, Injector, OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
 import { StateService } from '@uirouter/core';
 import { WorkPackageViewFocusService } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-focus.service';
 import { States } from 'core-app/core/states/states.service';
@@ -42,7 +40,7 @@ import { WorkPackageSingleViewBase } from 'core-app/features/work-packages/routi
 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 { BackRoutingService } from 'core-app/features/work-packages/components/back-routing/back-routing.service';
-import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service';
+import { Observable } from 'rxjs';
 
 @Component({
   templateUrl: './wp-split-view.html',
@@ -59,7 +57,7 @@ export class WorkPackageSplitViewComponent extends WorkPackageSingleViewBase imp
   /** Reference to the base route e.g., work-packages.partitioned.list or bim.partitioned.split */
   private baseRoute:string = this.$state.current.data.baseRoute;
 
-  private displayNotificationsButton:boolean;
+  public displayNotificationsButton$:Observable<boolean> = 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';
-  }
 }

frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.html

@@ -10,7 +10,7 @@
         <wp-breadcrumb [workPackage]="workPackage"></wp-breadcrumb>
 
         <op-work-package-mark-notification-button
-          *ngIf="showNotificationsButton()"
+          *ngIf="(displayNotificationsButton$ | async) && keepTab.currentTabIdentifier === 'activity'"
           class="work-packages--details-button"
           [workPackage]="workPackage"
           buttonClasses="-round"