inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

#636 functional-group (aka group picker) widget

Browse Source
This commit is contained in:
Denys Vuika
2016-09-07 10:44:22 +01:00
parent 342c4d023b
commit 514fbffea9
7 changed files with 205 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ng2-components/ng2-activiti-form/src/components/widgets/core/group-user.model.ts Normal file
View File

@@ -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;
}

26
ng2-components/ng2-activiti-form/src/components/widgets/core/group.model.ts Normal file
View File

@@ -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;
}

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

@@ -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;
}

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

@@ -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>

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

@@ -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();
}
}
}

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

@@ -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;

89
ng2-components/ng2-activiti-form/src/services/form.service.ts
View File

@@ -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,
private ecmModelService: EcmModelService) {
constructor(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> {
return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.editorApi.saveForm(formId, formModel));
addFieldsToAForm(formId: string, formModel: FormDefinitionModel): Observable<any> {
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> {
return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.processApi.getProcessDefinitions({}))
getProcessDefinitions(): Observable<any> {
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> {
return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.taskApi.listTasks({}))
getTasks(): Observable<any> {
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> {
return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.taskApi.getTask(taskId))
getTask(taskId: string): Observable<any> {
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> {
return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.taskApi.getTaskForm(taskId))
getTaskForm(taskId: string): Observable<any> {
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> {
return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.editorApi.getForm(formId))
getFormDefinitionById(formId: string): Observable<any> {
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;