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

Merge branch 'master' of git@gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot.git

This commit is contained in:
Nikolaos Laskaris 2017-10-06 20:20:19 +03:00
parent 833129d8ac bc21e8f6d5
commit 7ff8e79753
10 changed files with 94 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/app.component.css
View File

@ -13,6 +13,4 @@
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
.errorMessage{
color:red;
}

4
dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
View File

@ -1,4 +1,4 @@
<div [formGroup]="form" class="form-group">
<div [formGroup]="form" [ngStyle] = "customStyle" [class]="classFromJson" >
<h4 [id]= "group.key">{{group.title}}</h4>
<div *ngFor="let field of group.groupFields" >
<df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field>
@ -6,4 +6,4 @@
</div>
<!-- class = "form-group" [class]="customStyle" [ngStyle] = "customStyle"-->

35
dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
View File

@ -1,6 +1,6 @@
import { DataModel } from '../../entities/DataModel';
import { GroupBase } from './group-base';
import { Component,Input, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';
@ -15,20 +15,31 @@ export class DynamicFormGroupComponent implements OnInit {
@Input() dataModel: DataModel;
@Input() group: GroupBase<any>;
@Input() form: FormGroup;
@Input() customStyle: {};
@Input() classFromJson: string ;
constructor() {
}
ngOnInit() {
}
let st = this.group.style == "any" ? "" : this.group.style;
this.classFromJson = this.group.class == "" ? "" : this.group.class;
this.customStyle = {};
if (st != "") {
st.replace(/"/g, '\\"');
var attributes = st.split(';');
for (var i = 0; i < attributes.length; i++) {
var entry = attributes[i].split(':');
entry[1].replace(/["]/g, " ");
//this.customStyle[entry[0]] = '2px solid #c1baba';
var a = entry[0];
this.customStyle[a] = entry[1];
}
}
}
}

10
dmp-frontend/src/app/form/dynamic-form-group/group-base.ts
View File

@ -10,7 +10,9 @@ export class GroupBase<T>{
order:number;
controlType:string;
section:string;
style:string;
class: string;
constructor(options: {
value?: T,
key?: string,
@ -20,7 +22,9 @@ export class GroupBase<T>{
visible?: boolean,
order?: number,
controlType?: string
section?: string
section?: string,
style?:string
class?:string
} = {}) {
this.value = options.value;
this.key = options.key || '';
@ -31,5 +35,7 @@ export class GroupBase<T>{
this.order = options.order === undefined ? 1 : options.order;
this.controlType = options.controlType || '';
this.section = options.section || '';
this.style = options.style || '';
this.class = options.class || '';
}
}

2
dmp-frontend/src/app/form/dynamic-form.component.ts
View File

@ -37,7 +37,7 @@ export class DynamicFormComponent implements OnInit {
ngOnInit() {
console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN");
let id = this.route.snapshot.paramMap.get('id'); //get the project id
this.serverService.getData()
.subscribe(

10
dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
View File

@ -32,10 +32,10 @@
<label [attr.for]="field.key">{{field.label}}</label>
<div>{{field.description}}</div>
<input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
<input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
[(ngModel)]="field.value" [required]="field.required" [pattern] = "field.regex" (blur) = "toggleVisibility($event, field)">
<select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control"[formControlName]="field.key" [(ngModel)]="field.value" [required]="field.required">
<select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control" [formControlName]="field.key" [(ngModel)]="field.value" [required]="field.required">
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
</select>
@ -55,9 +55,9 @@
</div>
<div [hidden]="isValid">
<div *ngIf="isValidRequired">{{field.label}} is required</div>
<div *ngIf="isValidPattern">{{field.label}} must follow a regular expression</div>
<div *ngIf="isValidCustom">{{field.label}} custom Valid</div>
<div class="invalid-feedbackCustom" *ngIf="isValidRequired">{{field.label}} is required</div>
<div class="invalid-feedbackCustom" *ngIf="isValidPattern">{{field.label}} must match a regular expression {{field.regex}}</div>
<div class="invalid-feedbackCustom" *ngIf="isValidCustom">{{field.label}} custom Validation</div>
</div>

32
dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
View File

@ -1,6 +1,6 @@
import { DataModel } from '../../entities/DataModel';
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
import { FieldBase } from './field-base';
import { GroupBase } from '../../form/dynamic-form-group/group-base';
@ -52,8 +52,8 @@ export class DynamicFormFieldComponent {
if (field.visible == true)
return true;
}
FieldValueRuleMethod(field, rule) { //fieldValue rule -- checks the value of target
if (rule._ruleStyle == "range") {
FieldValueRuleMethod(field, rule) { //fieldValue rule -- checks the value of target and apply rules, at the same time when the field becomes visible
if (rule._ruleStyle == "range") { //calling the AddvalidationRules we apply the validation rules for the new field
this.dataModel.fields.forEach(fld => {
if (fld.key == rule._target && rule._from < fld.value < rule._to) {
console.log("visible" + fld.value)
@ -69,6 +69,8 @@ export class DynamicFormFieldComponent {
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
this.form.controls[rule._target].clearValidators(); // when a field is hidden must clear the validators and the errors
this.form.controls[rule._target].updateValueAndValidity();
}
}
if (rule._ruleStyle == "checked") { //checkbox field
@ -77,6 +79,8 @@ export class DynamicFormFieldComponent {
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
this.form.controls[rule._target].clearValidators();
this.form.controls[rule._target].updateValueAndValidity();
}
}
if (rule._ruleStyle == "existence") {
@ -85,6 +89,8 @@ export class DynamicFormFieldComponent {
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
this.form.controls[rule._target].clearValidators();
this.form.controls[rule._target].updateValueAndValidity();
}
}
if (rule._ruleStyle == "regex") {
@ -93,6 +99,8 @@ export class DynamicFormFieldComponent {
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
this.form.controls[rule._target].clearValidators();
this.form.controls[rule._target].updateValueAndValidity();
}
}
}
@ -113,14 +121,24 @@ export class DynamicFormFieldComponent {
AddvalidationRules(field) {
if (this.dataModel.getFieldByKey(field).attributes.validation != undefined) {
let arrayVal = new Array();
this.dataModel.getFieldByKey(field).attributes.validation.forEach(rule => {
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.existence])
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.existence]){
this.dataModel.getFieldByKey(field).required = true;
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.regex])
arrayVal.push(Validators.required);
}
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.regex]){
this.dataModel.getFieldByKey(field).regex = rule.regex;
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.customValidation])
this.form.controls[field].setValidators(this.forbiddenNameValidator(/bob/i));
arrayVal.push(Validators.pattern(rule.regex));
}
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.customValidation]){
arrayVal.push(this.forbiddenNameValidator(/nothing/i));
}
});
this.form.controls[field].setValidators(arrayVal); //Multiple Validators, Usage of array because setValidator override any validators that are provided during initialistaion
this.form.controls[field].updateValueAndValidity(); //hide--> visible must update the validators
}
}

2
dmp-frontend/src/app/form/tableOfContents/toc.component.html
View File

@ -4,7 +4,7 @@
<li class="nav-item">
<div *ngFor="let group of dataModel.groups">
<ul>
<li><a class="nav-link" href="#group.key">{{group.title}}</a>
<li><a class="nav-link" href="#{{group.key}}">{{group.title}}</a>
<ul *ngFor="let field of group.groupFields">
<li *ngIf= "field.visible == 'true'" >
<a class="nav-link" href="#field.key">{{field.label}}</a>

2
dmp-frontend/src/app/services/dataModelBuilder.service.ts
View File

@ -135,6 +135,8 @@ export class dataModelBuilder {
newfldGroup.title = fieldGroup.title.__cdata;
newfldGroup.key = fieldGroup._id;
newfldGroup.section = fieldGroup._section;
newfldGroup.style = fieldGroup.visible._style;
newfldGroup.class = fieldGroup.visible._cssclass;
groups.push(newfldGroup)
});
}

26
dmp-frontend/src/styles.css
View File

@ -40,3 +40,29 @@ body {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.errorMessage{
color:red;
}
.form-control.is-invalid{
border-color: #dc3545
}
.invalid-feedbackCustom {
margin-top: .25rem;
font-size: 1.2rem;
color: #dc3545;
}
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.form-control.ng-invalid {
border-left: 5px solid #a94442; /* red */
}
.form-groupCustom {
border: 2px solid #A11515;
}