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   @HostListener('document:keydown.enter')
  49   confirm () {
  50     if (this.openedModal) this.openedModal.close()
  51   }
  52
  53   isConfirmationDisabled () {
  54     // No input validation
  55     if (!this.inputLabel || !this.expectedInputValue) return false
  56
  57     return this.expectedInputValue !== this.inputValue
  58   }
  59
  60   showModal () {
  61     this.inputValue = ''
  62
  63     this.openedModal = this.modalService.open(this.confirmModal)
  64
  65     this.openedModal.result
  66         .then(() => this.confirmService.confirmResponse.next(true))
  67         .catch((reason: string) => {
  68           // If the reason was that the user used the back button, we don't care about the confirm dialog result
  69           if (!reason || reason !== POP_STATE_MODAL_DISMISS) {
  70             this.confirmService.confirmResponse.next(false)
  71           }
  72         })
  73   }
  74 }