salix/client/core/src/autocomplete-v2/autocomplete.js

import {module} from '../module';
import './style.scss';

class Autocomplete {
    constructor($element, $scope, $http, $timeout) {
        this.$element = $element;
        this.$scope = $scope;
        this.$http = $http;
        this.$timeout = $timeout;

        this._showDropDown = false;
        this.finding = false;
        this.findMore = false;
        this._value = null;
        this._field = null;
        this.maxRow = 10;
        this.showField = this.showField || 'name';
        this.items = this.data || null;

        this.input = $element[0].querySelector('input');
    }

    get showDropDown() {
        return this._showDropDown;
    }
    set showDropDown(value) {
        this._showDropDown = value;
    }

    get displayValue() {
        return this._value;
    }

    set displayValue(value) {
        this._value = (value === undefined || value === '') ? null : value;
        if (value === null) {
            this.field = null;
        }
    }

    get field() {
        return this._field;
    }
    set field(value) {
        this._field = value;
        if (value && value.hasOwnProperty(this.showField))
            this.displayValue = value[this.showField];
    }

    findItems(search) {
        if (!this.url)
            return this.items ? this.items : [];

        if (search && !this.finding) {
            this.maxRow = false;
            let filter = {where: {name: {regexp: search}}};
            let json = JSON.stringify(filter);
            this.finding = true;
            this.$http.get(`${this.url}?filter=${json}`).then(
                json => {
                    this.items = json.data;
                    this.finding = false;
                },
                () => {
                    this.finding = false;
                }
            );
        } else if (!search && !this.finding) {
            this.maxRow = 10;
            this.items = [];
            this.getItems();
        }
    }
    getItems() {
        let filter = {};

        if (this.maxRow) {
            if (this.items) {
                filter.skip = this.items.length;
            }
            filter.limit = this.maxRow;
            filter.order = 'name ASC';
        }

        let json = JSON.stringify(filter);

        this.$http.get(`${this.url}?filter=${json}`).then(
            json => {
                if (json.data.length)
                    json.data.forEach(
                        el => {
                            this.items.push(el);
                        }
                    );
                else
                    this.maxRow = false;
            }
        );
    }
    $onInit() {
        if (!this.items && this.url) {
            this.items = [];
            this.getItems();
        }

        this.findMore = this.url && this.maxRow;

        this.$element.bind('mouseover', e => {
            this.$timeout(() => {
                this.showDropDown = true;
            });
        });

        this.$element.bind('mouseout', () => {
            this.$timeout(() => {
                this.showDropDown = false;
            });
        });
        this.$element.bind('focusin', e => {
            this.$timeout(() => {
                this.showDropDown = true;
            });
        });
        this.$element.bind('focusout', e => {
            this.$timeout(() => {
                this.showDropDown = false;
            });
        });     

        let rectangle = this.$element[0].getBoundingClientRect();
        this.width = Math.round(rectangle.width) - 15;
    }

    $onDestroy() {
        this.$element.unbind('mouseover');
        this.$element.unbind('mouseout');
        this.$element.unbind('focusin');
        this.$element.unbind('focusout');
    }

}

Autocomplete.$inject = ['$element', '$scope', '$http', '$timeout'];

module.component('vnAutocomplete', {
    template: require('./autocomplete.html'),
    controller: Autocomplete,
    bindings: {
        url: '@?',
        showField: '@?',
        valueField: '@?',
        selectFields: '@?',
        initialData: '<?',
        onChange: '&?',
        data: '<?',
        itemAs: '@?',
        field: '=',
        label: '@'
    }
});