diff --git a/frontend/src/app/shell/declarations.ts b/frontend/src/app/shell/declarations.ts index 683a6f4e7..1d340062f 100644 --- a/frontend/src/app/shell/declarations.ts +++ b/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'; diff --git a/frontend/src/app/shell/module.ts b/frontend/src/app/shell/module.ts index 5e803c8a9..8078446ea 100644 --- a/frontend/src/app/shell/module.ts +++ b/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, diff --git a/frontend/src/app/shell/pages/internal/notification-dropdown.component.html b/frontend/src/app/shell/pages/internal/notification-dropdown.component.html new file mode 100644 index 000000000..8d42b305f --- /dev/null +++ b/frontend/src/app/shell/pages/internal/notification-dropdown.component.html @@ -0,0 +1,26 @@ +
  • + + + + {{unread}} + +
    • + + + + + + {{ 'notifications.empty' | sqxTranslate}} + + + + + + + \ No newline at end of file diff --git a/frontend/src/app/shell/pages/internal/notification-dropdown.component.scss b/frontend/src/app/shell/pages/internal/notification-dropdown.component.scss new file mode 100644 index 000000000..e340fb490 --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/frontend/src/app/shell/pages/internal/notification-dropdown.component.ts b/frontend/src/app/shell/pages/internal/notification-dropdown.component.ts new file mode 100644 index 000000000..f7befb49d --- /dev/null +++ b/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); + } + } +} diff --git a/frontend/src/app/shell/pages/internal/notifications-menu.component.html b/frontend/src/app/shell/pages/internal/notifications-menu.component.html index 96cb8389c..c0686300b 100644 --- a/frontend/src/app/shell/pages/internal/notifications-menu.component.html +++ b/frontend/src/app/shell/pages/internal/notifications-menu.component.html @@ -1,32 +1,5 @@ \ No newline at end of file diff --git a/frontend/src/app/shell/pages/internal/notifications-menu.component.scss b/frontend/src/app/shell/pages/internal/notifications-menu.component.scss index e340fb490..2742d895e 100644 --- a/frontend/src/app/shell/pages/internal/notifications-menu.component.scss +++ b/frontend/src/app/shell/pages/internal/notifications-menu.component.scss @@ -1,16 +1,2 @@ @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%; -} \ No newline at end of file +@import 'vars'; \ No newline at end of file diff --git a/frontend/src/app/shell/pages/internal/notifications-menu.component.ts b/frontend/src/app/shell/pages/internal/notifications-menu.component.ts index 02ac291b9..cebce5f04 100644 --- a/frontend/src/app/shell/pages/internal/notifications-menu.component.ts +++ b/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 { timer } from 'rxjs'; -import { onErrorResumeNext, switchMap, tap } from 'rxjs/operators'; -import { AuthService, CommentDto, CommentsService, CommentsState, DialogService, LocalStoreService, ModalModel, ResourceOwner, Settings, UIOptions } from '@app/shared'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { AuthService, 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 { - public modalMenu = new ModalModel(); - - public commentsState: CommentsState; - - public versionRead = -1; - public versionReceived = -1; - public unread = 0; - - public userToken = ''; - +export class NotificationsMenuComponent { public isNotifoConfigured = false; - constructor(authService: AuthService, commentsService: CommentsService, dialogs: DialogService, uiOptions: UIOptions, - private readonly changeDetector: ChangeDetectorRef, - private readonly localStore: LocalStoreService, + constructor(authService: AuthService, uiOptions: UIOptions, ) { - 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); - } } }