Merge pull request #2613 from abpframework/feat/modal-unload-confirmation

feat(theme-shared): trigger unload confirmation in the modal component when the form is dirty

npm/ng-packs/packages/core/src/lib/states/session.state.ts

@@ -67,7 +67,7 @@ export class SessionState {
 
         this.store.dispatch(new ModifyOpenedTabCount('increase'));
 
-        fromEvent(window, 'beforeunload').subscribe(() => {
+        fromEvent(window, 'unload').subscribe(event => {
           this.store.dispatch(new ModifyOpenedTabCount('decrease'));
         });
       });

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

@@ -101,15 +101,7 @@ export class ModalComponent implements OnDestroy {
 
   destroy$ = new Subject<void>();
 
-  constructor(private renderer: Renderer2, private confirmationService: ConfirmationService) {}
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-  }
-
-  close() {
-    if (this.busy) return;
-
+  get isFormDirty(): boolean {
     let node: HTMLDivElement;
     if (!this.modalContent) {
       node = document.getElementById('modal-container') as HTMLDivElement;
@@ -120,7 +112,19 @@ export class ModalComponent implements OnDestroy {
         .childNodes,
     );
 
-    if (hasNgDirty(nodes)) {
+    return hasNgDirty(nodes);
+  }
+
+  constructor(private renderer: Renderer2, private confirmationService: ConfirmationService) {}
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+  }
+
+  close() {
+    if (this.busy) return;
+
+    if (this.isFormDirty) {
       if (this.isConfirmationOpen) return;
 
       this.isConfirmationOpen = true;
@@ -151,6 +155,16 @@ export class ModalComponent implements OnDestroy {
         this.close();
       });
 
+    fromEvent(window, 'beforeunload')
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(event => {
+        if (this.isFormDirty) {
+          event.returnValue = true;
+        } else {
+          delete event.returnValue;
+        }
+      });
+
     setTimeout(() => {
       if (!this.abpClose) return;
       fromEvent(this.abpClose.nativeElement, 'click')