Client: better confirm box for a beautiful world

6 files changed, 112 insertions, 1 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';
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 48fec2d43..f02304647 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -4,8 +4,10 @@ import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
 
 import { SimpleNotificationsModule } from 'angular2-notifications';
+import { ModalModule } from 'ng2-bootstrap/modal';
 
 import { AuthService } from './auth';
+import { ConfirmComponent, ConfirmService } from './confirm';
 import { MenuComponent, MenuAdminComponent } from './menu';
 import { throwIfAlreadyLoaded } from './module-import-guard';
 
@@ -15,19 +17,28 @@ import { throwIfAlreadyLoaded } from './module-import-guard';
     HttpModule,
     RouterModule,
 
+    ModalModule,
     SimpleNotificationsModule
   ],
+
   declarations: [
+    ConfirmComponent,
     MenuComponent,
     MenuAdminComponent
   ],
+
   exports: [
     SimpleNotificationsModule,
 
+    ConfirmComponent,
     MenuComponent,
     MenuAdminComponent
   ],
-  providers: [ AuthService ]
+
+  providers: [
+    AuthService,
+    ConfirmService
+  ]
 })
 export class CoreModule {
    constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts
index fa951b215..9b4dd1999 100644
--- a/client/src/app/core/index.ts
+++ b/client/src/app/core/index.ts
@@ -1,2 +1,4 @@
 export * from './auth';
+export * from './confirm';
+export * from './menu';
 export * from './core.module'