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, AbuseState } 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   sortField = 'createdAt'
  23
  24   componentPagination: ComponentPagination
  25
  26   onDataSubject = new Subject<any[]>()
  27
  28   constructor (
  29     private userNotificationService: UserNotificationService,
  30     private notifier: Notifier
  31   ) { }
  32
  33   ngOnInit () {
  34     this.componentPagination = {
  35       currentPage: 1,
  36       itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable
  37       totalItems: null
  38     }
  39
  40     this.loadNotifications()
  41
  42     if (this.markAllAsReadSubject) {
  43       this.markAllAsReadSubject.subscribe(() => this.markAllAsRead())
  44     }
  45   }
  46
  47   loadNotifications (reset?: boolean) {
  48     this.userNotificationService.listMyNotifications({
  49       pagination: this.componentPagination,
  50       ignoreLoadingBar: this.ignoreLoadingBar,
  51       sort: {
  52         field: this.sortField,
  53         // if we order by creation date, we want DESC. all other fields are ASC (like unread).
  54         order: this.sortField === 'createdAt' ? -1 : 1
  55       }
  56     })
  57         .subscribe(
  58           result => {
  59             this.notifications = reset ? result.data : this.notifications.concat(result.data)
  60             this.componentPagination.totalItems = result.total
  61
  62             this.notificationsLoaded.emit()
  63
  64             this.onDataSubject.next(result.data)
  65           },
  66
  67           err => this.notifier.error(err.message)
  68         )
  69   }
  70
  71   onNearOfBottom () {
  72     if (this.infiniteScroll === false) return
  73
  74     this.componentPagination.currentPage++
  75
  76     if (hasMoreItems(this.componentPagination)) {
  77       this.loadNotifications()
  78     }
  79   }
  80
  81   markAsRead (notification: UserNotification) {
  82     if (notification.read) return
  83
  84     this.userNotificationService.markAsRead(notification)
  85         .subscribe(
  86           () => {
  87             notification.read = true
  88           },
  89
  90           err => this.notifier.error(err.message)
  91         )
  92   }
  93
  94   markAllAsRead () {
  95     this.userNotificationService.markAllAsRead()
  96         .subscribe(
  97           () => {
  98             for (const notification of this.notifications) {
  99               notification.read = true
 100             }
 101           },
 102
 103           err => this.notifier.error(err.message)
 104         )
 105   }
 106
 107   changeSortColumn (column: string) {
 108     this.componentPagination = {
 109       currentPage: 1,
 110       itemsPerPage: this.itemsPerPage,
 111       totalItems: null
 112     }
 113     this.sortField = column
 114     this.loadNotifications(true)
 115   }
 116
 117   isAccepted (notification: UserNotification) {
 118     return notification.abuse.state === AbuseState.ACCEPTED
 119   }
 120 }