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

   1 import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'
   2 import { ConfirmService } from './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
   7 @Component({
   8   selector: 'my-confirm',
   9   templateUrl: './confirm.component.html',
  10   styleUrls: [ './confirm.component.scss' ]
  11 })
  12 export class ConfirmComponent implements OnInit {
  13   @ViewChild('confirmModal') confirmModal: ElementRef
  14
  15   title = ''
  16   message = ''
  17   expectedInputValue = ''
  18   inputLabel = ''
  19
  20   inputValue = ''
  21   confirmButtonText = ''
  22
  23   private openedModal: NgbModalRef
  24
  25   constructor (
  26     private modalService: NgbModal,
  27     private confirmService: ConfirmService,
  28     private i18n: I18n
  29   ) { }
  30
  31   ngOnInit () {
  32     this.confirmService.showConfirm.subscribe(
  33       ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
  34         this.title = title
  35         this.message = message
  36
  37         this.inputLabel = inputLabel
  38         this.expectedInputValue = expectedInputValue
  39
  40         this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
  41
  42         this.showModal()
  43       }
  44     )
  45   }
  46
  47   @HostListener('document:keydown.enter')
  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)
  63
  64     this.openedModal.result
  65         .then(() => this.confirmService.confirmResponse.next(true))
  66         .catch(() => this.confirmService.confirmResponse.next(false))
  67   }
  68 }