-import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
+import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
-import { ModalDirective } from 'ngx-bootstrap/modal';
+import { ModalDirective } from 'ngx-bootstrap/modal'
-import { ConfirmService } from './confirm.service';
-
-export interface ConfigChangedEvent {
- columns: { [id: string]: { isDisplayed: boolean }; };
- config: { resultsPerPage: number };
-}
+import { ConfirmService } from './confirm.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
@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: ModalDirective
- title = '';
- message = '';
+ title = ''
+ message = ''
+ expectedInputValue = ''
+ inputLabel = ''
- constructor (private confirmService: ConfirmService) {
+ inputValue = ''
+ confirmButtonText = ''
+
+ constructor (
+ private confirmService: ConfirmService,
+ private i18n: I18n
+ ) {
// Empty
}
- ngOnInit() {
+ ngOnInit () {
this.confirmModal.config = {
backdrop: 'static',
keyboard: false
- };
+ }
this.confirmService.showConfirm.subscribe(
- ({ title, message }) => {
- this.title = title;
- this.message = message;
+ ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
+ this.title = title
+ this.message = message
+
+ this.inputLabel = inputLabel
+ this.expectedInputValue = expectedInputValue
- this.showModal();
+ this.confirmButtonText = confirmButtonText || this.i18n('Confirm')
+
+ this.showModal()
}
- );
+ )
}
@HostListener('keydown.enter')
- confirm() {
- this.confirmService.confirmResponse.next(true);
- this.hideModal();
+ confirm () {
+ this.confirmService.confirmResponse.next(true)
+ this.hideModal()
}
@HostListener('keydown.esc')
- abort() {
- this.confirmService.confirmResponse.next(false);
- this.hideModal();
+ 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();
+ showModal () {
+ this.inputValue = ''
+ this.confirmModal.show()
}
- hideModal() {
- this.confirmModal.hide();
+ hideModal () {
+ this.confirmModal.hide()
}
}