OZG-3114 set input search field to previous value on focus out

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

@@ -41,7 +41,6 @@ describe('KommentarFormComponent', () => {
 	let fixture: ComponentFixture<KommentarFormComponent>;
 
 	const formService = mock(KommentarFormService);
-	const service = mock(KommentarService);
 	const kommentarService = mock(KommentarService);
 
 	beforeEach(async () => {
@@ -61,10 +60,6 @@ describe('KommentarFormComponent', () => {
 					provide: KommentarFormService,
 					useValue: formService
 				},
-				{
-					provide: KommentarService,
-					useValue: service
-				},
 				{
 					provide: KommentarService,
 					useValue: kommentarService

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search/vorgang-search.component.html

@@ -23,8 +23,14 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<form (ngSubmit)="formService.submit()" [formGroup]="formService.form" [class.search-field--open]="searchAutoComplete.isOpen" class="search-field" data-test-id="search-form">
-	<button type="submit" data-test-id="search-button" mat-icon-button aria-label="Vorgang suchen">
+<form (ngSubmit)="submit()" [formGroup]="formService.form"
+	  [class.search-field--open]="searchAutoComplete.isOpen" class="search-field"
+	  data-test-id="search-form">
+	<button
+		#searchSubmitButton
+		type="submit"
+		data-test-id="search-button"
+		mat-icon-button aria-label="Vorgang suchen">
 		<mat-icon matPrefix class="search-icon">search</mat-icon>
 	</button>
 	<mat-form-field floatLabel="never">
@@ -36,7 +42,9 @@
 			   maxlength="50"
 			   [matAutocomplete]="searchAutoComplete"
 			   [formControlName]="formService.SEARCH_FIELD"
-			name="searchString" />
+			   name="searchString"
+			   (focusout)="focusOut($event)"
+			   (focusin)="focusIn()"/>
 
 			<mat-autocomplete #searchAutoComplete="matAutocomplete" class="vorgang-search" (optionSelected)="formService.submitByPreviewList($event.option.value)">
 				<goofy-client-spinner [stateResource]="vorgangSearchPreviewList" [class.autocomplete-spinner]="vorgangSearchPreviewList.loading"></goofy-client-spinner>

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search/vorgang-search.component.spec.ts

@@ -22,7 +22,7 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
@@ -36,11 +36,12 @@ import { SearchInfo, VorgangHeaderLinkRel, VorgangListService } from '@goofy-cli
 import { getDataTestClassOf, getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangListResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
-import { BehaviorSubject, Subject } from 'rxjs';
 import { VorgangSearchAutocompleteOptionsContentComponent } from './vorgang-search-autocomplete-options-content/vorgang-search-autocomplete-options-content.component';
 import { VorgangSearchClearButtonComponent } from './vorgang-search-clear-button/vorgang-search-clear-button.component';
 import { VorgangSearchComponent } from './vorgang-search.component';
 import { VorgangSearchFormService } from './vorgang-search.formservice';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { MatButton } from '@angular/material/button';
 
 describe('VorgangSearchComponent', () => {
 	let component: VorgangSearchComponent;
@@ -49,7 +50,10 @@ describe('VorgangSearchComponent', () => {
 	const searchFormService = mock(VorgangSearchFormService);
 	const vorgangListService = { ...mock(VorgangListService), getSearchInfo: () => searchInfoSubj };
 
-	const searchInfoSubj: Subject<SearchInfo> = new BehaviorSubject({ searchString: EMPTY_STRING, changedAfterSearchDone: false });
+	const searchInfoSubj: Subject<SearchInfo> = new BehaviorSubject({
+		searchString: EMPTY_STRING,
+		changedAfterSearchDone: false
+	});
 
 	const searchPreviewOption: string = getDataTestClassOf('search-preview-option');
 	const searchClearButton: string = getDataTestIdOf('vorgang-search-clear-button');
@@ -137,5 +141,76 @@ describe('VorgangSearchComponent', () => {
 
 			expect(component.searchInput.nativeElement.focus).toHaveBeenCalled();
 		})
+	});
+
+	describe('submit', () => {
+
+		it('should store entered search value', () => {
+			jest.spyOn(VorgangSearchFormService.prototype, 'getValue').mockReturnValue('Gewerbe');
+
+			component.submit();
+
+			expect(component.searchValueFocusIn).toEqual('Gewerbe');
+		});
+
+		it('should submit form', () => {
+			const submitSpy = jest.spyOn(VorgangSearchFormService.prototype, 'submit');
+
+			component.submit();
+
+			expect(submitSpy).toHaveBeenCalled();
+		});
+	});
+
+	describe('focusIn', () => {
+
+		it('should store current form value', () => {
+			jest.spyOn(VorgangSearchFormService.prototype, 'getValue').mockReturnValue('Gewerbe');
+
+			component.focusIn();
+
+			expect(component.searchValueFocusIn).toEqual('Gewerbe');
+		});
+	});
+
+	describe('focusOut', () => {
+
+		it('should set new form value when focus out to search button (Lupe)', () => {
+			const lupeElement = {};
+			component.searchValueFocusIn = 'Gewerbe'; // previous value
+			component.searchSubmitButton = {
+				_elementRef: {
+					nativeElement: lupeElement
+				}
+			} as MatButton;
+
+			const searchFieldFormControl = new UntypedFormControl('Gewe'); // input form value
+			component.formService.form = new UntypedFormGroup({
+				search: searchFieldFormControl
+			})
+
+			component.focusOut({ relatedTarget: lupeElement } as FocusEvent);
+
+			expect(searchFieldFormControl.value).toEqual('Gewe');
+		});
+
+
+		it('should set previous value', () => {
+			component.searchValueFocusIn = 'Gewe'; // previous value
+			component.searchSubmitButton = {
+				_elementRef: {
+					nativeElement: null
+				}
+			} as MatButton;
+
+			const searchFieldFormControl = new UntypedFormControl('Gewerbe'); // input form value
+			component.formService.form = new UntypedFormGroup({
+				search: searchFieldFormControl
 			})
+
+			component.focusOut({ relatedTarget: {} } as FocusEvent);
+
+			expect(searchFieldFormControl.value).toEqual('Gewe');
+		});
+	});
 });
\ No newline at end of file

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search/vorgang-search.component.ts

@@ -25,6 +25,7 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@
 import { StateResource } from '@goofy-client/tech-shared';
 import { VorgangHeaderLinkRel, VorgangListLinkRel, VorgangListResource } from '@goofy-client/vorgang-shared';
 import { VorgangSearchFormService } from './vorgang-search.formservice';
+import { MatButton } from '@angular/material/button';
 
 @Component({
 	selector: 'goofy-client-vorgang-search',
@@ -39,13 +40,32 @@ export class VorgangSearchComponent {
 	@Output() public clearVorgangSearchPreviewList: EventEmitter<void> = new EventEmitter<void>();
 
 	@ViewChild('searchInput') searchInput: ElementRef;
+	@ViewChild('searchSubmitButton') searchSubmitButton: MatButton;
+
+	searchValueFocusIn: string;
 
 	readonly vorgangHeaderLinkRel = VorgangHeaderLinkRel;
 	readonly vorgangListLinkRel = VorgangListLinkRel;
 
-	constructor(public formService: VorgangSearchFormService) { }
+	constructor(public formService: VorgangSearchFormService) {
+	}
 
 	focus(): void {
 		this.searchInput.nativeElement.focus();
 	}
+
+	submit(): void {
+		this.searchValueFocusIn = this.formService.getValue();
+		this.formService.submit();
+	}
+
+	focusIn(): void {
+		this.searchValueFocusIn = this.formService.getValue();
+	}
+
+	focusOut(event: FocusEvent): void {
+		if (event.relatedTarget !== this.searchSubmitButton._elementRef.nativeElement) {
+			this.formService.form.controls[this.formService.SEARCH_FIELD].setValue(this.searchValueFocusIn);
+		}
+	}
 }
\ No newline at end of file