MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

field ui changes

This commit is contained in:
Diamantis Tziotzios 2017-12-06 13:39:49 +02:00
parent be2e992584
commit 07a4433f34
20 changed files with 136 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

3
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css Normal file
View File

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

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

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

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

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

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

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

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

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

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

@ -1,14 +1,18 @@
import { Field } from '../../../models/Field';
import { FormGroup } from '@angular/forms';
import { Component, Input } from '@angular/core';
import {FieldBase} from '../field-base';
import { Component, Input, ViewEncapsulation } from '@angular/core';
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{
@Input() field:Field;
@Input() form:FormGroup;
export class DynamicFieldCheckBoxComponent {
@Input() field: Field;
@Input() form: FormGroup;
}

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

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

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

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

3
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.css Normal file
View File

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

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

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

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

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

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

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

18
dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.css Normal file
View File

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

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

@ -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 *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 class="content-left-margin">
<div *ngSwitchCase="'freetext'">
<input class="form-control" formControlName="value">
</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">

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

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

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

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

3
dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css
View File

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

4
dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
View File

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