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, 8 insertions, 2 deletions

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 1d077646c..12c0efd8a 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular/router'
 import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core'
@@ -14,6 +14,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { POP_STATE_MODAL_DISMISS } from '@app/shared/misc/constants'
 import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
 import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
+import { CustomModalComponent } from '@app/modal/custom-modal.component'
 import { ServerConfig, UserRole } from '@shared/models'
 import { User } from '@app/shared'
 import { InstanceService } from '@app/shared/instance/instance.service'
@@ -24,9 +25,10 @@ import { MenuService } from './core/menu/menu.service'
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.scss' ]
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, AfterViewInit {
   @ViewChild('welcomeModal') welcomeModal: WelcomeModalComponent
   @ViewChild('instanceConfigWarningModal') instanceConfigWarningModal: InstanceConfigWarningModalComponent
+  @ViewChild('customModal') customModal: CustomModalComponent
 
   customCSS: SafeHtml
 
@@ -87,6 +89,10 @@ export class AppComponent implements OnInit {
     this.openModalsIfNeeded()
   }
 
+  ngAfterViewInit () {
+    this.pluginService.initializeCustomModal(this.customModal)
+  }
+
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }