From 0c995bff6ec58296e5f2a05a3e9319f58a85f4b9 Mon Sep 17 00:00:00 2001 From: Vito Date: Fri, 2 Jun 2017 12:10:24 -0700 Subject: [PATCH] [ADF-709] add autofocus when a new row is added on dynamic table widget (#1927) * [ADF-709] add autofocus when a new row is added on dynamic table widget * [ADF-709] removed wrong reference for template --- .../dynamic-table/dynamic-table.widget.html | 1 + .../dynamic-table.widget.spec.ts | 32 +++++++++++++++---- .../dynamic-table/dynamic-table.widget.ts | 21 ++++++++++-- 3 files changed, 46 insertions(+), 8 deletions(-) diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html index a717509da5..4d5568172d 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html @@ -38,6 +38,7 @@ arrow_downward diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts index 41fd04ad4d..ce148c4919 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts @@ -86,7 +86,12 @@ describe('DynamicTableWidget', () => { const field = new FormFieldModel(new FormModel()); table = new DynamicTableModel(field); visibilityService = new WidgetVisibilityService(null, logService); - widget = new DynamicTableWidget(null, visibilityService, logService); + let changeDetectorSpy = jasmine.createSpyObj('cd', ['detectChanges']); + let nativeElementSpy = jasmine.createSpyObj('nativeElement', ['querySelector']); + changeDetectorSpy.nativeElement = nativeElementSpy; + let elementRefSpy = jasmine.createSpyObj('elementRef', ['']); + elementRefSpy.nativeElement = nativeElementSpy; + widget = new DynamicTableWidget(elementRefSpy, visibilityService, logService, changeDetectorSpy); widget.content = table; }); @@ -334,11 +339,6 @@ describe('DynamicTableWidget', () => { window['componentHandler'] = componentHandler; })); - afterEach(() => { - fixture.destroy(); - TestBed.resetTestingModule(); - }); - beforeEach(() => { dynamicTableWidget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), fakeFormField); dynamicTableWidget.field.type = FormFieldTypes.DYNAMIC_TABLE; @@ -346,6 +346,11 @@ describe('DynamicTableWidget', () => { fixture.detectChanges(); }); + afterEach(() => { + fixture.destroy(); + TestBed.resetTestingModule(); + }); + it('should select a row when press space bar', async(() => { let rowElement = element.querySelector('#fake-dynamic-table-row-0'); @@ -363,5 +368,20 @@ describe('DynamicTableWidget', () => { expect(selectedRow.className).toBe('dynamic-table-widget__row-selected'); }); })); + + it('should focus on add button when a new row is saved', async(() => { + let addNewRowButton: HTMLButtonElement = element.querySelector('#fake-dynamic-table-add-row'); + + expect(element.querySelector('#dynamic-table-fake-dynamic-table')).not.toBeNull(); + expect(addNewRowButton).not.toBeNull(); + + dynamicTableWidget.addNewRow(); + dynamicTableWidget.onSaveChanges(); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + expect(document.activeElement.id).toBe('fake-dynamic-table-add-row'); + }); + })); }); }); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts index a91fe6ee13..0b2f98b9cd 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, ElementRef, OnInit, Input } from '@angular/core'; +import { Component, ElementRef, OnInit, Input, ChangeDetectorRef } from '@angular/core'; import { LogService } from 'ng2-alfresco-core'; import { WidgetComponent } from './../widget.component'; import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './dynamic-table.widget.model'; @@ -46,7 +46,8 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit { constructor(private elementRef: ElementRef, private visibilityService: WidgetVisibilityService, - private logService: LogService) { + private logService: LogService, + private cd: ChangeDetectorRef) { super(); } @@ -57,6 +58,20 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit { } } + forceFocusOnAddButton() { + if (this.content) { + this.cd.detectChanges(); + let buttonAddRow = this.elementRef.nativeElement.querySelector('#' + this.content.id + '-add-row'); + if (this.isDynamicTableReady(buttonAddRow)) { + buttonAddRow.focus(); + } + } + } + + private isDynamicTableReady(buttonAddRow) { + return this.field && !this.editMode && buttonAddRow; + } + isValid() { let result = true; @@ -159,11 +174,13 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit { this.logService.error(this.ERROR_MODEL_NOT_FOUND); } this.editMode = false; + this.forceFocusOnAddButton(); } onCancelChanges() { this.editMode = false; this.editRow = null; + this.forceFocusOnAddButton(); } copyRow(row: DynamicTableRow): DynamicTableRow {