From b66fe982f57ae8e6c2b5a65eba836e4277547133 Mon Sep 17 00:00:00 2001
From: George Kalampokis <gkalampokis@cite.gr>
Date: Fri, 11 Sep 2020 14:27:53 +0300
Subject: [PATCH] Update Tags field with multiple autocomplete like in the
 dataset editor

---
 .../eudat/logic/managers/DatasetManager.java  | 16 +++--
 .../form-field/form-field.component.html      | 13 +---
 .../form-field/form-field.component.ts        | 60 +++++++++++++------
 3 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/dmp-backend/web/src/main/java/eu/eudat/logic/managers/DatasetManager.java b/dmp-backend/web/src/main/java/eu/eudat/logic/managers/DatasetManager.java
index 8eda7d5fd..e03b0e0ce 100644
--- a/dmp-backend/web/src/main/java/eu/eudat/logic/managers/DatasetManager.java
+++ b/dmp-backend/web/src/main/java/eu/eudat/logic/managers/DatasetManager.java
@@ -52,6 +52,7 @@ import org.apache.poi.xwpf.extractor.XWPFWordExtractor;
 import org.apache.poi.xwpf.usermodel.XWPFDocument;
 import org.apache.poi.xwpf.usermodel.XWPFParagraph;
 import org.apache.poi.xwpf.usermodel.XWPFRun;
+import org.json.JSONArray;
 import org.json.JSONObject;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -1018,15 +1019,12 @@ public class DatasetManager {
         if (!tagNodes.isEmpty()) {
             tagNodes.forEach(node -> {
                 JsonNode value = node.get("value");
-                if (value.isArray()) {
-                    value.elements().forEachRemaining(element -> {
-                        try {
-                            Map<String, String> data = mapper.readValue(element.asText(), HashMap.class);
-                            this.addTag(tags, wizardModel.getTags(), data.get("id"), data.get("name"));
-                        } catch (IOException e) {
-                            logger.error(e.getMessage(), e);
-                        }
-
+                String stringValue = value.asText().replaceAll("=", ":");
+                JSONArray values = new JSONArray(stringValue);
+                if (values != null) {
+                    values.iterator().forEachRemaining(element -> {
+                        Map<String, Object> data = ((JSONObject) element).toMap();
+                        this.addTag(tags, wizardModel.getTags(), data.get("id").toString(), data.get("name").toString());
                     });
                 } else {
                     this.addTag(tags, wizardModel.getTags(), "", value.asText());
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
index bb7741581..bd576ccdb 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
@@ -190,18 +190,7 @@
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Tags" class="col-12">
 		<div class="row">
 			<mat-form-field class="col-md-12">
-				<mat-chip-list #chipList>
-					<mat-chip *ngFor="let tag of getTags()"
-						[removable]="true" (removed)="removeTag(tag)">
-						{{tag.name}}
-						<mat-icon  matChipRemove >cancel</mat-icon>
-					</mat-chip>
-					<input  matInput placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"
-				[matChipInputFor]="chipList"
-				[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-				[matChipInputAddOnBlur]="true"
-				(matChipInputTokenEnd)="addTag($event)">
-				</mat-chip-list>
+				<app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="form.get('value')" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"></app-multiple-auto-complete>
 			</mat-form-field>
 		</div>
 	</div>
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
index 59d435929..dc3e4b75e 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
@@ -171,7 +171,14 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 				};
 				break;
 			case DatasetProfileFieldViewStyle.Tags:
-				this.setupTags();
+				this.tagsAutoCompleteConfiguration = {
+					filterFn: this.filterTags.bind(this),
+					initialItems: (excludedItems: any[]) => this.filterTags('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
+					displayFn: (item) => this.showTag(item),
+					titleFn: (item) => item['name'],
+					valueAssign: (item) => this.addTag(item)
+				};
+				this.parseTags();
 				break;
 			case DatasetProfileFieldViewStyle.Researchers:
 				this.researchersAutoCompleteConfiguration = {
@@ -337,28 +344,43 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
 		return this.externalSourcesService.searchDatasetTags(requestItem);
 	}
 
-	private setupTags() {
-		this.tags = (this.form.get('value').value as string[]).map(string => JSON.parse(string));
-		if (this.tags === null) {
-			this.tags = [];
+	parseTags() {
+		let stringValue = this.form.get('value').value;
+		stringValue = (<string>stringValue).replace(new RegExp('{', 'g'), '{"').replace(new RegExp('=', 'g'), '":"').replace(new RegExp(',', 'g'), '",').replace(new RegExp(', ', 'g'), ', "').replace(new RegExp('}', 'g'), '"}');
+		stringValue = stringValue.replace(new RegExp('}"', 'g'), '}').replace(new RegExp('"{', 'g'), '{');
+		console.log(stringValue);
+		const tagArray = JSON.parse(stringValue);
+		console.log(tagArray);
+		this.form.patchValue({'value': tagArray});
+	}
+
+	filterTags(value: string): Observable<ExternalSourceItemModel[]> {
+		const requestItem: RequestItem<TagCriteria> = new RequestItem();
+		const criteria: TagCriteria = new TagCriteria();
+		criteria.like = value;
+		requestItem.criteria = criteria;
+		return this.externalSourcesService.searchDatasetTags(requestItem);
+	}
+
+	showTag(ev: any) {
+		if (typeof ev === 'string') {
+			return ev;
+		} else {
+			return ev.name;
 		}
 	}
 
-	getTags() {
-		return this.tags;
-	}
-
-	removeTag(tag: any) {
-		this.tags.splice(this.tags.indexOf(tag), 1);
-		this.form.patchValue({ 'value': JSON.stringify(this.tags) });
-	}
-
-	addTag(ev: MatChipInputEvent) {
-		if (ev.value !== '' && isNullOrUndefined((this.tags.find(tag => tag.name === ev.value)))) {
-			this.tags.push(new ExternalTagEditorModel('', ev.value));
+	addTag(ev: any) {
+		let item: ExternalTagEditorModel;
+		//this.filteredTags = this.formGroup.get('tags').value;
+		if (typeof ev === 'string') {
+			item = new ExternalTagEditorModel('', ev);
+		} else {
+			item = ev;
+		}
+		if (item.name !== '' ) {
+			return item;
 		}
-		this.form.patchValue({ 'value': JSON.stringify(this.tags) });
-		ev.input.value = '';
 	}
 
 	filterOrganisations(value: string): Observable<ExternalSourceItemModel[]> {