updated base dialog component to display the confirmation dialog whenever the user wants to leave the modal or change its tab with unsaved changes

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts

@@ -4,7 +4,7 @@ import { Dossier } from '@red/domain';
 import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component';
 import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component';
 import { EditDossierSectionInterface } from './edit-dossier-section.interface';
-import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
+import { ConfirmOptions, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component';
 import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component';
 
@@ -146,7 +146,22 @@ export class EditDossierDialogComponent extends BaseDialogComponent {
 
     changeTab(key: Section) {
         if (this.changed) {
-            this._toaster.error(_('edit-dossier-dialog.unsaved-changes'));
+            this._waitingForConfirmation = true;
+            const dialogRef = this._dialogService.openDialog();
+            dialogRef
+                .afterClosed()
+                .toPromise()
+                .then(async result => {
+                    if (result in ConfirmOptions) {
+                        if (result === ConfirmOptions.CONFIRM) {
+                            await this.save();
+                        } else {
+                            this.revert();
+                        }
+                        this.activeNav = key;
+                    }
+                    this._waitingForConfirmation = false;
+                });
             return;
         }
         this.activeNav = key;

apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Directive, HostListener, Injector, OnInit } from '@angular/core';
-import { AutoUnsubscribe, IqserEventTarget } from '../../../../../../../libs/common-ui/src';
+import { AutoUnsubscribe, ConfirmOptions, IqserEventTarget } from '../../../../../../../libs/common-ui/src';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ConfirmationDialogService } from '@shared/dialog/confirmation-dialog.service';
 
@@ -19,9 +19,9 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
     abstract valid: boolean;
     abstract disabled: boolean;
 
-    private readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService);
+    protected readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService);
 
-    private _waitingForConfirmation = false;
+    protected _waitingForConfirmation = false;
 
     constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>) {
         super();
@@ -38,11 +38,20 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
     close(): void {
         if (this.changed) {
             this._waitingForConfirmation = true;
-            const dialogRef = this._dialogService.openDialog(() => this._dialogRef.close());
+            const dialogRef = this._dialogService.openDialog();
             dialogRef
                 .afterClosed()
                 .toPromise()
-                .then(() => (this._waitingForConfirmation = false));
+                .then(result => {
+                    if (result in ConfirmOptions) {
+                        if (result === ConfirmOptions.CONFIRM) {
+                            this.save();
+                        } else {
+                            this._dialogRef.close();
+                        }
+                    }
+                    this._waitingForConfirmation = false;
+                });
             return;
         }
         this._dialogRef.close();

apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts

@@ -18,7 +18,7 @@ export class ConfirmationDialogService extends DialogService<DialogType> {
         super(_dialog);
     }
 
-    openDialog(cb: any): MatDialogRef<unknown> {
+    openDialog(): MatDialogRef<unknown> {
         return super.openDialog(
             'confirm',
             null,
@@ -27,10 +27,9 @@ export class ConfirmationDialogService extends DialogService<DialogType> {
                 question: _('confirmation-dialog.unsaved-changes.question'),
                 details: _('confirmation-dialog.unsaved-changes.details'),
                 confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'),
-                denyText: _('confirmation-dialog.unsaved-changes.deny-text'),
+                discardChangesText: _('confirmation-dialog.unsaved-changes.discard-changes-text'),
                 titleColor: TitleColors.WARN,
             }),
-            cb,
         );
     }
 }

apps/red-ui/src/assets/i18n/en.json

@@ -446,8 +446,8 @@
     },
     "unsaved-changes": {
       "confirmation-text": "Save and Leave",
-      "deny-text": "DISCARD CHANGES",
       "details": "If you leave the tab without saving, all the unsaved changes will be lost.",
+      "discard-changes-text": "DISCARD CHANGES",
       "question": "Are you sure you want to leave the tab? You have unsaved changes.",
       "title": "You have unsaved changes"
     },
@@ -931,8 +931,7 @@
       "members": "Members",
       "team-members": "Team Members"
     },
-    "side-nav-title": "Configurations",
+    "side-nav-title": "Configurations"
-    "unsaved-changes": "You have unsaved changes. Save or revert before changing the tab."
   },
   "error": {
     "http": {

libs/common-ui

@@ -1 +1 @@
-Subproject commit 0610684e8fb963fab1f7dd51fd850a7b47287fca
+Subproject commit 09008130e81e3ddf1a7434c9ef14e41678f6e2a9