From a4cde396dd1e7cc166bbc01c77b75f9ef3c88743 Mon Sep 17 00:00:00 2001 From: Will Abson Date: Mon, 31 Oct 2016 09:56:16 +0000 Subject: [PATCH] New start-form component to display process start forms Refs #730 --- ng2-components/ng2-activiti-form/index.ts | 3 + .../src/components/activiti-form.component.ts | 2 +- .../activiti-start-form.component.html | 35 ++++++ .../activiti-start-form.component.ts | 102 ++++++++++++++++++ .../src/services/form.service.ts | 14 +++ .../ng2-activiti-processlist/index.ts | 2 + .../activiti-start-process.component.html | 11 ++ .../activiti-start-process.component.ts | 39 ++++++- 8 files changed, 205 insertions(+), 3 deletions(-) create mode 100644 ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.html create mode 100644 ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.ts diff --git a/ng2-components/ng2-activiti-form/index.ts b/ng2-components/ng2-activiti-form/index.ts index 4fe5c5d489..519cc0e2c3 100644 --- a/ng2-components/ng2-activiti-form/index.ts +++ b/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 ]; diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts index 7abd992b9f..e25ee1e82c 100644 --- a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts +++ b/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) { diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.html b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.html new file mode 100644 index 0000000000..b093891fcb --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.html @@ -0,0 +1,35 @@ +
+
+
+
+ {{ form.isValid ? 'event_available' : 'event_busy' }} +

{{form.taskName}}

+
+
+
+ +
+ +
+ +
+
+
+ +
+
+ +
+
+
+
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.ts b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.ts new file mode 100644 index 0000000000..fc374d289b --- /dev/null +++ b/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) { + } +} diff --git a/ng2-components/ng2-activiti-form/src/services/form.service.ts b/ng2-components/ng2-activiti-form/src/services/form.service.ts index 20311caacd..791e210264 100644 --- a/ng2-components/ng2-activiti-form/src/services/form.service.ts +++ b/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} + */ + getStartFormDefinition(processId: string): Observable { + return Observable.fromPromise( + this.apiService.getInstance().activiti.processApi.getProcessDefinitionStartForm({ + processDefinitionId: processId + })) + .map(this.toJson) + .catch(this.handleError); + } + getRestFieldValues(taskId: string, field: string): Observable { let alfrescoApi = this.apiService.getInstance(); return Observable.fromPromise(alfrescoApi.activiti.taskApi.getRestFieldValues(taskId, field)); diff --git a/ng2-components/ng2-activiti-processlist/index.ts b/ng2-components/ng2-activiti-processlist/index.ts index 17db84cc7e..97e19efdaa 100644 --- a/ng2-components/ng2-activiti-processlist/index.ts +++ b/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: [ diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html index f33ad4fb17..cb9bc50ec5 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html @@ -15,6 +15,17 @@ + + +
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts index d9d7186bfa..b6f0632c98 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts +++ b/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); + } }