From 9c33eeeb810395341fa30581886d21240018838b Mon Sep 17 00:00:00 2001
From: Silviu Popa <silviucpopa@gmail.com>
Date: Wed, 13 Mar 2019 13:56:31 +0200
Subject: [PATCH] [ADF-4068] ProcessServices/TaskDetails - disable save button
 on validation errors (#4414)

* [ADF-4068] StartTaskComponent - fix name and description empty space validation

* [ADF-4068] StartTakComponent - add unit test

* [ADF-4068] ProcessServices - add description validaton on edit task form

* [ADF-4068] ProcessServies - fix build issue

* [ADF-4068] ProcessServices - disable save button on validation errors

* [ADF-4068] - lint

* [ADf-4068] - fix e2e
---
 .../card-view-textitem.component.html             | 15 +++++++++++----
 .../card-view-textitem.component.scss             | 10 +++++++++-
 .../card-view-textitem.component.ts               |  8 ++++++--
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
index 60a59d850b..a4e5b7282c 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -40,18 +40,25 @@
                         class="adf-textarea"
                         [placeholder]="property.default | translate"
                         [(ngModel)]="editedValue"
+                        (input)="onTextAreaInputChange()"
                         [attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
                 </mat-form-field>
-                <mat-icon
-                    class="adf-textitem-icon adf-update-icon"
+                <button mat-button
+                    [disabled]="hasErrors()"
                     (click)="update()"
-                    [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
-                    [attr.data-automation-id]="'card-textitem-update-' + property.key">done</mat-icon>
+                    [attr.data-automation-id]="'card-textitem-update-' + property.key"
+                    class="adf-textitem-icon adf-update-icon">
+                        <mat-icon
+                            class="adf-update-icon"
+                            [class.adf-button-disabled]="hasErrors()"
+                            [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate">done</mat-icon>
+                </button>
                 <mat-icon
                     class="adf-textitem-icon adf-reset-icon"
                     (click)="reset()"
                     [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
                     [attr.data-automation-id]="'card-textitem-reset-' + property.key">clear</mat-icon>
+
             </div>
             <mat-error  [attr.data-automation-id]="'card-textitem-error-' + property.key" class="adf-textitem-editable-error" *ngIf="hasErrors()">
                 <ul>
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
index b078f15651..6b767d09a0 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -40,7 +40,7 @@
             &-controls {
                 display: flex;
 
-                mat-icon:hover {
+                mat-icon:not(.adf-button-disabled):hover {
                     opacity: 1;
                     cursor: pointer;
                 }
@@ -126,4 +126,12 @@
             display: block;
         }
     }
+
+    .mat-button.adf-update-icon {
+        min-width: 40px;
+        line-height: 0;
+        margin-top: -4px;
+        padding: 0;
+    }
+
 }
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
index e7298e76dc..0ee7a8d0a7 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
@@ -64,8 +64,8 @@ export class CardViewTextItemComponent implements OnChanges {
         return !!this.property.icon;
     }
 
-    hasErrors(): number {
-        return this.errorMessages && this.errorMessages.length;
+    hasErrors(): boolean {
+        return this.errorMessages && this.errorMessages.length > 0;
     }
 
     setEditMode(editStatus: boolean): void {
@@ -92,6 +92,10 @@ export class CardViewTextItemComponent implements OnChanges {
         }
     }
 
+    onTextAreaInputChange() {
+        this.errorMessages = this.property.getValidationErrors(this.editedValue);
+    }
+
     clicked(): void {
         this.cardViewUpdateService.clicked(this.property);
     }