Adds link to SingleAutoCompleteConfiguration

dmp-frontend/src/app/library/auto-complete/single/single-auto-complete-configuration.ts

@@ -24,6 +24,8 @@ export interface SingleAutoCompleteConfiguration {
 	subtitleFn?: (item: any) => string;
 	// Property formating for icon on chip
 	iconFn?: (item: any) => string;
+	// Property for link on chip
+	linkFn?: (item: any) => string;
 	//Extra data passed to query function
 	extraData?: any;
 	// Callback to intercept value assignment based on item selection

dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html

@@ -1,6 +1,6 @@
 <div class="row auto-complete">
 	<mat-chip-list #chipList [disabled]="disabled" class="chip-list">
-		<mat-chip *ngIf="value" [removable]="true" (removed)="chipRemove()">
+		<mat-chip *ngIf="value" [removable]="true" (removed)="chipRemove()" (click)="linkToOption(value)" [ngClass]="{'chip': this._linkFn(value)}">
 			<mat-icon matChipRemove *ngIf="_iconFn(value)" class="ml-0 mr-1">{{_iconFn(value)}}</mat-icon>
 			{{_displayFn(value)}}
 			<mat-icon matChipRemove *ngIf="!disabled">cancel</mat-icon>

dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss

@@ -21,6 +21,15 @@
   line-height: 1.2em;
 }
 
+.chip {
+  cursor: pointer;
+  opacity: 1 !important;
+}
+
+.chip:hover {
+  background-color: #c5c5c5;
+}
+
 ::ng-deep .mat-autocomplete-panel.panel-width {
   max-width: 78vw !important;
 }

dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts

@@ -9,6 +9,7 @@ import { debounceTime, distinctUntilChanged, map, mergeMap, startWith, tap } fro
 import { AutoCompleteGroup } from '../auto-complete-group';
 import { SingleAutoCompleteConfiguration } from './single-auto-complete-configuration';
 import { switchMap } from 'rxjs/internal/operators/switchMap';
+import { Router } from '@angular/router';
 
 
 @Component({
@@ -87,6 +88,7 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
 	constructor(
 		private fm: FocusMonitor,
 		private elRef: ElementRef,
+		private router: Router,
 		@Optional() @Self() public ngControl: NgControl) {
 
 		fm.monitor(elRef.nativeElement, true).subscribe((origin) => {
@@ -144,6 +146,11 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
 		return null;
 	}
 
+	_linkFn(item: any): string {
+		if (this.configuration.linkFn && item) { return this.configuration.linkFn(item); }
+		return null;
+	}
+
 	_requestDelay(): number {
 		return this.configuration.requestDelay || this.requestDelay;
 	}
@@ -236,6 +243,12 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
 		this.optionRemoved.emit();
 	}
 
+	linkToOption(value: any): void {
+		if (this._linkFn(value)) {
+			this.router.navigate([]).then(result => {  window.open(this._linkFn(value), '_blank'); });
+		}
+	}
+
 	autoCompleteDisplayFn() {
 		return (val) => "";
 	}

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts

@@ -90,7 +90,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 			initialItems: (extraData) => this.searchDmp(''),
 			displayFn: (item) => this.getDatasetDisplay(item),
 			titleFn: (item) => item['label'],
-			iconFn: (item) => this.publicMode ? '' : (item['status'] ? 'lock' : 'lock_open')
+			iconFn: (item) => this.publicMode ? '' : (item['status'] ? 'lock' : 'lock_open'),
+			linkFn: (item) => this.publicMode ? '/explore-plans/overview/' + item['id'] : '/plans/overview/' + item['id']
 		};
 
 		const params = this.route.snapshot.params;