front/core/components/autocomplete/index.html

@@ -18,7 +18,7 @@
         <label>
             <span translate>{{$ctrl.label}}</span>
             <span class="required">*</span>
-        </label> 
+        </label>
     </div>
     <div class="icons pre">
         <vn-icon
@@ -50,4 +50,4 @@
     on-select="$ctrl.onDropDownSelect(item)"
     on-data-ready="$ctrl.onDataReady()"
     on-close-start="$ctrl.onDropDownClose()">
-</vn-drop-down>
+</vn-drop-down>

front/core/components/drop-down/index.html

@@ -13,12 +13,12 @@
             class="dropdown"
             ng-click="$ctrl.onContainerClick($event)">
         </ul>
-        <div 
-            ng-if="$ctrl.statusText" 
+        <div
+            ng-if="$ctrl.statusText"
             ng-click="$ctrl.onLoadMoreClick($event)"
             class="status"
             translate>
             {{$ctrl.statusText}}
         </div>
     </div>
-</default>
+</default>

front/core/components/index.js

@@ -51,6 +51,7 @@ import './textarea';
 import './th';
 import './treeview';
 import './wday-picker';
+import './worker-autocomplete';
 import './datalist';
 import './contextmenu';
 import './rating';

front/core/components/worker-autocomplete/index.html

@@ -0,0 +1,9 @@
+<vn-autocomplete
+    vn-one
+    url="Workers/activeWithInheritedRole"
+    ng-model="$ctrl.workerFk"
+    show-field="nickname"
+    search-function="{firstName: $search}"
+    value-field="id"
+    label="Worker">
+</vn-autocomplete>

front/core/components/worker-autocomplete/index.js

@@ -0,0 +1,49 @@
+import ngModule from '../../module';
+import Autocomplete from '../autocomplete';
+import assignProps from '../../lib/assign-props';
+import {mergeWhere} from 'vn-loopback/util/filter';
+import './style.scss';
+
+/**
+ * Input with option selector.
+ *
+ * @property {String} showFiled The data field name that should be shown
+ * @property {String} valueField The data field name that should be used as value
+ * @property {Array} data Static data for the autocomplete
+ * @property {Object} intialData An initial data to avoid the server request used to get the selection
+ * @property {Boolean} multiple Whether to allow multiple selection
+ * @property {Object} selection Current object selected
+ *
+ * @event change Thrown when value is changed
+ */
+export default class WorkerAutocomplete extends Autocomplete {
+    constructor($element, $, $compile, $transclude) {
+        super($element, $, $compile, $transclude);
+    }
+
+    // $postLink() {
+    //     super.$postLink();
+    //     this.assignDropdownProps();
+    //     this.showField = this.$.dropDown.showField;
+    //     this.valueField = this.$.dropDown.valueField;
+    //     this.refreshSelection();
+    // }
+
+    // /**
+    //  * @type {any} The autocomplete value.
+    //  */
+    // get field() {
+    //     return super.field;
+    // }
+
+    // set field(value) {
+    //     super.field = value;
+    //     this.refreshSelection();
+    // }
+}
+WorkerAutocomplete.$inject = ['$element', '$scope', '$compile', '$transclude'];
+
+ngModule.vnComponent('vnWorkerAutocomplete', {
+    template: require('./index.html'),
+    controller: WorkerAutocomplete
+});

front/core/components/worker-autocomplete/index.spec.js

@@ -0,0 +1,54 @@
+describe('Component vnAutocomplete', () => {
+    let $element;
+    let controller;
+    let data = {id: 1, name: 'Bruce Wayne'};
+
+    beforeEach(ngModule('vnCore'));
+
+    beforeEach(inject(($compile, $rootScope) => {
+        $element = $compile(`<vn-autocomplete></vn-autocomplete>`)($rootScope);
+        controller = $element.controller('vnAutocomplete');
+    }));
+
+    afterEach(() => {
+        $element.remove();
+    });
+
+    describe('url() setter', () => {
+        it(`should set the url property`, () => {
+            controller.url = '/TestModels';
+
+            expect(controller.url).toEqual('/TestModels');
+        });
+    });
+
+    describe('field() setter/getter', () => {
+        it(`should set the field property`, () => {
+            controller.field = 'id';
+
+            expect(controller.field).toEqual('id');
+        });
+    });
+
+    describe('selection property', () => {
+        beforeEach(() => {
+            controller.field = data.id;
+        });
+
+        it(`should set selection finding an existing item in the initialData property`, () => {
+            controller.initialData = data;
+
+            expect(controller.selection).toEqual(data);
+        });
+
+        it(`should set selection finding an existing item in the data property`, () => {
+            controller.data = [data];
+
+            expect(controller.selection).toEqual(data);
+        });
+
+        it(`should set selection to null when can't find an existing item in the data property`, () => {
+            expect(controller.selection).toEqual(null);
+        });
+    });
+});

front/core/components/worker-autocomplete/style.scss

@@ -0,0 +1,30 @@
+@import "effects";
+
+.vn-worker-autocomplete {
+    overflow: hidden;
+
+    & > .container {
+        cursor: pointer;
+
+        & > .infix > .control {
+            overflow: hidden;
+
+            & > input {
+                cursor: pointer;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                text-align: left;
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+
+        & > .icons.pre {
+            min-width: 22px
+        }
+    }
+    &.readonly > .container > .icons.post {
+        display: none;
+    }
+}

modules/ticket/front/tracking/edit/index.html

@@ -14,22 +14,13 @@
         <vn-horizontal>
             <vn-autocomplete
                 vn-one
-                ng-model="$ctrl.stateFk" 
+                ng-model="$ctrl.stateFk"
                 data="states"
                 label="State"
                 vn-focus>
             </vn-autocomplete>
-            <vn-autocomplete 
-                vn-one
-                url="Workers/activeWithInheritedRole"
-                ng-if="$ctrl.isPickerDesignedState"
-                ng-model="$ctrl.workerFk"
-                show-field="nickname"
-                search-function="{firstName: $search}"
-                value-field="id"
-                where="{role: 'employee'}"
-                label="Worker">
-            </vn-autocomplete>
+            <vn-worker-autocomplete>
+            </vn-worker-autocomplete>
         </vn-horizontal>
     </vn-card>
     <vn-button-bar>
@@ -43,4 +34,4 @@
             ui-sref="ticket.card.tracking.index">
         </vn-button>
     </vn-button-bar>
-</form>
+</form>