From bf684108e4b166d923e584bde315e3eee4d6cb87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 7 Apr 2021 15:02:17 +0300
Subject: [PATCH] Delete file attribute / user warning styles

---
 ...m-delete-file-attribute-dialog.component.html | 16 ++++++++++++++--
 ...irm-delete-file-attribute-dialog.component.ts |  9 +++++++--
 .../confirm-delete-user-dialog.component.html    |  7 ++++++-
 apps/red-ui/src/assets/styles/red-checkbox.scss  |  4 ++++
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
index a9f8b28d8..2af43a9c1 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
@@ -3,16 +3,28 @@
         {{ 'confirm-delete-file-attribute.title' | translate: { name: fileAttribute.label } }}
     </div>
 
+    <div class="inline-dialog-toast toast-error" *ngIf="showToast">
+        <div translate="confirm-delete-file-attribute.toast-error"></div>
+        <a (click)="showToast = false" class="toast-close-button">
+            <mat-icon svgIcon="red:close"></mat-icon>
+        </a>
+    </div>
+
     <div class="dialog-content">
         <div class="heading" translate="confirm-delete-file-attribute.warning"></div>
 
-        <mat-checkbox *ngFor="let checkbox of checkboxes; let idx = index" [(ngModel)]="checkbox.value" color="primary">
+        <mat-checkbox
+            *ngFor="let checkbox of checkboxes; let idx = index"
+            [(ngModel)]="checkbox.value"
+            color="primary"
+            [class.error]="!checkbox.value && showToast"
+        >
             {{ 'confirm-delete-file-attribute.checkbox-' + (idx + 1) | translate }}
         </mat-checkbox>
     </div>
 
     <div class="dialog-actions">
-        <button [disabled]="!valid" color="primary" mat-flat-button (click)="deleteFileAttribute()">
+        <button color="primary" mat-flat-button (click)="deleteFileAttribute()">
             {{ 'confirm-delete-file-attribute.delete' | translate }}
         </button>
         <div class="all-caps-label cancel" (click)="cancel()" translate="confirm-delete-file-attribute.cancel"></div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts
index 75f80f5b7..8e86022bc 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts
@@ -12,6 +12,7 @@ export class ConfirmDeleteFileAttributeDialogComponent {
     public fileAttribute: FileAttributeConfig;
     public ruleSetId: string;
     public checkboxes = [{ value: false }, { value: false }];
+    public showToast = false;
 
     constructor(
         private readonly _appStateService: AppStateService,
@@ -28,8 +29,12 @@ export class ConfirmDeleteFileAttributeDialogComponent {
     }
 
     async deleteFileAttribute() {
-        await this._fileAttributesService.deleteFileAttributesConfiguration(this.ruleSetId, this.fileAttribute.id).toPromise();
-        this.dialogRef.close(true);
+        if (this.valid) {
+            await this._fileAttributesService.deleteFileAttributesConfiguration(this.ruleSetId, this.fileAttribute.id).toPromise();
+            this.dialogRef.close(true);
+        } else {
+            this.showToast = true;
+        }
     }
 
     public cancel() {
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-user-dialog/confirm-delete-user-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-user-dialog/confirm-delete-user-dialog.component.html
index cc1570ce2..521203939 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-user-dialog/confirm-delete-user-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-user-dialog/confirm-delete-user-dialog.component.html
@@ -11,7 +11,12 @@
     <div class="dialog-content">
         <div class="heading" translate="confirm-delete-user.warning"></div>
 
-        <mat-checkbox *ngFor="let checkbox of checkboxes; let idx = index" [(ngModel)]="checkbox.value" color="primary">
+        <mat-checkbox
+            *ngFor="let checkbox of checkboxes; let idx = index"
+            [(ngModel)]="checkbox.value"
+            color="primary"
+            [class.error]="!checkbox.value && showToast"
+        >
             {{ 'confirm-delete-user.checkbox-' + (idx + 1) | translate: { projectsCount: projectsCount } }}
         </mat-checkbox>
     </div>
diff --git a/apps/red-ui/src/assets/styles/red-checkbox.scss b/apps/red-ui/src/assets/styles/red-checkbox.scss
index ad06c1eee..fe39f654f 100644
--- a/apps/red-ui/src/assets/styles/red-checkbox.scss
+++ b/apps/red-ui/src/assets/styles/red-checkbox.scss
@@ -29,3 +29,7 @@
         }
     }
 }
+
+.mat-checkbox.error .mat-checkbox-label {
+    color: $red-1;
+}