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     // Empty
  31   }
  32
  33   ngOnInit () {
  34     this.confirmService.showConfirm.subscribe(
  35       ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
  36         this.title = title
  37         this.message = message
  38
  39         this.inputLabel = inputLabel
  40         this.expectedInputValue = expectedInputValue
  41
  42         this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
  43
  44         this.showModal()
  45       }
  46     )
  47   }
  48
  49   @HostListener('document:keydown.enter')
  50   confirm () {
  51     if (this.openedModal) this.openedModal.close()
  52   }
  53
  54   isConfirmationDisabled () {
  55     // No input validation
  56     if (!this.inputLabel || !this.expectedInputValue) return false
  57
  58     return this.expectedInputValue !== this.inputValue
  59   }
  60
  61   showModal () {
  62     this.inputValue = ''
  63
  64     this.openedModal = this.modalService.open(this.confirmModal)
  65
  66     this.openedModal.result
  67         .then(() => this.confirmService.confirmResponse.next(true))
  68         .catch(() => this.confirmService.confirmResponse.next(false))
  69   }
  70 }