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

@@ -19,17 +19,8 @@
                 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>