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

#440 simple form renderer draft

Browse Source
This commit is contained in:
Denys Vuika
2016-07-19 16:56:48 +01:00
parent f4f80a1c0d
commit 71de013a4e
16 changed files with 557 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,23 @@
<div *ngIf="hasForm()" style="padding: 10px;">
<div *ngIf="form.hasTabs()">
<tabs-widget [tabs]="form.tabs"></tabs-widget>
</div>
<div *ngIf="!form.hasTabs() && form.hasFields()">
<container-widget [content]="form.fields[0]"></container-widget>
</div>
</div>
<!--
<div style="padding: 10px">
<h2>Task form content</h2>
<h3>Task</h3>
<pre>{{debugTask | json}}</pre>
<h3>Form</h3>
<pre>{{debugForm | json}}</pre>
<pre *ngIf="form">{{form.json | json}}</pre>
<h3>Task</h3>
<pre *ngIf="task">{{task | json}}</pre>
</div>
-->

47
ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts
View File

@@ -15,38 +15,63 @@
* limitations under the License.
*/
import { Component, OnInit, Injectable } from '@angular/core';
import {
Component,
OnInit,
AfterViewChecked
} from '@angular/core';
import { FormService } from './../services/form.service';
import { WIDGET_DIRECTIVES } from './widgets/index';
import { FormModel } from './widgets/widget.model';
declare let __moduleName: string;
declare var componentHandler;
@Component({
selector: 'child-component',
template: 'Hello {{name}}'
})
class ChildComponent {
name: string;
}
@Component({
moduleId: __moduleName,
selector: 'activiti-form',
templateUrl: './activiti-form.component.html',
directives: [WIDGET_DIRECTIVES],
providers: [
FormService
]
})
export class ActivitiForm implements OnInit {
export class ActivitiForm implements OnInit, AfterViewChecked {
debugTask: any;
debugForm: any;
constructor(private formService: FormService) {
task: any;
form: FormModel;
hasForm(): boolean {
return this.form ? true : false;
}
constructor(private formService: FormService) {}
ngOnInit() {
this.formService.getTask('1').subscribe(task => {
console.log(task);
this.debugTask = task;
// console.log(task);
this.task = task;
this.formService.getTaskForm('1').subscribe(form => {
console.log(form);
this.debugForm = form;
})
// console.log(form);
this.form = new FormModel(form);
});
});
}
ngAfterViewChecked() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
}

4
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.html Normal file
View File

@@ -0,0 +1,4 @@
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="field.id">
<input type="checkbox" [attr.id]="field.id" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">{{field.name}}</span>
</label>

45
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts Normal file
View File

@@ -0,0 +1,45 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input, AfterViewInit } from '@angular/core';
import { FormFieldModel } from './../widget.model';
declare let __moduleName: string;
declare var componentHandler;
@Component({
moduleId: __moduleName,
selector: 'checkbox-widget',
templateUrl: './checkbox.widget.html'
})
export class CheckboxWidget implements AfterViewInit {
@Input()
field: FormFieldModel;
hasField() {
return this.field ? true : false;
}
ngAfterViewInit() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
}

18
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.html Normal file
View File

@@ -0,0 +1,18 @@
<div class="mdl-grid">
<div *ngFor="let field of content.fields" class="mdl-cell mdl-cell--{{field.metadata.size}}-col">
<div [ngSwitch]="field.type">
<div *ngSwitchCase="'integer'">
<number-widget [field]="field"></number-widget>
</div>
<div *ngSwitchCase="'text'">
<text-widget [field]="field"></text-widget>
</div>
<div *ngSwitchCase="'boolean'">
<checkbox-widget [field]="field"></checkbox-widget>
</div>
<div *ngSwitchDefault>
<span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
</div>
</div>
</div>
</div>

45
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.ts Normal file
View File

@@ -0,0 +1,45 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input, AfterViewInit } from '@angular/core';
import { TextWidget } from './../text/text.widget';
import { NumberWidget } from './../number/number.widget';
import { ContainerModel } from './../widget.model';
import { CheckboxWidget } from './../checkbox/checkbox.widget';
declare let __moduleName: string;
declare var componentHandler;
@Component({
moduleId: __moduleName,
selector: 'container-widget',
templateUrl: './container.widget.html',
directives: [TextWidget, NumberWidget, CheckboxWidget]
})
export class ContainerWidget implements AfterViewInit {
@Input()
content: ContainerModel;
ngAfterViewInit() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
}

38
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/index.ts Normal file
View File

@@ -0,0 +1,38 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { TabsWidget } from './tabs/tabs.widget';
import { ContainerWidget } from './container/container.widget';
import { TextWidget } from './text/text.widget';
import { NumberWidget } from './number/number.widget';
import { CheckboxWidget } from './checkbox/checkbox.widget';
export * from './widget.model';
export * from './tabs/tabs.widget';
export * from './container/container.widget';
export * from './text/text.widget';
export * from './number/number.widget';
export * from './checkbox/checkbox.widget';
export const WIDGET_DIRECTIVES: [any] = [
TabsWidget,
ContainerWidget,
TextWidget,
NumberWidget,
CheckboxWidget
];

3
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.css Normal file
View File

@@ -0,0 +1,3 @@
:host .number-widget {
width: 100%;
}

5
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.html Normal file
View File

@@ -0,0 +1,5 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" [attr.id]="field.id">
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>

46
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.ts Normal file
View File

@@ -0,0 +1,46 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input, AfterViewInit } from '@angular/core';
import { FormFieldModel } from './../widget.model';
declare let __moduleName: string;
declare var componentHandler;
@Component({
moduleId: __moduleName,
selector: 'number-widget',
templateUrl: './number.widget.html',
styleUrls: ['./number.widget.css']
})
export class NumberWidget implements AfterViewInit {
@Input()
field: FormFieldModel;
hasField() {
return this.field ? true : false;
}
ngAfterViewInit() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
}

20
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.html Normal file
View File

@@ -0,0 +1,20 @@
<div *ngIf="hasTabs()">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a *ngFor="let tab of tabs; let isFirst = first"
[href]="'#' + tab.id"
class="mdl-tabs__tab" [class.is-active]="isFirst">
{{tab.title}}
</a>
</div>
<div *ngFor="let tab of tabs; let isFirst = first"
class="mdl-tabs__panel"
[class.is-active]="isFirst"
[attr.id]="tab.id">
<container-widget
*ngFor="let field of tab.fields"
[content]="field">
</container-widget>
</div>
</div>
</div>

47
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.ts Normal file
View File

@@ -0,0 +1,47 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input, AfterViewInit } from '@angular/core';
import { TabModel } from './../widget.model';
import { ContainerWidget } from './../container/container.widget';
declare let __moduleName: string;
declare var componentHandler;
@Component({
moduleId: __moduleName,
selector: 'tabs-widget',
templateUrl: './tabs.widget.html',
directives: [ContainerWidget]
})
export class TabsWidget implements AfterViewInit {
@Input()
tabs: TabModel[] = [];
hasTabs() {
return this.tabs && this.tabs.length > 0;
}
ngAfterViewInit() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
}

3
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.css Normal file
View File

@@ -0,0 +1,3 @@
:host .text-widget {
width: 100%;
}

4
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.html Normal file
View File

@@ -0,0 +1,4 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget">
<input class="mdl-textfield__input" type="text" [attr.id]="field.id">
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
</div>

46
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.ts Normal file
View File

@@ -0,0 +1,46 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input, AfterViewInit } from '@angular/core';
import { FormFieldModel } from './../widget.model';
declare let __moduleName: string;
declare var componentHandler;
@Component({
moduleId: __moduleName,
selector: 'text-widget',
templateUrl: './text.widget.html',
styleUrls: ['./text.widget.css']
})
export class TextWidget implements AfterViewInit {
@Input()
field: FormFieldModel;
hasField() {
return this.field ? true : false;
}
ngAfterViewInit() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
}

179
ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts Normal file
View File

@@ -0,0 +1,179 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export interface FormFieldMetadata {
[key: string]: any;
}
export class FormWidgetModel {
private _form: FormModel;
private _json: any;
get form(): FormModel {
return this._form;
}
get json(): any {
return this._json;
}
constructor(form: FormModel, json: any) {
this._form = form;
this._json = json;
}
}
export class FormFieldModel extends FormWidgetModel {
id: string;
name: string;
type: string;
tab: string;
colspan: number = 1;
metadata: FormFieldMetadata = {};
constructor(form: FormModel, json?: any) {
super(form, json);
if (json) {
this.id = json.id;
this.name = json.name;
this.type = json.type;
this.tab = json.tab;
this.colspan = <number> json.colspan;
}
}
}
export class ContainerModel extends FormWidgetModel {
fieldType: string;
id: string;
name: string;
type: string;
tab: string;
numberOfColumns: number = 1;
fields: FormFieldModel[] = [];
constructor(form: FormModel, json?: any) {
super(form, json);
if (json) {
this.fieldType = json.fieldType;
this.id = json.id;
this.name = json.name;
this.type = json.type;
this.tab = json.tab;
this.numberOfColumns = <number> json.numberOfColumns;
let columnSize: number = 12;
if (this.numberOfColumns > 1) {
columnSize = 12 / this.numberOfColumns;
}
let fields = [];
Object.keys(json.fields).map(key => {
fields = fields.concat(json.fields[key] || []);
});
// this.fields = fields.map(f => new FormFieldModel(form, f));
this.fields = fields.map(f => {
let field = new FormFieldModel(form, f);
field.metadata['size'] = columnSize;
return field;
});
}
}
}
export class TabModel extends FormWidgetModel {
id: string;
title: string;
visibilityCondition: any;
fields: ContainerModel[] = [];
hasContent(): boolean {
return this.fields && this.fields.length > 0;
}
constructor(form: FormModel, json?: any) {
super(form, json);
if (json) {
this.id = json.id;
this.title = json.title;
this.visibilityCondition = json.visibilityCondition;
}
}
}
export interface WidgetModelCache<T extends FormWidgetModel> {
[key: string]: T;
}
export class FormModel {
tabs: TabModel[] = [];
fields: ContainerModel[] = [];
private _json: any;
get json() {
return this._json;
}
hasTabs(): boolean {
return this.tabs && this.tabs.length > 0;
}
hasFields(): boolean {
return this.fields && this.fields.length > 0;
}
constructor(json?: any) {
if (json) {
this._json = json;
let tabCache: WidgetModelCache<TabModel> = {};
// this.tabs = (json.tabs || []).map(t => new TabModel(this, t));
this.tabs = (json.tabs || []).map(t => {
let model = new TabModel(this, t);
tabCache[model.id] = model;
return model;
});
this.fields = (json.fields || []).map(f => new ContainerModel(this, f));
for (let i = 0; i < this.fields.length; i++) {
let field = this.fields[i];
if (field.tab) {
let tab = tabCache[field.tab];
if (tab) {
// tab.content = new ContainerModel(this, field.json);
// tab.fields.push(field);
tab.fields.push(new ContainerModel(this, field.json));
}
}
}
}
}
}