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

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

@@ -1,31 +1,3 @@
-<!-- <div [formGroup]="form" class="form-group">
-
-
-  <label [attr.for]="field.key">{{field.label}}</label>
-
-  <div [ngSwitch]="field.controlType">
-
-
-    <input *ngSwitchCase="'textbox'" class ="form-control" [formControlName]="field.key"
-            [id]="field.key" [type]="field.type" required ="field.required">
-
-
-    <select [id]="field.key" *ngSwitchCase="'dropdown'" class ="form-control" [formControlName]="field.key">
-      <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
-    </select>
-
- 
-    <input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value"
-      [id]="field.key" [type]="field.type" (change)="field.value = ckb.checked" #ckb>
-
-
-  </div> 
-  
-  <div class="alert alert-danger" *ngIf="!isValid">{{field.label}} is required</div>
-
-
-</div> -->
-
 <div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
 
 
@@ -37,18 +9,6 @@
     <input class="form-control" formControlName="value">
   </div>
 
-  <!--input or change event
-      on change event the listener is triggered on blur -->
-
-  <!-- <div *ngSwitchCase="'dropdown'">
-
-        <autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>
-        
-        <select *ngIf="!field.url"  class="form-control" [id]="field.key" formControlName="field.key"  [required]="field.required" (change)="toggleVisibility($event, field, false)">
-          <option *ngFor="let opt of field.options" [value]="opt._value"  >{{opt._label}}</option>
-        </select>
-      </div> -->
-
   <div *ngSwitchCase="'combobox'">
     <!--TODO-->
     <div *ngIf="this.field.data.type === 'autocomplete'">
@@ -59,14 +19,6 @@
     </div>
   </div>
 
-
-  <!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
-        <label class="checkBoxLabelCustom">
-            <input *ngSwitchCase="'checkbox'" class="form-check" formControlName="value" [type]="field.type"
-            (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value">{{field.label}}
-        </label>
-      </div> -->
-
   <div *ngSwitchCase="'checkBox'" class="checkbox">
     <df-checkbox [form]="form" [field]="field"></df-checkbox>
   </div>
@@ -95,6 +47,57 @@
 
 </div>
 
+<!-- <div [formGroup]="form" class="form-group">
+
+
+  <label [attr.for]="field.key">{{field.label}}</label>
+
+  <div [ngSwitch]="field.controlType">
+
+
+    <input *ngSwitchCase="'textbox'" class ="form-control" [formControlName]="field.key"
+            [id]="field.key" [type]="field.type" required ="field.required">
+
+
+    <select [id]="field.key" *ngSwitchCase="'dropdown'" class ="form-control" [formControlName]="field.key">
+      <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
+    </select>
+
+ 
+    <input *ngSwitchCase="'checkbox'" [formControlName]="field.key" [(ngModel)]="field.value"
+      [id]="field.key" [type]="field.type" (change)="field.value = ckb.checked" #ckb>
+
+
+  </div> 
+  
+  <div class="alert alert-danger" *ngIf="!isValid">{{field.label}} is required</div>
+
+
+</div> -->
+
+
+<!--input or change event
+      on change event the listener is triggered on blur -->
+
+<!-- <div *ngSwitchCase="'dropdown'">
+
+        <autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>
+        
+        <select *ngIf="!field.url"  class="form-control" [id]="field.key" formControlName="field.key"  [required]="field.required" (change)="toggleVisibility($event, field, false)">
+          <option *ngFor="let opt of field.options" [value]="opt._value"  >{{opt._label}}</option>
+        </select>
+      </div> -->
+
+
+
+
+<!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
+        <label class="checkBoxLabelCustom">
+            <input *ngSwitchCase="'checkbox'" class="form-check" formControlName="value" [type]="field.type"
+            (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value">{{field.label}}
+        </label>
+      </div> -->
+
 <!-- <div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
     <div *ngIf= "field.rules; else  elseBlock ">
       <div *ngIf="field.rules.length > 0; else elseBlock">

dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css

@@ -0,0 +1,18 @@
+.full-width {
+    width: 100%;
+}
+
+.fieldset-component {
+    border:1px solid grey;
+    border-radius: 2px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.fieldset-extended-desc {
+    color: lightslategray;
+}
+
+.content-left-margin {
+    margin-left: 10px;
+}

dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html

@@ -1,10 +1,12 @@
-<div [id]="compositeField.id" [formGroup]="form">
+<div class="fieldset-component" [id]="compositeField.id" [formGroup]="form">
-    <h4>{{compositeField.title}}</h4>
+    <h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
-    <h4>{{compositeField.description}}</h4>
+    <div class="content-left-margin">
-    <h4>{{compositeField.extendedDescription}}</h4>
+        <h4 *ngIf="compositeField.description">{{compositeField.description}}</h4>
+        <h4 *ngIf="compositeField.extendedDescription">
+            <i>{{compositeField.extendedDescription}}</i>
+        </h4>
         <div *ngFor="let field of compositeField.fields; let i = index;">
             <df-field [field]="field" [form]="form.get('fields').get(''+i)" [path]="path" [pathName]="pathName+'.fields.'+i"></df-field>
         </div>
-
     </div>
-<!-- class = "form-group" [class]="customStyle"  [ngStyle] = "customStyle"-->
+</div>

dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts

@@ -1,10 +1,14 @@
 import { CompositeField } from '../../models/CompositeField';
 import { FormGroup } from '@angular/forms';
 import { Section } from '../../entities/model/section';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 @Component({
     selector: 'df-composite-field',
     templateUrl: './dynamic-form-composite-field.html',
+    styleUrls: [
+      './dynamic-form-composite-field.css'
+    ],
+    encapsulation: ViewEncapsulation.None,
   })
   export class DynamicFormCompositeFieldComponent implements OnInit{
 

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

@@ -5,3 +5,18 @@
 .show {
     display:block;
 }
+
+.group-component {
+    border:1px solid grey;
+    border-radius: 2px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.group-extended-desc {
+    color: lightslategray;
+}
+
+.content-left-margin {
+    margin-left: 10px;
+}

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

@@ -1,10 +1,13 @@
-<div [id]="group.id" [formGroup]="form" >
+<div class="group-component" [id]="group.id" [formGroup]="form">
     <h4>{{path + ' ' + group.title}}</h4>
-    <h4 >{{group.description}}</h4>
+    <div class="content-left-margin">
-    <h4 >{{group.extendedDescription}}</h4>
+        <h5 *ngIf="group.description">{{group.description}}</h5>
+        <h5 *ngIf="group.extendedDescription" class="group-extended-desc">
+            <i>{{group.extendedDescription}}</i>
+        </h5>
         <div *ngFor="let compositeField of group.compositeFields; let i = index;">
-        <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)"  [path]="path+'.'+(i+1)" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+            <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path+'.'+(i+1)"
+                [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+        </div>
     </div>
-
 </div>
-<!-- class = "form-group" [class]="customStyle"  [ngStyle] = "customStyle"-->

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

@@ -1,5 +1,5 @@
 import { FieldGroup } from '../../models/FieldGroup';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup, Validators, FormControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { Rule } from '../../entities/common/rule';
@@ -9,7 +9,8 @@ import { Rule } from '../../entities/common/rule';
 @Component({
   selector: 'df-group',
   templateUrl: './dynamic-form-group.component.html',
-  styleUrls: ['./dynamic-form-group.component.css']
+  styleUrls: ['./dynamic-form-group.component.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class DynamicFormGroupComponent implements OnInit {
   @Input() group: FieldGroup

dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html

@@ -1,8 +1,13 @@
-<p-panel [header]="path+' '+section.title" [toggleable]="true">
+<p-panel [toggleable]="true">
+    <p-header>
+        <div class="ui-helper-clearfix">
+                <h2>{{path}} {{section.title}}</h2>
+        </div>
+    </p-header>
 
     <div [id]="section.id" [formGroup]="form">
-        <h4>{{section.description}}</h4>
+        <h3 *ngIf="section.description">{{section.description}}</h3>
-        <h4>{{section.extendedDescription}}</h4>
+        <h4 *ngIf="section.extendedDescription">{{section.extendedDescription}}</h4>
         <div *ngIf="section.fieldGroups">
             <div *ngFor="let group of section.fieldGroups; let j = index;">
                 <df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>

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

@@ -1,9 +1,13 @@
 import { FormGroup } from '@angular/forms';
 import { Section } from '../../entities/model/section';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 @Component({
   selector: 'df-section',
   templateUrl: './dynamic-form-section.html',
+  styleUrls: [
+    './dynamic-form-section.css'
+  ],
+  encapsulation: ViewEncapsulation.None,
 })
 export class DynamicFormSectionComponent implements OnInit {