-import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
-
-import { ModalDirective } from 'ngx-bootstrap/modal'
-
+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'
import { ConfirmService } from './confirm.service'
-
-export interface ConfigChangedEvent {
- columns: { [id: string]: { isDisplayed: boolean } }
- config: { resultsPerPage: number }
-}
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@Component({
selector: 'my-confirm',
- templateUrl: './confirm.component.html'
+ templateUrl: './confirm.component.html',
+ styleUrls: [ './confirm.component.scss' ]
})
export class ConfirmComponent implements OnInit {
- @ViewChild('confirmModal') confirmModal: ModalDirective
+ @ViewChild('confirmModal') confirmModal: ElementRef
title = ''
message = ''
+ expectedInputValue = ''
+ inputLabel = ''
- constructor (private confirmService: ConfirmService) {
- // Empty
- }
+ inputValue = ''
+ confirmButtonText = ''
- ngOnInit () {
- this.confirmModal.config = {
- backdrop: 'static',
- keyboard: false
- }
+ private openedModal: NgbModalRef
+
+ constructor (
+ private modalService: NgbModal,
+ private confirmService: ConfirmService,
+ private i18n: I18n
+ ) { }
+ ngOnInit () {
this.confirmService.showConfirm.subscribe(
- ({ title, message }) => {
+ ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
this.title = title
this.message = message
+ this.inputLabel = inputLabel
+ this.expectedInputValue = expectedInputValue
+
+ this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
+
this.showModal()
}
)
}
- @HostListener('keydown.enter')
+ @HostListener('document:keydown.enter')
confirm () {
- this.confirmService.confirmResponse.next(true)
- this.hideModal()
+ if (this.openedModal) this.openedModal.close()
}
- @HostListener('keydown.esc')
- cancel () {
- this.confirmService.confirmResponse.next(false)
- this.hideModal()
+ isConfirmationDisabled () {
+ // No input validation
+ if (!this.inputLabel || !this.expectedInputValue) return false
+
+ return this.expectedInputValue !== this.inputValue
}
showModal () {
- this.confirmModal.show()
- }
+ this.inputValue = ''
+
+ this.openedModal = this.modalService.open(this.confirmModal)
- hideModal () {
- this.confirmModal.hide()
+ this.openedModal.result
+ .then(() => this.confirmService.confirmResponse.next(true))
+ .catch(() => this.confirmService.confirmResponse.next(false))
}
}