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, 17 insertions, 0 deletions

diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index aa6823060..b4ed56cbe 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -20,6 +20,7 @@ import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { RegisterClientHelpers } from '../../../types/register-client-option.model'
 import { PluginTranslation } from '@shared/models/plugins/plugin-translation.model'
 import { importModule } from '@app/shared/misc/utils'
+import { CustomModalComponent } from '@app/modal/custom-modal.component'
 
 interface HookStructValue extends RegisterClientHookOptions {
   plugin: ServerConfigPlugin
@@ -49,6 +50,8 @@ export class PluginService implements ClientHook {
 
   translationsObservable: Observable<PluginTranslation>
 
+  customModal: CustomModalComponent
+
   private plugins: ServerConfigPlugin[] = []
   private scopes: { [ scopeName: string ]: PluginInfo[] } = {}
   private loadedScripts: { [ script: string ]: boolean } = {}
@@ -81,6 +84,10 @@ export class PluginService implements ClientHook {
       })
   }
 
+  initializeCustomModal (customModal: CustomModalComponent) {
+    this.customModal = customModal
+  }
+
   ensurePluginsAreBuilt () {
     return this.pluginsBuilt.asObservable()
                .pipe(first(), shareReplay())
@@ -279,6 +286,16 @@ export class PluginService implements ClientHook {
         success: (text: string, title?: string, timeout?: number) => this.notifier.success(text, title, timeout)
       },
 
+      showModal: (input: {
+        title: string,
+        content: string,
+        close?: boolean,
+        cancel?: { value: string, action?: () => void },
+        confirm?: { value: string, action?: () => void }
+      }) => {
+        this.customModal.show(input)
+      },
+
       translate: (value: string) => {
         return this.translationsObservable
             .pipe(map(allTranslations => allTranslations[npmName]))