New start-form component to display process start forms

Refs #730

ng2-components/ng2-activiti-form/index.ts

@@ -19,6 +19,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CoreModule } from 'ng2-alfresco-core';
 
 import { ActivitiForm } from './src/components/activiti-form.component';
+import { ActivitiStartForm } from './src/components/activiti-start-form.component';
 import { FormService } from './src/services/form.service';
 import { EcmModelService } from './src/services/ecm-model.service';
 import { NodeService } from './src/services/node.service';
@@ -28,6 +29,7 @@ import { HttpModule } from '@angular/http';
 import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
 
 export * from './src/components/activiti-form.component';
+export * from './src/components/activiti-start-form.component';
 export * from './src/services/form.service';
 export * from './src/components/widgets/index';
 export * from  './src/services/ecm-model.service';
@@ -35,6 +37,7 @@ export * from  './src/services/node.service';
 
 export const ACTIVITI_FORM_DIRECTIVES: any[] = [
     ActivitiForm,
+    ActivitiStartForm,
     ...WIDGET_DIRECTIVES
 ];
 

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

@@ -145,7 +145,7 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
 
     debugMode: boolean = false;
 
-    constructor(private formService: FormService,
+    constructor(protected formService: FormService,
                 private visibilityService: WidgetVisibilityService,
                 private ecmModelService: EcmModelService,
                 private nodeService: NodeService) {

ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.html

@@ -0,0 +1,35 @@
+<div>
+    <div *ngIf="hasForm()">
+        <div class="mdl-card mdl-shadow--2dp activiti-form-container">
+            <div class="mdl-card__title">
+                <i class="material-icons">{{ form.isValid ? 'event_available' : 'event_busy' }}</i>
+                <h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
+            </div>
+            <div class="mdl-card__media">
+                <div *ngIf="form.hasTabs()">
+                    <tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
+                </div>
+
+                <div *ngIf="!form.hasTabs() && form.hasFields()">
+                    <container-widget *ngFor="let field of form.fields" [content]="field" (formValueChanged)="checkVisibility($event);"></container-widget>
+                </div>
+            </div>
+            <div *ngIf="form.hasOutcomes()" class="mdl-card__actions mdl-card--border">
+                <button *ngFor="let outcome of form.outcomes"
+                        alfresco-mdl-button
+                        [disabled]="!isOutcomeButtonEnabled(outcome)"
+                        [class.mdl-button--colored]="!outcome.isSystem"
+                        [class.activiti-form-hide-button]="!isOutcomeButtonVisible(outcome)"
+                        (click)="onOutcomeClicked(outcome, $event)">
+                    {{outcome.name}}
+                </button>
+            </div>
+            <div  *ngIf="showRefreshButton" class="mdl-card__menu" >
+                <button (click)="onRefreshClicked()"
+                        class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+                    <i class="material-icons">refresh</i>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,102 @@
+/*!
+ * @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, AfterViewChecked, OnChanges,
+    SimpleChanges,
+    Input
+} from '@angular/core';
+import { ActivitiForm } from './activiti-form.component';
+import { FormService } from './../services/form.service';
+import { WidgetVisibilityService }  from './../services/widget-visibility.service';
+
+/**
+ * @Input
+ * ActivitiForm can show 4 types of forms searching by 4 type of params:
+ *   1) Form attached to a task passing the {taskId}.
+ *
+ *   2) Form that are only defined with the {formId} (in this case you receive only the form definition and the form will not be
+ *   attached to any process, useful in case you want to use ActivitiForm as form designer), in this case you can pass also other 2
+ *   parameters:
+ *      - {saveOption} as parameter to tell what is the function to call on the save action.
+ *      - {data} to fill the form field with some data, the id of the form must to match the name of the field of the provided data object.
+ *
+ *   @Output
+ *   {formLoaded} EventEmitter - This event is fired when the form is loaded, it pass all the value in the form.
+ *   {formSaved} EventEmitter - This event is fired when the form is saved, it pass all the value in the form.
+ *   {formCompleted} EventEmitter - This event is fired when the form is completed, it pass all the value in the form.
+ *
+ * @returns {ActivitiForm} .
+ */
+@Component({
+    moduleId: module.id,
+    selector: 'activiti-start-form',
+    templateUrl: './activiti-start-form.component.html',
+    styleUrls: ['./activiti-form.component.css']
+})
+export class ActivitiStartForm extends ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
+
+    @Input()
+    processId: string;
+
+    constructor(formService: FormService,
+                visibilityService: WidgetVisibilityService) {
+        super(formService, visibilityService, null, null);
+    }
+
+    ngOnInit() {
+        this.loadForm();
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        console.log('changes', changes);
+        let processId = changes['processId'];
+        if (processId && processId.currentValue) {
+            this.getStartFormDefinition(processId.currentValue);
+            return;
+        }
+    }
+
+    loadForm() {
+        if (this.processId) {
+            this.getStartFormDefinition(this.formId);
+            return;
+        }
+    }
+
+    getStartFormDefinition(processId: string) {
+        this.formService
+            .getStartFormDefinition(processId)
+            .subscribe(
+                form => {
+                    this.formName = form.processDefinitionName;
+                    this.form = this.parseForm(form);
+                    this.formLoaded.emit(this.form);
+                },
+                (error) => {
+                    this.handleError(error);
+                }
+            );
+    }
+
+    saveTaskForm() {
+    }
+
+    completeTaskForm(outcome?: string) {
+    }
+}

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

@@ -206,6 +206,20 @@ export class FormService {
             .catch(this.handleError);
     }
 
+    /**
+     * Get start form definition for a given process
+     * @param processId Process definition ID
+     * @returns {Observable<any>}
+     */
+    getStartFormDefinition(processId: string): Observable<any> {
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.processApi.getProcessDefinitionStartForm({
+                processDefinitionId: processId
+            }))
+            .map(this.toJson)
+            .catch(this.handleError);
+    }
+
     getRestFieldValues(taskId: string, field: string): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
         return Observable.fromPromise(alfrescoApi.activiti.taskApi.getRestFieldValues(taskId, field));

ng2-components/ng2-activiti-processlist/index.ts

@@ -18,6 +18,7 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
+import { ActivitiFormModule } from 'ng2-activiti-form';
 import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 
 import { ActivitiProcessInstanceListComponent } from './src/components/activiti-processlist.component';
@@ -54,6 +55,7 @@ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [
     imports: [
         CoreModule,
         DataTableModule,
+        ActivitiFormModule,
         ActivitiTaskListModule
     ],
     declarations: [

ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html

@@ -15,6 +15,17 @@
             <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="processName" />
             <label class="mdl-textfield__label" for="processName">{{'START_PROCESS.DIALOG.LABEL.NAME'|translate}}</label>
         </div>
+        <activiti-start-form *ngIf="hasFormKey()" [processId]="processDefinition"
+                       (formSaved)='onFormSaved($event)'
+                       (formCompleted)='onFormCompleted($event)'
+                       (formLoaded)='onFormLoaded($event)'
+                       (onError)='onFormError($event)'
+                       (executeOutcome)='onExecuteOutcome($event)'
+                       #startForm>
+        </activiti-start-form>
+        <button type="button" class="mdl-button" *ngIf="!hasFormKey()" (click)="onFormCompleted()">
+            {{ 'TASK_DETAILS.BUTTON.COMPLETE' | translate }}
+        </button>
     </div>
     <div class="mdl-dialog__actions">
         <button type="button" (click)="startProcess()" class="mdl-button">{{'START_PROCESS.DIALOG.ACTION.START'|translate}}</button>

ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts

@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { ActivitiStartForm } from 'ng2-activiti-form';
 import { ActivitiProcessService } from './../services/activiti-process.service';
 
 declare let componentHandler: any;
@@ -27,7 +28,7 @@ declare let componentHandler: any;
     templateUrl: './activiti-start-process.component.html',
     styleUrls: ['./activiti-start-process.component.css']
 })
-export class ActivitiStartProcessButton implements OnInit {
+export class ActivitiStartProcessButton implements OnInit, OnChanges {
 
     @Input()
     appId: string;
@@ -35,6 +36,9 @@ export class ActivitiStartProcessButton implements OnInit {
     @ViewChild('dialog')
     dialog: any;
 
+    @ViewChild('startForm')
+    startForm: ActivitiStartForm;
+
     processDefinitions: any[] = [];
 
     name: string;
@@ -52,6 +56,10 @@ export class ActivitiStartProcessButton implements OnInit {
         this.load(this.appId);
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        console.log('changes', changes);
+    }
+
     public load(appId: string) {
         this.activitiProcess.getProcessDefinitions(this.appId).subscribe(
             (res: any[]) => {
@@ -87,4 +95,31 @@ export class ActivitiStartProcessButton implements OnInit {
             this.dialog.nativeElement.close();
         }
     }
+
+    hasFormKey() {
+        return true;
+    }
+
+    onFormSaved($event: Event) {
+        $event.preventDefault();
+        console.log('form saved');
+    }
+
+    onFormCompleted($event: Event) {
+        $event.preventDefault();
+        console.log('form saved');
+    }
+
+    onExecuteOutcome($event: Event) {
+        $event.preventDefault();
+        console.log('form outcome executed');
+    }
+
+    onFormLoaded($event: Event) {
+        console.log('form loaded', $event);
+    }
+
+    onFormError($event: Event) {
+        console.log('form error', $event);
+    }
 }