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
  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
  45   loadMoreNotifications () {
  46     this.userNotificationService.listMyNotifications(this.componentPagination, undefined, this.ignoreLoadingBar)
  47         .subscribe(
  48           result => {
  49             this.notifications = this.notifications.concat(result.data)
  50             this.componentPagination.totalItems = result.total
  51
  52             this.notificationsLoaded.emit()
  53
  54             this.onDataSubject.next(result.data)
  55           },
  56
  57           err => this.notifier.error(err.message)
  58         )
  59   }
  60
  61   onNearOfBottom () {
  62     if (this.infiniteScroll === false) return
  63
  64     this.componentPagination.currentPage++
  65
  66     if (hasMoreItems(this.componentPagination)) {
  67       this.loadMoreNotifications()
  68     }
  69   }
  70
  71   markAsRead (notification: UserNotification) {
  72     if (notification.read) return
  73
  74     this.userNotificationService.markAsRead(notification)
  75         .subscribe(
  76           () => {
  77             notification.read = true
  78           },
  79
  80           err => this.notifier.error(err.message)
  81         )
  82   }
  83
  84   markAllAsRead () {
  85     this.userNotificationService.markAllAsRead()
  86         .subscribe(
  87           () => {
  88             for (const notification of this.notifications) {
  89               notification.read = true
  90             }
  91           },
  92
  93           err => this.notifier.error(err.message)
  94         )
  95   }
  96 }