From 513098aee7bba69dd5c26625f1f947192ce9595e Mon Sep 17 00:00:00 2001
From: Tomasz Gnyp <49343696+tomgny@users.noreply.github.com>
Date: Mon, 4 Mar 2024 19:39:49 +0100
Subject: [PATCH] AAE-19372 Fix clickable area on cardview textitem (#9361)

* AAE-19372 Fix clickable area on cardview textitem

* AAE-19372 update test description
---
 .../card-view-textitem.component.html         |  4 +--
 .../card-view-textitem.component.spec.ts      | 25 +++++++++++++++++++
 .../card-view-textitem.component.ts           | 16 ++++++------
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
index a3a07f8b74..83629f0820 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -105,7 +105,7 @@
                 title="{{ property.label | translate }}"
                 [ngClass]="{
                     'adf-property-value-editable': editable,
-                    'adf-textitem-clickable-value': !isEditable,
+                    'adf-textitem-clickable-value': isClickable,
                     'adf-property-readonly-value': isReadonlyProperty,
                     'adf-property-value-has-error': isEditable && hasErrors
                 }"
@@ -114,7 +114,7 @@
                 [(ngModel)]="editedValue"
                 (blur)="update()"
                 (keydown.enter)="update()"
-                [disabled]="!isEditable"
+                [readonly]="!isEditable"
                 [attr.data-automation-id]="'card-textitem-value-' + property.key">
             <button mat-icon-button
                 matSuffix
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
index 49cf085459..427fb77353 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
@@ -33,6 +33,7 @@ import { CardViewItemValidator } from '../../interfaces/card-view-item-validator
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatChipHarness, MatChipListHarness } from '@angular/material/chips/testing';
+import { MatInputHarness } from '@angular/material/input/testing';
 
 describe('CardViewTextItemComponent', () => {
     let loader: HarnessLoader;
@@ -529,6 +530,17 @@ describe('CardViewTextItemComponent', () => {
             );
         });
 
+        it('should input be readonly if item it NOT editable', async () => {
+            component.editable = false;
+            component.property.clickable = true;
+            component.ngOnChanges({});
+
+            loader = TestbedHarnessEnvironment.loader(fixture);
+            const inputHarness = await loader.getHarness(MatInputHarness.with({selector: `[data-automation-id="card-textitem-value-${component.property.key}"]`}));
+
+            expect(component.isEditable).toBe(false);
+            expect(await inputHarness.isReadonly()).toBe(true);
+        });
     });
 
     describe('Update', () => {
@@ -540,6 +552,7 @@ describe('CardViewTextItemComponent', () => {
                 default: 'FAKE-DEFAULT-KEY',
                 editable: true
             });
+            component.editable = true;
             component.ngOnChanges({ property: new SimpleChange(null, null, true) });
             fixture.detectChanges();
         });
@@ -705,6 +718,18 @@ describe('CardViewTextItemComponent', () => {
             expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
             expect(component.property.value).toBe(expectedText);
         });
+
+        it('should NOT propagate update if is NOT editable', () => {
+            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
+            const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
+            component.editable = false;
+
+            fixture.detectChanges();
+            component.update();
+
+            expect(component.isEditable).toBe(false);
+            expect(itemUpdatedSpy).not.toHaveBeenCalled();
+        });
     });
 
     describe('number', () => {
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
index 2a8d3c4159..62515824fe 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
@@ -122,13 +122,15 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     }
 
     update(): void {
-        this.resetErrorMessages();
-        if (this.property.isValid(this.editedValue)) {
-            this.property.value = this.prepareValueForUpload(this.property, this.editedValue);
-            this.cardViewUpdateService.update({ ...this.property } as CardViewTextItemModel, this.property.value);
-        } else {
-            this.errors = this.property.getValidationErrors(this.editedValue);
-            this.cardViewUpdateService.update({ ...this.property } as CardViewTextItemModel, this.editedValue);
+        if (this.isEditable) {
+            this.resetErrorMessages();
+            if (this.property.isValid(this.editedValue)) {
+                this.property.value = this.prepareValueForUpload(this.property, this.editedValue);
+                this.cardViewUpdateService.update({ ...this.property } as CardViewTextItemModel, this.property.value);
+            } else {
+                this.errors = this.property.getValidationErrors(this.editedValue);
+                this.cardViewUpdateService.update({ ...this.property } as CardViewTextItemModel, this.editedValue);
+            }
         }
     }