[ADF-707] Ability to select a row on a dynamic table (#1921)

2026-09-09 18:03:21 +00:00 · 2017-06-01 17:49:25 +01:00
parent 2b97df0656
commit 8c032b2167
3 changed files with 124 additions and 4 deletions
@@ -4,7 +4,7 @@

    <div *ngIf="!editMode">
        <div class="dynamic-table-widget__table-container">
-            <table class="mdl-data-table mdl-js-data-table dynamic-table-widget__table">
+            <table class="mdl-data-table mdl-js-data-table dynamic-table-widget__table" id="dynamic-table-{{content.id}}">
                <thead>
                    <tr>
                        <th *ngFor="let column of content.visibleColumns"
@@ -14,8 +14,8 @@
                    </tr>
                </thead>
                <tbody>
-                    <tr *ngFor="let row of content.rows"
-                        [class.dynamic-table-widget__row-selected]="row.selected">
+                    <tr *ngFor="let row of content.rows; let idx = index" tabindex="0" id="{{content.id}}-row-{{idx}}"
+                        [class.dynamic-table-widget__row-selected]="row.selected" (keyup)="onKeyPressed($event, row)">
                        <td *ngFor="let column of content.visibleColumns"
                            class="mdl-data-table__cell--non-numeric"
                            (click)="onRowClicked(row)">
@@ -17,9 +17,62 @@

 import { LogServiceMock } from 'ng2-alfresco-core';
 import { DynamicTableWidget } from './dynamic-table.widget';
-import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './dynamic-table.widget.model';
+import {
+    DynamicTableModel,
+    DynamicTableRow,
+    DynamicTableColumn
+} from './dynamic-table.widget.model';
 import { FormModel, FormFieldTypes, FormFieldModel } from './../core/index';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
+import { RowEditorComponent } from './editors/row.editor';
+import { DropdownEditorComponent } from './editors/dropdown/dropdown.editor';
+import { DateEditorComponent } from './editors/date/date.editor';
+import { BooleanEditorComponent } from './editors/boolean/boolean.editor';
+import { TextEditorComponent } from './editors/text/text.editor';
+
+
+let fakeFormField = {
+    id: "fake-dynamic-table",
+    name: "fake-label",
+    value: [{ 1: 1, 2: 2, 3: 4 }],
+    required: false,
+    readOnly: false,
+    overrideId: false,
+    colspan: 1,
+    placeholder: null,
+    minLength: 0,
+    maxLength: 0,
+    params: {
+        existingColspan: 1,
+        maxColspan: 1
+    },
+    sizeX: 2,
+    sizeY: 2,
+    row: -1,
+    col: -1,
+    columnDefinitions: [
+        {
+            id: 1,
+            name: 1,
+            type: 'String',
+            visible: true
+        },
+        {
+            id: 2,
+            name: 2,
+            type: 'String',
+            visible: true
+        },
+        {
+            id: 3,
+            name: 3,
+            type: 'String',
+            visible: true
+        }
+    ]
+};

 describe('DynamicTableWidget', () => {

@@ -256,4 +309,59 @@ describe('DynamicTableWidget', () => {
        let actual = widget.getCellValue(row, column);
        expect(actual).toBe('GBP 100');
    });
+
+    describe('when template is ready', () => {
+        let dynamicTableWidget: DynamicTableWidget;
+        let fixture: ComponentFixture<DynamicTableWidget>;
+        let element: HTMLElement;
+        let componentHandler;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                imports: [CoreModule],
+                providers: [WidgetVisibilityService],
+                declarations: [DynamicTableWidget, RowEditorComponent,
+                    DropdownEditorComponent, DateEditorComponent, BooleanEditorComponent, TextEditorComponent]
+            }).compileComponents().then(() => {
+                fixture = TestBed.createComponent(DynamicTableWidget);
+                dynamicTableWidget = fixture.componentInstance;
+                element = fixture.nativeElement;
+            });
+        }));
+
+        beforeEach(async(() => {
+            componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']);
+            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;
+
+            fixture.detectChanges();
+        });
+
+        it('should select a row when press space bar', async(() => {
+            let rowElement = element.querySelector('#fake-dynamic-table-row-0');
+
+            expect(element.querySelector('#dynamic-table-fake-dynamic-table')).not.toBeNull();
+            expect(rowElement).not.toBeNull();
+            expect(rowElement.className).toBeFalsy();
+
+            let event: any = new Event('keyup');
+            event.keyCode = 32;
+            rowElement.dispatchEvent(event);
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                let selectedRow = element.querySelector('#fake-dynamic-table-row-0');
+                expect(selectedRow.className).toBe('dynamic-table-widget__row-selected');
+            });
+        }));
+    });
 });
@@ -42,6 +42,8 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit {
    editMode: boolean = false;
    editRow: DynamicTableRow = null;

+    private selectArrayCode = [32, 0, 13];
+
    constructor(private elementRef: ElementRef,
                private visibilityService: WidgetVisibilityService,
                private logService: LogService) {
@@ -71,6 +73,16 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit {
        }
    }

+    onKeyPressed($event: KeyboardEvent, row: DynamicTableRow) {
+        if (this.content && this.isEnterOrSpacePressed($event.keyCode)) {
+            this.content.selectedRow = row;
+        }
+    }
+
+    private isEnterOrSpacePressed(keycode) {
+        return this.selectArrayCode.indexOf(keycode) !== -1;
+    }
+
    hasSelection(): boolean {
        return !!(this.content && this.content.selectedRow);
    }