From 1b731fdf2078b19c219dfe26718f1ba2ab4d9939 Mon Sep 17 00:00:00 2001
From: Kristan Ntavidi <kntavidi@cite.gr>
Date: Wed, 21 Jul 2021 11:09:13 +0300
Subject: [PATCH] Changes on multi-auto complete component.

* Give precedence on autocomplete option-selected over onblur.
* Invitation dialog on blur commit given email till that time, on emails list.
---
 .../multiple-auto-complete.component.ts       | 52 +++++++++++++++++--
 .../dmp-invitation-dialog.component.ts        |  3 +-
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
index fd9854690..d209c4593 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
@@ -8,7 +8,8 @@ import { MatFormFieldControl } from '@angular/material/form-field';
 import { AutoCompleteGroup } from '@app/library/auto-complete/auto-complete-group';
 import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { BaseComponent } from '@common/base/base.component';
-import { Observable, of as observableOf, Subject } from 'rxjs';
+import { isNullOrUndefined } from '@swimlane/ngx-datatable';
+import { BehaviorSubject, combineLatest, Observable, of as observableOf, Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, mergeMap, startWith, takeUntil, switchMap } from 'rxjs/operators';
 
 export class CustomComponentBase extends BaseComponent {
@@ -50,6 +51,11 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 
 	id = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`;
 	stateChanges = new Subject<void>();
+
+	valueOnBlur = new BehaviorSubject<any>(null);
+	onSelectAutoCompleteValue = new BehaviorSubject<any>(null);
+	valueAssignSubscription: Subscription;
+
 	focused = false;
 	controlType = 'multiple-autocomplete';
 	describedBy = '';
@@ -123,7 +129,36 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 		}
 	}
 
-	ngOnInit() { }
+	ngOnInit() {
+		this.valueAssignSubscription = combineLatest(this.valueOnBlur.asObservable(), this.onSelectAutoCompleteValue.asObservable())
+		.pipe(debounceTime(100))
+		.subscribe(latest =>{
+			const fromBlur = latest[0];
+			const fromAutoComplete = latest[1];
+
+			if(isNullOrUndefined(fromBlur) && isNullOrUndefined(fromAutoComplete)){
+				return;
+			}
+			//higher precedence
+			if(!isNullOrUndefined(fromAutoComplete)){
+				this.optionSelectedInternal(fromAutoComplete);
+
+				// consumed and flush
+				this.onSelectAutoCompleteValue.next(null);
+				this.valueOnBlur.next(null);
+				return;
+			}
+
+			if(!isNullOrUndefined(fromBlur)){
+				this.optionSelectedInternal(fromBlur);
+
+				// consumed and flush
+				this.onSelectAutoCompleteValue.next(null);
+				this.valueOnBlur.next(null);
+				return;
+			}
+		});
+	}
 
 	ngDoCheck(): void {
 		if (this.ngControl) {
@@ -178,7 +213,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	}
 
 	_optionSelected(event: MatAutocompleteSelectedEvent) {
-		this.optionSelectedInternal(event.option.value);
+		// this.optionSelectedInternal(event.option.value);
+		this.onSelectAutoCompleteValue.next(event.option.value);
 		this.autocompleteInput.nativeElement.value = '';
 	}
 
@@ -235,7 +271,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 
 	public onBlur($event: MouseEvent) {
 		if (this.inputValue && this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) {
-			this.optionSelectedInternal(this.autocomplete.options.first.value);
+			// this.optionSelectedInternal(this.autocomplete.options.first.value);
+			this.valueOnBlur.next(this.autocomplete.options.first.value);
 		}
 
 		// Clear text if not an option
@@ -271,6 +308,10 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	ngOnDestroy() {
 		this.stateChanges.complete();
 		this.fm.stopMonitoring(this.elRef.nativeElement);
+		if(this.valueAssignSubscription){
+			this.valueAssignSubscription.unsubscribe();
+			this.valueAssignSubscription = null;
+		}
 	}
 
 	//Configuration getters
@@ -332,7 +373,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 		const value = event.value;
 		// Add our fruit
 		if ((value || '').trim()) {
-			this.optionSelectedInternal(value);
+			// this.optionSelectedInternal(value);
+			this.valueOnBlur.next(value);
 		}
 		// Reset the input value
 		if (input) {
diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts
index a57ee5cb6..d15a9dd9c 100644
--- a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts
@@ -68,7 +68,8 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 		valueAssign: (item) => {
 			const result = typeof(item) === 'string' ? item : item.email;
 			return result;
-		}
+		},
+		autoSelectFirstOptionOnBlur: true
 	};
 
 	add(event: MatChipInputEvent): void {