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   // 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.loadNotifications()
  44
  45     if (this.markAllAsReadSubject) {
  46       this.markAllAsReadSubject.subscribe(() => this.markAllAsRead())
  47     }
  48   }
  49
  50   loadNotifications (reset?: boolean) {
  51     this.userNotificationService.listMyNotifications({
  52       pagination: this.componentPagination,
  53       ignoreLoadingBar: this.ignoreLoadingBar,
  54       sort: {
  55         field: this.sortField,
  56         // if we order by creation date, we want DESC. all other fields are ASC (like unread).
  57         order: this.sortField === 'createdAt' ? -1 : 1
  58       }
  59     })
  60         .subscribe(
  61           result => {
  62             this.notifications = reset ? result.data : this.notifications.concat(result.data)
  63             this.componentPagination.totalItems = result.total
  64
  65             this.notificationsLoaded.emit()
  66
  67             this.onDataSubject.next(result.data)
  68           },
  69
  70           err => this.notifier.error(err.message)
  71         )
  72   }
  73
  74   onNearOfBottom () {
  75     if (this.infiniteScroll === false) return
  76
  77     this.componentPagination.currentPage++
  78
  79     if (hasMoreItems(this.componentPagination)) {
  80       this.loadNotifications()
  81     }
  82   }
  83
  84   markAsRead (notification: UserNotification) {
  85     if (notification.read) return
  86
  87     this.userNotificationService.markAsRead(notification)
  88         .subscribe(
  89           () => {
  90             notification.read = true
  91           },
  92
  93           err => this.notifier.error(err.message)
  94         )
  95   }
  96
  97   markAllAsRead () {
  98     this.userNotificationService.markAllAsRead()
  99         .subscribe(
 100           () => {
 101             for (const notification of this.notifications) {
 102               notification.read = true
 103             }
 104           },
 105
 106           err => this.notifier.error(err.message)
 107         )
 108   }
 109
 110   changeSortColumn (column: string) {
 111     this.componentPagination = {
 112       currentPage: 1,
 113       itemsPerPage: this.itemsPerPage,
 114       totalItems: null
 115     }
 116     this.sortField = column
 117     this.loadNotifications(true)
 118   }
 119
 120   isAccepted (notification: UserNotification) {
 121     return notification.abuse.state === AbuseState.ACCEPTED
 122   }
 123 }