#967 dynamic container resolution

This commit is contained in:
Denys Vuika
2016-11-15 10:46:49 +00:00
committed by Mario Romano
parent 3092cfddaa
commit 084d962230
9 changed files with 38 additions and 68 deletions

View File

@@ -15,20 +15,7 @@
<div *ngIf="!form.hasTabs() && form.hasFields()">
<div *ngFor="let field of form.fields">
<div [ngSwitch]="field.type">
<div *ngSwitchCase="'container'">
<container-widget [content]="field" (formValueChanged)="checkVisibility($event)"></container-widget>
</div>
<div *ngSwitchCase="'group'">
<container-widget [content]="field" (formValueChanged)="checkVisibility($event)"></container-widget>
</div>
<div *ngSwitchCase="'dynamic-table'">
<dynamic-table-widget [content]="field"></dynamic-table-widget>
</div>
<div *ngSwitchDefault>
<form-field [field]="field.field"></form-field>
</div>
</div>
<form-field [field]="field.field"></form-field>
</div>
</div>
</div>

View File

@@ -12,23 +12,7 @@
<div *ngIf="!form.hasTabs() && form.hasFields()">
<div *ngFor="let field of form.fields">
<div [ngSwitch]="field.type">
<div *ngSwitchCase="'container'">
<container-widget [content]="field" (formValueChanged)="checkVisibility($event)"></container-widget>
</div>
<div *ngSwitchCase="'group'">
<container-widget [content]="field" (formValueChanged)="checkVisibility($event)"></container-widget>
</div>
<div *ngSwitchCase="'dynamic-table'">
<dynamic-table-widget [content]="field"></dynamic-table-widget>
</div>
<div *ngSwitchCase="'readonly'">
<display-value-widget [field]="field.field" (fieldChanged)="checkVisibility($event)"></display-value-widget>
</div>
<div *ngSwitchDefault>
<span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
</div>
</div>
<form-field [field]="field.field"></form-field>
</div>
</div>
</div>

View File

@@ -103,14 +103,14 @@ describe('ContainerWidget', () => {
let widget = new ContainerWidget();
let fakeForm = new FormModel();
let fakeField = new FormFieldModel(fakeForm, {id: 'fakeField', value: 'fakeValue'});
widget.formValueChanged.subscribe(field => {
widget.fieldChanged.subscribe(field => {
expect(field).not.toBe(null);
expect(field.id).toBe('fakeField');
expect(field.value).toBe('fakeValue');
done();
});
widget.fieldChanged(fakeField);
widget.onFieldChanged(fakeField);
});
describe('when template is ready', () => {
@@ -180,7 +180,7 @@ describe('ContainerWidget', () => {
it('should hide header when it becomes not visible', async(() => {
containerWidgetComponent.content = fakeContainerVisible;
fixture.detectChanges();
containerWidgetComponent.formValueChanged.subscribe((res) => {
containerWidgetComponent.fieldChanged.subscribe((res) => {
containerWidgetComponent.content.field.isVisible = false;
fixture.detectChanges();
fixture.whenStable()
@@ -189,12 +189,12 @@ describe('ContainerWidget', () => {
expect(element.querySelector('#container-header-label')).toBeNull();
});
});
containerWidgetComponent.fieldChanged(null);
containerWidgetComponent.onFieldChanged(null);
}));
it('should show header when it becomes visible', async(() => {
containerWidgetComponent.content = fakeContainerInvisible;
containerWidgetComponent.formValueChanged.subscribe((res) => {
containerWidgetComponent.fieldChanged.subscribe((res) => {
containerWidgetComponent.content.field.isVisible = true;
fixture.detectChanges();
fixture.whenStable()
@@ -205,7 +205,7 @@ describe('ContainerWidget', () => {
expect(element.querySelector('#container-header-label').innerHTML).toContain('fake-cont-2-name');
});
});
containerWidgetComponent.fieldChanged(null);
containerWidgetComponent.onFieldChanged(null);
}));
});

View File

@@ -15,8 +15,9 @@
* limitations under the License.
*/
import { Component, Input, AfterViewInit, Output, EventEmitter } from '@angular/core';
import { ContainerModel, FormFieldModel } from './../core/index';
import { Component, AfterViewInit, OnInit } from '@angular/core';
import { ContainerModel } from './../core/index';
import { WidgetComponent } from './../widget.component';
@Component({
moduleId: module.id,
@@ -24,20 +25,22 @@ import { ContainerModel, FormFieldModel } from './../core/index';
templateUrl: './container.widget.html',
styleUrls: ['./container.widget.css']
})
export class ContainerWidget implements AfterViewInit {
export class ContainerWidget extends WidgetComponent implements OnInit, AfterViewInit {
@Input()
content: ContainerModel;
@Output()
formValueChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
onExpanderClicked() {
if (this.content && this.content.isCollapsible()) {
this.content.isExpanded = !this.content.isExpanded;
}
}
ngOnInit() {
if (this.field) {
this.content = new ContainerModel(this.field.form, this.field.json);
}
}
ngAfterViewInit() {
this.setupMaterialComponents();
}
@@ -50,9 +53,4 @@ export class ContainerWidget implements AfterViewInit {
}
return false;
}
fieldChanged(field: FormFieldModel) {
this.formValueChanged.emit(field);
}
}

View File

@@ -43,6 +43,7 @@ export class FormModel {
readOnly: boolean = false;
tabs: TabModel[] = [];
/** Stores root containers */
fields: FormWidgetModel[] = [];
outcomes: FormOutcomeModel[] = [];

View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input, ElementRef } from '@angular/core';
import { Component, ElementRef, OnInit } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../core/index';
@@ -25,11 +25,10 @@ import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../cor
templateUrl: './dynamic-table.widget.html',
styleUrls: ['./dynamic-table.widget.css']
})
export class DynamicTableWidget extends WidgetComponent {
export class DynamicTableWidget extends WidgetComponent implements OnInit {
ERROR_MODEL_NOT_FOUND = 'Table model not found';
@Input()
content: DynamicTableModel;
editMode: boolean = false;
@@ -39,6 +38,12 @@ export class DynamicTableWidget extends WidgetComponent {
super();
}
ngOnInit() {
if (this.field) {
this.content = new DynamicTableModel(this.field.form, this.field.json);
}
}
isValid() {
let result = true;

View File

@@ -13,20 +13,7 @@
[class.is-active]="isFirst"
[attr.id]="tab.id">
<div *ngFor="let field of tab.fields">
<div [ngSwitch]="field.type">
<div *ngSwitchCase="'container'">
<container-widget [content]="field" (formValueChanged)="tabChanged($event);"></container-widget>
</div>
<div *ngSwitchCase="'group'">
<container-widget [content]="field" (formValueChanged)="tabChanged($event);"></container-widget>
</div>
<div *ngSwitchCase="'dynamic-table'">
<dynamic-table-widget [content]="field"></dynamic-table-widget>
</div>
<div *ngSwitchDefault>
<form-field [field]="field.field"></form-field>
</div>
</div>
<form-field [field]="field.field"></form-field>
</div>
</div>
</div>

View File

@@ -79,10 +79,15 @@ export class WidgetComponent implements AfterViewInit {
return false;
}
/** @deprecated use onFieldChanged instead */
checkVisibility(field: FormFieldModel) {
this.fieldChanged.emit(field);
}
onFieldChanged(field: FormFieldModel) {
this.fieldChanged.emit(field);
}
protected getHyperlinkUrl(field: FormFieldModel) {
let url = WidgetComponent.DEFAULT_HYPERLINK_URL;
if (field && field.hyperlinkUrl) {

View File

@@ -36,7 +36,8 @@ import {
FunctionalGroupWidget,
DynamicTableWidget,
AttachWidget,
UploadWidget
UploadWidget,
ContainerWidget
} from './../components/widgets/index';
@Injectable()
@@ -57,7 +58,9 @@ export class FormRenderingService {
'typeahead': DefaultTypeResolver.fromType(TypeaheadWidget),
'people': DefaultTypeResolver.fromType(PeopleWidget),
'functional-group': DefaultTypeResolver.fromType(FunctionalGroupWidget),
'dynamic-table': DefaultTypeResolver.fromType(DynamicTableWidget)
'dynamic-table': DefaultTypeResolver.fromType(DynamicTableWidget),
'container': DefaultTypeResolver.fromType(ContainerWidget),
'group': DefaultTypeResolver.fromType(ContainerWidget)
};
constructor() {