MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Update Tags field with multiple autocomplete like in the dataset editor

This commit is contained in:
George Kalampokis 2020-09-11 14:27:53 +03:00
parent 4b87ab04e8
commit b66fe982f5
3 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
dmp-backend/web/src/main/java/eu/eudat/logic/managers/DatasetManager.java
View File

@ -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());

13
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
View File

@ -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>

58
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
View File

@ -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;
addTag(ev: any) {
let item: ExternalTagEditorModel;
//this.filteredTags = this.formGroup.get('tags').value;
if (typeof ev === 'string') {
item = new ExternalTagEditorModel('', ev);
} else {
item = ev;
}
removeTag(tag: any) {
this.tags.splice(this.tags.indexOf(tag), 1);
this.form.patchValue({ 'value': JSON.stringify(this.tags) });
if (item.name !== '' ) {
return item;
}
addTag(ev: MatChipInputEvent) {
if (ev.value !== '' && isNullOrUndefined((this.tags.find(tag => tag.name === ev.value)))) {
this.tags.push(new ExternalTagEditorModel('', ev.value));
}
this.form.patchValue({ 'value': JSON.stringify(this.tags) });
ev.input.value = '';
}
filterOrganisations(value: string): Observable<ExternalSourceItemModel[]> {