Add custom modal to plugin helpers (#2631)

* Add custom modal component

* Add custom modal to app and plugins helpers

* Fixes custom modal component

* Add doc for custom modal

* Fix newline end of file html and scss files

* Move my-custom-modal component outside component for UserLoggedIn modals

* Move initializeCustomModal to ngAfterViewInit()

* Wrap events and conditionnals

* Replace ng-show with ngIf*

* Add modalRef to open only one modal + onCloseClick

* Refacto + Fix access methods of custom modal

* Fix methods names custom-modal.component

* Fix implement AfterViewInit & no default boolean

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

1 files changed, 93 insertions, 0 deletions

diff --git a/client/src/app/modal/custom-modal.component.ts b/client/src/app/modal/custom-modal.component.ts
new file mode 100644
index 000000000..a98579085
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.ts
@@ -0,0 +1,93 @@
+import { Component, ElementRef, ViewChild, Input } from '@angular/core'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+
+@Component({
+  selector: 'my-custom-modal',
+  templateUrl: './custom-modal.component.html',
+  styleUrls: [ './custom-modal.component.scss' ]
+})
+export class CustomModalComponent {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  @Input() title: string
+  @Input() content: string
+  @Input() close?: boolean
+  @Input() cancel?: { value: string, action?: () => void }
+  @Input() confirm?: { value: string, action?: () => void }
+
+  private modalRef: NgbModalRef
+
+  constructor (
+    private modalService: NgbModal
+  ) { }
+
+  show (input: {
+    title: string,
+    content: string,
+    close?: boolean,
+    cancel?: { value: string, action?: () => void },
+    confirm?: { value: string, action?: () => void }
+  }) {
+    if (this.modalRef instanceof NgbModalRef && this.modalService.hasOpenModals()) {
+      console.error('Cannot open another custom modal, one is already opened.')
+      return
+    }
+
+    const { title, content, close, cancel, confirm } = input
+
+    this.title = title
+    this.content = content
+    this.close = close
+    this.cancel = cancel
+    this.confirm = confirm
+
+    this.modalRef = this.modalService.open(this.modal, {
+      centered: true,
+      backdrop: 'static',
+      keyboard: false,
+      size: 'lg'
+    })
+  }
+
+  onCancelClick () {
+    this.modalRef.close()
+
+    if (typeof this.cancel.action === 'function') {
+      this.cancel.action()
+    }
+
+    this.destroy()
+  }
+
+  onCloseClick () {
+    this.modalRef.close()
+    this.destroy()
+  }
+
+  onConfirmClick () {
+    this.modalRef.close()
+
+    if (typeof this.confirm.action === 'function') {
+      this.confirm.action()
+    }
+
+    this.destroy()
+  }
+
+  hasCancel () {
+    return typeof this.cancel !== 'undefined'
+  }
+
+  hasConfirm () {
+    return typeof this.confirm !== 'undefined'
+  }
+
+  private destroy () {
+    delete this.modalRef
+    delete this.title
+    delete this.content
+    delete this.close
+    delete this.cancel
+    delete this.confirm
+  }
+}