From 1970b1da82306b57a69fdc9c6a450189d09f0797 Mon Sep 17 00:00:00 2001
From: arditdomi <32884230+arditdomi@users.noreply.github.com>
Date: Mon, 21 Oct 2019 14:22:16 +0100
Subject: [PATCH] [ADF-4964] Add enter and escape events for updating card view
 properties (#5167)

* [ADF-4964] Add enter and escape events for updating card view properties

* [ADF-4964] Add unit tests
---
 .../card-view-textitem.component.html         |  2 +
 .../card-view-textitem.component.spec.ts      | 58 ++++++++++++++++++-
 2 files changed, 59 insertions(+), 1 deletion(-)

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 4748915e63..6fd3de9e5c 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
@@ -38,6 +38,8 @@
             <div class="adf-textitem-editable-controls">
                 <mat-form-field floatPlaceholder="never" class="adf-input-container">
                     <input *ngIf="!property.multiline" #editorInput
+                           (keyup.escape)="reset()"
+                           (keyup.enter)="update()"
                         matInput
                         class="adf-input"
                         [placeholder]="property.default | translate"
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
index f09ee70d06..df34151c63 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
@@ -67,7 +67,7 @@ describe('CardViewTextItemComponent', () => {
             componentWithDisplayName = fixture.componentInstance;
             componentWithDisplayName.property = new CardViewTextItemModel({
                 label: 'Name label',
-                value: {id: 123, displayName: 'User Name'},
+                value: { id: 123, displayName: 'User Name' },
                 key: 'namekey'
             });
             fixture.detectChanges();
@@ -338,5 +338,61 @@ describe('CardViewTextItemComponent', () => {
             const updateInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
             updateInput.triggerEventHandler('click', null);
         });
+
+        it('should update the value using the enter key', async(() => {
+            component.inEdit = false;
+            component.property.isValid = () => true;
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+            const expectedText = 'changed text';
+            fixture.detectChanges();
+
+            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
+                (updateNotification) => {
+                    expect(updateNotification.target).toBe(component.property);
+                    expect(updateNotification.changed).toEqual({ textkey: expectedText });
+                    disposableUpdate.unsubscribe();
+                }
+            );
+
+            const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
+            editIcon.triggerEventHandler('click', null);
+            fixture.detectChanges();
+
+            const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
+            editInput.nativeElement.value = expectedText;
+            editInput.nativeElement.dispatchEvent(new Event('input'));
+            fixture.detectChanges();
+
+            const enterKeyboardEvent = new KeyboardEvent('keyup', { 'key': 'Enter' });
+            editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
+            fixture.detectChanges();
+
+            const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-textkey"]`));
+            expect(textItemReadOnly.nativeElement.textContent).toEqual(expectedText);
+            expect(component.property.value).toBe(expectedText);
+        }));
+
+        it('should reset the value using the escape key', async(() => {
+            component.inEdit = false;
+            component.property.isValid = () => true;
+            fixture.detectChanges();
+
+            const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
+            editIcon.triggerEventHandler('click', null);
+            fixture.detectChanges();
+
+            const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
+            editInput.nativeElement.value = 'changed text';
+            editInput.nativeElement.dispatchEvent(new Event('input'));
+            fixture.detectChanges();
+
+            const enterKeyboardEvent = new KeyboardEvent('keyup', { 'key': 'Escape' });
+            editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
+            fixture.detectChanges();
+
+            const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-textkey"]`));
+            expect(textItemReadOnly.nativeElement.textContent).toEqual('Lorem ipsum');
+            expect(component.property.value).toBe('Lorem ipsum');
+        }));
     });
 });