From 8efe88c5fa8abce6aafcbb7112f7260a9a7bfa0d Mon Sep 17 00:00:00 2001 From: Diamadis Tziotzios Date: Wed, 6 Dec 2017 12:35:50 +0200 Subject: [PATCH] more form ui changes --- .../src/app/entities/model/section.ts | 4 +- .../dynamic-form-field.component.html | 103 +++++++++--------- .../dynamic-form-composite-field.css | 18 +++ .../dynamic-form-composite-field.html | 20 ++-- .../dynamic-form-composite-field.ts | 6 +- .../dynamic-form-group.component.css | 15 +++ .../dynamic-form-group.component.html | 21 ++-- .../dynamic-form-group.component.ts | 5 +- .../dynamic-form-section.css | 0 .../dynamic-form-section.html | 11 +- .../dynamic-form-section.ts | 30 ++--- 11 files changed, 144 insertions(+), 89 deletions(-) create mode 100644 dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css create mode 100644 dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css diff --git a/dmp-frontend/src/app/entities/model/section.ts b/dmp-frontend/src/app/entities/model/section.ts index 67cae3207..9234283d8 100644 --- a/dmp-frontend/src/app/entities/model/section.ts +++ b/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; } \ No newline at end of file diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html index 54b6613c8..5e6a7e85b 100644 --- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html +++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html @@ -1,3 +1,52 @@ +
+ + + + +
+ +
{{field.extendedDescription}}
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
The field "{{field.label}}" is required
+
The field {{field.label}} must match a regular expression {{field.regex}}
+
The field {{field.label}} custom Validation
+
+ + +
+ -
- - - -
- -
{{field.extendedDescription}}
- -
- - - -
- -
- -
-
- -
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- - -
-
The field "{{field.label}}" is required
-
The field {{field.label}} must match a regular expression {{field.regex}}
-
The field {{field.label}} custom Validation
-
- - -
- \ No newline at end of file + \ No newline at end of file diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts index c37171d5b..89b759c2b 100644 --- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts +++ b/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{ diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css index a5d0bf7e9..7657b454e 100644 --- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css +++ b/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; } \ No newline at end of file diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html index 21f0da77f..f7b39cc62 100644 --- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html +++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html @@ -1,10 +1,13 @@ -
-

{{path+' '+group.title}}

-

{{group.description}}

-

{{group.extendedDescription}}

-
- +
+

{{path + ' ' + group.title}}

+
+
{{group.description}}
+
+ {{group.extendedDescription}} +
+
+ +
- -
- \ No newline at end of file +
\ No newline at end of file diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts index 8f21e7b14..ae0765fe4 100644 --- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts +++ b/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 diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css new file mode 100644 index 000000000..e69de29bb diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html index bda872ad4..b03241ef6 100644 --- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html +++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html @@ -1,8 +1,13 @@ - + + +
+

{{path}} {{section.title}}

+
+
-

{{section.description}}

-

{{section.extendedDescription}}

+

{{section.description}}

+

{{section.extendedDescription}}

diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts index 4c22083c5..ef0009717 100644 --- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts +++ b/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', - templateUrl: './dynamic-form-section.html', - }) - export class DynamicFormSectionComponent implements OnInit{ + selector: 'df-section', + templateUrl: './dynamic-form-section.html', + styleUrls: [ + './dynamic-form-section.css' + ], + encapsulation: ViewEncapsulation.None, +}) +export class DynamicFormSectionComponent implements OnInit { - @Input() section: Section - @Input() form: FormGroup; - @Input() pathName:string; - @Input() path:string; - constructor(){} + @Input() section: Section + @Input() form: FormGroup; + @Input() pathName: string; + @Input() path: string; + constructor() { } - ngOnInit(){ + ngOnInit() { - } - } \ No newline at end of file + } +} \ No newline at end of file