Do not load notifications when notifo is used.

frontend/src/app/shell/declarations.ts

@@ -12,6 +12,7 @@ export * from './pages/home/home-page.component';
 export * from './pages/internal/apps-menu.component';
 export * from './pages/internal/internal-area.component';
 export * from './pages/internal/logo.component';
+export * from './pages/internal/notification-dropdown.component';
 export * from './pages/internal/notifications-menu.component';
 export * from './pages/internal/profile-menu.component';
 export * from './pages/internal/search-menu.component';

frontend/src/app/shell/module.ts

@@ -7,6 +7,7 @@
 
 import { NgModule } from '@angular/core';
 import { SqxFrameworkModule, SqxSharedModule } from '@app/shared';
+import { NotificationDropdownComponent } from '.';
 import { AppAreaComponent, AppsMenuComponent, ForbiddenPageComponent, HomePageComponent, InternalAreaComponent, LeftMenuComponent, LoginPageComponent, LogoComponent, LogoutPageComponent, NotFoundPageComponent, NotificationsMenuComponent, ProfileMenuComponent, SearchMenuComponent } from './declarations';
 
 @NgModule({
@@ -32,6 +33,7 @@ import { AppAreaComponent, AppsMenuComponent, ForbiddenPageComponent, HomePageCo
         LogoComponent,
         LogoutPageComponent,
         NotFoundPageComponent,
+        NotificationDropdownComponent,
         NotificationsMenuComponent,
         ProfileMenuComponent,
         SearchMenuComponent,

frontend/src/app/shell/pages/internal/notification-dropdown.component.html

@@ -0,0 +1,26 @@
+<li class="nav-item nav-icon dropdown position-relative" #button>
+    <span class="nav-link dropdown-toggle" (click)="modalMenu.show()">
+        <i class="icon-comments"></i>
+
+        <span class="badge rounded-pill badge-danger" *ngIf="unread">{{unread}}</span>
+    </span>
+</li>
+
+<ng-container *sqxModal="modalMenu;onRoot:false">
+    <sqx-dropdown-menu [scrollTop]="scrollMe.nativeElement.scrollHeight" [sqxAnchoredTo]="button" [offsetY]="10" #scrollMe>
+        <ng-container *ngIf="commentsState.comments | async; let comments">
+            <small class="text-muted" *ngIf="comments.length === 0">
+                {{ 'notifications.empty' | sqxTranslate}}
+            </small>
+
+            <sqx-comment *ngFor="let comment of comments; trackBy: trackByComment"
+                [comment]="comment"
+                [commentsState]="commentsState"
+                [confirmDelete]="false"
+                [canDelete]="true"
+                [canFollow]="true"
+                [userToken]="userToken">
+            </sqx-comment>
+        </ng-container>
+    </sqx-dropdown-menu>
+</ng-container>

frontend/src/app/shell/pages/internal/notification-dropdown.component.scss

@@ -0,0 +1,16 @@
+@import 'mixins';
+@import 'vars';
+
+.dropdown-menu {
+    max-height: 500px;
+    min-height: 4rem;
+    overflow-y: scroll;
+    padding: 1.25rem;
+    padding-bottom: 1rem;
+    width: 300px;
+}
+
+.badge {
+    @include absolute(-.5rem, 0, null, null);
+    font-size: 80%;
+}

frontend/src/app/shell/pages/internal/notification-dropdown.component.ts

@@ -0,0 +1,88 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { timer } from 'rxjs';
+import { onErrorResumeNext, switchMap, tap } from 'rxjs/operators';
+import { AuthService, CommentDto, CommentsService, CommentsState, DialogService, LocalStoreService, ModalModel, ResourceOwner, Settings } from '@app/shared';
+
+@Component({
+    selector: 'sqx-notification-dropdown',
+    styleUrls: ['./notification-dropdown.component.scss'],
+    templateUrl: './notification-dropdown.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationDropdownComponent extends ResourceOwner implements OnInit {
+    public modalMenu = new ModalModel();
+
+    public commentsState: CommentsState;
+
+    public versionRead = -1;
+    public versionReceived = -1;
+    public unread = 0;
+
+    public userToken = '';
+
+    constructor(authService: AuthService, commentsService: CommentsService, dialogs: DialogService,
+        private readonly changeDetector: ChangeDetectorRef,
+        private readonly localStore: LocalStoreService,
+    ) {
+        super();
+
+        this.userToken = authService.user!.token;
+
+        this.versionRead = localStore.getInt(Settings.Local.NOTIFICATION_VERSION, -1);
+        this.versionReceived = this.versionRead;
+
+        this.updateVersion();
+
+        const commentsUrl = `users/${authService.user!.id}/notifications`;
+
+        this.commentsState =
+            new CommentsState(
+                commentsUrl,
+                commentsService,
+                dialogs,
+                true,
+                this.versionRead);
+    }
+
+    public ngOnInit() {
+        this.own(
+            this.modalMenu.isOpenChanges.pipe(
+                tap(_ => {
+                    this.updateVersion();
+                }),
+            ));
+
+        this.own(
+            this.commentsState.versionNumber.pipe(
+                tap(version => {
+                    this.versionReceived = version;
+
+                    this.updateVersion();
+
+                    this.changeDetector.detectChanges();
+                })));
+
+        this.own(timer(0, 4000).pipe(switchMap(() => this.commentsState.load(true).pipe(onErrorResumeNext()))));
+    }
+
+    public trackByComment(_index: number, comment: CommentDto) {
+        return comment.id;
+    }
+
+    private updateVersion() {
+        this.unread = Math.max(0, this.versionReceived - this.versionRead);
+
+        if (this.modalMenu.isOpen) {
+            this.versionRead = this.versionReceived;
+
+            this.localStore.setInt(Settings.Local.NOTIFICATION_VERSION, this.versionRead);
+        }
+    }
+}

frontend/src/app/shell/pages/internal/notifications-menu.component.html

@@ -1,32 +1,5 @@
 <ul class="nav navbar-nav align-items-center">
     <sqx-notifo></sqx-notifo>
-
-    <ng-container *ngIf="!isNotifoConfigured">
-        <li class="nav-item nav-icon dropdown position-relative" #button>
-            <span class="nav-link dropdown-toggle" (click)="modalMenu.show()">
-                <i class="icon-comments"></i>
     
-                <span class="badge rounded-pill badge-danger" *ngIf="unread">{{unread}}</span>
+    <sqx-notification-dropdown *ngIf="!isNotifoConfigured"></sqx-notification-dropdown>
-            </span>
-        </li>
-    
-        <ng-container *sqxModal="modalMenu;onRoot:false">
-            <sqx-dropdown-menu [scrollTop]="scrollMe.nativeElement.scrollHeight" [sqxAnchoredTo]="button" [offsetY]="10" #scrollMe>
-                <ng-container *ngIf="commentsState.comments | async; let comments">
-                    <small class="text-muted" *ngIf="comments.length === 0">
-                        {{ 'notifications.empty' | sqxTranslate}}
-                    </small>
-        
-                    <sqx-comment *ngFor="let comment of comments; trackBy: trackByComment"
-                        [comment]="comment"
-                        [commentsState]="commentsState"
-                        [confirmDelete]="false"
-                        [canDelete]="true"
-                        [canFollow]="true"
-                        [userToken]="userToken">
-                    </sqx-comment>
-                </ng-container>
-            </sqx-dropdown-menu>
-        </ng-container>
-    </ng-container>
 </ul>

frontend/src/app/shell/pages/internal/notifications-menu.component.scss

@@ -1,16 +1,2 @@
 @import 'mixins';
-@import 'vars';
+@import 'vars';
-
-.dropdown-menu {
-    max-height: 500px;
-    min-height: 4rem;
-    overflow-y: scroll;
-    padding: 1.25rem;
-    padding-bottom: 1rem;
-    width: 300px;
-}
-
-.badge {
-    @include absolute(-.5rem, 0, null, null);
-    font-size: 80%;
-}

frontend/src/app/shell/pages/internal/notifications-menu.component.ts

@@ -5,10 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { timer } from 'rxjs';
+import { AuthService, UIOptions } from '@app/shared';
-import { onErrorResumeNext, switchMap, tap } from 'rxjs/operators';
-import { AuthService, CommentDto, CommentsService, CommentsState, DialogService, LocalStoreService, ModalModel, ResourceOwner, Settings, UIOptions } from '@app/shared';
 
 @Component({
     selector: 'sqx-notifications-menu',
@@ -16,80 +14,14 @@ import { AuthService, CommentDto, CommentsService, CommentsState, DialogService,
     templateUrl: './notifications-menu.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NotificationsMenuComponent extends ResourceOwner implements OnInit {
+export class NotificationsMenuComponent {
-    public modalMenu = new ModalModel();
-
-    public commentsState: CommentsState;
-
-    public versionRead = -1;
-    public versionReceived = -1;
-    public unread = 0;
-
-    public userToken = '';
-
     public isNotifoConfigured = false;
 
-    constructor(authService: AuthService, commentsService: CommentsService, dialogs: DialogService, uiOptions: UIOptions,
+    constructor(authService: AuthService, uiOptions: UIOptions,
-        private readonly changeDetector: ChangeDetectorRef,
-        private readonly localStore: LocalStoreService,
     ) {
-        super();
-
         const notifoApiKey = authService.user?.notifoToken;
         const notifoApiUrl = uiOptions.get('more.notifoApi');
 
         this.isNotifoConfigured = !!notifoApiKey && !!notifoApiUrl;
-
-        this.userToken = authService.user!.token;
-
-        this.versionRead = localStore.getInt(Settings.Local.NOTIFICATION_VERSION, -1);
-        this.versionReceived = this.versionRead;
-
-        this.updateVersion();
-
-        const commentsUrl = `users/${authService.user!.id}/notifications`;
-
-        this.commentsState =
-            new CommentsState(
-                commentsUrl,
-                commentsService,
-                dialogs,
-                true,
-                this.versionRead);
-    }
-
-    public ngOnInit() {
-        this.own(
-            this.modalMenu.isOpenChanges.pipe(
-                tap(_ => {
-                    this.updateVersion();
-                }),
-            ));
-
-        this.own(
-            this.commentsState.versionNumber.pipe(
-                tap(version => {
-                    this.versionReceived = version;
-
-                    this.updateVersion();
-
-                    this.changeDetector.detectChanges();
-                })));
-
-        this.own(timer(0, 4000).pipe(switchMap(() => this.commentsState.load(true).pipe(onErrorResumeNext()))));
-    }
-
-    public trackByComment(_index: number, comment: CommentDto) {
-        return comment.id;
-    }
-
-    private updateVersion() {
-        this.unread = Math.max(0, this.versionReceived - this.versionRead);
-
-        if (this.modalMenu.isOpen) {
-            this.versionRead = this.versionReceived;
-
-            this.localStore.setInt(Settings.Local.NOTIFICATION_VERSION, this.versionRead);
-        }
     }
 }