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

   1 import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'
   2 import { ConfirmService } from '@app/core/confirm/confirm.service'
   3 import { I18n } from '@ngx-translate/i18n-polyfill'
   4 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
   5 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
   6 import { POP_STATE_MODAL_DISMISS } from '@app/shared/misc/constants'
   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 confirmService: ConfirmService,
  29     private i18n: I18n
  30   ) { }
  31
  32   ngOnInit () {
  33     this.confirmService.showConfirm.subscribe(
  34       ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
  35         this.title = title
  36         this.message = message
  37
  38         this.inputLabel = inputLabel
  39         this.expectedInputValue = expectedInputValue
  40
  41         this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
  42
  43         this.showModal()
  44       }
  45     )
  46   }
  47
  48   confirm () {
  49     if (this.openedModal) this.openedModal.close()
  50   }
  51
  52   isConfirmationDisabled () {
  53     // No input validation
  54     if (!this.inputLabel || !this.expectedInputValue) return false
  55
  56     return this.expectedInputValue !== this.inputValue
  57   }
  58
  59   showModal () {
  60     this.inputValue = ''
  61
  62     this.openedModal = this.modalService.open(this.confirmModal, { centered: true })
  63
  64     this.openedModal.result
  65         .then(() => this.confirmService.confirmResponse.next(true))
  66         .catch((reason: string) => {
  67           // If the reason was that the user used the back button, we don't care about the confirm dialog result
  68           if (!reason || reason !== POP_STATE_MODAL_DISMISS) {
  69             this.confirmService.confirmResponse.next(false)
  70           }
  71         })
  72   }
  73 }