From 71de013a4ef3ec181897940a89167c4b3fc1d861 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 19 Jul 2016 16:56:48 +0100 Subject: [PATCH] #440 simple form renderer draft --- .../components/activiti-form.component.html | 22 ++- .../src/components/activiti-form.component.ts | 47 +++-- .../widgets/checkbox/checkbox.widget.html | 4 + .../widgets/checkbox/checkbox.widget.ts | 45 +++++ .../widgets/container/container.widget.html | 18 ++ .../widgets/container/container.widget.ts | 45 +++++ .../src/components/widgets/index.ts | 38 ++++ .../widgets/number/number.widget.css | 3 + .../widgets/number/number.widget.html | 5 + .../widgets/number/number.widget.ts | 46 +++++ .../components/widgets/tabs/tabs.widget.html | 20 ++ .../components/widgets/tabs/tabs.widget.ts | 47 +++++ .../components/widgets/text/text.widget.css | 3 + .../components/widgets/text/text.widget.html | 4 + .../components/widgets/text/text.widget.ts | 46 +++++ .../src/components/widgets/widget.model.ts | 179 ++++++++++++++++++ 16 files changed, 557 insertions(+), 15 deletions(-) create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.html create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.html create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.ts create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/index.ts create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.css create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.html create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.ts create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.html create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.ts create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.css create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.html create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.ts create mode 100644 ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html index 31c08f2f64..2ebf12ebda 100644 --- a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html @@ -1,9 +1,23 @@ +
+
+ +
+
+ +
+ +
+ + diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts index 1bcacd3d14..b58555e359 100644 --- a/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts @@ -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(); + } + } + } diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.html b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.html new file mode 100644 index 0000000000..28bb149192 --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.html @@ -0,0 +1,4 @@ + diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts new file mode 100644 index 0000000000..3ec6393727 --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts @@ -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(); + } + } + +} diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.html b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.html new file mode 100644 index 0000000000..4f57fbcea2 --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.html @@ -0,0 +1,18 @@ +
+
+
+
+ +
+
+ +
+
+ +
+
+ UNKNOWN WIDGET TYPE: {{field.type}} +
+
+
+
diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.ts new file mode 100644 index 0000000000..bdb98a3e65 --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.ts @@ -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(); + } + } + +} diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/index.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/index.ts new file mode 100644 index 0000000000..7ac7731dba --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/index.ts @@ -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 +]; diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.css b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.css new file mode 100644 index 0000000000..eef6cf2a3f --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.css @@ -0,0 +1,3 @@ +:host .number-widget { + width: 100%; +} diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.html b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.html new file mode 100644 index 0000000000..02f659b0ef --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.html @@ -0,0 +1,5 @@ +
+ + + Input is not a number! +
diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.ts new file mode 100644 index 0000000000..38295c1425 --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.ts @@ -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(); + } + } + +} diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.html b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.html new file mode 100644 index 0000000000..bf3eb019dd --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.html @@ -0,0 +1,20 @@ +
+
+
+ + {{tab.title}} + +
+
+ + +
+
+
diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.ts new file mode 100644 index 0000000000..7422ae37b1 --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/tabs/tabs.widget.ts @@ -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(); + } + } + +} diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.css b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.css new file mode 100644 index 0000000000..8fe1b900e1 --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.css @@ -0,0 +1,3 @@ +:host .text-widget { + width: 100%; +} diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.html b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.html new file mode 100644 index 0000000000..a0f708bc7b --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.ts new file mode 100644 index 0000000000..d0d598207d --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.ts @@ -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(); + } + } + +} diff --git a/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts new file mode 100644 index 0000000000..2f57b500fc --- /dev/null +++ b/ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts @@ -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 = 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 = 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 { + [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 = {}; + + // 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)); + } + } + } + } + } +}