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

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