#636 functional-group (aka group picker) widget

ng2-components/ng2-activiti-form/src/components/widgets/core/group-user.model.ts

@@ -0,0 +1,26 @@
+/*!
+ * @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.
+ */
+
+export class GroupUserModel {
+
+    company: string;
+    email: string;
+    firstName: string;
+    id: string;
+    lastName: string;
+
+}

ng2-components/ng2-activiti-form/src/components/widgets/core/group.model.ts

@@ -0,0 +1,26 @@
+/*!
+ * @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.
+ */
+
+export class GroupModel {
+
+    externalId: string;
+    groups: any;
+    id: string;
+    name: string;
+    status: string;
+
+}

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.css

@@ -1,3 +1,29 @@
 .functional-group-widget {
     width: 100%;
 }
+
+.functional-group-widget--autocomplete {
+    background-color: #fff;
+    position: absolute;
+    z-index: 5;
+    color: #555;
+    margin: -15px 0 0 0;
+}
+
+.functional-group-widget--autocomplete > ul {
+    list-style-type: none;
+    position: static;
+
+    height: auto;
+    width: auto;
+    min-width: 124px;
+    padding: 8px 0;
+    margin: 0;
+
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+    border-radius: 2px;
+}
+
+.functional-group-widget--autocomplete > ul > li {
+    opacity: 1;
+}

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html

@@ -4,6 +4,18 @@
            [attr.id]="field.id"
            [(ngModel)]="value"
            (ngModelChange)="checkVisibility(field)"
+           (keyup)="onKeyUp($event)"
+           (blur)="onBlur()"
            [disabled]="field.readOnly">
     <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
 </div>
+
+<div class="functional-group-widget--autocomplete mdl-shadow--2dp" *ngIf="popupVisible">
+    <ul>
+        <li *ngFor="let item of groups"
+            class="mdl-menu__item"
+            (click)="onItemClick(item, $event)">
+            {{item.name}}
+        </li>
+    </ul>
+</div>

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts

@@ -17,6 +17,8 @@
 
 import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
+import { FormService } from '../../../services/form.service';
+import { GroupModel } from './../core/group.model';
 
 declare let __moduleName: string;
 declare var componentHandler;
@@ -30,15 +32,66 @@ declare var componentHandler;
 export class FunctionalGroupWidget extends WidgetComponent implements OnInit {
 
     value: string;
+    popupVisible: boolean = false;
+    groups: GroupModel[] = [];
+    minTermLength: number = 1;
 
-    constructor() {
+    constructor(private formService: FormService) {
         super();
     }
 
+    // TODO: investigate, called 2 times
+    // https://github.com/angular/angular/issues/6782
     ngOnInit() {
         let group = this.field.value;
         if (group) {
             this.value = group.name;
         }
     }
+
+    onKeyUp(event: KeyboardEvent) {
+        if (this.value && this.value.length >= this.minTermLength) {
+            this.formService.getWorkflowGroups(this.value)
+                .subscribe((result: GroupModel[]) => {
+                    this.groups = result || [];
+                    this.popupVisible = this.groups.length > 0;
+                });
+        } else {
+            this.popupVisible = false;
+        }
+
+    }
+
+    onBlur() {
+        setTimeout(() => {
+            this.flushValue();
+        }, 200);
+    }
+
+    flushValue() {
+        this.popupVisible = false;
+
+        let option = this.groups.find(item => item.name.toLocaleLowerCase() === this.value.toLocaleLowerCase());
+
+        if (option) {
+            this.field.value = option;
+            this.value = option.name;
+        } else {
+            this.field.value = null;
+            this.value = null;
+        }
+
+        this.field.updateForm();
+    }
+
+    // TODO: still causes onBlur execution
+    onItemClick(item: GroupModel, event: Event) {
+        if (item) {
+            this.field.value = item;
+            this.value = item.name;
+        }
+        if (event) {
+            event.preventDefault();
+        }
+    }
 }

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts

@@ -97,6 +97,7 @@ export class TypeaheadWidget extends WidgetComponent implements OnInit {
         this.field.updateForm();
     }
 
+    // TODO: still causes onBlur execution
     onItemClick(item: FormFieldOption, event: Event) {
         if (item) {
             this.field.value = item.id;

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

@@ -17,10 +17,11 @@
 
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Rx';
-import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
 import { FormValues } from './../components/widgets/core/index';
 import { FormDefinitionModel } from '../models/form-definition.model';
 import { EcmModelService } from './ecm-model.service';
+import { GroupModel } from './../components/widgets/core/group.model';
 
 @Injectable()
 export class FormService {
@@ -28,15 +29,15 @@ export class FormService {
     static UNKNOWN_ERROR_MESSAGE: string = 'Unknown error';
     static GENERIC_ERROR_MESSAGE: string = 'Server error';
 
-    constructor(private authService: AlfrescoAuthenticationService,
+    constructor(private ecmModelService: EcmModelService,
-                private ecmModelService: EcmModelService) {
+                private apiService: AlfrescoApiService) {
     }
 
     /**
      * Create a Form with a fields for each metadata properties
      * @returns {Observable<any>}
      */
-    public createFormFromANode(formName: string): Observable<any> {
+    createFormFromANode(formName: string): Observable<any> {
         return Observable.create(observer => {
             this.createForm(formName).subscribe(
                 form => {
@@ -57,7 +58,7 @@ export class FormService {
      * Create a Form
      * @returns {Observable<any>}
      */
-    public createForm(formName: string): Observable<any> {
+    createForm(formName: string): Observable<any> {
         let dataModel = {
             name: formName,
             description: '',
@@ -65,27 +66,27 @@ export class FormService {
             stencilSet: 0
         };
 
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.modelsApi.createModel(dataModel));
+        return Observable.fromPromise(this.apiService.getInstance().activiti.modelsApi.createModel(dataModel));
     }
 
     /**
      * Add Fileds to A form
      * @returns {Observable<any>}
      */
-    public addFieldsToAForm(formId: string, formModel: FormDefinitionModel): Observable<any> {
+    addFieldsToAForm(formId: string, formModel: FormDefinitionModel): Observable<any> {
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.editorApi.saveForm(formId, formModel));
+        return Observable.fromPromise(this.apiService.getInstance().activiti.editorApi.saveForm(formId, formModel));
     }
 
     /**
      * Search For A Form by name
      * @returns {Observable<any>}
      */
-    public searchFrom(name: string): Observable<any> {
+    searchFrom(name: string): Observable<any> {
         let opts = {
             'modelType': 2
         };
 
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.modelsApi.getModels(opts)).map(function (forms: any) {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.modelsApi.getModels(opts)).map(function (forms: any) {
             return forms.data.find(formdata => formdata.name === name);
         }).catch(this.handleError);
     }
@@ -94,20 +95,20 @@ export class FormService {
      * Get All the forms
      * @returns {Observable<any>}
      */
-    public getForms(): Observable<any> {
+    getForms(): Observable<any> {
         let opts = {
             'modelType': 2
         };
 
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.modelsApi.getModels(opts));
+        return Observable.fromPromise(this.apiService.getInstance().activiti.modelsApi.getModels(opts));
     }
 
     /**
      * Get Process Definition
      * @returns {Observable<any>}
      */
-    public getProcessDefinitions(): Observable<any> {
+    getProcessDefinitions(): Observable<any> {
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.processApi.getProcessDefinitions({}))
+        return Observable.fromPromise(this.apiService.getInstance().activiti.processApi.getProcessDefinitions({}))
             .map(this.toJsonArray)
             .catch(this.handleError);
     }
@@ -117,8 +118,8 @@ export class FormService {
      * @param taskId Task Id
      * @returns {Observable<any>}
      */
-    public getTasks(): Observable<any> {
+    getTasks(): Observable<any> {
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.taskApi.listTasks({}))
+        return Observable.fromPromise(this.apiService.getInstance().activiti.taskApi.listTasks({}))
             .map(this.toJsonArray)
             .catch(this.handleError);
     }
@@ -128,8 +129,8 @@ export class FormService {
      * @param taskId Task Id
      * @returns {Observable<any>}
      */
-    public getTask(taskId: string): Observable<any> {
+    getTask(taskId: string): Observable<any> {
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.taskApi.getTask(taskId))
+        return Observable.fromPromise(this.apiService.getInstance().activiti.taskApi.getTask(taskId))
             .map(this.toJson)
             .catch(this.handleError);
     }
@@ -140,10 +141,10 @@ export class FormService {
      * @param formValues Form Values
      * @returns {Observable<any>}
      */
-    public saveTaskForm(taskId: string, formValues: FormValues): Observable<any> {
+    saveTaskForm(taskId: string, formValues: FormValues): Observable<any> {
         let body = JSON.stringify({values: formValues});
 
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.taskApi.saveTaskForm(taskId, body))
+        return Observable.fromPromise(this.apiService.getInstance().activiti.taskApi.saveTaskForm(taskId, body))
             .catch(this.handleError);
     }
 
@@ -154,14 +155,14 @@ export class FormService {
      * @param outcome Form Outcome
      * @returns {Observable<any>}
      */
-    public completeTaskForm(taskId: string, formValues: FormValues, outcome?: string): Observable<any> {
+    completeTaskForm(taskId: string, formValues: FormValues, outcome?: string): Observable<any> {
         let data: any = {values: formValues};
         if (outcome) {
             data.outcome = outcome;
         }
         let body = JSON.stringify(data);
 
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.taskApi.completeTaskForm(taskId, body))
+        return Observable.fromPromise(this.apiService.getInstance().activiti.taskApi.completeTaskForm(taskId, body))
             .catch(this.handleError);
     }
 
@@ -170,8 +171,8 @@ export class FormService {
      * @param taskId Task Id
      * @returns {Observable<any>}
      */
-    public getTaskForm(taskId: string): Observable<any> {
+    getTaskForm(taskId: string): Observable<any> {
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.taskApi.getTaskForm(taskId))
+        return Observable.fromPromise(this.apiService.getInstance().activiti.taskApi.getTaskForm(taskId))
             .map(this.toJson)
             .catch(this.handleError);
     }
@@ -181,8 +182,8 @@ export class FormService {
      * @param formId Form Id
      * @returns {Observable<any>}
      */
-    public getFormDefinitionById(formId: string): Observable<any> {
+    getFormDefinitionById(formId: string): Observable<any> {
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.editorApi.getForm(formId))
+        return Observable.fromPromise(this.apiService.getInstance().activiti.editorApi.getForm(formId))
             .map(this.toJson)
             .catch(this.handleError);
     }
@@ -192,23 +193,53 @@ export class FormService {
      * @param name
      * @returns {Promise<T>|Promise<ErrorObservable>}
      */
-    public getFormDefinitionByName(name: string): Observable<any> {
+    getFormDefinitionByName(name: string): Observable<any> {
         let opts = {
             'filter': 'myReusableForms',
             'filterText': name,
             'modelType': 2
         };
 
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.modelsApi.getModels(opts))
+        return Observable.fromPromise(this.apiService.getInstance().activiti.modelsApi.getModels(opts))
             .map(this.getFormId)
             .catch(this.handleError);
     }
 
     getRestFieldValues(taskId: string, field: string): Observable<any> {
-        let alfrescoApi = this.authService.getAlfrescoApi();
+        let alfrescoApi = this.apiService.getInstance();
         return Observable.fromPromise(alfrescoApi.activiti.taskFormsApi.getRestFieldValues(taskId, field));
     }
 
+    // TODO: uses private webApp api
+    getWorkflowGroups(filter: string): Observable<GroupModel[]> {
+        return Observable.create(observer => {
+
+            let xhr: XMLHttpRequest = new XMLHttpRequest();
+            xhr.withCredentials = true;
+
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === 4) {
+                    if (xhr.status === 200) {
+                        let json = JSON.parse(xhr.response);
+                        let data: GroupModel[] = (json.data || []).map(item => <GroupModel> item);
+                        // console.log(json);
+                        observer.next(data);
+                        observer.complete();
+                    } else {
+                        console.error(xhr.response);
+                        Observable.throw(new Error(xhr.response));
+                    }
+                }
+            };
+
+            let host = this.apiService.getInstance().config.hostBpm;
+            let url = `${host}/activiti-app/app/rest/workflow-groups?filter=${filter}`;
+            xhr.open('GET', url, true);
+            xhr.setRequestHeader('Authorization', this.apiService.getInstance().getTicketBpm());
+            xhr.send();
+        });
+    }
+
 
     getFormId(res: any) {
         let result = null;