#502 #535 #538

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

@@ -19,7 +19,9 @@ import {
     Component,
     OnInit, AfterViewChecked, OnChanges,
     SimpleChange,
-    Input
+    Input,
+    Output,
+    EventEmitter
 } from '@angular/core';
 import { MATERIAL_DESIGN_DIRECTIVES } from 'ng2-alfresco-core';
 
@@ -32,6 +34,32 @@ import { ContainerWidget } from './widgets/container/container.widget';
 declare let __moduleName: string;
 declare var componentHandler;
 
+/**
+ * @Input
+ * ActivitiForm can show 3 forms searching by 3 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, usefull 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.
+ *   3) Form that are only defined with the {formName} (in this case you receive only the form definition and the form will not be
+ *   attached to any process, usefull 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.
+ *
+ *   {showTitle} boolean - to hide the title of the form pass false, default true;
+ *
+ *   {showRefreshButton} boolean - to hide the refresh button of the form pass false, default true;
+ *
+ *   @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: __moduleName,
     selector: 'activiti-form',
@@ -45,19 +73,57 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
     @Input()
     taskId: string;
 
+    @Input()
+    formId: string;
+
+    @Input()
+    formName: string;
+
+    @Input()
+    data: any;
+
+    @Input()
+    showTitle: boolean = true;
+
+    @Input()
+    readOnly: boolean = false;
+
+    @Input()
+    showRefreshButton: boolean = true;
+
+    @Output()
+    formsaved = new EventEmitter();
+
+    @Output()
+    formCompleted = new EventEmitter();
+
+    @Output()
+    formLoaded = new EventEmitter();
+
     form: FormModel;
+
     debugMode: boolean = false;
 
     hasForm(): boolean {
         return this.form ? true : false;
     }
 
+    isTitleEnabled(): boolean {
+        return this.form.taskName && this.showTitle;
+    }
+
     constructor(private formService: FormService) {}
 
     ngOnInit() {
         if (this.taskId) {
             this.loadForm(this.taskId);
         }
+        if (this.formId) {
+            this.getFormDefinitionById();
+        }
+        if (this.formName) {
+            this.getFormDefinitionByName();
+        }
     }
 
     ngAfterViewChecked() {
@@ -72,11 +138,21 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
         if (taskId && taskId.currentValue) {
             this.loadForm(taskId.currentValue);
         }
+
+        let formId = changes['formId'];
+        if (formId && formId.currentValue) {
+            this.getFormDefinitionById();
+        }
+
+        let formName = changes['formName'];
+        if (formName && formName.currentValue) {
+            this.getFormDefinitionByName();
+        }
     }
 
 
     onOutcomeClicked(outcome: FormOutcomeModel, event?: Event) {
-        if (outcome) {
+        if (!this.readOnly && outcome) {
             if (outcome.isSystem) {
                 if (outcome.id === '$save') {
                     return this.saveTaskForm();
@@ -86,9 +162,13 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
                     return this.completeTaskForm();
                 }
 
+                if (outcome.id === '$custom') {
+                    this.formsaved.emit(this.form.values);
+                }
             } else {
                 // Note: Activiti is using NAME field rather than ID for outcomes
                 if (outcome.name) {
+                    this.formsaved.emit(this.form.values);
                     return this.completeTaskForm(outcome.name);
                 }
             }
@@ -99,13 +179,54 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
         if (this.taskId) {
             this.loadForm(this.taskId);
         }
+        if (this.formId) {
+            this.getFormDefinitionById();
+        }
+        if (this.formName) {
+            this.getFormDefinitionByName();
+        }
     }
 
     private loadForm(taskId: string) {
+        let data = this.data;
         this.formService
             .getTaskForm(taskId)
             .subscribe(
-                form => this.form = new FormModel(form),
+                form => {
+                    this.form = new FormModel(form, data, null, this.readOnly);
+                    this.formLoaded.emit(this.form.values);
+                },
+                err => console.log(err)
+            );
+    }
+
+    private getFormDefinitionById() {
+        this.formService
+            .getFormDefinitionById(this.formId)
+            .subscribe(
+                form => {
+                    console.log('Get Form By definition Id', form);
+                    this.form = new FormModel(form, this.data, this.formsaved, this.readOnly);
+                    this.formLoaded.emit(this.form.values);
+                },
+                err => console.log(err)
+            );
+    }
+
+    private getFormDefinitionByName() {
+        this.formService
+            .getFormDefinitionByName(this.formName)
+            .subscribe(
+                id => {
+                    this.formService.getFormDefinitionById(id).subscribe(
+                        form => {
+                            console.log('Get Form By Form definition Name', form);
+                            this.form = new FormModel(form, this.data, this.formsaved, this.readOnly);
+                            this.formLoaded.emit(this.form.values);
+                        },
+                        err => console.log(err)
+                    );
+                },
                 err => console.log(err)
             );
     }
@@ -113,10 +234,10 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
     private saveTaskForm() {
         this.formService.saveTaskForm(this.form.taskId, this.form.values).subscribe(
             (response) => {
-                console.log(response);
-                alert('Saved');
+                console.log('Saved task', response);
+                this.formsaved.emit(this.form.values);
             },
-            (err) => window.alert(err)
+            (err) => console.log(err)
         );
     }
 
@@ -125,11 +246,10 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
             .completeTaskForm(this.form.taskId, this.form.values, outcome)
             .subscribe(
                 (response) => {
-                    console.log(response);
-                    alert('Saved');
+                    console.log('Completed task', response);
+                    this.formCompleted.emit(this.form.values);
                 },
-                (err) => window.alert(err)
+                (err) => console.log(err)
             );
     }
-
 }