alfresco-ng2-components/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts

/*!
 * @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 } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { FormService } from '../../../services/form.service';
import { GroupModel } from '../core/group.model';
import { GroupUserModel } from '../core/group-user.model';

declare let __moduleName: string;

@Component({
    moduleId: __moduleName,
    selector: 'people-widget',
    templateUrl: './people.widget.html',
    styleUrls: ['./people.widget.css']
})
export class PeopleWidget extends WidgetComponent implements OnInit {

    popupVisible: boolean = false;
    minTermLength: number = 1;
    value: string;
    users: GroupUserModel[] = [];
    groupId: string;

    constructor(private formService: FormService) {
        super();
    }

    // TODO: investigate, called 2 times
    // https://github.com/angular/angular/issues/6782
    ngOnInit() {
        if (this.field) {
            let user: GroupUserModel = this.field.value;
            if (user) {
                this.value = this.getDisplayName(user);
            }

            let params = this.field.params;
            if (params && params['restrictWithGroup']) {
                let restrictWithGroup = <GroupModel> params['restrictWithGroup'];
                this.groupId = restrictWithGroup.id;
            }
        }
    }

    onKeyUp(event: KeyboardEvent) {
        if (this.value && this.value.length >= this.minTermLength) {
            this.formService.getWorkflowUsers(this.value, this.groupId)
                .subscribe((result: GroupUserModel[]) => {
                    this.users = result || [];
                    this.popupVisible = this.users.length > 0;
                });
        } else {
            this.popupVisible = false;
        }
    }

    onBlur() {
        setTimeout(() => {
            this.flushValue();
        }, 200);
    }

    flushValue() {
        this.popupVisible = false;

        let option = this.users.find(item => {
            let fullName = this.getDisplayName(item).toLocaleLowerCase();
            return fullName === this.value.toLocaleLowerCase();
        });

        if (option) {
            this.field.value = option;
            this.value = this.getDisplayName(option);
        } else {
            this.field.value = null;
            this.value = null;
        }

        this.field.updateForm();
    }

    getDisplayName(model: GroupUserModel) {
        if (model) {
            let displayName = `${model.firstName} ${model.lastName}`;
            return displayName.trim();
        }

        return '';
    }

    // TODO: still causes onBlur execution
    onItemClick(item: GroupUserModel, event: Event) {
        if (item) {
            this.field.value = item;
            this.value = this.getDisplayName(item);
        }
        if (event) {
            event.preventDefault();
        }
    }
}