[ADF-850] example on using in-memory form data (#2037)

* stub for custom form service

* demo polishing

- use in-memory formService only for the corresponding demo page 'Form'
- support for mocking rest field values
- demo of the typeahead data mocked

* load data from app config

* fix lint errors

* separate Form and Form List demos

demo-shell-ng2/app.config-dev.json

@@ -3,5 +3,21 @@
     "bpmHost": "http://{hostname}:{port}/bpm",
     "application": {
         "name": "Alfresco"
+    },
+    "activiti": {
+        "rest": {
+            "fields": [
+                {
+                    "processId": "0",
+                    "taskId": "7501",
+                    "fieldId": "label10",
+                    "values": [
+                        { "id": "f1", "name": "Field 1" },
+                        { "id": "f2", "name": "Field 2" },
+                        { "id": "f3", "name": "Field 3" }
+                    ]
+                }
+            ]
+        }
     }
 }

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

@@ -21,6 +21,7 @@
                 <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="form" href="" routerLink="/form-list">Form List</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

@@ -44,6 +44,8 @@ import { ChartsModule } from 'ng2-charts';
 import { CreateFolderDialog } from './dialogs/create-folder.dialog';
 import { DebugAppConfigService } from './services/debug-app-config.service';
 
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
+
 import {
     HomeComponent,
     DataTableDemoComponent,
@@ -115,7 +117,8 @@ if (process.env.ENV === 'production') {
         FormNodeViewer,
         CreateFolderDialog,
         SettingsComponent,
-        FormDemoComponent
+        FormDemoComponent,
+        FormListDemoComponent
     ],
     providers: [
         { provide: AppConfigService, useClass: DebugAppConfigService }

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

@@ -39,6 +39,7 @@ import {
 } from './components/index';
 
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginDemoComponent },
@@ -132,7 +133,8 @@ export const appRoutes: Routes = [
     },
     { path: 'about', component: AboutComponent },
     { path: 'settings', component: SettingsComponent },
-    { path: 'form', component: FormDemoComponent }
+    { path: 'form', component: FormDemoComponent },
+    { path: 'form-list', component: FormListDemoComponent }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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

@@ -1,8 +1,3 @@
 .form-container {
     padding: 10px;
 }
-
-.store-form-container{
-    width: 80%;
-    height: 80%;
-}

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

@@ -1,9 +1,4 @@
-<adf-form-list [forms]="formList"
+<div class="form-container">
-    (row-dblclick)="onRowDblClick($event)">
-</adf-form-list>
-<div class="form-container" *ngIf="!isEmptyForm()">
     <activiti-form [form]="form" [data]="restoredData">
     </activiti-form>
 </div>
-<button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
-<button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>

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

@@ -15,34 +15,25 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { FormModel, FormService } from 'ng2-activiti-form';
+import { InMemoryFormService } from '../../services/in-memory-form.service';
 import { DemoForm } from './demo-form';
-import { ActivitiForm } from 'ng2-activiti-form';
-
-declare var componentHandler;
 
 @Component({
     selector: 'form-demo',
     templateUrl: 'form-demo.component.html',
-    styleUrls: [
+    styleUrls: [ 'form-demo.component.css' ],
-        'form-demo.component.css'
+    providers: [
+        { provide: FormService, useClass: InMemoryFormService }
     ]
 })
 export class FormDemoComponent implements OnInit {
 
-    @ViewChild(ActivitiForm)
-    activitiForm: ActivitiForm;
-
-    formList: any [] = [];
-
     form: FormModel;
-    formId: string;
 
-    storedData: any = {};
+    constructor(@Inject(FormService) private formService: InMemoryFormService) {
-    restoredData: any = {};
+        // Prevent default outcome actions
-
-    constructor(private formService: FormService) {
         formService.executeOutcome.subscribe(e => {
             e.preventDefault();
             console.log(e.outcome);
@@ -50,56 +41,8 @@ export class FormDemoComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.formList.push({ name: 'Demo Form Definition', lastUpdatedByFullName: 'Demo Name User', lastUpdated: '2017-06-23T13:20:30.754+0000', isFake: true });
+        let formDefinitionJSON: any = DemoForm.getDefinition();
-    }
+        this.form = this.formService.parseForm(formDefinitionJSON);
-
-    ngAfterViewInit() {
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-    }
-
-    onRowDblClick(event: CustomEvent) {
-        let rowForm = event.detail.value.obj;
-
-        if (rowForm.isFake) {
-            let formDefinitionJSON: any = DemoForm.getDefinition();
-            let form = this.formService.parseForm(formDefinitionJSON);
-            this.form = form;
-        } else {
-            this.formService.getFormDefinitionById(rowForm.id).subscribe((definition) => {
-                let form = this.formService.parseForm(definition);
-                this.form = form;
-            });
-        }
-        console.log(rowForm);
-    }
-
-    isEmptyForm() {
-        return this.form === null || this.form === undefined;
-    }
-
-    store() {
-        this.clone(this.activitiForm.form.values, this.storedData);
-        console.log('DATA SAVED');
-        console.log(this.storedData);
-        console.log('DATA SAVED');
-        this.restoredData = null;
-    }
-
-    clone(objToCopyFrom, objToCopyTo) {
-        for (let attribute in objToCopyFrom) {
-            if (objToCopyFrom.hasOwnProperty(attribute)) {
-                objToCopyTo[attribute] = objToCopyFrom[attribute];
-            }
-        }
-        return objToCopyTo;
-    }
-
-    restore() {
-        this.restoredData = this.storedData;
-        this.storedData = {};
     }
 
 }

demo-shell-ng2/app/components/form/form-list-demo.component.ts

@@ -0,0 +1,112 @@
+/*!
+ * @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, ViewChild } from '@angular/core';
+import { FormModel, FormService } from 'ng2-activiti-form';
+import { ActivitiForm } from 'ng2-activiti-form';
+
+declare var componentHandler;
+
+@Component({
+    selector: 'form-list-demo',
+    template: `
+        <adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
+        </adf-form-list>
+        <div class="form-container" *ngIf="!isEmptyForm()">
+            <activiti-form [form]="form" [data]="restoredData">
+            </activiti-form>
+        </div>
+        <button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
+        <button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
+    `,
+    styles: [`
+        .form-container {
+            padding: 10px;
+        }
+
+        .store-form-container{
+            width: 80%;
+            height: 80%;
+        }
+    `]
+})
+export class FormListDemoComponent {
+
+     @ViewChild(ActivitiForm)
+    activitiForm: ActivitiForm;
+
+    formList: any [] = [];
+
+    form: FormModel;
+    formId: string;
+
+    storedData: any = {};
+    restoredData: any = {};
+
+    constructor(private formService: FormService) {
+        // Prevent default outcome actions
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            console.log(e.outcome);
+        });
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    onRowDblClick(event: CustomEvent) {
+        let rowForm = event.detail.value.obj;
+
+        this.formService.getFormDefinitionById(rowForm.id).subscribe((definition) => {
+            let form = this.formService.parseForm(definition);
+            this.form = form;
+        });
+
+        console.log(rowForm);
+    }
+
+    isEmptyForm() {
+        return this.form === null || this.form === undefined;
+    }
+
+    store() {
+        this.clone(this.activitiForm.form.values, this.storedData);
+        console.log('DATA SAVED');
+        console.log(this.storedData);
+        console.log('DATA SAVED');
+        this.restoredData = null;
+    }
+
+    clone(objToCopyFrom, objToCopyTo) {
+        for (let attribute in objToCopyFrom) {
+            if (objToCopyFrom.hasOwnProperty(attribute)) {
+                objToCopyTo[attribute] = objToCopyFrom[attribute];
+            }
+        }
+        return objToCopyTo;
+    }
+
+    restore() {
+        this.restoredData = this.storedData;
+        this.storedData = {};
+    }
+
+}

demo-shell-ng2/app/services/in-memory-form.service.ts

@@ -0,0 +1,83 @@
+/*!
+ * @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 { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
+import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
+import { FormService, EcmModelService, FormFieldOption } from 'ng2-activiti-form';
+import { AppConfigService } from 'ng2-alfresco-core';
+
+interface ActivitiData {
+    rest: {
+        fields: Array<{
+            processId?: string,
+            taskId?: string,
+            fieldId?: string,
+            values?: Array<{
+                id: string,
+                name: string
+            }>
+        }>
+    };
+}
+
+@Injectable()
+export class InMemoryFormService extends FormService {
+
+    private data: ActivitiData;
+
+    constructor(appConfig: AppConfigService,
+                ecmModelService: EcmModelService,
+                apiService: AlfrescoApiService,
+                logService: LogService) {
+        super(ecmModelService, apiService, logService);
+        this.data = appConfig.get<ActivitiData>('activiti');
+    }
+
+    /** @override */
+    getRestFieldValues(taskId: string, fieldId: string): Observable<FormFieldOption[]> {
+        // Uncomment this to use original call
+        // return super.getRestFieldValues(taskId, fieldId);
+
+        console.log(`getRestFieldValues: ${taskId} => ${fieldId}`);
+        return new Observable<FormFieldOption[]>(observer => {
+            let field = this.data.rest.fields.find(
+                f => f.taskId === taskId && f.fieldId === fieldId
+            );
+            let values: FormFieldOption[] = field.values || [];
+            console.log(values);
+            observer.next(values);
+        });
+    }
+
+    /** @override */
+    getRestFieldValuesByProcessId(processDefinitionId: string, fieldId: string): Observable<any> {
+        // Uncomment this to use original call
+        // return super.getRestFieldValuesByProcessId(processDefinitionId, fieldId);
+
+        console.log(`getRestFieldValuesByProcessId: ${processDefinitionId} => ${fieldId}`);
+        return new Observable<FormFieldOption[]>(observer => {
+            let field = this.data.rest.fields.find(
+                f => f.processId === processDefinitionId && f.fieldId === fieldId
+            );
+            let values: FormFieldOption[] = field.values || [];
+            console.log(values);
+            observer.next(values);
+        });
+    }
+
+}

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

@@ -100,15 +100,27 @@ export class FormService {
             stencilSet: 0
         };
 
-        return Observable.fromPromise(this.apiService.getInstance().activiti.modelsApi.createModel(dataModel));
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.modelsApi.createModel(dataModel)
+        );
+    }
+
+    saveForm(formId: string, formModel: FormDefinitionModel): Observable<any> {
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.editorApi.saveForm(formId, formModel)
+        );
     }
 
     /**
+     * @deprecated in 1.7.0, use saveForm API instead
      * Add Fileds to A form
      * @returns {Observable<any>}
      */
     addFieldsToAForm(formId: string, formModel: FormDefinitionModel): Observable<any> {
-        return Observable.fromPromise(this.apiService.getInstance().activiti.editorApi.saveForm(formId, formModel));
+        console.log('addFieldsToAForm is deprecated in 1.7.0, use saveForm API instead');
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.editorApi.saveForm(formId, formModel)
+        );
     }
 
     /**
@@ -121,12 +133,12 @@ export class FormService {
         };
 
         return Observable.fromPromise(
-            this.apiService.getInstance().activiti.modelsApi.getModels(opts))
+            this.apiService.getInstance().activiti.modelsApi.getModels(opts)
-            .map(function (forms: any) {
+        )
-                return forms.data.find(formdata => formdata.name === name);
+        .map(function (forms: any) {
-            })
+            return forms.data.find(formdata => formdata.name === name);
-            .catch(err => this.handleError(err)
+        })
-            );
+        .catch(err => this.handleError(err));
     }
 
     /**
@@ -139,10 +151,8 @@ export class FormService {
         };
 
         return Observable.fromPromise(
-            this.apiService.getInstance().activiti.modelsApi.getModels(opts))
+            this.apiService.getInstance().activiti.modelsApi.getModels(opts)
-            .map((response: any) => <any[]> response.data || [])
+        );
-            .catch(err => this.handleError(err));
-
     }
 
     /**