OZG-400 fix autocomplete

goofy-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forward-formular/vorgang-forward-form/vorgang-forward.formservice.ts

@@ -20,14 +20,14 @@ export class VorgangForwardFormService extends AbstractFormService {
 		super(formBuilder);
 	}
 
-	initForm(): FormGroup {
+	protected initForm(): FormGroup {
 		return this.form = this.formBuilder.group({
 			[VorgangForwardFormService.FIELD_EMAIL]: new FormControl(),
 			[VorgangForwardFormService.FIELD_PASSWORD]: new FormControl()
 		})
 	}
 
-	getPathPrefix(): string {
+	protected getPathPrefix(): string {
 		return VorgangForwardFormService.FIELD_PATH_PREFIX;
 	}
 
@@ -35,7 +35,7 @@ export class VorgangForwardFormService extends AbstractFormService {
 		this.vorgang = vorgang;
 	}
 
-	doSubmit(): Observable<StateResource<CommandResource>> {
+	protected doSubmit(): Observable<StateResource<CommandResource>> {
 		return this.forwardingService.forward(this.vorgang, this.getFormValue());
 	}
 }

goofy-client/libs/kommentar/src/lib/kommentar-list-in-vorgang-container/kommentar-form/kommentar.formservice.spec.ts

@@ -7,7 +7,7 @@ import { of } from "rxjs";
 import { KommentarFormService } from "./kommentar.formservice";
 
 describe('KommentarFormService', () => {
-	let formService: KommentarFormService;
+	let formService;
 	let kommentarService: Mock<KommentarService>;
 
 	const formBuilder: FormBuilder = new FormBuilder();

goofy-client/libs/kommentar/src/lib/kommentar-list-in-vorgang-container/kommentar-form/kommentar.formservice.ts

@@ -14,13 +14,13 @@ export class KommentarFormService extends AbstractFormService {
 		super(formBuilder);
 	}
 
-	initForm(): FormGroup {
+	protected initForm(): FormGroup {
 		return this.formBuilder.group({
 			[KommentarFormService.TEXT]: new FormControl(null)
 		})
 	}
 
-	doSubmit(): Observable<StateResource<any>> {
+	protected doSubmit(): Observable<StateResource<any>> {
 		if (this.isPatch()) {
 			return this.kommentarService.editKommentar(this.getSourceValue(), this.getFormValue());
 		} else {
@@ -28,7 +28,7 @@ export class KommentarFormService extends AbstractFormService {
 		}
 	}
 
-	getPathPrefix(): string {
+	protected getPathPrefix(): string {
 		return KommentarFormService.FIELD_PATH_PREFIX;
 	}
 }
\ No newline at end of file

goofy-client/libs/tech-shared/src/lib/services/formservice.abstract.ts

@@ -13,13 +13,13 @@ export abstract class AbstractFormService {
 		this.form = this.initForm();
 	}
 
-	abstract initForm(): FormGroup;
+	protected abstract initForm(): FormGroup;
 
 	public submit(): Observable<StateResource<any>> {
 		return this.doSubmit().pipe(map(result => this.handleResponse(result)));
 	}
 
-	abstract doSubmit(): Observable<StateResource<any>>;
+	protected abstract doSubmit(): Observable<StateResource<any>>;
 
 	handleResponse(result: StateResource<any>): StateResource<any> {
 		if (result.loading) return result;
@@ -40,7 +40,7 @@ export abstract class AbstractFormService {
 		apiError.issues.forEach(issue => setValidationError(this.form, issue, this.getPathPrefix()))
 	}
 
-	abstract getPathPrefix(): string;
+	protected abstract getPathPrefix(): string;
 
 	getFormValue(): any {
 		return this.form.value;

goofy-client/libs/ui/src/lib/ui/editor/autocomplete-editor/autocomplete-editor.component.html

 <mat-form-field appearance="outline">
 	<mat-label>{{label}}</mat-label>
 
-	<input #autofocus [attr.data-test-id]="(label | convertForDataTest) + '-autocomplete-input'"
+	<input #autocompleteInput [attr.data-test-id]="(label | convertForDataTest) + '-autocomplete-input'"
 			type="text" matInput [matAutocomplete]="auto"
 			[formControl]="fieldControl" [name]="label"
-			(keyup)="onKeyUp.emit()" (keyup.enter)="onEnter.emit()">
+			(keyup)="keyUp($event)" (keyup.enter)="onEnter()">
 
 	<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-		<mat-option *ngFor="let value of (optionValues$ | async)" [attr.data-test-id]="(value.label | convertForDataTest) + '-autocomplete-option'"
-				[value]="useLabelAsValue ? value.label : value.value" 
-				(onSelectionChange)="onOptionSelected.emit(value.value)">
+		<mat-option *ngFor="let value of values" [attr.data-test-id]="(value.label | convertForDataTest) + '-autocomplete-option'"
+				[value]="value.value" 
+				(keyup.enter)="onSelection(value)"
+				(onSelectionChange)="onSelection(value)">
 			{{value.label}}
 		</mat-option>
 	</mat-autocomplete>

goofy-client/libs/ui/src/lib/ui/editor/autocomplete-editor/autocomplete-editor.component.ts

-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { ResourceUri } from '@ngxp/rest';
-import { Observable, of } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { isEmpty, isEqual, isNil } from 'lodash-es';
 import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstract.component';
 
 @Component({
@@ -9,47 +8,52 @@ import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstra
 	templateUrl: './autocomplete-editor.component.html',
 	styleUrls: ['./autocomplete-editor.component.scss']
 })
-export class AutocompleteEditorComponent extends FormControlEditorAbstractComponent implements OnChanges, AfterViewInit {
+export class AutocompleteEditorComponent extends FormControlEditorAbstractComponent implements AfterViewInit {
 
 	@Input() label: string;
 	@Input() values: Selectable[] = [];
-	@Input() staticValues: boolean = false;
-	@Input() useLabelAsValue: boolean = false;
 
 	@Output() onKeyUp: EventEmitter<void> = new EventEmitter();
-	@Output() onOptionSelected: EventEmitter<ResourceUri> = new EventEmitter();
-	@Output() onEnter: EventEmitter<void> = new EventEmitter();
+	@Output() onOptionSelected: EventEmitter<Selectable> = new EventEmitter();
+	@Output() enterOnNoSelection: EventEmitter<void> = new EventEmitter();
 
-	@ViewChild('autofocus', { static: true }) public autofocusElement: ElementRef;
-
-	optionValues$: Observable<Selectable[]> = of([]);
+	@ViewChild('autocompleteInput', { static: true }) public autocompleteInputElement: ElementRef;
 
 	ngAfterViewInit(): void {
-		setTimeout(() => {
-			this.setFocus();
-		}, 50);
+		setTimeout(() => this.setFocus(), 50);
+	}
+
+	private setFocus(): void {
+		this.autocompleteInputElement.nativeElement.focus();
 	}
 
-	setFocus(): void {
-		this.autofocusElement.nativeElement.focus();
+	onEnter(): void {
+		const selectedValue: ResourceUri = this.fieldControl.value;
+
+		isEmpty(selectedValue)
+			? this.enterOnNoSelection.emit()
+			: this.onSelection(this.getUserProfile());
 	}
 
-	ngOnChanges(changes: SimpleChanges) {
-		if (changes.values) {
-			this.updateValues();
+	private getUserProfile(): Selectable {
+		const userProfilesFiltered: Selectable[] = this.values.filter(selectable => isEqual(selectable.value, this.fieldControl.value));
+		return isNil(userProfilesFiltered[0]) ? null : userProfilesFiltered[0];
 	}
+
+	onSelection(userProfile: Selectable): void {
+		this.onOptionSelected.emit(userProfile);
 	}
 
-	updateValues(): void {
-		this.optionValues$ = this.staticValues
-			? this.fieldControl.valueChanges.pipe(map(value => this.filterSelectables(<string>value)))
-			: of(this.values);
+	keyUp(event: KeyboardEvent): void {
+		if (!this.isArrowDown(event) && !this.isArrowUp(event)) this.onKeyUp.emit();
 	}
 
-	private filterSelectables(value: string): Selectable[] {
-		const filterValue = value ? value.toLowerCase() : '';
+	private isArrowUp(event: KeyboardEvent): boolean {
+		return isEqual(event.key, 'ArrowUp')
+	}
 
-		return this.values.filter(option => option.label.toLowerCase().indexOf(filterValue) === 0);
+	private isArrowDown(event: KeyboardEvent): boolean {
+		return isEqual(event.key, 'ArrowDown')
 	}
 }
 

goofy-client/libs/user-profile-shared/src/lib/user-profile.service.ts

@@ -15,18 +15,20 @@ import { UserProfileRepository } from './user-profile.repository';
 export class UserProfileService {
 
 	private userProfiles = <any>{};
-	private userProfileSearchList$: BehaviorSubject<StateResource<UserProfileListResource>> = new BehaviorSubject(createEmptyStateResource());
+	private userProfileSearchList: BehaviorSubject<StateResource<UserProfileListResource>> = new BehaviorSubject(createEmptyStateResource());
 	private userProfileSearchVisibility: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
-	private subscription: Subscription;
+	private navigationSubscription: Subscription;
+
+	private searchSubscription: Subscription;
 
 	constructor(private repository: UserProfileRepository, private apiRootService: ApiRootService, private navigationService: NavigationService) {
 		this.listenOnNavigation();
 	}
 
 	private listenOnNavigation(): void {
-		this.unsubscribe();
-		this.subscription = this.navigationService.urlChanged().subscribe(params => this.onNavigation(params));
+		if (!isNil(this.navigationSubscription)) this.navigationSubscription.unsubscribe();
+		this.navigationSubscription = this.navigationService.urlChanged().subscribe(params => this.onNavigation(params));
 	}
 
 	onNavigation(params: Params): void {
@@ -46,6 +48,7 @@ export class UserProfileService {
 
 	public hideUserProfileSearch(): void {
 		this.userProfileSearchVisibility.next(false);
+		this.userProfileSearchList.next(createEmptyStateResource());
 	}
 
 	public getAssignedUserProfile(vorgang: VorgangResource): Observable<StateResource<UserProfileResource>> {
@@ -81,27 +84,27 @@ export class UserProfileService {
 	}
 
 	public getSearchedUserProfiles(): Observable<StateResource<UserProfileListResource>> {
-		return this.userProfileSearchList$.asObservable();
+		return this.userProfileSearchList.asObservable();
 	}
 
 	public search(searchBy: string): Observable<StateResource<UserProfileListResource>> {
-		this.apiRootService.getApiRoot().pipe(
+		if (!isNil(this.searchSubscription)) this.searchSubscription.unsubscribe();
+		if (isNil(searchBy)) {
+			this.clearSearchList();
+		} else {
+			this.searchSubscription = this.apiRootService.getApiRoot().pipe(
 				filter(resource => resource.loaded),
 				flatMap(apiRootResource => this.repository.search(apiRootResource.resource, searchBy)
 				)).subscribe(userProfileList => {
 					if (userProfileList !== null) {
-					this.userProfileSearchList$.next(createStateResource(userProfileList))
+						this.userProfileSearchList.next(createStateResource(userProfileList))
 					}
 				});
-
-		return this.userProfileSearchList$.asObservable();
 		}
-
-	public clearSearchList() {
-		this.userProfileSearchList$.next(createEmptyStateResource());
+		return this.userProfileSearchList.asObservable();
 	}
 
-	private unsubscribe(): void {
-		if (!isNil(this.subscription)) this.subscription.unsubscribe();
+	public clearSearchList() {
+		this.userProfileSearchList.next(createEmptyStateResource());
 	}
 }
\ No newline at end of file

goofy-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.html

@@ -3,5 +3,5 @@
 		svgIcon="account_outline"
 		toolTip="Bearbeiter zuordnen"
 		(clickEmitter)="showUserProfileSearch()"
-		data-test-id="assign-user-profile-button">
+		data-test-id="assign-user-profile-icon-button">
 </goofy-client-icon-button-with-spinner>

goofy-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.spec.ts

@@ -13,7 +13,7 @@ describe('AssignUserProfileButtonContainerComponent', () => {
 	let component: AssignUserProfileButtonContainerComponent;
 	let fixture: ComponentFixture<AssignUserProfileButtonContainerComponent>;
 
-	const assignUserProfileButton: string = '[data-test-id="assign-user-profile-button"]';
+	const assignUserProfileButton: string = '[data-test-id="assign-user-profile-icon-button"]';
 
 	const userProfileService = mock(UserProfileService);
 

goofy-client/libs/user-profile/src/lib/user-profile-search-container/user-profile-search-container.component.html

-<goofy-client-spinner
-		[stateResource]="assignTo$ | async"
-		diameter="30"
-		class="spinner">
+<ng-container *ngIf="assignTo$ | async as assignTo">
+	
+	<goofy-client-spinner [stateResource]="assignTo" 
+			diameter="30" class="spinner">	
 	</goofy-client-spinner>
 
-<goofy-client-user-profile-search
+	<p>{{assignedToName}}</p>
+
+	<goofy-client-user-profile-search *ngIf="!assignTo.loading" data-test-id="user-profile-search"
 			[searchedUserProfiles]="searchedUserProfiles$ | async"
-		(assignTo)="assign($event)"
-		data-test-id="user-profile-search">
+			(assignTo)="assign($event)">
 	</goofy-client-user-profile-search>
+
+</ng-container>
\ No newline at end of file

goofy-client/libs/user-profile/src/lib/user-profile-search-container/user-profile-search-container.component.ts

@@ -5,7 +5,7 @@ import { createEmptyStateResource, createStateResource, StateResource } from '@g
 import { Selectable } from '@goofy-client/ui';
 import { UserProfileListLinkRel, UserProfileListResource, UserProfileResource, UserProfileService } from '@goofy-client/user-profile-shared';
 import { VorgangService } from '@goofy-client/vorgang-shared';
-import { getEmbeddedResource, getUrl, ResourceUri } from '@ngxp/rest';
+import { getEmbeddedResource, getUrl } from '@ngxp/rest';
 import { Observable, of } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
@@ -26,6 +26,8 @@ export class UserProfileSearchContainerComponent {
 	searchedUserProfiles$: Observable<StateResource<Selectable[]>> = of(createStateResource<Selectable[]>([]));
 	showSearch$: Observable<boolean>;
 
+	assignedToName: string = '';
+
 	constructor(private vorgangService: VorgangService, private service: UserProfileService) {
 		this.showSearch$ = this.service.isUserProfileSearchVisible();
 
@@ -46,8 +48,9 @@ export class UserProfileSearchContainerComponent {
 		return <Selectable>{ label: userProfile.firstName + ' ' + userProfile.lastName, value: getUrl(userProfile) };
 	}
 
-	assign(userUri: ResourceUri): void {
-		this.assignTo$ = this.vorgangService.assignUser(userUri).pipe(tap((commandStateResource: StateResource<CommandResource>) => {
+	assign(userProfile: Selectable): void {
+		this.assignedToName = userProfile.label;
+		this.assignTo$ = this.vorgangService.assignUser(userProfile.value).pipe(tap((commandStateResource: StateResource<CommandResource>) => {
 			if (isDone(commandStateResource.resource)) {
 				this.assigned.emit();
 			}

goofy-client/libs/user-profile/src/lib/user-profile-search-container/user-profile-search/user-profile-search.component.html

 <form class="form" [formGroup]="form">
 
 	<goofy-client-autocomplete-editor data-test-id="user-search" 
-		label="Bearbeiter" [formControlName]="formServiceClass.SEARCH_FIELD" [values]="searchedUserProfiles.resource"  [useLabelAsValue]="true"
-		(onOptionSelected)="assignTo.emit($event)" (onEnter)="showErrorMessage()">
+		label="Bearbeiter" [formControlName]="formServiceClass.SEARCH_FIELD" [values]="searchedUserProfiles.resource"
+		(onKeyUp)="onKeyUp()" (onOptionSelected)="assign($event)" (enterOnNoSelection)="setError()">
 	</goofy-client-autocomplete-editor>
 
 </form>
\ No newline at end of file

goofy-client/libs/user-profile/src/lib/user-profile-search-container/user-profile-search/user-profile-search.component.ts

@@ -2,8 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { createStateResource, StateResource } from '@goofy-client/tech-shared';
 import { Selectable } from '@goofy-client/ui';
-import { UserProfileListLinkRel } from '@goofy-client/user-profile-shared';
-import { ResourceUri } from '@ngxp/rest';
+import { isNull } from 'lodash-es';
 import { UserProfileSearchFormService } from './user-profile.search.formservice';
 
 @Component({
@@ -16,9 +15,8 @@ export class UserProfileSearchComponent {
 
 	@Input() searchedUserProfiles: StateResource<Selectable[]> = createStateResource<Selectable[]>([]);
 
-	@Output() assignTo: EventEmitter<ResourceUri> = new EventEmitter();
+	@Output() assignTo: EventEmitter<Selectable> = new EventEmitter();
 
-	readonly linkRel = UserProfileListLinkRel;
 	readonly formServiceClass = UserProfileSearchFormService;
 
 	constructor(private formService: UserProfileSearchFormService) { }
@@ -27,7 +25,17 @@ export class UserProfileSearchComponent {
 		return this.formService.form;
 	}
 
-	showErrorMessage(): void {
-		this.formService.forceError();
+	assign(userProfile: Selectable): void {
+		isNull(userProfile)
+			? this.setError()
+			: this.assignTo.emit(userProfile);
+	}
+
+	setError(): void {
+		this.formService.forceError()
+	}
+
+	onKeyUp(): void {
+		this.formService.submit();
 	}
 }
\ No newline at end of file

goofy-client/libs/user-profile/src/lib/user-profile-search-container/user-profile-search/user-profile.search.formservice.ts

@@ -2,7 +2,7 @@ import { Injectable, OnDestroy } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
 import { AbstractFormService, StateResource } from "@goofy-client/tech-shared";
 import { UserProfileListResource, UserProfileService } from "@goofy-client/user-profile-shared";
-import { isNil, isNull } from "lodash-es";
+import { isNil } from "lodash-es";
 import { Observable, Subscription } from "rxjs";
 
 @Injectable()
@@ -16,35 +16,23 @@ export class UserProfileSearchFormService extends AbstractFormService implements
 
 	constructor(formBuilder: FormBuilder, private userProfileService: UserProfileService) {
 		super(formBuilder);
-
-		this.subscribeOnValueChanges();
-	}
-
-	subscribeOnValueChanges(): void {
-		this.valueSubscription = this.form.valueChanges.subscribe(() => this.onInputChange());
 	}
 
-	onInputChange(): void {
-		isNull(this.getSearchByString())
-			? this.userProfileService.clearSearchList()
-			: this.doSubmit();
-	}
-
-	getSearchByString(): string {
-		return this.getFormValue()[UserProfileSearchFormService.SEARCH_FIELD];
-	}
-
-	initForm(): FormGroup {
+	protected initForm(): FormGroup {
 		return this.formBuilder.group({
 			[UserProfileSearchFormService.SEARCH_FIELD]: new FormControl()
 		})
 	}
 
-	doSubmit(): Observable<StateResource<UserProfileListResource>> {
-		return this.userProfileService.search(this.getFormValue()[UserProfileSearchFormService.SEARCH_FIELD]);
+	protected doSubmit(): Observable<StateResource<UserProfileListResource>> {
+		return this.userProfileService.search(this.getSearchString());
+	}
+
+	private getSearchString(): string {
+		return this.getFormValue()[UserProfileSearchFormService.SEARCH_FIELD];
 	}
 
-	getPathPrefix(): string {
+	protected getPathPrefix(): string {
 		return this.FIELD_PATH;
 	}
 

goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-form/wiedervorlage.formservice.ts

@@ -20,7 +20,7 @@ export class WiedervorlageFormService extends AbstractFormService {
 		super(formBuilder);
 	}
 
-	initForm(): FormGroup {
+	protected initForm(): FormGroup {
 		return this.formBuilder.group({
 			[WiedervorlageFormService.FIELD_BETREFF]: new FormControl(null),
 			[WiedervorlageFormService.FIELD_FRIST]: new FormControl(createFutureDate(14)),
@@ -28,11 +28,11 @@ export class WiedervorlageFormService extends AbstractFormService {
 		})
 	}
 
-	getPathPrefix(): string {
+	protected getPathPrefix(): string {
 		return WiedervorlageFormService.FIELD_PATH_PREFIX;
 	}
 
-	doSubmit(): Observable<StateResource<any>> {
+	protected doSubmit(): Observable<StateResource<any>> {
 		if (this.isPatch()) {
 			return this.wiedervorlageService.saveWiedervorlage(this.getSourceValue(), this.getValue());
 		} else {