client/src/app/modal/confirm.component.ts

   1 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
   2 import { HtmlRendererService } from '@app/core'
   3 import { ConfirmService } from '@app/core/confirm/confirm.service'
   4 import { POP_STATE_MODAL_DISMISS } from '@app/helpers'
   5 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
   6 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
   7
   8 @Component({
   9   selector: 'my-confirm',
  10   templateUrl: './confirm.component.html',
  11   styleUrls: [ './confirm.component.scss' ]
  12 })
  13 export class ConfirmComponent implements OnInit {
  14   @ViewChild('confirmModal', { static: true }) confirmModal: ElementRef
  15
  16   title = ''
  17   message = ''
  18   expectedInputValue = ''
  19   inputLabel = ''
  20
  21   inputValue = ''
  22   confirmButtonText = ''
  23
  24   private openedModal: NgbModalRef
  25
  26   constructor (
  27     private modalService: NgbModal,
  28     private html: HtmlRendererService,
  29     private confirmService: ConfirmService
  30   ) { }
  31
  32   ngOnInit () {
  33     this.confirmService.showConfirm.subscribe(
  34       ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
  35         this.title = title
  36
  37         this.inputLabel = inputLabel
  38         this.expectedInputValue = expectedInputValue
  39
  40         this.confirmButtonText = confirmButtonText || $localize`Confirm`
  41
  42         this.html.toSafeHtml(message)
  43           .then(message => {
  44             this.message = message
  45
  46             this.showModal()
  47           })
  48       }
  49     )
  50   }
  51
  52   confirm () {
  53     if (this.openedModal) this.openedModal.close()
  54   }
  55
  56   isConfirmationDisabled () {
  57     // No input validation
  58     if (!this.inputLabel || !this.expectedInputValue) return false
  59
  60     return this.expectedInputValue !== this.inputValue
  61   }
  62
  63   showModal () {
  64     this.inputValue = ''
  65
  66     this.openedModal = this.modalService.open(this.confirmModal, { centered: true })
  67
  68     this.openedModal.result
  69         .then(() => this.confirmService.confirmResponse.next(true))
  70         .catch((reason: string) => {
  71           // If the reason was that the user used the back button, we don't care about the confirm dialog result
  72           if (!reason || reason !== POP_STATE_MODAL_DISMISS) {
  73             this.confirmService.confirmResponse.next(false)
  74           }
  75         })
  76   }
  77 }