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

dmp-frontend/src/app/app.component.css

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

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

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

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

@@ -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];
+      }
+    }
 
 
-    
+}
-  }
+
-
 }

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

@@ -10,6 +10,8 @@ export class GroupBase<T>{
     order:number;
     controlType:string;
     section:string;
+    style:string;
+    class: string;
 
     constructor(options: {
         value?: T,
@@ -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 || '';
     }
 }

dmp-frontend/src/app/form/dynamic-form.component.ts

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

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

@@ -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 class="invalid-feedbackCustom" *ngIf="isValidRequired">{{field.label}} is required</div>
-      <div *ngIf="isValidPattern">{{field.label}} must follow a regular expression</div>
+      <div class="invalid-feedbackCustom" *ngIf="isValidPattern">{{field.label}} must match a regular expression {{field.regex}}</div>
-      <div *ngIf="isValidCustom">{{field.label}} custom Valid</div>
+      <div class="invalid-feedbackCustom" *ngIf="isValidCustom">{{field.label}} custom Validation</div>
     </div>
 
     

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

@@ -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
+    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") {
+        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])
+                    arrayVal.push(Validators.pattern(rule.regex));  
-                   this.form.controls[field].setValidators(this.forbiddenNameValidator(/bob/i));
+                }                    
+                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
+            
         }
 
     }

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

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

dmp-frontend/src/app/services/dataModelBuilder.service.ts

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

dmp-frontend/src/styles.css

@@ -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;
+  } 
+