Client: better confirm box for a beautiful world

4 files changed, 98 insertions, 0 deletions

diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
new file mode 100644
index 000000000..3052526ba
--- /dev/null
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -0,0 +1,20 @@
+<div bsModal #confirmModal="bs-modal" class="modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <button type="button" class="close" aria-label="Close" (click)="abort()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title">{{ title }}</h4>
+      </div>
+
+      <div class="modal-body" [innerHtml]="message"></div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="abort()">Annuler</button>
+        <button type="button" class="btn btn-primary" (click)="confirm()">Valider</button>
+      </div>
+    </div>
+  </div>
+</div>
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();
+  }
+}
diff --git a/client/src/app/core/confirm/confirm.service.ts b/client/src/app/core/confirm/confirm.service.ts
new file mode 100644
index 000000000..b97969795
--- /dev/null
+++ b/client/src/app/core/confirm/confirm.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/first';
+
+@Injectable()
+export class ConfirmService {
+  showConfirm = new Subject<{ title, message }>();
+  confirmResponse = new Subject<boolean>();
+
+  confirm(message: string = '', title: string = '') {
+    this.showConfirm.next({ title, message });
+
+    return this.confirmResponse.asObservable().first();
+  }
+}
diff --git a/client/src/app/core/confirm/index.ts b/client/src/app/core/confirm/index.ts
new file mode 100644
index 000000000..789e7e547
--- /dev/null
+++ b/client/src/app/core/confirm/index.ts
@@ -0,0 +1,2 @@
+export * from './confirm.component';
+export * from './confirm.service';