more form ui changes

dmp-frontend/src/app/entities/model/section.ts

@@ -3,9 +3,9 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class Section {
   title: string;
-  description:string;
+  description: string;
   id: string;
   defaultVisibility: boolean;
   ordinal: number;
-  page:number;
+  page: number;
 }

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

@@ -1,3 +1,52 @@
+<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
+
+
+  <label>{{path+' '+field.title}}</label>
+
+  <div *ngSwitchCase="'freetext'">
+    <label>{{field.description}}</label>
+    <div>{{field.extendedDescription}}</div>
+    <input class="form-control" formControlName="value">
+  </div>
+
+  <div *ngSwitchCase="'combobox'">
+    <!--TODO-->
+    <div *ngIf="this.field.data.type === 'autocomplete'">
+      <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
+    </div>
+    <div *ngIf="this.field.data.type === 'wordlist'">
+      <df-dropdown [form]="form" [field]="field"></df-dropdown>
+    </div>
+  </div>
+
+  <div *ngSwitchCase="'checkBox'" class="checkbox">
+    <df-checkbox [form]="form" [field]="field"></df-checkbox>
+  </div>
+
+  <div *ngSwitchCase="'textarea'">
+    <textarea class="form-control" formControlName="value"> </textarea>
+  </div>
+
+  <div *ngSwitchCase="'booleanDecision'">
+    <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
+  </div>
+
+  <div *ngSwitchCase="'radiobox'">
+    <df-radiobox [form]="form" [field]="field"></df-radiobox>
+  </div>
+
+  <div *ngSwitchCase="'label'"> </div>
+
+
+  <div [hidden]="isValid">
+    <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
+    <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
+    <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
+  </div>
+
+
+</div>
+
 <!-- <div [formGroup]="form" class="form-group">
 
 
@@ -26,21 +75,11 @@
 
 </div> -->
 
-<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
 
-
+<!--input or change event
-  <label>{{path+' '+field.title}}</label>
-
-  <div *ngSwitchCase="'freetext'">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-    <input class="form-control" formControlName="value">
-  </div>
-
-  <!--input or change event
       on change event the listener is triggered on blur -->
 
-  <!-- <div *ngSwitchCase="'dropdown'">
+<!-- <div *ngSwitchCase="'dropdown'">
 
         <autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>
         
@@ -49,52 +88,16 @@
         </select>
       </div> -->
 
-  <div *ngSwitchCase="'combobox'">
-    <!--TODO-->
-    <div *ngIf="this.field.data.type === 'autocomplete'">
-      <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
-    </div>
-    <div *ngIf="this.field.data.type === 'wordlist'">
-      <df-dropdown [form]="form" [field]="field"></df-dropdown>
-    </div>
-  </div>
 
 
-  <!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
+
+<!--     <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>
-
-  <div *ngSwitchCase="'textarea'">
-    <textarea class="form-control" formControlName="value"> </textarea>
-  </div>
-
-  <div *ngSwitchCase="'booleanDecision'">
-    <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
-  </div>
-
-  <div *ngSwitchCase="'radiobox'">
-    <df-radiobox [form]="form" [field]="field"></df-radiobox>
-  </div>
-
-<div *ngSwitchCase="'label'"> </div>
-
-
-<div [hidden]="isValid">
-  <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
-  <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
-  <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
-</div>
-
-
-</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>
-    <div *ngFor="let field of compositeField.fields; let i = index;">
+        <h4 *ngIf="compositeField.extendedDescription">
-        <df-field [field]="field" [form]="form.get('fields').get(''+i)" [path]="path" [pathName]="pathName+'.fields.'+i"></df-field>
+            <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>
-
+</div>
-</div>
-<!-- class = "form-group" [class]="customStyle"  [ngStyle] = "customStyle"-->

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

@@ -4,4 +4,19 @@
 
 .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>{{path + ' ' + group.title}}</h4>
-    <h4 >{{group.description}}</h4>
+    <div class="content-left-margin">
-    <h4 >{{group.extendedDescription}}</h4>
+        <h5 *ngIf="group.description">{{group.description}}</h5>
-    <div *ngFor="let compositeField of group.compositeFields; let i = index;">
+        <h5 *ngIf="group.extendedDescription" class="group-extended-desc">
-        <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)"  [path]="path+'.'+(i+1)" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+            <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>
+        </div>
     </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,19 +1,23 @@
 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',
+  selector: 'df-section',
-    templateUrl: './dynamic-form-section.html',
+  templateUrl: './dynamic-form-section.html',
-  })
+  styleUrls: [
-  export class DynamicFormSectionComponent implements OnInit{
+    './dynamic-form-section.css'
+  ],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFormSectionComponent implements OnInit {
 
-    @Input() section: Section
+  @Input() section: Section
-    @Input() form: FormGroup;
+  @Input() form: FormGroup;
-    @Input() pathName:string;
+  @Input() pathName: string;
-    @Input() path:string;
+  @Input() path: string;
-    constructor(){}
+  constructor() { }
 
-    ngOnInit(){
+  ngOnInit() {
 
-    }
+  }
-  }
+}