import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
import { User } from '../shared/users/user.model'
import { UserNotificationService } from '@app/shared/users/user-notification.service'
-import { Subscription } from 'rxjs'
+import { Subject, Subscription } from 'rxjs'
import { Notifier, UserNotificationSocket } from '@app/core'
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
import { NavigationEnd, Router } from '@angular/router'
import { filter } from 'rxjs/operators'
+import { UserNotificationsComponent } from '@app/shared'
@Component({
selector: 'my-avatar-notification',
styleUrls: [ './avatar-notification.component.scss' ]
})
export class AvatarNotificationComponent implements OnInit, OnDestroy {
- @ViewChild('popover') popover: NgbPopover
+ @ViewChild('popover', { static: true }) popover: NgbPopover
+
@Input() user: User
unreadNotifications = 0
+ loaded = false
+
+ markAllAsReadSubject = new Subject<boolean>()
private notificationSub: Subscription
private routeSub: Subscription
private userNotificationSocket: UserNotificationSocket,
private notifier: Notifier,
private router: Router
- ) {}
+ ) {
+ }
ngOnInit () {
this.userNotificationService.countUnreadNotifications()
- .subscribe(
- result => {
- this.unreadNotifications = Math.min(result, 99) // Limit number to 99
- this.subscribeToNotifications()
- },
+ .subscribe(
+ result => {
+ this.unreadNotifications = Math.min(result, 99) // Limit number to 99
+ this.subscribeToNotifications()
+ },
- err => this.notifier.error(err.message)
- )
+ err => this.notifier.error(err.message)
+ )
this.routeSub = this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
this.popover.close()
}
- private subscribeToNotifications () {
- this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket()
- .subscribe(data => {
- if (data.type === 'new') return this.unreadNotifications++
- if (data.type === 'read') return this.unreadNotifications--
- if (data.type === 'read-all') return this.unreadNotifications = 0
- })
+ onPopoverHidden () {
+ this.loaded = false
+ }
+
+ onNotificationLoaded () {
+ this.loaded = true
+ }
+
+ markAllAsRead () {
+ this.markAllAsReadSubject.next(true)
+ }
+
+ private async subscribeToNotifications () {
+ const obs = await this.userNotificationSocket.getMyNotificationsSocket()
+
+ this.notificationSub = obs.subscribe(data => {
+ if (data.type === 'new') return this.unreadNotifications++
+ if (data.type === 'read') return this.unreadNotifications--
+ if (data.type === 'read-all') return this.unreadNotifications = 0
+ })
}
}