inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

#967 dynamic container resolution

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

13
ng2-components/ng2-activiti-form/src/components/activiti-form.component.html
View File

@@ -15,23 +15,10 @@
<div *ngIf="!form.hasTabs() && form.hasFields()"> <div *ngIf="!form.hasTabs() && form.hasFields()">
<div *ngFor="let field of form.fields"> <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> <form-field [field]="field.field"></form-field>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div *ngIf="form.hasOutcomes()" class="mdl-card__actions mdl-card--border"> <div *ngIf="form.hasOutcomes()" class="mdl-card__actions mdl-card--border">
<button *ngFor="let outcome of form.outcomes" <button *ngFor="let outcome of form.outcomes"
alfresco-mdl-button alfresco-mdl-button

18
ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.html
View File

@@ -12,23 +12,7 @@
<div *ngIf="!form.hasTabs() && form.hasFields()"> <div *ngIf="!form.hasTabs() && form.hasFields()">
<div *ngFor="let field of form.fields"> <div *ngFor="let field of form.fields">
<div [ngSwitch]="field.type"> <form-field [field]="field.field"></form-field>
<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>
</div> </div>
</div> </div>
</div> </div>

12
ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
View File

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

22
ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts
View File

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

1
ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts
View File

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

11
ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts
View File

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

13
ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html
View File

@@ -13,21 +13,8 @@
[class.is-active]="isFirst" [class.is-active]="isFirst"
[attr.id]="tab.id"> [attr.id]="tab.id">
<div *ngFor="let field of tab.fields"> <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> <form-field [field]="field.field"></form-field>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>

5
ng2-components/ng2-activiti-form/src/components/widgets/widget.component.ts
View File

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

7
ng2-components/ng2-activiti-form/src/services/form-rendering.service.ts
View File

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