updated confirmation dialog component to include 'dischard changes' action

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>

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',
         ];
 

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> = {