support binding [form] data directly (#1996)

- ability to bind [form] data directly inside `<activiti-form>` component
- ability to parse forms with FormService
- demo of the custom form in demo shell

demo-shell-ng2/app/app.component.html

@@ -20,6 +20,7 @@
                 <a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a>
                 <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
                 <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
+                <a class="mdl-navigation__link" data-automation-id="form" href="" routerLink="/form">Form</a>
                 <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
                 <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
             </nav>

demo-shell-ng2/app/app.module.ts

@@ -60,7 +60,8 @@ import {
     AboutComponent,
     FilesComponent,
     FormNodeViewer,
-    SettingsComponent
+    SettingsComponent,
+    FormDemoComponent
 } from './components/index';
 
 let appConfigFile = 'app.config-dev.json';
@@ -113,7 +114,8 @@ if (process.env.ENV === 'production') {
         FilesComponent,
         FormNodeViewer,
         CreateFolderDialog,
-        SettingsComponent
+        SettingsComponent,
+        FormDemoComponent
     ],
     providers: [
         { provide: AppConfigService, useClass: DebugAppConfigService }

demo-shell-ng2/app/app.routes.ts

@@ -34,7 +34,8 @@ import {
     AboutComponent,
     FormViewer,
     FormNodeViewer,
-    SettingsComponent
+    SettingsComponent,
+    FormDemoComponent
 } from './components/index';
 
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
@@ -130,7 +131,8 @@ export const appRoutes: Routes = [
         canActivate: [AuthGuardEcm]
     },
     { path: 'about', component: AboutComponent },
-    { path: 'settings', component: SettingsComponent }
+    { path: 'settings', component: SettingsComponent },
+    { path: 'form', component: FormDemoComponent }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

demo-shell-ng2/app/components/form/form-demo.component.css

@@ -0,0 +1,3 @@
+.form-container {
+    padding: 10px;
+}

demo-shell-ng2/app/components/form/form-demo.component.html

@@ -0,0 +1,4 @@
+<div class="form-container">
+    <activiti-form [form]="form">
+    </activiti-form>
+</div>

demo-shell-ng2/app/components/form/form-demo.component.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, OnInit } from '@angular/core';
+import { FormModel, FormService } from 'ng2-activiti-form';
+import { DemoForm } from './demo-form';
+
+@Component({
+    selector: 'form-demo',
+    templateUrl: 'form-demo.component.html',
+    styleUrls: [
+        'form-demo.component.css'
+    ]
+})
+export class FormDemoComponent implements OnInit {
+
+    form: FormModel;
+
+    constructor(private formService: FormService) {
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            console.log(e.outcome);
+        });
+    }
+
+    ngOnInit() {
+        let formDefinitionJSON: any = DemoForm.getDefinition();
+        let form = this.formService.parseForm(formDefinitionJSON);
+        console.log(form);
+        this.form = form;
+    }
+}

demo-shell-ng2/app/components/index.ts

@@ -31,3 +31,4 @@ export { FilesComponent } from './files/files.component';
 export { FormNodeViewer } from './activiti/form-node-viewer.component';
 export { ActivitiAppsView } from './activiti/apps.view';
 export { SettingsComponent } from './settings/settings.component';
+export { FormDemoComponent } from './form/form-demo.component';

ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts

@@ -40,6 +40,9 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
     static START_PROCESS_OUTCOME_ID: string = '$startProcess';
     static CUSTOM_OUTCOME_ID: string = '$custom';
 
+    @Input()
+    form: FormModel;
+
     @Input()
     taskId: string;
 
@@ -103,8 +106,6 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
     @Output()
     onError: EventEmitter<any> = new EventEmitter<any>();
 
-    form: FormModel;
-
     debugMode: boolean = false;
 
     constructor(protected formService: FormService,

ng2-components/ng2-activiti-form/src/services/form.service.ts

@@ -18,7 +18,7 @@
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs/Rx';
 import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
-import { FormValues, FormOutcomeEvent } from './../components/widgets/core/index';
+import { FormModel, FormValues, FormOutcomeEvent, FormOutcomeModel } from './../components/widgets/core/index';
 import { FormDefinitionModel } from '../models/form-definition.model';
 import { EcmModelService } from './ecm-model.service';
 import { GroupModel } from './../components/widgets/core/group.model';
@@ -47,6 +47,23 @@ export class FormService {
                 private logService: LogService) {
     }
 
+    parseForm(json: any, data?: FormValues, readOnly: boolean = false): FormModel {
+        if (json) {
+            let form = new FormModel(json, data, readOnly, this);
+            if (!json.fields) {
+                form.outcomes = [
+                    new FormOutcomeModel(form, {
+                        id: '$custom',
+                        name: FormOutcomeModel.SAVE_ACTION,
+                        isSystem: true
+                    })
+                ];
+            }
+            return form;
+        }
+        return null;
+    }
+
     /**
      * Create a Form with a fields for each metadata properties
      * @returns {Observable<any>}