From 2cfe09a07083fb75ab070c5f428d2a1482213b7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 2 Mar 2022 17:07:08 +0200
Subject: [PATCH] Confirmation dialog supports checkboxes

---
 src/lib/common-ui.module.ts                   |  3 +-
 .../confirmation-dialog.component.html        | 23 ++++++++++++---
 .../confirmation-dialog.component.scss        |  5 ++++
 .../confirmation-dialog.component.ts          | 28 +++++++++++++++----
 4 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts
index fdaab9c..c116fa3 100644
--- a/src/lib/common-ui.module.ts
+++ b/src/lib/common-ui.module.ts
@@ -31,8 +31,9 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CapitalizePipe } from './utils/pipes/capitalize.pipe';
 import { KeycloakAngularModule } from 'keycloak-angular';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
-const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule];
+const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule, MatCheckboxModule];
 const modules = [
     TranslateModule,
     IqserIconsModule,
diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
index 7b2f309..8082b10 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.html
@@ -3,6 +3,13 @@
         {{ config.title }}
     </div>
 
+    <div *ngIf="showToast" class="inline-dialog-toast toast-error">
+        <div [translate]="config.toastMessage"></div>
+        <a (click)="showToast = false" class="toast-close-button">
+            <mat-icon svgIcon="iqser:close"></mat-icon>
+        </a>
+    </div>
+
     <div class="dialog-content">
         <p [class.heading]="isDeleteAction" [innerHTML]="config.question" class="mt-0 mb-8"></p>
         <p *ngIf="config.details" [innerHTML]="config.details" class="mt-0"></p>
@@ -11,6 +18,15 @@
             <label>{{ inputLabel }}</label>
             <input [(ngModel)]="inputValue" />
         </div>
+
+        <div *ngIf="config.checkboxes.length > 0" class="mt-24 checkboxes-wrapper">
+            <ng-container *ngFor="let checkbox of config.checkboxes">
+                <mat-checkbox [(ngModel)]="checkbox.value" [class.error]="!checkbox.value && showToast" color="primary">
+                    {{ checkbox.label | translate: config.translateParams }}
+                </mat-checkbox>
+                <ng-container *ngTemplateOutlet="checkbox.extraContent; context: { data: checkbox.extraContentData }"></ng-container>
+            </ng-container>
+        </div>
     </div>
 
     <div class="dialog-actions">
@@ -27,19 +43,18 @@
             (click)="confirm(ConfirmOptions.SECOND_CONFIRM)"
             *ngIf="config.alternativeConfirmationText"
             [disabled]="config.requireInput && confirmationDoesNotMatch()"
-            [ngClass]="{'all-caps-label cancel': true}"
+            [ngClass]="{ 'all-caps-label cancel': true }"
             color="primary"
             mat-flat-button
-
         >
             {{ config.alternativeConfirmationText }}
         </button>
 
-        <div *ngIf="config.discardChangesText" (click)="confirm(ConfirmOptions.DISCARD_CHANGES)" class="all-caps-label cancel">
+        <div (click)="confirm(ConfirmOptions.DISCARD_CHANGES)" *ngIf="config.discardChangesText" class="all-caps-label cancel">
             {{ config.discardChangesText }}
         </div>
 
-        <div *ngIf="!config.discardChangesText" (click)="deny()" class="all-caps-label cancel">
+        <div (click)="deny()" *ngIf="!config.discardChangesText" class="all-caps-label cancel">
             {{ config.denyText }}
         </div>
     </div>
diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.scss b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.scss
index f65b4b0..21c8eab 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.scss
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.scss
@@ -1,3 +1,8 @@
 .warn {
     color: var(--iqser-red-1);
 }
+
+.checkboxes-wrapper {
+    display: flex;
+    flex-direction: column;
+}
diff --git a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
index acfb9cf..efa6357 100644
--- a/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
+++ b/src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostListener, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Inject, TemplateRef } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@@ -16,6 +16,13 @@ export enum ConfirmOptions {
     DISCARD_CHANGES = 3,
 }
 
+interface CheckBox {
+    value: boolean;
+    label: string;
+    extraContent?: TemplateRef<unknown>;
+    extraContentData?: Record<string, unknown>;
+}
+
 export class ConfirmationDialogInput {
     title?: string;
     titleColor?: TitleColor;
@@ -28,6 +35,8 @@ export class ConfirmationDialogInput {
     disableConfirm?: boolean;
     denyText?: string;
     translateParams?: Record<string, unknown>;
+    checkboxes?: CheckBox[];
+    toastMessage?: string;
 
     constructor(options?: ConfirmationDialogInput) {
         this.title = options?.title || _('common.confirmation-dialog.title');
@@ -41,6 +50,8 @@ export class ConfirmationDialogInput {
         this.disableConfirm = options?.disableConfirm || false;
         this.denyText = options?.denyText || _('common.confirmation-dialog.deny');
         this.translateParams = options?.translateParams || {};
+        this.checkboxes = options?.checkboxes || [];
+        this.toastMessage = options?.toastMessage;
     }
 }
 
@@ -52,6 +63,7 @@ export class ConfirmationDialogInput {
 export class ConfirmationDialogComponent {
     config: ConfirmationDialogInput;
     inputValue = '';
+    showToast = false;
     readonly inputLabel: string;
     readonly ConfirmOptions = ConfirmOptions;
 
@@ -62,9 +74,11 @@ export class ConfirmationDialogComponent {
     ) {
         this.config = _confirmationDialogInput ?? new ConfirmationDialogInput();
         this.translate(this.config);
-        this.inputLabel = `${this._translateService.instant('confirmation-dialog.input-label')} '${
-            this.config.confirmationText || ''
-        }'`;
+        this.inputLabel = `${this._translateService.instant('confirmation-dialog.input-label')} '${this.config.confirmationText || ''}'`;
+    }
+
+    get uncheckedBoxes(): boolean {
+        return !!this.config.checkboxes?.some(c => !c.value);
     }
 
     get isDeleteAction(): boolean {
@@ -87,7 +101,11 @@ export class ConfirmationDialogComponent {
     }
 
     confirm(option: ConfirmOptions): void {
-        this._dialogRef.close(option);
+        if (this.uncheckedBoxes) {
+            this.showToast = true;
+        } else {
+            this._dialogRef.close(option);
+        }
     }
 
     translate(obj: ConfirmationDialogInput): void {