Migrate to bootstrap 4 and ng-bootstrap

2 files changed, 33 insertions, 48 deletions

diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
index 0bb64cf00..43f0c6190 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -1,31 +1,25 @@
-<div bsModal #confirmModal="bs-modal" [config]="{ animated: false }" class="modal" tabindex="-1" role="dialog">
-  <div class="modal-dialog">
-    <div class="modal-content">
+<ng-template #confirmModal let-close="close" let-dismiss="dismiss">
 
-      <div class="modal-header">
-        <span class="close" aria-hidden="true" (click)="cancel()"></span>
-        <h4 class="modal-title">{{ title }}</h4>
-      </div>
+  <div class="modal-header">
+    <h4 class="modal-title">{{ title }}</h4>
+    <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
+  </div>
 
-      <div class="modal-body" >
-        <div [innerHtml]="message"></div>
+  <div class="modal-body" >
+    <div [innerHtml]="message"></div>
 
-        <div *ngIf="inputLabel && expectedInputValue" class="form-group">
-          <label for="confirmInput">{{ inputLabel }}</label>
-          <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
-        </div>
+    <div *ngIf="inputLabel && expectedInputValue" class="form-group">
+      <label for="confirmInput">{{ inputLabel }}</label>
+      <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
+    </div>
+  </div>
 
-        <div class="form-group inputs">
-          <span i18n class="action-button action-button-cancel" (click)="cancel()">
-            Cancel
-          </span>
+  <div class="modal-footer inputs">
+    <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
 
-          <input
-            type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
-            (click)="confirm()"
-          >
-        </div>
-      </div>
-    </div>
+    <input
+      type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
+      (click)="close()"
+    >
   </div>
-</div>
+</ng-template>
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts
index a13152496..0d18c38e8 100644
--- a/client/src/app/core/confirm/confirm.component.ts
+++ b/client/src/app/core/confirm/confirm.component.ts
@@ -1,9 +1,8 @@
-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'
 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',
@@ -11,7 +10,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
   styleUrls: [ './confirm.component.scss' ]
 })
 export class ConfirmComponent implements OnInit {
-  @ViewChild('confirmModal') confirmModal: ModalDirective
+  @ViewChild('confirmModal') confirmModal: ElementRef
 
   title = ''
   message = ''
@@ -21,7 +20,10 @@ export class ConfirmComponent implements OnInit {
   inputValue = ''
   confirmButtonText = ''
 
+  private openedModal: NgbModalRef
+
   constructor (
+    private modalService: NgbModal,
     private confirmService: ConfirmService,
     private i18n: I18n
   ) {
@@ -29,11 +31,6 @@ export class ConfirmComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.confirmModal.config = {
-      backdrop: 'static',
-      keyboard: false
-    }
-
     this.confirmService.showConfirm.subscribe(
       ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => {
         this.title = title
@@ -49,16 +46,9 @@ export class ConfirmComponent implements OnInit {
     )
   }
 
-  @HostListener('keydown.enter')
+  @HostListener('document:keydown.enter')
   confirm () {
-    this.confirmService.confirmResponse.next(true)
-    this.hideModal()
-  }
-
-  @HostListener('keydown.esc')
-  cancel () {
-    this.confirmService.confirmResponse.next(false)
-    this.hideModal()
+    if (this.openedModal) this.openedModal.close()
   }
 
   isConfirmationDisabled () {
@@ -70,10 +60,11 @@ export class ConfirmComponent implements OnInit {
 
   showModal () {
     this.inputValue = ''
-    this.confirmModal.show()
-  }
 
-  hideModal () {
-    this.confirmModal.hide()
+    this.openedModal = this.modalService.open(this.confirmModal)
+
+    this.openedModal.result
+        .then(() => this.confirmService.confirmResponse.next(true))
+        .catch(() => this.confirmService.confirmResponse.next(false))
   }
 }