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

   1 import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
   2
   3 import { ModalDirective } from 'ngx-bootstrap/modal'
   4
   5 import { ConfirmService } from './confirm.service'
   6 import { I18n } from '@ngx-translate/i18n-polyfill'
   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') confirmModal: ModalDirective
  15
  16   title = ''
  17   message = ''
  18   expectedInputValue = ''
  19   inputLabel = ''
  20
  21   inputValue = ''
  22   confirmButtonText = ''
  23
  24   constructor (
  25     private confirmService: ConfirmService,
  26     private i18n: I18n
  27   ) {
  28     // Empty
  29   }
  30
  31   ngOnInit () {
  32     this.confirmModal.config = {
  33       backdrop: 'static',
  34       keyboard: false
  35     }
  36
  37     this.confirmService.showConfirm.subscribe(
  38       ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
  39         this.title = title
  40         this.message = message
  41
  42         this.inputLabel = inputLabel
  43         this.expectedInputValue = expectedInputValue
  44
  45         this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
  46
  47         this.showModal()
  48       }
  49     )
  50   }
  51
  52   @HostListener('keydown.enter')
  53   confirm () {
  54     this.confirmService.confirmResponse.next(true)
  55     this.hideModal()
  56   }
  57
  58   @HostListener('keydown.esc')
  59   cancel () {
  60     this.confirmService.confirmResponse.next(false)
  61     this.hideModal()
  62   }
  63
  64   isConfirmationDisabled () {
  65     // No input validation
  66     if (!this.inputLabel || !this.expectedInputValue) return false
  67
  68     return this.expectedInputValue !== this.inputValue
  69   }
  70
  71   showModal () {
  72     this.inputValue = ''
  73     this.confirmModal.show()
  74   }
  75
  76   hideModal () {
  77     this.confirmModal.hide()
  78   }
  79 }