refactoring 30%

client/core/src/autocomplete-v2/autocomplete.html

@@ -0,0 +1,16 @@
+<vn-vertical>
+    <vn-one>
+        <vn-textfield label="{{$ctrl.label}}" model="$ctrl.displayValue"></vn-textfield>
+    </vn-one>
+    <vn-one>
+            <vn-drop-down 
+                items="$ctrl.items" 
+                show="$ctrl.showDropDown" 
+                selected="$ctrl.field" 
+                filter="true"
+                load-more="$ctrl.getItems()"
+                show-load-more="$ctrl.maxRow"
+                filter-action="$ctrl.findItems(search)"
+            ></vn-drop-down>
+    </vn-one>
+</vn-vertical>

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

@@ -0,0 +1,136 @@
+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;
+    }
+
+    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) {
+            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.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;
+            });
+        });
+    }
+
+}
+
+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: '@'
+    }
+});

client/core/src/autocomplete-v2/style.scss

@@ -0,0 +1,37 @@
+ul.vn-autocomplete {
+    list-style-type: none;
+    padding: 1em;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    max-height: 300px;
+
+    li {
+        display: block;
+        padding: .8em;
+        margin: 0;
+        cursor: pointer;
+
+        &.active,
+        &:hover {
+            background-color: rgba(1,1,1,.1);
+        }
+        &.load-more {
+            color: #ffa410;
+            font-weight: bold;
+            padding: .4em .8em;
+        }
+    }
+}
+vn-autocomplete {
+    .mdl-chip__action {
+        position: absolute; 
+        top: 0px; 
+        right: -6px; 
+        margin: 22px 0px; 
+        background-color: white;
+    }
+    .material-icons {
+        font-size: 18px;    
+    }
+}

client/core/src/components.js

@@ -5,7 +5,7 @@ import './textfield/textfield';
 import './watcher/watcher';
 import './paging/paging';
 import './icon/icon';
-import './autocomplete/autocomplete';
+import './autocomplete-v2/autocomplete';
 import './popover/popover';
 import './dialog/dialog';