From 7077698bc129c997e82ef4a8c1e90c927384a2aa Mon Sep 17 00:00:00 2001 From: christophscheuing <47225324+christophscheuing@users.noreply.github.com> Date: Thu, 20 Oct 2022 09:52:06 +0200 Subject: [PATCH] fix Automatically select first entry in autocomplete (#1457) closes #1317 Co-authored-by: Simon --- .../edit-single-entity.component.html | 25 ++++--- .../entity-select.component.html | 3 +- .../entity-select.component.spec.ts | 71 ++++++++----------- .../entity-select/entity-select.component.ts | 18 +++-- 4 files changed, 57 insertions(+), 60 deletions(-) diff --git a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html index 3d635d5cce..0fb2761145 100644 --- a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html +++ b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html @@ -9,11 +9,7 @@ We also set floatLabel to always because the label is attached to the wrong input --> - + {{ label }} - + - + This field is required @@ -54,7 +57,11 @@ class="block-wrapper" [entityToDisplay]="selectedEntity" > - diff --git a/src/app/core/entity-components/entity-utils/entity-select/entity-select.component.html b/src/app/core/entity-components/entity-utils/entity-select/entity-select.component.html index 8ac67950b3..94abe08b4d 100644 --- a/src/app/core/entity-components/entity-utils/entity-select/entity-select.component.html +++ b/src/app/core/entity-components/entity-utils/entity-select/entity-select.component.html @@ -41,10 +41,11 @@ - + { expect(component.loading.value).toBe(false); })); - it("should suggest all entities after an initial load", (done) => { - subscription = component.filteredEntities.subscribe((next) => { - expect(next.length).toBe(testUsers.length); - done(); - }); + it("should suggest all entities after an initial load", fakeAsync(() => { component.entityType = User.ENTITY_TYPE; + tick(); fixture.detectChanges(); - }); + expect(component.filteredEntities.length).toBe(testUsers.length); + })); it("contains the initial selection as entities", fakeAsync(() => { component.entityType = User.ENTITY_TYPE; @@ -154,29 +152,27 @@ describe("EntitySelectComponent", () => { expect(component.selectedEntities).toBeEmpty(); }); - it("autocompletes with the default accessor", (done) => { + it("autocompletes with the default accessor", () => { component.allEntities = testUsers; component.loading.next(false); - let iterations = 0; - let expectedLength = 4; - subscription = component.filteredEntities.subscribe((next) => { - iterations++; - expect(next.length).toEqual(expectedLength); - if (iterations === 4) { - done(); - } - }); - expectedLength = 4; + component.formControl.setValue(null); - expectedLength = 3; + expect(component.filteredEntities.length).toEqual(4); + component.formControl.setValue("A"); - expectedLength = 3; - component.formControl.setValue("Ab"); - expectedLength = 1; + expect(component.filteredEntities.length).toEqual(3); + + component.formControl.setValue("c"); + expect(component.filteredEntities.length).toEqual(2); + component.formControl.setValue("Abc"); + expect(component.filteredEntities.length).toEqual(1); + + component.formControl.setValue("z"); + expect(component.filteredEntities.length).toEqual(0); }); - it("should use the configurable toStringAttributes for comparing values", async () => { + it("should use the configurable toStringAttributes for comparing values", fakeAsync(() => { class Person extends Entity { static toStringAttributes = ["firstname", "lastname"]; @@ -189,34 +185,23 @@ describe("EntitySelectComponent", () => { component.allEntities = [p1, p2]; component.loading.next(false); - let res = firstValueFrom(component.filteredEntities); component.formControl.setValue("Aa"); - await expectAsync(res).toBeResolvedTo([p1, p2]); + tick(); + expect(component.filteredEntities).toEqual([p1, p2]); - res = firstValueFrom(component.filteredEntities); component.formControl.setValue("Aa b"); - await expectAsync(res).toBeResolvedTo([p1]); - }); + tick(); + expect(component.filteredEntities).toEqual([p1]); + })); - it("should add an unselected entity to the filtered entities array", (done) => { - // TODO this is still throwing object unsubscribe error + it("should add an unselected entity to the filtered entities array", () => { component.allEntities = testUsers; const selectedUser = testUsers[1]; - let iteration = 0; - - subscription = component.filteredEntities.subscribe( - (autocompleteEntities) => { - iteration++; - if (iteration === 1) { - expect(autocompleteEntities).not.toContain(selectedUser); - } else if (iteration === 2) { - expect(autocompleteEntities).toContain(selectedUser); - done(); - } - } - ); component.selectEntity(selectedUser); + expect(component.filteredEntities).not.toContain(selectedUser); + component.unselectEntity(selectedUser); + expect(component.filteredEntities).toContain(selectedUser); }); }); diff --git a/src/app/core/entity-components/entity-utils/entity-select/entity-select.component.ts b/src/app/core/entity-components/entity-utils/entity-select/entity-select.component.ts index 784093413a..103756970f 100644 --- a/src/app/core/entity-components/entity-utils/entity-select/entity-select.component.ts +++ b/src/app/core/entity-components/entity-utils/entity-select/entity-select.component.ts @@ -10,7 +10,7 @@ import { } from "@angular/core"; import { COMMA, ENTER } from "@angular/cdk/keycodes"; import { Entity } from "../../../entity/model/entity"; -import { BehaviorSubject, Observable } from "rxjs"; +import { BehaviorSubject } from "rxjs"; import { FormControl } from "@angular/forms"; import { filter, map } from "rxjs/operators"; import { MatChipInputEvent } from "@angular/material/chips"; @@ -126,18 +126,22 @@ export class EntitySelectComponent implements OnChanges { inputPlaceholder = this.loadingPlaceholder; allEntities: E[] = []; - filteredEntities: Observable; + filteredEntities: E[] = []; formControl = new FormControl(""); @ViewChild("inputField") inputField: ElementRef; @ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger; constructor(private entityMapperService: EntityMapperService) { - this.filteredEntities = this.formControl.valueChanges.pipe( - untilDestroyed(this), - filter((value) => value === null || typeof value === "string"), // sometimes produces entities - map((searchText?: string) => this.filter(searchText)) - ); + this.formControl.valueChanges + .pipe( + untilDestroyed(this), + filter((value) => value === null || typeof value === "string"), // sometimes produces entities + map((searchText?: string) => this.filter(searchText)) + ) + .subscribe((value) => { + this.filteredEntities = value; + }); this.loading.pipe(untilDestroyed(this)).subscribe((isLoading) => { this.inputPlaceholder = isLoading ? this.loadingPlaceholder