Adds "external autocomplete" field on DMP profile editor. (Issue #134)
This commit is contained in:
parent
f31435de94
commit
81c5a492c1
|
@ -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,11 +60,17 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public DmpProfileExternalAutoComplete getExternalAutocomplete() {
|
||||||
|
return externalAutocomplete;
|
||||||
|
}
|
||||||
|
public void setExternalAutocomplete(DmpProfileExternalAutoComplete externalAutocomplete) {
|
||||||
|
this.externalAutocomplete = externalAutocomplete;
|
||||||
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public Element toXml(Document doc) {
|
public Element toXml(Document doc) {
|
||||||
Element rootElement = doc.createElement("field");
|
Element rootElement = doc.createElement("field");
|
||||||
|
@ -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,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");
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
export enum DmpProfileFieldDataType {
|
export enum DmpProfileFieldDataType {
|
||||||
Date = 0,
|
Date = 0,
|
||||||
Number = 1,
|
Number = 1,
|
||||||
Text = 2
|
Text = 2,
|
||||||
|
ExternalAutocomplete = 3
|
||||||
}
|
}
|
|
@ -0,0 +1,8 @@
|
||||||
|
export interface DmpProfileExternalAutoCompleteField {
|
||||||
|
placeholder: string;
|
||||||
|
url: string;
|
||||||
|
optionsRoot: string;
|
||||||
|
multiAutoComplete: boolean;
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
}
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { BaseCriteria } from "../base-criteria";
|
||||||
|
|
||||||
|
export class DmpProfileExternalAutocompleteCriteria extends BaseCriteria {
|
||||||
|
public profileID: String;
|
||||||
|
public fieldID: String;
|
||||||
|
}
|
|
@ -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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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,7 +22,8 @@ import { DialodConfirmationUploadDmpProfiles } from "./listing/criteria/dialog-c
|
||||||
DmpProfileEditorComponent,
|
DmpProfileEditorComponent,
|
||||||
DmpProfileListingComponent,
|
DmpProfileListingComponent,
|
||||||
DmpProfileCriteriaComponent,
|
DmpProfileCriteriaComponent,
|
||||||
DialodConfirmationUploadDmpProfiles
|
DialodConfirmationUploadDmpProfiles,
|
||||||
|
DmpProfileExternalAutocompleteFieldEditorComponent
|
||||||
],
|
],
|
||||||
entryComponents: [
|
entryComponents: [
|
||||||
DialodConfirmationUploadDmpProfiles
|
DialodConfirmationUploadDmpProfiles
|
||||||
|
|
|
@ -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,14 +25,11 @@
|
||||||
<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}}"
|
|
||||||
type="text" name="label" [formControl]="fieldFormGroup.get('label')"
|
|
||||||
required>
|
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>
|
||||||
|
@ -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,17 +102,16 @@
|
||||||
</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()"
|
||||||
|
[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>
|
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">
|
||||||
|
|
|
@ -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',
|
||||||
|
@ -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());
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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>
|
|
@ -0,0 +1,11 @@
|
||||||
|
.external-autocomplete {
|
||||||
|
.centered-row-item {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.external-autocomplete-field {
|
||||||
|
margin-left: auto;
|
||||||
|
background: aliceblue;
|
||||||
|
}
|
|
@ -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() {
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue