Add Start Process button

Refs #492

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

@@ -33,6 +33,7 @@
                     <div class="mdl-grid">
                         <div class="mdl-cell mdl-cell--2-col task-column">
                             <span>Process Filters</span>
+                            <activiti-start-process [appId]="appId"></activiti-start-process>
                             <activiti-process-filters (filterClick)="onProcessFilterClick($event)"></activiti-process-filters>
                         </div>
                         <div class="mdl-cell mdl-cell--3-col task-column">

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, AfterViewChecked, ViewChild } from '@angular/core';
+import { Component, AfterViewChecked, ViewChild, Input } from '@angular/core';
 import { ALFRESCO_TASKLIST_DIRECTIVES } from 'ng2-activiti-tasklist';
 import { ACTIVITI_PROCESSLIST_DIRECTIVES } from 'ng2-activiti-processlist';
 import { ActivitiForm } from 'ng2-activiti-form';
@@ -55,6 +55,9 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     taskFilter: any;
     processFilter: any;
 
+    @Input()
+    appId: string;
+
     setChoice($event) {
         this.currentChoice = $event.target.value;
     }

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

@@ -0,0 +1,11 @@
+:host {
+    width: 100%;
+}
+
+.activiti-label {
+    font-weight: bolder;
+}
+
+.material-icons:hover {
+    color: rgb(255, 152, 0);
+}

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

@@ -0,0 +1,23 @@
+<button type="button" (click)="showDialog()" class="mdl-button">Start Process</button>
+
+<dialog class="mdl-dialog" #dialog>
+    <h4 class="mdl-dialog__title">Start Process</h4>
+    <div class="mdl-dialog__content">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <select name="processDefinition" [(ngModel)]="processDefinition" id="processDefinition">
+                <option *ngFor="let processDef of processDefinitions" [value]="processDef.id">
+                    {{processDef.name}}
+                </option>
+            </select>
+            <label class="mdl-textfield__label" for="processDefinition">Type</label>
+        </div>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" rows="1" id="processName" />
+            <label class="mdl-textfield__label" for="processName">Name</label>
+        </div>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" (click)="startProcess()" class="mdl-button">Start</button>
+        <button type="button" (click)="cancel()" class="mdl-button close">Cancel</button>
+    </div>
+</dialog>

ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.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, Input, OnInit, ViewChild } from '@angular/core';
+import { AlfrescoTranslationService, AlfrescoAuthenticationService, AlfrescoPipeTranslate } from 'ng2-alfresco-core';
+import { ActivitiProcessService } from './../services/activiti-process.service';
+
+declare let componentHandler: any;
+declare let __moduleName: string;
+
+@Component({
+    selector: 'activiti-start-process',
+    moduleId: __moduleName,
+    templateUrl: './activiti-start-process.component.html',
+    styleUrls: ['./activiti-start-process.component.css'],
+    providers: [ActivitiProcessService],
+    pipes: [ AlfrescoPipeTranslate ]
+
+})
+export class ActivitiStartProcessButton implements OnInit {
+
+    @Input()
+    appId: string;
+
+    @ViewChild('dialog')
+    dialog: any;
+
+    processDefinitions: any[] = [];
+
+    name: string;
+    processDefinition: string;
+
+    /**
+     * Constructor
+     * @param auth
+     * @param translate
+     * @param activitiProcess
+     */
+    constructor(private auth: AlfrescoAuthenticationService,
+                private translate: AlfrescoTranslationService,
+                private activitiProcess: ActivitiProcessService) {
+
+        if (translate) {
+            translate.addTranslationFolder('node_modules/ng2-activiti-processlist/src');
+        }
+    }
+
+    ngOnInit() {
+        this.load(this.appId);
+    }
+
+    public load(appId: string) {
+        this.activitiProcess.getProcessDefinitions(this.appId).subscribe(
+            (res: any[]) => {
+                this.processDefinitions = res;
+            },
+            (err) => {
+                console.log(err);
+            }
+        );
+    }
+
+    public showDialog() {
+        if (this.dialog) {
+            this.dialog.nativeElement.showModal();
+        }
+    }
+
+    public startProcess() {
+        if (this.processDefinition && this.name) {
+            this.activitiProcess.startProcess(this.processDefinition, this.name).subscribe(
+                (res: any) => {
+                    console.log('Created process', res);
+                    this.cancel();
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
+        }
+    }
+
+    public cancel() {
+        if (this.dialog) {
+            this.dialog.nativeElement.close();
+        }
+    }
+}

ng2-components/ng2-activiti-processlist/src/services/activiti-process.service.ts

@@ -135,6 +135,16 @@ export class ActivitiProcessService {
             .catch(this.handleError);
     }
 
+    startProcess(processDefinitionId: string, name: string) {
+        let startRequest: any = {};
+        startRequest.name = name;
+        startRequest.processDefinitionId = processDefinitionId;
+        return Observable.fromPromise(
+            this.authService.getAlfrescoApi().activiti.processApi.startNewProcessInstance(startRequest)
+            )
+            .catch(this.handleError);
+    }
+
     cancelProcess(processInstanceId: string) {
         return Observable.fromPromise(
             this.authService.getAlfrescoApi().activiti.processApi.deleteProcessInstance(processInstanceId)