client/src/app/shared/users/user-notifications.component.ts

   1 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
   2 import { UserNotificationService } from '@app/shared/users/user-notification.service'
   3 import { UserNotificationType } from '../../../../../shared'
   4 import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
   5 import { Notifier } from '@app/core'
   6 import { UserNotification } from '@app/shared/users/user-notification.model'
   7 import { Subject } from 'rxjs'
   8
   9 @Component({
  10   selector: 'my-user-notifications',
  11   templateUrl: 'user-notifications.component.html',
  12   styleUrls: [ 'user-notifications.component.scss' ]
  13 })
  14 export class UserNotificationsComponent implements OnInit {
  15   @Input() ignoreLoadingBar = false
  16   @Input() infiniteScroll = true
  17   @Input() itemsPerPage = 20
  18   @Input() markAllAsReadSubject: Subject<boolean>
  19
  20   @Output() notificationsLoaded = new EventEmitter()
  21
  22   notifications: UserNotification[] = []
  23
  24   // So we can access it in the template
  25   UserNotificationType = UserNotificationType
  26
  27   componentPagination: ComponentPagination
  28
  29   onDataSubject = new Subject<any[]>()
  30
  31   constructor (
  32     private userNotificationService: UserNotificationService,
  33     private notifier: Notifier
  34   ) { }
  35
  36   ngOnInit () {
  37     this.componentPagination = {
  38       currentPage: 1,
  39       itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable
  40       totalItems: null
  41     }
  42
  43     this.loadMoreNotifications()
  44
  45     if (this.markAllAsReadSubject) {
  46       this.markAllAsReadSubject.subscribe(() => this.markAllAsRead())
  47     }
  48   }
  49
  50   loadMoreNotifications () {
  51     this.userNotificationService.listMyNotifications(this.componentPagination, undefined, this.ignoreLoadingBar)
  52         .subscribe(
  53           result => {
  54             this.notifications = this.notifications.concat(result.data)
  55             this.componentPagination.totalItems = result.total
  56
  57             this.notificationsLoaded.emit()
  58
  59             this.onDataSubject.next(result.data)
  60           },
  61
  62           err => this.notifier.error(err.message)
  63         )
  64   }
  65
  66   onNearOfBottom () {
  67     if (this.infiniteScroll === false) return
  68
  69     this.componentPagination.currentPage++
  70
  71     if (hasMoreItems(this.componentPagination)) {
  72       this.loadMoreNotifications()
  73     }
  74   }
  75
  76   markAsRead (notification: UserNotification) {
  77     if (notification.read) return
  78
  79     this.userNotificationService.markAsRead(notification)
  80         .subscribe(
  81           () => {
  82             notification.read = true
  83           },
  84
  85           err => this.notifier.error(err.message)
  86         )
  87   }
  88
  89   markAllAsRead () {
  90     this.userNotificationService.markAllAsRead()
  91         .subscribe(
  92           () => {
  93             for (const notification of this.notifications) {
  94               notification.read = true
  95             }
  96           },
  97
  98           err => this.notifier.error(err.message)
  99         )
 100   }
 101 }