more form ui changes

This commit is contained in:
Diamantis Tziotzios 2017-12-06 12:35:50 +02:00
parent f3d9597a54
commit 8efe88c5fa
11 changed files with 144 additions and 89 deletions

View File

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

View File

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

View File

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

View File

@ -1,10 +1,12 @@
<div [id]="compositeField.id" [formGroup]="form">
<h4>{{compositeField.title}}</h4>
<h4>{{compositeField.description}}</h4>
<h4>{{compositeField.extendedDescription}}</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 class="fieldset-component" [id]="compositeField.id" [formGroup]="form">
<h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
<div class="content-left-margin">
<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>
</div>
<!-- class = "form-group" [class]="customStyle" [ngStyle] = "customStyle"-->
</div>

View File

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

View File

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

View File

@ -1,10 +1,13 @@
<div [id]="group.id" [formGroup]="form" >
<h4 >{{path+' '+group.title}}</h4>
<h4 >{{group.description}}</h4>
<h4 >{{group.extendedDescription}}</h4>
<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 class="group-component" [id]="group.id" [formGroup]="form">
<h4>{{path + ' ' + group.title}}</h4>
<div class="content-left-margin">
<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>
</div>
</div>
</div>
<!-- class = "form-group" [class]="customStyle" [ngStyle] = "customStyle"-->
</div>

View File

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

View File

@ -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>
<h4>{{section.extendedDescription}}</h4>
<h3 *ngIf="section.description">{{section.description}}</h3>
<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>

View File

@ -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() {
}
}
}
}