870 let select highlighted option after typing text in autocomplete c…

…ombobox (#873)

870 select on enter

projects/systelab-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "systelab-components",
-  "version": "17.1.15",
+  "version": "17.1.16",
   "license": "MIT",
   "keywords": [
     "Angular",

projects/systelab-components/src/lib/combobox/abstract-api-combobox.component.ts

@@ -60,7 +60,6 @@ export abstract class AbstractApiComboBox<T> extends AbstractComboBox<T> impleme
 			if (this.totalItemsLoaded) {
 				this.setDropdownHeight();
 				this.setDropdownPosition();
-				this.transferFocusToGrid();
 				result = false;
 			}
 		}

projects/systelab-components/src/lib/combobox/autocomplete/autocomplete-api-combobox.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, Renderer2, ViewChild } from '@angular/core';
 import { AutocompleteApiComboBox, KeyName } from './autocomplete-api-combobox.component';
 import { Observable, of } from 'rxjs';
 import { GridContextMenuCellRendererComponent } from '../../grid/contextmenu/grid-context-menu-cell-renderer.component';
@@ -14,6 +14,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { SystelabTranslateModule } from 'systelab-translate';
 import { SystelabPreferencesModule } from 'systelab-preferences';
 import { AgGridModule } from 'ag-grid-angular';
+import { GridApi, RowNode } from 'ag-grid-community';
+import { roundToNearestMinutesWithOptions } from 'date-fns/fp';
 
 export class TestData {
 	constructor(public id: string | number, public description: string) {
@@ -106,6 +108,12 @@ export class AutocompleteTestComponent {
 describe('AutocompleteApiAutocomplete', () => {
 	let component: AutocompleteTestComponent;
 	let fixture: ComponentFixture<AutocompleteTestComponent>;
+	const gridApiSpy = jasmine.createSpyObj('GridApi', ['getDisplayedRowAtIndex']);
+	const gridApiMock = {
+		getDisplayedRowAtIndex: () => {
+			return new RowNode<any>(null);
+		}
+	} as unknown as GridApi;
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
@@ -127,7 +135,10 @@ describe('AutocompleteApiAutocomplete', () => {
 				SystelabAutocompleteComponent,
 				AutocompleteTestComponent
 			],
-			providers: [Renderer2, ChangeDetectorRef],
+			providers: [
+				Renderer2,
+				ChangeDetectorRef,
+			],
 		}).compileComponents();
 	});
 
@@ -212,4 +223,23 @@ describe('AutocompleteApiAutocomplete', () => {
 		component.combobox.onCellKeyDown(event);
 		expect(component.combobox.inputElement.nativeElement.value).toEqual('aa');
 	});
+
+	it('onEnterDoSelect', () => {
+		const getDisplayedRowAtIndexSpy = spyOn<any>(gridApiMock, 'getDisplayedRowAtIndex').and.callThrough();
+		spyOn(RowNode.prototype, 'selectThisNode');
+		component.combobox.gridOptions.api = gridApiMock;
+		component.combobox.isDropdownOpened = true;
+		component.combobox.onEnterDoSelect(new KeyboardEvent('keydown', {}));
+		expect(getDisplayedRowAtIndexSpy).toHaveBeenCalled();
+	});
+
+	it('onEnterDoSelect', () => {
+		const getDisplayedRowAtIndexSpy = spyOn<any>(gridApiMock, 'getDisplayedRowAtIndex').and.callThrough();
+		spyOn(RowNode.prototype, 'selectThisNode');
+		component.combobox.gridOptions.api = gridApiMock;
+		component.combobox.isDropdownOpened = false;
+		component.combobox.onEnterDoSelect(new KeyboardEvent('keydown', {}));
+		expect(getDisplayedRowAtIndexSpy).not.toHaveBeenCalled();
+	});
+
 });

projects/systelab-components/src/lib/combobox/autocomplete/autocomplete-api-combobox.component.ts

@@ -176,4 +176,10 @@ export abstract class AutocompleteApiComboBox<T> extends AbstractApiComboBox<T>
 		this.doSearch(event);
 	}
 
+	public onEnterDoSelect(event: KeyboardEvent) {
+		if (this.isDropdownOpened) {
+			this.gridOptions.api.getDisplayedRowAtIndex(0).selectThisNode(true);
+		}
+	}
+
 }

projects/systelab-components/src/lib/combobox/autocomplete/autocomplete-combobox.component.html

@@ -16,6 +16,7 @@
                (keydown.Tab)="closeDropDown()"
                (keydown.arrowDown)="onInputNavigate($event)"
                (keydown.arrowUp)="onInputNavigate($event)"
+               (keydown.enter)="onEnterDoSelect($event)"
                 (click)="onInputClicked($event)"/>
         <button *ngIf="withClearOption && !inputIsEmpty()" type="button" #clearButton [hidden]="isDisabled"
                 class="slab-combo-button border-right-0 rounded-0 {{deleteIconClass}}" (click)="clearText($event)"

projects/systelab-components/src/lib/datepicker/date-transformer.service.spec.ts

@@ -26,6 +26,25 @@ describe('DataTransformerService Test', () => {
 				expected: new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() + 2)},
 	];
 
+	const checkMonthScenarios = [
+		{description: 'Month number -1', monthNumber: -1, expected: false},
+		{description: 'Month Number 5', monthNumber: 5, expected: true},
+		{description: 'Month Number 15', monthNumber: 15, expected: false},
+	];
+
+	const checkDayScenarios = [
+		{description: 'Day Number -1', yearInDate: 2024, monthInDate: 6, dayNumber: -1, expected: false},
+		{description: 'Day Number 21', yearInDate: 2024, monthInDate: 6, dayNumber: 21, expected: true},
+		{description: 'Day Number 35', yearInDate: 2024, monthInDate: 6, dayNumber: 35, expected: false},
+	];
+
+	const getSeparatorScenarios = [
+		{description: 'Format Date yy/mm', dateFormat: 'yy/mm', expected: '/'},
+		{description: 'Format Date yy-mm', dateFormat: 'yy-mm', expected: '-'},
+		{description: 'Format Date yy.mm', dateFormat: 'yy.mm', expected: '.'},
+		{description: 'Format Date yy', dateFormat: 'yy', expected: undefined},
+	];
+
  	const isSameDate = (date1: Date, date2: Date): boolean => {
 		if (date1.getDate() !== date2.getDate()) {
 			return false;
@@ -64,4 +83,25 @@ describe('DataTransformerService Test', () => {
 		});
 	});
 
+	checkMonthScenarios.forEach(scenario => {
+		it(scenario.description, () => {
+			const result = dataTransformerService['checkMonthNumber'](scenario.monthNumber);
+			expect(result).toEqual(scenario.expected);
+		});
+	})
+
+	checkDayScenarios.forEach(scenario => {
+		it(scenario.description, () => {
+			const result = dataTransformerService['checkDayNumber'](scenario.yearInDate, scenario.monthInDate, scenario.dayNumber);
+			expect(result).toEqual(scenario.expected);
+		});
+	})
+
+	getSeparatorScenarios.forEach(scenario => {
+		it(scenario.description, () => {
+			const result = dataTransformerService['getDateSeparator'](scenario.dateFormat);
+			expect(result).toEqual(scenario.expected);
+		});
+	})
+
 });