Merge pull request #8722 from abpframework/fix/8721

fix: add modal-ref-service to dismiss active modals

npm/ng-packs/packages/theme-shared/src/lib/components/index.ts

@@ -7,6 +7,7 @@ export * from './loader-bar/loader-bar.component';
 export * from './loading/loading.component';
 export * from './modal/modal.component';
 export * from './modal/modal-close.directive';
+export * from './modal/modal-ref.service';
 export * from './sort-order-icon/sort-order-icon.component';
 export * from './table-empty-message/table-empty-message.component';
 export * from './table/table.component';

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-ref.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+
+export type ModalDismissMode = 'hard' | 'soft';
+
+export interface DismissableModal {
+  dismiss(mode: ModalDismissMode);
+}
+
+@Injectable({ providedIn: 'root' })
+export class ModalRefService {
+  modalRefs: DismissableModal[] = [];
+
+  register(modal: DismissableModal) {
+    this.modalRefs.push(modal);
+  }
+  unregister(modal: DismissableModal) {
+    const index = this.modalRefs.indexOf(modal);
+    if (index > -1) {
+      this.modalRefs.splice(index, 1);
+    }
+  }
+
+  dismissAll(mode: ModalDismissMode) {
+    this.modalRefs.forEach(modal => modal.dismiss(mode));
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -12,6 +12,7 @@ import {
   TemplateRef,
   ViewChild,
   isDevMode,
+  OnInit,
 } from '@angular/core';
 import { NgbModal, NgbModalOptions, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { fromEvent, Subject } from 'rxjs';
@@ -20,6 +21,7 @@ import { Confirmation } from '../../models/confirmation';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { SUPPRESS_UNSAVED_CHANGES_WARNING } from '../../tokens/suppress-unsaved-changes-warning.token';
 import { ButtonComponent } from '../button/button.component';
+import { DismissableModal, ModalRefService, ModalDismissMode } from './modal-ref.service';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
@@ -29,7 +31,7 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
   styleUrls: ['./modal.component.scss'],
   providers: [SubscriptionService],
 })
-export class ModalComponent implements OnDestroy {
+export class ModalComponent implements OnInit, OnDestroy, DismissableModal {
   /**
    * @deprecated Use centered property of options input instead. To be deleted in v5.0.
    */
@@ -116,9 +118,26 @@ export class ModalComponent implements OnDestroy {
     @Inject(SUPPRESS_UNSAVED_CHANGES_WARNING)
     private suppressUnsavedChangesWarningToken: boolean,
     private modal: NgbModal,
+    private modalRefService: ModalRefService,
   ) {
     this.initToggleStream();
   }
+  ngOnInit(): void {
+    this.modalRefService.register(this);
+  }
+
+  dismiss(mode: ModalDismissMode) {
+    switch (mode) {
+      case 'hard':
+        this.visible = false;
+        break;
+      case 'soft':
+        this.close();
+        break;
+      default:
+        break;
+    }
+  }
 
   private initToggleStream() {
     this.subscription.addOne(this.toggle$.pipe(debounceTime(0), distinctUntilChanged()), value =>
@@ -158,6 +177,7 @@ export class ModalComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.modalRefService.unregister(this);
     this.toggle(false);
     this.destroy$.next();
   }