Client: better confirm box for a beautiful world

1 files changed, 61 insertions, 0 deletions

diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts
new file mode 100644
index 000000000..14b4ef324
--- /dev/null
+++ b/client/src/app/core/confirm/confirm.component.ts
@@ -0,0 +1,61 @@
+import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
+
+import { ModalDirective } from 'ng2-bootstrap/modal';
+
+import { ConfirmService } from './confirm.service';
+
+export interface ConfigChangedEvent {
+  columns: { [id: string]: { isDisplayed: boolean }; };
+  config: { resultsPerPage: number };
+}
+
+@Component({
+  selector: 'my-confirm',
+  templateUrl: './confirm.component.html'
+})
+export class ConfirmComponent implements OnInit {
+  @ViewChild('confirmModal') confirmModal: ModalDirective;
+
+  title = '';
+  message = '';
+
+  constructor (private confirmService: ConfirmService) {
+    // Empty
+  }
+
+  ngOnInit() {
+    this.confirmModal.config = {
+      backdrop: 'static',
+      keyboard: false
+    };
+
+    this.confirmService.showConfirm.subscribe(
+      ({ title, message }) => {
+        this.title = title;
+        this.message = message;
+
+        this.showModal();
+      }
+    );
+  }
+
+  @HostListener('keydown.enter')
+  confirm() {
+    this.confirmService.confirmResponse.next(true);
+    this.hideModal();
+  }
+
+  @HostListener('keydown.esc')
+  abort() {
+    this.confirmService.confirmResponse.next(false);
+    this.hideModal();
+  }
+
+  showModal() {
+    this.confirmModal.show();
+  }
+
+  hideModal() {
+    this.confirmModal.hide();
+  }
+}