mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
#967 dynamic container resolution
This commit is contained in:
committed by
Mario Romano
parent
3092cfddaa
commit
084d962230
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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);
|
||||
}));
|
||||
|
||||
});
|
||||
|
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -43,6 +43,7 @@ export class FormModel {
|
||||
|
||||
readOnly: boolean = false;
|
||||
tabs: TabModel[] = [];
|
||||
/** Stores root containers */
|
||||
fields: FormWidgetModel[] = [];
|
||||
outcomes: FormOutcomeModel[] = [];
|
||||
|
||||
|
@@ -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;
|
||||
|
||||
|
@@ -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>
|
||||
|
@@ -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) {
|
||||
|
@@ -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() {
|
||||
|
Reference in New Issue
Block a user