From 09008130e81e3ddf1a7434c9ef14e41678f6e2a9 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Mon, 20 Dec 2021 10:26:17 +0200
Subject: [PATCH 1/5] updated confirmation dialog component to include
 'dischard changes' action

---
 .../confirmation-dialog.component.html               | 12 +++++++++---
 .../confirmation-dialog.component.ts                 | 12 +++++++++++-
 src/lib/services/dialog.service.ts                   |  2 ++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
index f94bfb0..8efd2b9 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
@@ -15,7 +15,7 @@
 
     <div class="dialog-actions">
         <button
-            (click)="confirm(1)"
+            (click)="confirm(ConfirmOptions.CONFIRM)"
             [disabled]="config.requireInput && confirmationDoesNotMatch()"
             color="primary"
             mat-flat-button
@@ -24,16 +24,22 @@
         </button>
 
         <button
-            (click)="confirm(2)"
+            (click)="confirm(ConfirmOptions.SECOND_CONFIRM)"
             *ngIf="config.alternativeConfirmationText"
             [disabled]="config.requireInput && confirmationDoesNotMatch()"
+            [ngClass]="{'all-caps-label cancel': true}"
             color="primary"
             mat-flat-button
+
         >
             {{ config.alternativeConfirmationText }}
         </button>
 
-        <div (click)="deny()" class="all-caps-label cancel">
+        <div *ngIf="config.discardChangesText" (click)="confirm(ConfirmOptions.DISCARD_CHANGES)" class="all-caps-label cancel">
+            {{ config.discardChangesText }}
+        </div>
+
+        <div *ngIf="!config.discardChangesText" (click)="deny()" class="all-caps-label cancel">
             {{ config.denyText }}
         </div>
     </div>
diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
index ae4d744..417ded5 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
@@ -10,6 +10,12 @@ export enum TitleColors {
     WARN = 'warn',
 }
 
+export enum ConfirmOptions {
+    CONFIRM = 1,
+    SECOND_CONFIRM = 2,
+    DISCARD_CHANGES = 3,
+}
+
 export class ConfirmationDialogInput {
     title?: string;
     titleColor?: TitleColor;
@@ -17,6 +23,7 @@ export class ConfirmationDialogInput {
     details?: string;
     confirmationText?: string;
     alternativeConfirmationText?: string;
+    discardChangesText?: string;
     requireInput?: boolean;
     denyText?: string;
     translateParams?: Record<string, unknown>;
@@ -28,6 +35,7 @@ export class ConfirmationDialogInput {
         this.details = options?.details || '';
         this.confirmationText = options?.confirmationText || _('common.confirmation-dialog.confirm');
         this.alternativeConfirmationText = options?.alternativeConfirmationText;
+        this.discardChangesText = options?.discardChangesText;
         this.requireInput = options?.requireInput || false;
         this.denyText = options?.denyText || _('common.confirmation-dialog.deny');
         this.translateParams = options?.translateParams || {};
@@ -43,6 +51,7 @@ export class ConfirmationDialogComponent {
     config: ConfirmationDialogInput;
     inputValue = '';
     readonly inputLabel: string;
+    readonly ConfirmOptions = ConfirmOptions;
 
     constructor(
         private readonly _dialogRef: MatDialogRef<ConfirmationDialogComponent>,
@@ -75,7 +84,7 @@ export class ConfirmationDialogComponent {
         this._dialogRef.close();
     }
 
-    confirm(option: number): void {
+    confirm(option: ConfirmOptions): void {
         this._dialogRef.close(option);
     }
 
@@ -86,6 +95,7 @@ export class ConfirmationDialogComponent {
             'details',
             'confirmationText',
             'alternativeConfirmationText',
+            'discardChangesText',
             'denyText',
         ];
 
diff --git a/src/lib/services/dialog.service.ts b/src/lib/services/dialog.service.ts
index 58647ca..a63ff35 100644
--- a/src/lib/services/dialog.service.ts
+++ b/src/lib/services/dialog.service.ts
@@ -9,6 +9,7 @@ export const largeDialogConfig: MatDialogConfig = {
     maxWidth: '90vw',
     maxHeight: '90vh',
     autoFocus: false,
+    disableClose: true,
 } as const;
 
 export const defaultDialogConfig: MatDialogConfig = {
@@ -16,6 +17,7 @@ export const defaultDialogConfig: MatDialogConfig = {
     maxWidth: '90vw',
     maxHeight: '90vh',
     autoFocus: false,
+    disableClose: true,
 } as const;
 
 export type DialogConfig<T extends string> = {

From b3a820ca960c4cb5d8afa6b4949a720b3075fb85 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Tue, 4 Jan 2022 20:32:13 +0200
Subject: [PATCH 2/5] added 'disableConfirm' property to confirmation dialog
 component

---
 .../misc/confirmation-dialog/confirmation-dialog.component.html | 2 +-
 .../misc/confirmation-dialog/confirmation-dialog.component.ts   | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
index 8efd2b9..7b2f309 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
@@ -16,7 +16,7 @@
     <div class="dialog-actions">
         <button
             (click)="confirm(ConfirmOptions.CONFIRM)"
-            [disabled]="config.requireInput && confirmationDoesNotMatch()"
+            [disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
             color="primary"
             mat-flat-button
         >
diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
index 417ded5..acfb9cf 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
@@ -25,6 +25,7 @@ export class ConfirmationDialogInput {
     alternativeConfirmationText?: string;
     discardChangesText?: string;
     requireInput?: boolean;
+    disableConfirm?: boolean;
     denyText?: string;
     translateParams?: Record<string, unknown>;
 
@@ -37,6 +38,7 @@ export class ConfirmationDialogInput {
         this.alternativeConfirmationText = options?.alternativeConfirmationText;
         this.discardChangesText = options?.discardChangesText;
         this.requireInput = options?.requireInput || false;
+        this.disableConfirm = options?.disableConfirm || false;
         this.denyText = options?.denyText || _('common.confirmation-dialog.deny');
         this.translateParams = options?.translateParams || {};
     }

From afed414030f936da36aa993a1945591b5c451861 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Wed, 12 Jan 2022 13:11:54 +0200
Subject: [PATCH 3/5] moved 'base-dialog component' and 'confirmation-dialog
 service' in common

---
 src/lib/dialog/base-dialog.component.ts       | 96 +++++++++++++++++--
 src/lib/dialog/confirmation-dialog.service.ts | 39 ++++++++
 2 files changed, 129 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/dialog/confirmation-dialog.service.ts

diff --git a/src/lib/dialog/base-dialog.component.ts b/src/lib/dialog/base-dialog.component.ts
index 13d1e7b..33f5289 100644
--- a/src/lib/dialog/base-dialog.component.ts
+++ b/src/lib/dialog/base-dialog.component.ts
@@ -1,5 +1,10 @@
-import { Directive, HostListener } from '@angular/core';
-import { IqserEventTarget } from '../utils';
+import { Directive, HostListener, Injector, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { FormGroup } from '@angular/forms';
+import * as moment from 'moment';
+import { AutoUnsubscribe, IqserEventTarget } from '../utils';
+import { ConfirmOptions } from '../misc';
+import { ConfirmationDialogService } from './confirmation-dialog.service';
 
 @Directive()
 /**
@@ -12,12 +17,84 @@ import { IqserEventTarget } from '../utils';
  * Make sure to remove the (submit)="save()" property from the form and to set type="button" on the save button
  * (otherwise the save request will be triggered twice).
  * */
-export abstract class BaseDialogComponent {
-    abstract changed: boolean;
-    abstract valid: boolean;
+export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnInit {
     abstract disabled: boolean;
 
-    abstract save(): void;
+    protected readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService);
+    protected _waitingForConfirmation = false;
+
+    form!: FormGroup;
+    initialFormValue;
+
+    constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>) {
+        super();
+    }
+
+    abstract save(closeAfterSave?: boolean): void;
+
+    ngOnInit(): void {
+        this.addSubscription = this._dialogRef.backdropClick().subscribe(() => {
+            this.close();
+        });
+    }
+
+    get valid(): boolean {
+        return this.form.valid;
+    }
+
+    get changed(): boolean {
+        for (const key of Object.keys(this.form.getRawValue())) {
+            const initialValue = this.initialFormValue[key];
+            const updatedValue = this.form.get(key).value;
+
+            if (initialValue == null && updatedValue != null) {
+                const updatedValueType = typeof updatedValue;
+                if (updatedValueType !== 'string' && updatedValueType !== 'boolean') {
+                    return true;
+                } else if (updatedValueType === 'string' && updatedValue.length > 0) {
+                    return true;
+                } else if (updatedValueType === 'boolean' && updatedValue === true) {
+                    return true;
+                }
+            } else if (initialValue !== updatedValue) {
+                if (Array.isArray(updatedValue)) {
+                    if (JSON.stringify(initialValue) !== JSON.stringify(updatedValue)) {
+                        return true;
+                    }
+                } else if (updatedValue instanceof moment) {
+                    if (!moment(updatedValue).isSame(moment(initialValue))) {
+                        return true;
+                    }
+                } else {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    close(): void {
+        if (this.changed) {
+            this._openConfirmDialog().then(result => {
+                if (result in ConfirmOptions) {
+                    if (result === ConfirmOptions.CONFIRM) {
+                        this.save(true);
+                    } else {
+                        this._dialogRef.close();
+                    }
+                }
+                this._waitingForConfirmation = false;
+            });
+        } else {
+            this._dialogRef.close();
+        }
+    }
+
+    protected _openConfirmDialog() {
+        this._waitingForConfirmation = true;
+        const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid });
+        return dialogRef.afterClosed().toPromise();
+    }
 
     @HostListener('window:keydown.Enter', ['$event'])
     onEnter(event: KeyboardEvent): void {
@@ -26,4 +103,11 @@ export abstract class BaseDialogComponent {
             this.save();
         }
     }
+
+    @HostListener('window:keydown.Escape', ['$event'])
+    onEscape(): void {
+        if (!this._waitingForConfirmation) {
+            this.close();
+        }
+    }
 }
diff --git a/src/lib/dialog/confirmation-dialog.service.ts b/src/lib/dialog/confirmation-dialog.service.ts
new file mode 100644
index 0000000..16f8a1e
--- /dev/null
+++ b/src/lib/dialog/confirmation-dialog.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { ConfirmationDialogComponent, ConfirmationDialogInput, DialogConfig, TitleColors } from '@iqser/common-ui';
+import { DialogService } from '../services/dialog.service';
+
+type DialogType = 'confirm';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ConfirmationDialogService extends DialogService<DialogType> {
+    protected readonly _config: DialogConfig<DialogType> = {
+        confirm: {
+            component: ConfirmationDialogComponent,
+            dialogConfig: { disableClose: false },
+        },
+    };
+
+    constructor(protected readonly _dialog: MatDialog) {
+        super(_dialog);
+    }
+
+    openDialog(data?): MatDialogRef<unknown> {
+        return super.openDialog(
+            'confirm',
+            null,
+            new ConfirmationDialogInput({
+                title: _('confirmation-dialog.unsaved-changes.title'),
+                question: _('confirmation-dialog.unsaved-changes.question'),
+                details: _('confirmation-dialog.unsaved-changes.details'),
+                confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'),
+                discardChangesText: _('confirmation-dialog.unsaved-changes.discard-changes-text'),
+                disableConfirm: data.disableConfirm,
+                titleColor: TitleColors.WARN,
+            }),
+        );
+    }
+}

From db7af88b878cc7c120031e5abc8a2b7bf2d93ac2 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Thu, 13 Jan 2022 12:04:15 +0200
Subject: [PATCH 4/5] updated save method definition to accept more optional
 params

---
 src/lib/dialog/base-dialog.component.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/dialog/base-dialog.component.ts b/src/lib/dialog/base-dialog.component.ts
index 33f5289..21cb7af 100644
--- a/src/lib/dialog/base-dialog.component.ts
+++ b/src/lib/dialog/base-dialog.component.ts
@@ -6,6 +6,11 @@ import { AutoUnsubscribe, IqserEventTarget } from '../utils';
 import { ConfirmOptions } from '../misc';
 import { ConfirmationDialogService } from './confirmation-dialog.service';
 
+export interface SaveOptions {
+    closeAfterSave?: boolean;
+    addMembers?: boolean;
+}
+
 @Directive()
 /**
  * Extend this component when you want to submit the form after pressing enter.
@@ -30,7 +35,7 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
         super();
     }
 
-    abstract save(closeAfterSave?: boolean): void;
+    abstract save(options?: SaveOptions): void;
 
     ngOnInit(): void {
         this.addSubscription = this._dialogRef.backdropClick().subscribe(() => {
@@ -78,7 +83,7 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
             this._openConfirmDialog().then(result => {
                 if (result in ConfirmOptions) {
                     if (result === ConfirmOptions.CONFIRM) {
-                        this.save(true);
+                        this.save({ closeAfterSave: true });
                     } else {
                         this._dialogRef.close();
                     }

From 763ac410bd4a99f7d06a6264f77daae56e1c3d4c Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Fri, 14 Jan 2022 17:59:32 +0200
Subject: [PATCH 5/5] added general disabled implementation in base dialog

---
 src/lib/dialog/base-dialog.component.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/dialog/base-dialog.component.ts b/src/lib/dialog/base-dialog.component.ts
index 21cb7af..a361d0f 100644
--- a/src/lib/dialog/base-dialog.component.ts
+++ b/src/lib/dialog/base-dialog.component.ts
@@ -23,7 +23,6 @@ export interface SaveOptions {
  * (otherwise the save request will be triggered twice).
  * */
 export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnInit {
-    abstract disabled: boolean;
 
     protected readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService);
     protected _waitingForConfirmation = false;
@@ -78,6 +77,10 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
         return false;
     }
 
+    get disabled(): boolean {
+        return !this.valid || !this.changed;
+    }
+
     close(): void {
         if (this.changed) {
             this._openConfirmDialog().then(result => {