Merge branch 'ui-refactoring' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-refactoring

# Conflicts:
#	dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts
This commit is contained in:
Diamantis Tziotzios 2019-02-15 12:28:46 +02:00
commit d89aedebc6
19 changed files with 198 additions and 37 deletions

View File

@ -70,6 +70,7 @@ public class ModelBuilder {
if (type.equals("checkBox")) return (FieldData<U>) new CheckBoxData().fromData(data);
if (type.equals("freetext")) return (FieldData<U>) new FreeTextData().fromData(data);
if (type.equals("textarea")) return (FieldData<U>) new TextAreaData().fromData(data);
if (type.equals("datePicker")) return (FieldData<U>) new DataPickerData().fromData(data);
return null;
}
@ -86,6 +87,7 @@ public class ModelBuilder {
if (type.equals("checkBox")) return (FieldData<U>) new CheckBoxData().fromData(data);
if (type.equals("freetext")) return (FieldData<U>) new FreeTextData().fromData(data);
if (type.equals("textarea")) return (FieldData<U>) new TextAreaData().fromData(data);
if (type.equals("datePicker")) return (FieldData<U>) new DataPickerData().fromData(data);
return null;
}

View File

@ -226,6 +226,8 @@ public class WordBuilder {
return field.getValue();
case "textarea":
return field.getValue();
case "datepicker":
return field.getValue();
}
return null;
}

View File

@ -0,0 +1,34 @@
package eu.eudat.models.data.components.commons.datafield;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import java.util.Map;
public class DataPickerData extends FieldData<DataPickerData> {
@Override
public DataPickerData fromData(Object data) {
if (data != null) {
this.setLabel((String) ((Map<String, Object>) data).get("label"));
}
return this;
}
@Override
public Object toData() {
return null;
}
@Override
public Element toXml(Document doc) {
Element root = doc.createElement("data");
root.setAttribute("label", this.getLabel());
return root;
}
@Override
public DataPickerData fromXml(Element item) {
this.setLabel(item != null ? item.getAttribute("label") : "");
return this;
}
}

View File

@ -4,5 +4,7 @@ export enum DatasetProfileFieldViewStyle {
ComboBox = "combobox",
CheckBox = "checkBox",
FreeText = "freetext",
RadioBox = "radiobox"
RadioBox = "radiobox",
DatePicker = "datePicker"
}

View File

@ -40,3 +40,7 @@ export interface FieldDataOption extends FieldData {
label: string;
value: string;
}
export interface DatePickerFieldData extends FieldData {
}

View File

@ -71,6 +71,7 @@ export class EnumUtils {
case DatasetProfileFieldViewStyle.FreeText: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.FREE-TEXT');
case DatasetProfileFieldViewStyle.RadioBox: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.RADIO-BOX');
case DatasetProfileFieldViewStyle.TextArea: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.TEXT-AREA');
case DatasetProfileFieldViewStyle.DatePicker: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.DATE-PICKER');
}
}

View File

@ -0,0 +1,19 @@
import { FormGroup } from '@angular/forms';
import { FieldDataEditorModel } from './field-data-editor-model';
import { DatePickerFieldData } from '../../../../../core/model/dataset-profile-definition/field-data/field-data';
export class DatePickerDataEditorModel extends FieldDataEditorModel<DatePickerDataEditorModel> {
public label: string;
buildForm(): FormGroup {
const formGroup = this.formBuilder.group({
label: [this.label]
});
return formGroup;
}
fromModel(item: DatePickerFieldData): DatePickerDataEditorModel {
this.label = item.label;
return this;
}
}

View File

@ -13,6 +13,8 @@ import { TextAreaFieldDataEditorModel } from './field-data/text-area-field-data-
import { WordListFieldDataEditorModel } from './field-data/word-list-field-data-editor-model';
import { ViewStyleEditorModel } from './view-style-editor-model';
import { VisibilityEditorModel } from './visibility-editor-model';
import { DatasetProfileEditorDatePickerFieldComponent } from '../editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component';
import { DatePickerDataEditorModel } from './field-data/date-picker-data-editor-models';
export class FieldEditorModel extends BaseFormModel {
@ -45,6 +47,7 @@ export class FieldEditorModel extends BaseFormModel {
if (this.viewStyle.renderStyle === 'textarea') { this.data = new TextAreaFieldDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'freetext') { this.data = new FreeTextFieldDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'booleanDecision') { this.data = new BooleanDecisionFieldDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'datePicker') { this.data = new DatePickerDataEditorModel().fromModel(item.data); }
}
}
return this;

View File

@ -2,10 +2,9 @@ import { NgModule } from '@angular/core';
import { CommonFormsModule } from '../../../common/forms/common-forms.module';
import { CommonUiModule } from '../../../common/ui/common-ui.module';
import { FormattingModule } from '../../../core/formatting.module';
import { ConfirmationDialogModule } from '../../../library/confirmation-dialog/confirmation-dialog.module';
import { DatasetProfileRoutingModule } from './dataset-profile.routing';
import { DatasetProfileEditorCompositeFieldComponent } from './editor/components/composite-field/dataset-profile-editor-composite-field.component';
import { DatasetProfileEditorDefaultValueComponent } from './editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component';
import { DatasetProfileEditorCompositeFieldComponent } from './editor/components/composite-field/dataset-profile-editor-composite-field.component';
import { DatasetProfileEditorAutoCompleteFieldComponent } from './editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component';
import { DatasetProfileEditorBooleanDecisionFieldComponent } from './editor/components/field-type/boolean-decision/dataset-profile-editor-boolean-decision-field.component';
import { DatasetProfileEditorCheckboxFieldComponent } from './editor/components/field-type/checkbox/dataset-profile-editor-checkbox-field.component';
@ -21,7 +20,8 @@ import { DatasetProfileEditorSectionComponent } from './editor/components/sectio
import { DatasetProfileEditorComponent } from './editor/dataset-profile-editor.component';
import { DatasetProfileCriteriaComponent } from './listing/criteria/dataset-profile.component';
import { DatasetProfileListingComponent } from './listing/dataset-profile-listing.component';
import { DatasetProfilePreviewerComponent } from './preview/dataset-profile-preview.component';
import { ConfirmationDialogModule } from '../../../library/confirmation-dialog/confirmation-dialog.module';
import { DatasetProfileEditorDatePickerFieldComponent } from './editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component';
@NgModule({
imports: [
@ -47,9 +47,10 @@ import { DatasetProfilePreviewerComponent } from './preview/dataset-profile-prev
DatasetProfileEditorFreeTextFieldComponent,
DatasetProfileEditorRadioBoxFieldComponent,
DatasetProfileEditorTextAreaFieldComponent,
DatasetProfileEditorDatePickerFieldComponent,
DatasetProfileEditorWordListFieldComponent,
DatasetProfileEditorDefaultValueComponent,
DatasetProfilePreviewerComponent
DatasetProfileEditorDefaultValueComponent
],
entryComponents: [
]

View File

@ -60,4 +60,15 @@
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- DatePicker -->
<mat-form-field class="col-12" *ngIf="viewStyle === viewStyleEnum.DatePicker">
<!--(focus)="date.open()" (click)="date.open()"-->
<input matInput
[placeholder]="placeHolder" class="table-input" [matDatepicker]="date"
[formControl]="form" [required]="required">
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
<mat-datepicker #date></mat-datepicker>
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
</div>

View File

@ -0,0 +1,9 @@
<div class="row" *ngIf="form.get('data')">
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
| translate}}</h5>
<mat-form-field class="col-12">
<input matInput type="string"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
[formControl]="form.get('data').get('label')">
</mat-form-field>
</div>

View File

@ -0,0 +1,18 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { DatePickerDataEditorModel } from '../../../../admin/field-data/date-picker-data-editor-models';
@Component({
selector: 'app-dataset-profile-editor-date-picker-field-component',
styleUrls: ['./dataset-profile-editor-date-picker-field.component.scss'],
templateUrl: './dataset-profile-editor-date-picker-field.component.html'
})
export class DatasetProfileEditorDatePickerFieldComponent implements OnInit {
@Input() form: FormGroup;
private data: DatePickerDataEditorModel = new DatePickerDataEditorModel();
ngOnInit() {
if (!this.form.get('data')) { this.form.addControl('data', this.data.buildForm()); }
}
}

View File

@ -1,8 +1,11 @@
<div class="row" *ngIf="form.get('data')">
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-TITLE' | translate}}</h5>
<h5 style="font-weight: bold" class="col-12">
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-TITLE' | translate}}</h5>
<mat-form-field class="col-12">
<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-PLACEHOLDER' | translate}}" [formControl]="form.get('data').get('label')">
<input matInput type="string"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-PLACEHOLDER' | translate}}"
[formControl]="form.get('data').get('label')">
</mat-form-field>
</div>

View File

@ -15,6 +15,7 @@
<mat-option [value]="viewStyleEnum.FreeText">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.FreeText)}}</mat-option>
<mat-option [value]="viewStyleEnum.RadioBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.RadioBox)}}</mat-option>
<mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option>
<mat-option [value]="viewStyleEnum.DatePicker">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatePicker)}}</mat-option>
</mat-select>
<mat-error *ngIf="this.form.get('viewStyle').get('renderStyle').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
@ -41,6 +42,8 @@
<app-dataset-profile-editor-radio-box-field-component *ngSwitchCase="viewStyleEnum.RadioBox" class="col-12" [form]="form"></app-dataset-profile-editor-radio-box-field-component>
<app-dataset-profile-editor-free-text-field-component *ngSwitchCase="viewStyleEnum.FreeText" class="col-12" [form]="form"></app-dataset-profile-editor-free-text-field-component>
<app-dataset-profile-editor-text-area-field-component *ngSwitchCase="viewStyleEnum.TextArea" class="col-12" [form]="form"></app-dataset-profile-editor-text-area-field-component>
<app-dataset-profile-editor-date-picker-field-component *ngSwitchCase="viewStyleEnum.DatePicker" class="col-12" [form]="form"></app-dataset-profile-editor-date-picker-field-component>
<app-dataset-profile-editor-boolean-decision-field-component *ngSwitchCase="viewStyleEnum.BooleanDecision" class="col-12"
[form]="form"></app-dataset-profile-editor-boolean-decision-field-component>
<app-dataset-profile-editor-checkbox-field-component *ngSwitchCase="viewStyleEnum.CheckBox" class="col-12" [form]="form"></app-dataset-profile-editor-checkbox-field-component>

View File

@ -13,6 +13,7 @@ import { RadioBoxFieldDataEditorModel } from '../../../admin/field-data/radio-bo
import { TextAreaFieldDataEditorModel } from '../../../admin/field-data/text-area-field-data-editor-model';
import { WordListFieldDataEditorModel } from '../../../admin/field-data/word-list-field-data-editor-model';
import { RuleEditorModel } from '../../../admin/rule-editor-model';
import { DatePickerDataEditorModel } from '../../../admin/field-data/date-picker-data-editor-models';
@Component({
selector: 'app-dataset-profile-editor-field-component',
@ -66,6 +67,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
case DatasetProfileFieldViewStyle.TextArea:
this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
break;
case DatasetProfileFieldViewStyle.DatePicker:
this.form.addControl('data', new DatePickerDataEditorModel().buildForm());
break;
}
}
});
@ -80,6 +84,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
case DatasetProfileFieldViewStyle.FreeText:
case DatasetProfileFieldViewStyle.ComboBox:
case DatasetProfileFieldViewStyle.BooleanDecision:
case DatasetProfileFieldViewStyle.DatePicker:
return false;
default:
return false;

View File

@ -147,7 +147,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
}
onSubmit() {
const data = this.form.value;
let data = this.form.value;
if (this.datasetProfileId) {
this.datasetProfileService.updateForm(this.datasetProfileId, data)
@ -156,6 +156,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
this.router.navigate(['/dataset-profiles']);
});
} else {
this.form.get('status').setValue(0);
data = this.form.value;
this.datasetProfileService.createForm(data)
.pipe(takeUntil(this._destroyed))
.subscribe(() => {

View File

@ -1,44 +1,57 @@
<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [id]="this.form.get('id').value"
[formGroup]="form" [ngSwitch]="this.form.get('viewStyle').value.renderStyle" class="dynamic-form-field row">
<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)"
[id]="this.form.get('id').value" [formGroup]="form" [ngSwitch]="this.form.get('viewStyle').value.renderStyle"
class="dynamic-form-field row">
<h5 *ngIf="this.form.get('title').value && !isChild">{{this.form.get('title').value}}</h5>
<h5 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}</h5>
<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12"><i>{{this.form.get('extendedDescription').value}}</i></h5>
<h5 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}
</h5>
<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12">
<i>{{this.form.get('extendedDescription').value}}</i></h5>
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value">
<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}"
[required]="form.get('validationRequired').value">
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
| translate}}</mat-error>
</mat-form-field>
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
<div class="row">
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
<mat-form-field class="col-md-12"
*ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}"
[formControl]="form.get('value')" [configuration]="singleAutoCompleteConfiguration"
[required]="form.get('validationRequired').value">
</app-single-auto-complete>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
<mat-select [formControl]="form.get('value')" placeholder="{{ form.get('data').value.label | translate }}"
[required]="form.get('validationRequired').value">
<mat-option *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}}</mat-option>
<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList"
class="col-md-12">
<mat-select [formControl]="form.get('value')"
placeholder="{{ form.get('data').value.label | translate }}"
[required]="form.get('validationRequired').value">
<mat-option *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}}
</mat-option>
</mat-select>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.CheckBox" class="col-12">
<mat-checkbox [formControl]="form.get('value')" [required]="form.get('validationRequired').value">{{form.get('data').value.label}}</mat-checkbox>
<mat-checkbox [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
{{form.get('data').value.label}}</mat-checkbox>
</div>
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
<textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10"
[required]="form.get('validationRequired').value" placeholder="{{ form.get('data').value.label | translate }}"></textarea>
<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear"
(click)="this.form.patchValue({'value': ''})">
<textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2"
matAutosizeMaxRows="10" [required]="form.get('validationRequired').value"
placeholder="{{ form.get('data').value.label | translate }}"></textarea>
<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix
aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
<mat-icon>close</mat-icon>
</button>
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
@ -47,17 +60,38 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.BooleanDecision" class="col-12">
<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="true">Yes</mat-radio-button>
<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="false">No</mat-radio-button>
<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="true">Yes
</mat-radio-button>
<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="false">No
</mat-radio-button>
</mat-radio-group>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</div>
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.RadioBox" class="col-12">
<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
<mat-radio-button *ngFor="let option of form.get('data').value.options let index = index" class="radio-button-item"
[value]="option.value">{{option.label}}</mat-radio-button>
<mat-radio-button *ngFor="let option of form.get('data').value.options let index = index"
class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
</mat-radio-group>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</div>
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12">
<mat-form-field class="col-12">
<input matInput placeholder="{{ form.get('data').value.label | translate }}" class="table-input"
[matDatepicker]="date" [required]="form.get('validationRequired').value"
[formControl]="form.get('value')">
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
<mat-datepicker #date></mat-datepicker>
<mat-error *ngIf="form.get('value').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
</div>
</div>

View File

@ -136,7 +136,11 @@
"FIELD-AUTOCOMPLETE-LABEL": "Label",
"FIELD-AUTOCOMPLETE-VALUE": "Value",
"FIELD-AUTOCOMPLETE-URL": "Url",
"FIELD-AUTOCOMPLETE-OPTIONS-ROOT": "Options Root"
"FIELD-AUTOCOMPLETE-OPTIONS-ROOT": "Options Root",
"FIELD-DATE-PICKER-TITLE": "Date Picker",
"FIELD-DATE-PICKER-PLACEHOLDER": "Input Placeholder",
"FIELD-DATE-PICKER-LABEL": "Label",
"FIELD-DATE-PICKER-VALUE": "Value"
},
"DEFAULT-VALUES": {
"NONE": "None",
@ -487,7 +491,8 @@
"COMBO-BOX": "Combo Box",
"FREE-TEXT": "Free Text",
"RADIO-BOX": "Radio Box",
"TEXT-AREA": "Text Area"
"TEXT-AREA": "Text Area",
"DATE-PICKER":"Date Picker"
},
"DATASET-PROFILE-COMBO-BOX-TYPE": {
"WORD-LIST": "Word List",