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

Adds "external autocomplete" field on DMP profile editor. (Issue #134)

This commit is contained in:
gkolokythas 2019-07-23 18:01:51 +03:00
parent f31435de94
commit 81c5a492c1
16 changed files with 209 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/Field.java
View File

@ -14,22 +14,17 @@ import java.util.UUID;
public class Field implements XmlSerializable<Field> { public class Field implements XmlSerializable<Field> {
private UUID id; private UUID id;
private DMPProfileType type; private DMPProfileType type;
private DMPProfileFieldDataType dataType; private DMPProfileFieldDataType dataType;
private Boolean required; private Boolean required;
private String label; private String label;
private Object value; private Object value;
private DmpProfileExternalAutoComplete externalAutocomplete;
public UUID getId() { public UUID getId() {
if (this.id == null) this.id = UUID.randomUUID(); if (this.id == null) this.id = UUID.randomUUID();
return id; return id;
} }
public void setId(UUID id) { public void setId(UUID id) {
this.id = id; this.id = id;
} }
@ -37,7 +32,6 @@ public class Field implements XmlSerializable<Field> {
public Integer getType() { public Integer getType() {
return type.getValue(); return type.getValue();
} }
public void setType(DMPProfileType type) { public void setType(DMPProfileType type) {
this.type = type; this.type = type;
} }
@ -45,7 +39,6 @@ public class Field implements XmlSerializable<Field> {
public Integer getDataType() { public Integer getDataType() {
return dataType.getValue(); return dataType.getValue();
} }
public void setDataType(DMPProfileFieldDataType dataType) { public void setDataType(DMPProfileFieldDataType dataType) {
this.dataType = dataType; this.dataType = dataType;
} }
@ -53,7 +46,6 @@ public class Field implements XmlSerializable<Field> {
public Boolean getRequired() { public Boolean getRequired() {
return required; return required;
} }
public void setRequired(Boolean required) { public void setRequired(Boolean required) {
this.required = required; this.required = required;
} }
@ -61,7 +53,6 @@ public class Field implements XmlSerializable<Field> {
public String getLabel() { public String getLabel() {
return label; return label;
} }
public void setLabel(String label) { public void setLabel(String label) {
this.label = label; this.label = label;
} }
@ -69,12 +60,18 @@ public class Field implements XmlSerializable<Field> {
public Object getValue() { public Object getValue() {
return value; return value;
} }
public void setValue(Object value) { public void setValue(Object value) {
this.value = value; this.value = value;
} }
@Override public DmpProfileExternalAutoComplete getExternalAutocomplete() {
return externalAutocomplete;
}
public void setExternalAutocomplete(DmpProfileExternalAutoComplete externalAutocomplete) {
this.externalAutocomplete = externalAutocomplete;
}
@Override
public Element toXml(Document doc) { public Element toXml(Document doc) {
Element rootElement = doc.createElement("field"); Element rootElement = doc.createElement("field");
rootElement.setAttribute("id", this.getId().toString()); rootElement.setAttribute("id", this.getId().toString());
@ -82,6 +79,9 @@ public class Field implements XmlSerializable<Field> {
rootElement.setAttribute("datatype", "" + this.dataType.getValue().toString()); rootElement.setAttribute("datatype", "" + this.dataType.getValue().toString());
rootElement.setAttribute("required", this.required.toString()); rootElement.setAttribute("required", this.required.toString());
rootElement.setAttribute("label", this.label); rootElement.setAttribute("label", this.label);
if (this.externalAutocomplete != null)
rootElement.appendChild(this.externalAutocomplete.toXml(doc));
return rootElement; return rootElement;
} }
@ -92,6 +92,10 @@ public class Field implements XmlSerializable<Field> {
this.dataType = DMPProfileFieldDataType.fromInteger(Integer.parseInt(item.getAttribute("datatype"))); this.dataType = DMPProfileFieldDataType.fromInteger(Integer.parseInt(item.getAttribute("datatype")));
this.required = Boolean.valueOf(item.getAttribute("required")); this.required = Boolean.valueOf(item.getAttribute("required"));
this.type = DMPProfileType.fromInteger(Integer.parseInt(item.getAttribute("type"))); this.type = DMPProfileType.fromInteger(Integer.parseInt(item.getAttribute("type")));
Element optionElement = (Element) item.getElementsByTagName("externalAutocomplete").item(0);
if (optionElement != null) {
this.externalAutocomplete = new DmpProfileExternalAutoComplete().fromXml(optionElement);
}
return this; return this;
} }
} }

4
dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/types/DMPProfileFieldDataType.java
View File

@ -4,7 +4,7 @@ package eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types;
* Created by ikalyvas on 3/21/2018. * Created by ikalyvas on 3/21/2018.
*/ */
public enum DMPProfileFieldDataType { public enum DMPProfileFieldDataType {
DATE(0), NUMBER(1), TEXT(2); DATE(0), NUMBER(1), TEXT(2), EXTERNAL_AUTOCOMPLETE(3);
private Integer value; private Integer value;
@ -24,6 +24,8 @@ public enum DMPProfileFieldDataType {
return NUMBER; return NUMBER;
case 2: case 2:
return TEXT; return TEXT;
case 3:
return EXTERNAL_AUTOCOMPLETE;
default: default:
throw new RuntimeException("Unsupported DMPProfileFieldData Type"); throw new RuntimeException("Unsupported DMPProfileFieldData Type");
} }

5
dmp-frontend/src/app/core/common/enum/dmp-profile-field-type.ts
View File

@ -1,5 +1,6 @@
export enum DmpProfileFieldDataType { export enum DmpProfileFieldDataType {
Date = 0, Date = 0,
Number = 1, Number = 1,
Text = 2 Text = 2,
} ExternalAutocomplete = 3
}

8
dmp-frontend/src/app/core/model/dmp-profile/dmp-profile-external-autocomplete.ts Normal file
View File

@ -0,0 +1,8 @@
export interface DmpProfileExternalAutoCompleteField {
placeholder: string;
url: string;
optionsRoot: string;
multiAutoComplete: boolean;
label: string;
value: string;
}

2
dmp-frontend/src/app/core/model/dmp-profile/dmp-profile-field.ts
View File

@ -1,5 +1,6 @@
import { DmpProfileFieldDataType } from '../../common/enum/dmp-profile-field-type'; import { DmpProfileFieldDataType } from '../../common/enum/dmp-profile-field-type';
import { DmpProfileType } from '../../common/enum/dmp-profile-type'; import { DmpProfileType } from '../../common/enum/dmp-profile-type';
import { DmpProfileExternalAutoCompleteFieldDataEditorModel } from '../../../ui/admin/dmp-profile/editor/external-autocomplete/dmp-profile-external-autocomplete-field-editor.model';
export interface DmpProfileField { export interface DmpProfileField {
id: string; id: string;
@ -8,4 +9,5 @@ export interface DmpProfileField {
required: boolean; required: boolean;
label: string; label: string;
value: any; value: any;
externalAutocomplete?: DmpProfileExternalAutoCompleteFieldDataEditorModel;
} }

6
dmp-frontend/src/app/core/query/dmp/dmp-profile-external-autocomplete-criteria.ts Normal file
View File

@ -0,0 +1,6 @@
import { BaseCriteria } from "../base-criteria";
export class DmpProfileExternalAutocompleteCriteria extends BaseCriteria {
public profileID: String;
public fieldID: String;
}

1
dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts
View File

@ -34,6 +34,7 @@ export class EnumUtils {
case DmpProfileFieldDataType.Date: return this.language.instant('TYPES.DMP-PROFILE-FIELD.DATA-TYPE.DATE'); case DmpProfileFieldDataType.Date: return this.language.instant('TYPES.DMP-PROFILE-FIELD.DATA-TYPE.DATE');
case DmpProfileFieldDataType.Number: return this.language.instant('TYPES.DMP-PROFILE-FIELD.DATA-TYPE.NUMBER'); case DmpProfileFieldDataType.Number: return this.language.instant('TYPES.DMP-PROFILE-FIELD.DATA-TYPE.NUMBER');
case DmpProfileFieldDataType.Text: return this.language.instant('TYPES.DMP-PROFILE-FIELD.DATA-TYPE.TEXT'); case DmpProfileFieldDataType.Text: return this.language.instant('TYPES.DMP-PROFILE-FIELD.DATA-TYPE.TEXT');
case DmpProfileFieldDataType.ExternalAutocomplete: return this.language.instant('TYPES.DMP-PROFILE-FIELD.DATA-TYPE.EXTERNAL-AUTOCOMPLETE');
} }
} }

6
dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.module.ts
View File

@ -8,6 +8,7 @@ import { DmpProfileEditorComponent } from "./editor/dmp-profile-editor.component
import { DmpProfileCriteriaComponent } from "./listing/criteria/dmp-profile-criteria.component"; import { DmpProfileCriteriaComponent } from "./listing/criteria/dmp-profile-criteria.component";
import { DmpProfileListingComponent } from "./listing/dmp-profile-listing.component"; import { DmpProfileListingComponent } from "./listing/dmp-profile-listing.component";
import { DialodConfirmationUploadDmpProfiles } from "./listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component"; import { DialodConfirmationUploadDmpProfiles } from "./listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component";
import { DmpProfileExternalAutocompleteFieldEditorComponent } from "./editor/external-autocomplete/dmp-profile-external-autocomplete-field-editor.component";
@NgModule({ @NgModule({
imports: [ imports: [
@ -21,10 +22,11 @@ import { DialodConfirmationUploadDmpProfiles } from "./listing/criteria/dialog-c
DmpProfileEditorComponent, DmpProfileEditorComponent,
DmpProfileListingComponent, DmpProfileListingComponent,
DmpProfileCriteriaComponent, DmpProfileCriteriaComponent,
DialodConfirmationUploadDmpProfiles DialodConfirmationUploadDmpProfiles,
DmpProfileExternalAutocompleteFieldEditorComponent
], ],
entryComponents: [ entryComponents: [
DialodConfirmationUploadDmpProfiles DialodConfirmationUploadDmpProfiles
] ]
}) })
export class DmpProfileModule { } export class DmpProfileModule { }

80
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html
View File

@ -15,8 +15,8 @@
<mat-card-content> <mat-card-content>
<div class="row pl-5"> <div class="row pl-5">
<mat-form-field class="col-10"> <mat-form-field class="col-10">
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" <input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" formControlName="label"
name="label" formControlName="label" required> required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')"> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">
{{formGroup.get('label').getError('backendError').message}}</mat-error> {{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')"> <mat-error *ngIf="formGroup.get('label').hasError('required')">
@ -25,15 +25,12 @@
<h4 class="col-12">{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}</h4> <h4 class="col-12">{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}</h4>
<div class="col-12"> <div class="col-12">
<div class="row" <div class="row" *ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
*ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
<div class="col-10"> <div class="col-10">
<div class="row"> <div class="row">
<mat-form-field class="col"> <mat-form-field class="col">
<input matInput <input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" [formControl]="fieldFormGroup.get('label')"
placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" required>
type="text" name="label" [formControl]="fieldFormGroup.get('label')"
required>
<mat-error *ngIf="fieldFormGroup.get('label').hasError('required')"> <mat-error *ngIf="fieldFormGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')"> <mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')">
@ -41,11 +38,10 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col"> <mat-form-field class="col">
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}" <mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}" [formControl]="fieldFormGroup.get('type')" required>
[formControl]="fieldFormGroup.get('type')" required> <mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()" [value]="fieldType">
<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()" {{ getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}
[value]="fieldType">{{ </mat-option>
getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}</mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="fieldFormGroup.get('type').hasError('required')"> <mat-error *ngIf="fieldFormGroup.get('type').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -54,13 +50,11 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col"> <mat-form-field class="col">
<mat-select <mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}" [formControl]="fieldFormGroup.get('dataType')"
placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}" required>
[formControl]="fieldFormGroup.get('dataType')" required> <mat-option *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()" [value]="fieldDataType">
<mat-option {{ getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}
*ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()" </mat-option>
[value]="fieldDataType">{{
getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}</mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')"> <mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -70,7 +64,12 @@
</mat-form-field> </mat-form-field>
<div class="centered-row-item col-auto"> <div class="centered-row-item col-auto">
<mat-checkbox [formControl]="fieldFormGroup.get('required')"> <mat-checkbox [formControl]="fieldFormGroup.get('required')">
{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}</mat-checkbox> {{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}
</mat-checkbox>
</div>
<div *ngIf="isExternalAutocomplete(fieldFormGroup)" class="row">
<app-dmp-profile-external-autocomplete-field-editor-component [form]="fieldFormGroup">
</app-dmp-profile-external-autocomplete-field-editor-component>
</div> </div>
</div> </div>
</div> </div>
@ -78,28 +77,22 @@
<div class="col-2"> <div class="col-2">
<div class="row"> <div class="row">
<div class="col-auto" *ngIf="!isNew"> <div class="col-auto" *ngIf="!isNew">
<button mat-icon-button type="button" <button mat-icon-button type="button" (click)="removeField(i)" [disabled]="viewOnly">
(click)="removeField(i)" [disabled]="viewOnly">
<mat-icon class="mat-24">delete</mat-icon> <mat-icon class="mat-24">delete</mat-icon>
</button> </button>
</div> </div>
<div class="col-auto" <div class="col-auto" *ngIf="!isNew && formGroup.get('status').value==0 && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
*ngIf="!isNew && formGroup.get('status').value==0 && i == (formGroup.get('definition').get('fields')['controls'].length - 1)"> <button mat-mini-fab color="primary" type="button" (click)="addField()" [disabled]="viewOnly">
<button mat-mini-fab color="primary" type="button" (click)="addField()"
[disabled]="viewOnly">
<mat-icon class="mat-24">add</mat-icon> <mat-icon class="mat-24">add</mat-icon>
</button> </button>
</div> </div>
<div class="col-auto" *ngIf="isNew && i != 0"> <div class="col-auto" *ngIf="isNew && i != 0">
<button mat-mini-fab class="remove" type="button" <button mat-mini-fab class="remove" type="button" (click)="removeField(i)">
(click)="removeField(i)">
<mat-icon class="mat-24">remove</mat-icon> <mat-icon class="mat-24">remove</mat-icon>
</button> </button>
</div> </div>
<div class="col-auto" <div class="col-auto" *ngIf="isNew && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
*ngIf="isNew && i == (formGroup.get('definition').get('fields')['controls'].length - 1)"> <button mat-mini-fab color="primary" type="button" (click)="addField()" [disabled]="viewOnly">
<button mat-mini-fab color="primary" type="button" (click)="addField()"
[disabled]="viewOnly">
<mat-icon class="mat-24">add</mat-icon> <mat-icon class="mat-24">add</mat-icon>
</button> </button>
</div> </div>
@ -109,18 +102,17 @@
</div> </div>
</div> </div>
<div class="row mt-4 pl-5 pr-4"> <div class="row mt-4 pl-5 pr-4">
<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()" <div class="col-auto">
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button></div> <button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<div class="col"></div>
<div class="col-auto" *ngIf="!isNew"><button mat-raised-button color="primary" type="button"
(click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button>
</div> </div>
<button mat-raised-button *ngIf="formGroup.get('status').value!=1" class="col-auto" <div class="col"></div>
color="primary" (click)="finalize()" [disabled]="!formGroup.valid" <div class="col-auto" *ngIf="!isNew">
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button> <button mat-raised-button color="primary" type="button" (click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button>
<button mat-raised-button *ngIf="formGroup.get('status').value==1" class="col-auto" </div>
color="primary" (click)="downloadXML()" <button mat-raised-button *ngIf="formGroup.get('status').value!=1" class="col-auto" color="primary" (click)="finalize()"
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button> [disabled]="!formGroup.valid" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
<button mat-raised-button *ngIf="formGroup.get('status').value==1" class="col-auto" color="primary" (click)="downloadXML()"
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
<div class="col-auto" *ngIf="!viewOnly"> <div class="col-auto" *ngIf="!viewOnly">
<button mat-raised-button color="primary" type="submit" [disabled]="!formGroup.valid"> <button mat-raised-button color="primary" type="submit" [disabled]="!formGroup.valid">
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}} {{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}

23
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts
View File

@ -17,6 +17,7 @@ import { EnumUtils } from '../../../../core/services/utilities/enum-utils.servic
import { DmpProfileEditorModel, DmpProfileFieldEditorModel } from './dmp-profile-editor.model'; import { DmpProfileEditorModel, DmpProfileFieldEditorModel } from './dmp-profile-editor.model';
import { BreadcrumbItem } from '../../../misc/breadcrumb/definition/breadcrumb-item'; import { BreadcrumbItem } from '../../../misc/breadcrumb/definition/breadcrumb-item';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { DmpProfileExternalAutoCompleteFieldDataEditorModel } from './external-autocomplete/dmp-profile-external-autocomplete-field-editor.model';
@Component({ @Component({
selector: 'app-dmp-profile-editor-component', selector: 'app-dmp-profile-editor-component',
@ -96,8 +97,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.dmpProfileService.createDmp(this.formGroup.value) this.dmpProfileService.createDmp(this.formGroup.value)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe( .subscribe(
complete => this.onCallbackSuccess(), complete => this.onCallbackSuccess(),
error => this.onCallbackError(error) error => this.onCallbackError(error)
); );
} }
@ -199,8 +200,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.dmpProfileService.createDmp(this.formGroup.value) this.dmpProfileService.createDmp(this.formGroup.value)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe( .subscribe(
complete => this.onCallbackSuccess(), complete => this.onCallbackSuccess(),
error => this.onCallbackError(error) error => this.onCallbackError(error)
); );
} }
@ -240,4 +241,18 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
} }
return filename; return filename;
} }
isExternalAutocomplete(formGroup: FormGroup) {
if (formGroup.get('dataType').value == DmpProfileFieldDataType.ExternalAutocomplete) {
this.addControl(formGroup);
return true;
} else {
return false;
}
}
addControl(formGroup: FormGroup) {
if (formGroup.get('dataType').value == 3)
formGroup.addControl('externalAutocomplete', new DmpProfileExternalAutoCompleteFieldDataEditorModel().buildForm());
}
} }

12
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.model.ts
View File

@ -4,6 +4,7 @@ import { DmpProfileFieldDataType } from '../../../../core/common/enum/dmp-profil
import { DmpProfileType } from '../../../../core/common/enum/dmp-profile-type'; import { DmpProfileType } from '../../../../core/common/enum/dmp-profile-type';
import { DmpProfile, DmpProfileDefinition } from '../../../../core/model/dmp-profile/dmp-profile'; import { DmpProfile, DmpProfileDefinition } from '../../../../core/model/dmp-profile/dmp-profile';
import { DmpProfileField } from '../../../../core/model/dmp-profile/dmp-profile-field'; import { DmpProfileField } from '../../../../core/model/dmp-profile/dmp-profile-field';
import { DmpProfileExternalAutoCompleteFieldDataEditorModel } from './external-autocomplete/dmp-profile-external-autocomplete-field-editor.model';
export class DmpProfileEditorModel { export class DmpProfileEditorModel {
@ -67,6 +68,7 @@ export class DmpProfileFieldEditorModel {
public required = false; public required = false;
public label: string; public label: string;
public value: any; public value: any;
public externalAutocomplete?: DmpProfileExternalAutoCompleteFieldDataEditorModel;
fromModel(item: DmpProfileField): DmpProfileFieldEditorModel { fromModel(item: DmpProfileField): DmpProfileFieldEditorModel {
this.type = item.type; this.type = item.type;
@ -75,16 +77,22 @@ export class DmpProfileFieldEditorModel {
this.label = item.label; this.label = item.label;
this.id = item.id; this.id = item.id;
this.value = item.value; this.value = item.value;
if (item.externalAutocomplete)
this.externalAutocomplete = new DmpProfileExternalAutoCompleteFieldDataEditorModel().fromModel(item.externalAutocomplete);
return this; return this;
} }
buildForm(): FormGroup { buildForm(): FormGroup {
return new FormBuilder().group({ const formGroup = new FormBuilder().group({
type: [this.type], type: [this.type],
id: [this.id], id: [this.id],
dataType: [this.dataType], dataType: [this.dataType],
required: [this.required], required: [this.required],
label: [this.label] label: [this.label]
}); });
if (this.externalAutocomplete) {
formGroup.addControl('externalAutocomplete', this.externalAutocomplete.buildForm());
}
return formGroup;
} }
} }

26
dmp-frontend/src/app/ui/admin/dmp-profile/editor/external-autocomplete/dmp-profile-external-autocomplete-field-editor.component.html Normal file
View File

@ -0,0 +1,26 @@
<div class="container external-autocomplete">
<div class="row external-autocomplete-field" *ngIf="form.get('externalAutocomplete')">
<h5 style="font-weight: bold" class="col-auto">{{'DMP-PROFILE-EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE.TITLE' | translate}}</h5>
<mat-checkbox class="col-auto" [formControl]="this.form.get('externalAutocomplete').get('multiAutoComplete')">
{{'DMP-PROFILE-EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE.MULTIPLE-AUTOCOMPLETE' | translate}}
</mat-checkbox>
<mat-form-field class="col-12">
<input matInput type="string" placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE.PLACEHOLDER' | translate}}"
[formControl]="form.get('externalAutocomplete').get('placeholder')">
</mat-form-field>
<mat-form-field class="col-md-12">
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE.URL' | translate}}" [formControl]="this.form.get('externalAutocomplete').get('url')">
</mat-form-field>
<mat-form-field class="col-md-4">
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE.OPTIONS-ROOT' | translate}}"
[formControl]="this.form.get('externalAutocomplete').get('optionsRoot')">
</mat-form-field>
<mat-form-field class="col-md-4">
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE.LABEL' | translate}}" [formControl]="this.form.get('externalAutocomplete').get('label')">
</mat-form-field>
<mat-form-field class="col-md-4">
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE.VALUE' | translate}}" [formControl]="this.form.get('externalAutocomplete').get('value')">
</mat-form-field>
</div>
</div>

11
dmp-frontend/src/app/ui/admin/dmp-profile/editor/external-autocomplete/dmp-profile-external-autocomplete-field-editor.component.scss Normal file
View File

@ -0,0 +1,11 @@
.external-autocomplete {
.centered-row-item {
align-items: center;
display: flex;
}
}
.external-autocomplete-field {
margin-left: auto;
background: aliceblue;
}

17
dmp-frontend/src/app/ui/admin/dmp-profile/editor/external-autocomplete/dmp-profile-external-autocomplete-field-editor.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { DmpProfileExternalAutoCompleteFieldDataEditorModel } from './dmp-profile-external-autocomplete-field-editor.model';
@Component({
selector: 'app-dmp-profile-external-autocomplete-field-editor-component',
styleUrls: ['./dmp-profile-external-autocomplete-field-editor.component.scss'],
templateUrl: './dmp-profile-external-autocomplete-field-editor.component.html'
})
export class DmpProfileExternalAutocompleteFieldEditorComponent implements OnInit {
@Input() form: FormGroup
private externalAutocomplete: DmpProfileExternalAutoCompleteFieldDataEditorModel;
ngOnInit() {
}
}

35
dmp-frontend/src/app/ui/admin/dmp-profile/editor/external-autocomplete/dmp-profile-external-autocomplete-field-editor.model.ts Normal file
View File

@ -0,0 +1,35 @@
import { FormGroup, FormBuilder } from "@angular/forms";
import { DmpProfileExternalAutoCompleteField } from "../../../../../core/model/dmp-profile/dmp-profile-external-autocomplete";
export class DmpProfileExternalAutoCompleteFieldDataEditorModel {
public placeholder: string;
public url: string;
public optionsRoot: string;
public multiAutoComplete: boolean = false;
public label: string;
public value: string;
buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup {
const formGroup = new FormBuilder().group({
placeholder: [{ value: this.placeholder, disabled: (disabled && !skipDisable.includes('DmpProfileExternalAutoCompleteFieldDataEditorModel.placeholder')) }],
url: [{ value: this.url, disabled: (disabled && !skipDisable.includes('DmpProfileExternalAutoCompleteFieldDataEditorModel.url')) }],
optionsRoot: [{ value: this.optionsRoot, disabled: (disabled && !skipDisable.includes('DmpProfileExternalAutoCompleteFieldDataEditorModel.optionsRoot')) }],
multiAutoComplete: [{ value: this.multiAutoComplete, disabled: (disabled && !skipDisable.includes('DmpProfileExternalAutoCompleteFieldDataEditorModel.multiAutoComplete')) }],
label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('DmpProfileExternalAutoCompleteFieldDataEditorModel.label')) }],
value: [{ value: this.value, disabled: (disabled && !skipDisable.includes('DmpProfileExternalAutoCompleteFieldDataEditorModel.value')) }],
});
return formGroup;
}
fromModel(item: DmpProfileExternalAutoCompleteField): DmpProfileExternalAutoCompleteFieldDataEditorModel {
this.placeholder = item.placeholder;
this.url = item.url;
this.optionsRoot = item.optionsRoot;
this.multiAutoComplete = item.multiAutoComplete;
this.label = item.label;
this.value = item.value;
return this;
}
}

14
dmp-frontend/src/assets/i18n/en.json
View File

@ -494,7 +494,16 @@
"LABEL": "Name", "LABEL": "Name",
"TYPE": "Type", "TYPE": "Type",
"DATATYPE": "Data Type", "DATATYPE": "Data Type",
"REQUIRED": "Required" "REQUIRED": "Required",
"EXTERNAL-AUTOCOMPLETE": {
"TITLE": "Autocomplete Data",
"MULTIPLE-AUTOCOMPLETE": "Multiple Autocomplete",
"PLACEHOLDER": "Input Placeholder",
"URL": "Url",
"OPTIONS-ROOT": "Options Root",
"LABEL": "Label",
"VALUE": "Value"
}
}, },
"ACTIONS": { "ACTIONS": {
"SAVE": "Save", "SAVE": "Save",
@ -713,7 +722,8 @@
"DATA-TYPE": { "DATA-TYPE": {
"DATE": "Date", "DATE": "Date",
"NUMBER": "Number", "NUMBER": "Number",
"TEXT": "Text" "TEXT": "Text",
"EXTERNAL-AUTOCOMPLETE": "External AutoComplete"
}, },
"TYPE": { "TYPE": {
"INPUT": "Input" "INPUT": "Input"