field ui changes

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

@@ -1,6 +1,3 @@
 <div [formGroup]="textFormGroup">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-    <label>{{field.title}}</label>
     <input auto-complete class="form-control autocomplete" formControlName="text" [source]="values">
 </div>

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

@@ -1,5 +1,5 @@
 import { Field } from '../../../models/Field';
-import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 
 import { ServerService } from '../../../services/server.service';
@@ -12,7 +12,8 @@ declare var $: any;
 @Component({
   selector: 'df-autocomplete',
   templateUrl: './autocomplete-remote.component.html',
-  styleUrls: ['./autocomplete-remote.component.css']
+  styleUrls: ['./autocomplete-remote.component.css'],
+  encapsulation: ViewEncapsulation.None
 })
 
 
@@ -23,11 +24,11 @@ export class AutocompleteRemoteComponent implements OnInit/* , ControlValueAcces
   @Input() field: Field;
   @Input() form: FormGroup;
 
-  private textFormGroup = new FormGroup({text:new FormControl("")});
+  private textFormGroup = new FormGroup({ text: new FormControl("") });
   private loading: boolean;
   values: any[] = new Array();
   typeaheadMS: number = 1400;
-  
+
   constructor(private serverService: ServerService) {
 
   }

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css

@@ -0,0 +1,3 @@
+.radio-label {
+    margin-left: 10px;
+}

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

@@ -1,6 +1,5 @@
 <div [formGroup]="form">
-    <label>{{field.description}}</label>
+    <input type="radio" id="{{field.id + 'true'}}" formControlName="value" value="true"><label for="{{field.id + 'true'}}" class="radio-label">Yes</label>
-    <div>{{field.extendedDescription}}</div>
+    <br>
-    <input type="radio" formControlName="value" value="true">Yes<br>
+    <input type="radio" id="{{field.id + 'false'}}" formControlName="value" value="false"><label for="{{field.id + 'false'}}" class="radio-label">No</label>
-    <input type="radio" formControlName="value" value="false">No
 </div>

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

@@ -1,11 +1,15 @@
 import { FormGroup } from '@angular/forms';
 import { Field } from '../../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-booleanDecision',
-    templateUrl: './dynamic-field-boolean-decision.component.html'
+    templateUrl: './dynamic-field-boolean-decision.component.html',
+    styleUrls: [
+        './dynamic-field-boolean-decision.component.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
 export class DynamicFieldBooleanDecisionComponent implements OnInit{
     @Input() field: Field;

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css

@@ -1 +1,7 @@
-@CHARSET "UTF-8";
+.checkbox-label {
+    margin-left: 10px;
+}
+
+.checkbox-icon {
+    margin-left: 0px;
+}

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

@@ -1,6 +1,4 @@
-
+<div [formGroup]="form" class="form-group">
-<div [formGroup]="form" class="form-group" >
+    <input id="{{field.id + 'checkboc'}}" class="checkbox-icon" formControlName="value" type="checkbox">
-        <label>{{field.description}}</label>
+    <label for="{{field.id + 'checkboc'}}" class="checkbox-label">Test</label>
-        <div>{{field.extendedDescription}}</div>
-    <input formControlName="value" type = "checkbox">
 </div>

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

@@ -1,14 +1,18 @@
 import { Field } from '../../../models/Field';
 import { FormGroup } from '@angular/forms';
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
-import {FieldBase} from '../field-base';
+import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-checkbox',
-    templateUrl: './dynamic-field-checkbox.html'
+    templateUrl: './dynamic-field-checkbox.html',
+    styleUrls: [
+        './dynamic-field-checkbox.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class DynamicFieldCheckBoxComponent{
+export class DynamicFieldCheckBoxComponent {
-    @Input() field:Field;
+    @Input() field: Field;
-    @Input() form:FormGroup;
+    @Input() form: FormGroup;
-    
+
 }

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

@@ -1,6 +1,4 @@
 <div [formGroup]="form">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
   <select class="form-control" formControlName="value">
       <option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</option>
     </select>

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

@@ -1,17 +1,21 @@
 import { FormGroup } from '@angular/forms';
 import { Field } from '../../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-dropdown',
-    templateUrl: './dynamic-field-dropdown.html'
+    templateUrl: './dynamic-field-dropdown.html',
+    styleUrls: [
+        './dynamic-field-dropdown.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class DynamicFieldDropdownComponent implements OnInit{
+export class DynamicFieldDropdownComponent implements OnInit {
     @Input() field: Field;
     @Input() form: FormGroup;
 
-    ngOnInit(){
+    ngOnInit() {
 
     }
 }

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

@@ -0,0 +1,3 @@
+.radio-label {
+    margin-left: 10px;
+}

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

@@ -1,7 +1,6 @@
 <div [formGroup]="form">
-    <label>{{field.description}}</label>
+  <div *ngFor="let option of this.field.data.options let index = index">
-    <div>{{field.extendedDescription}}</div>
+    <input type="radio" formControlName="value" [value]="option.value" id="{{field.id + index}}"/><label for="{{field.id + index}}" class="radio-label">{{option.label}}</label>
-  <div *ngFor="let option of this.field.data.options">
+    <br>
-    <input type="radio" formControlName="value" [value]="option.value">{{option.label}}<br>
   </div>
 </div>

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

@@ -1,17 +1,21 @@
 import { FormGroup } from '@angular/forms';
 import { Field } from '../../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-radiobox',
-    templateUrl: './dynamic-field-radiobox.component.html'
+    templateUrl: './dynamic-field-radiobox.component.html',
+    styleUrls: [
+        './dynamic-field-radiobox.component.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class DynamicFieldRadioBoxComponent implements OnInit{
+export class DynamicFieldRadioBoxComponent implements OnInit {
     @Input() field: Field;
     @Input() form: FormGroup;
 
-    ngOnInit(){
+    ngOnInit() {
 
     }
 }

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/field-radiobox.css

@@ -1 +0,0 @@
-@CHARSET "UTF-8";

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

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

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

@@ -1,50 +1,53 @@
-<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
+<div class="field-component" [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form"
+  [ngSwitch]="field.viewStyle.renderStyle">
 
+  <h5 *ngIf="field.title">{{path + ' ' + field.title}}</h5>
+  <h5 *ngIf="field.description">{{field.description}}</h5>
+  <h5 *ngIf="field.extendedDescription" class="field-extended-desc">
+    <i>{{field.extendedDescription}}</i>
+  </h5>
 
-  <label>{{path+' '+field.title}}</label>
+  <div class="content-left-margin">
-
+    <div *ngSwitchCase="'freetext'">
-  <div *ngSwitchCase="'freetext'">
+      <input class="form-control" formControlName="value">
-    <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 *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 *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">

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

@@ -1,7 +1,7 @@
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { VisibilityRuleSource } from '../../visibility-rules/models/VisibilityRuleSource';
 import { Field } from '../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
@@ -12,7 +12,11 @@ import { RuleStyle } from '../../entities/common/rulestyle';
 @Component({
     selector: 'df-field',
     templateUrl: './dynamic-form-field.component.html',
-    styles: ['.checkBoxLabelCustom {font-weight: 700;}']
+    // styles: ['.checkBoxLabelCustom {font-weight: 700;}']
+    styleUrls: [
+        './dynamic-form-field.component.css'
+      ],
+      encapsulation: ViewEncapsulation.None
 })
 
 export class DynamicFormFieldComponent {
@@ -24,9 +28,9 @@ export class DynamicFormFieldComponent {
     constructor(private route: ActivatedRoute,private visibilityRulesService:VisibilityRulesService) { }
 
     ngOnChanges(changeRecord) {
+    
     }
 
-
     get isValid() {
         return this.form.get("value").valid;
     }
@@ -39,5 +43,4 @@ export class DynamicFormFieldComponent {
     get isValidCustom() {
         return this.form.get("value").hasError("forbiddenName");
     }
-
 }

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

@@ -2,7 +2,7 @@
     <h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
     <div class="content-left-margin">
         <h4 *ngIf="compositeField.description">{{compositeField.description}}</h4>
-        <h4 *ngIf="compositeField.extendedDescription">
+        <h4 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
             <i>{{compositeField.extendedDescription}}</i>
         </h4>
         <div *ngFor="let field of compositeField.fields; let i = index;">

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

@@ -0,0 +1,3 @@
+.section-component {
+    margin-bottom: 10px;
+}

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

@@ -1,7 +1,7 @@
-<p-panel [toggleable]="true">
+<p-panel class="section-component" [toggleable]="true">
     <p-header>
         <div class="ui-helper-clearfix">
-                <h2>{{path}} {{section.title}}</h2>
+            <h2>{{path}} {{section.title}}</h2>
         </div>
     </p-header>