client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts

   1 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
   2 import { AuthService, HtmlRendererService, Notifier } from '@app/core'
   3 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
   4 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
   5 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
   6 import { AbuseMessage, UserAbuse } from '@shared/models'
   7 import { ABUSE_MESSAGE_VALIDATOR } from '../form-validators/abuse-validators'
   8 import { AbuseService } from '../shared-moderation'
   9
  10 @Component({
  11   selector: 'my-abuse-message-modal',
  12   templateUrl: './abuse-message-modal.component.html',
  13   styleUrls: [ './abuse-message-modal.component.scss' ]
  14 })
  15 export class AbuseMessageModalComponent extends FormReactive implements OnInit {
  16   @ViewChild('modal', { static: true }) modal: NgbModal
  17
  18   @Input() isAdminView: boolean
  19
  20   @Output() countMessagesUpdated = new EventEmitter<{ abuseId: number, countMessages: number }>()
  21
  22   abuseMessages: (AbuseMessage & { messageHtml: string })[] = []
  23   textareaMessage: string
  24   sendingMessage = false
  25   noResults = false
  26
  27   private openedModal: NgbModalRef
  28   private abuse: UserAbuse
  29
  30   constructor (
  31     protected formValidatorService: FormValidatorService,
  32     private modalService: NgbModal,
  33     private htmlRenderer: HtmlRendererService,
  34     private auth: AuthService,
  35     private notifier: Notifier,
  36     private abuseService: AbuseService
  37   ) {
  38     super()
  39   }
  40
  41   ngOnInit () {
  42     this.buildForm({
  43       message: ABUSE_MESSAGE_VALIDATOR
  44     })
  45   }
  46
  47   openModal (abuse: UserAbuse) {
  48     this.abuse = abuse
  49
  50     this.openedModal = this.modalService.open(this.modal, { centered: true })
  51
  52     this.loadMessages()
  53   }
  54
  55   hide () {
  56     this.abuseMessages = []
  57     this.openedModal.close()
  58   }
  59
  60   addMessage () {
  61     this.sendingMessage = true
  62
  63     this.abuseService.addAbuseMessage(this.abuse, this.form.value['message'])
  64       .subscribe(
  65         () => {
  66           this.form.reset()
  67           this.sendingMessage = false
  68           this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length + 1 })
  69
  70           this.loadMessages()
  71         },
  72
  73         err => {
  74           this.sendingMessage = false
  75           console.error(err)
  76           this.notifier.error('Sorry but you cannot send this message. Please retry later')
  77         }
  78       )
  79   }
  80
  81   deleteMessage (abuseMessage: AbuseMessage) {
  82     this.abuseService.deleteAbuseMessage(this.abuse, abuseMessage)
  83       .subscribe(
  84         () => {
  85           this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length - 1 })
  86
  87           this.abuseMessages = this.abuseMessages.filter(m => m.id !== abuseMessage.id)
  88         },
  89
  90         err => this.notifier.error(err.message)
  91       )
  92   }
  93
  94   isMessageByMe (abuseMessage: AbuseMessage) {
  95     return this.auth.getUser().account.id === abuseMessage.account.id
  96   }
  97
  98   getPlaceholderMessage () {
  99     if (this.isAdminView) {
 100       return $localize`Add a message to communicate with the reporter`
 101     }
 102
 103     return $localize`Add a message to communicate with the moderation team`
 104   }
 105
 106   private loadMessages () {
 107     this.abuseService.listAbuseMessages(this.abuse)
 108       .subscribe(
 109         async res => {
 110           this.abuseMessages = []
 111
 112           for (const m of res.data) {
 113             this.abuseMessages.push(Object.assign(m, {
 114               messageHtml: await this.htmlRenderer.convertToBr(m.message)
 115             }))
 116           }
 117
 118           this.noResults = this.abuseMessages.length === 0
 119
 120           setTimeout(() => {
 121             // Don't use ViewChild: it is not supported inside a ng-template
 122             const messagesBlock = document.querySelector('.messages')
 123             messagesBlock.scroll(0, messagesBlock.scrollHeight)
 124           })
 125         },
 126
 127         err => this.notifier.error(err.message)
 128       )
 129   }
 130
 131 }