autocomplete options added to smart table

front/core/components/smart-table/index.html

@@ -2,6 +2,7 @@
     <vn-horizontal>
         <div class="actions-left">
             <vn-button icon="view_column"
+                ng-if="$ctrl.viewConfigId"
                 ng-click="smartTableColumns.show($event)"
                 vn-tooltip="Shown columns">
             </vn-button>

front/core/components/smart-table/index.js

@@ -3,6 +3,7 @@ import Component from '../../lib/component';
 import {buildFilter} from 'vn-loopback/util/filter';
 import './style.scss';
 import angular from 'angular';
+import {camelToKebab} from '../../lib/string';
 
 export default class SmartTable extends Component {
     constructor($element, $, $transclude) {
@@ -199,13 +200,37 @@ export default class SmartTable extends Component {
             const field = column.getAttribute('field');
             const cell = document.createElement('td');
             if (field) {
-                const input = this.$compile(`
+                let input;
+                let options;
+                const columnOptions = this.options && this.options.columns;
+
+                if (columnOptions)
+                    options = columnOptions.find(column => column.field == field);
+
+                if (options && options.autocomplete) {
+                    let props = ``;
+
+                    const autocomplete = options.autocomplete;
+                    for (const prop in autocomplete)
+                        props += `${camelToKebab(prop)}="${autocomplete[prop]}"\n`;
+
+                    input = this.$compile(`
+                    <vn-autocomplete
+                        name="${field}"
+                        ng-model="searchProps['${field}']"
+                        ${props}
+                        on-change="$ctrl.searchByColumn('${field}')"
+                        clear-disabled="true"
+                    />`)(this.$);
+                } else {
+                    input = this.$compile(`
                         <vn-textfield
                             name="${field}"
                             ng-model="searchProps['${field}']"
-                        ng-keydown="$ctrl.searchByColumn($event, this, '${field}')"
+                            ng-keydown="$ctrl.searchWithEvent($event, '${field}')"
                             clear-disabled="true"
                         />`)(this.$);
+                }
                 cell.appendChild(input[0]);
             }
             searchRow.appendChild(cell);
@@ -214,10 +239,14 @@ export default class SmartTable extends Component {
         tbody.prepend(searchRow);
     }
 
-    searchByColumn($event, scope, field) {
+    searchWithEvent($event, field) {
         if ($event.key != 'Enter') return;
 
-        const searchCriteria = scope.searchProps[field];
+        this.searchByColumn(field);
+    }
+
+    searchByColumn(field) {
+        const searchCriteria = this.$.searchProps[field];
         const emptySearch = searchCriteria == '' || null;
 
         const filters = this.filterSanitizer(field);
@@ -226,7 +255,7 @@ export default class SmartTable extends Component {
             this.model.userFilter = filters.userFilter;
 
         if (!emptySearch)
-            this.addFilter(field, scope.searchProps[field]);
+            this.addFilter(field, this.$.searchProps[field]);
         else this.model.refresh();
     }
 
@@ -344,6 +373,7 @@ ngModule.vnComponent('smartTable', {
         viewConfigId: '@?',
         autoSave: '<?',
         exprBuilder: '&?',
-        defaultNewData: '&?'
+        defaultNewData: '&?',
+        options: '<?'
     }
 });

modules/ticket/front/index/index.html

@@ -12,6 +12,7 @@
     <smart-table
         model="model"
         view-config-id="ticketIndex"
+        options="$ctrl.smartTableOptions"
         auto-save="true"
         expr-builder="$ctrl.exprBuilder(param, value)"
         default-new-data="$ctrl.defaultNewData()">
@@ -20,7 +21,6 @@
                 ng-click="$ctrl.test()"
                 vn-tooltip="Info">
             </vn-button>
-
             <div class="button-group">
                 <vn-button icon="info"
                     ng-click="$ctrl.test()"

modules/ticket/front/index/index.js

@@ -7,6 +7,44 @@ export default class Controller extends Section {
     constructor($element, $, vnReport) {
         super($element, $);
         this.vnReport = vnReport;
+        this.smartTableOptions = {
+            columns: [
+                {
+                    field: 'salesPersonFk',
+                    autocomplete: {
+                        url: 'Workers/activeWithInheritedRole',
+                        where: `{role: 'salesPerson'}`,
+                        searchFunction: '{firstName: $search}',
+                        showField: 'nickname',
+                        valueField: 'id',
+                    }
+                },
+                {
+                    field: 'provinceFk',
+                    autocomplete: {
+                        url: 'Provinces',
+                    }
+                },
+                {
+                    field: 'stateFk',
+                    autocomplete: {
+                        url: 'States',
+                    }
+                },
+                {
+                    field: 'zoneFk',
+                    autocomplete: {
+                        url: 'Zones',
+                    }
+                },
+                {
+                    field: 'warehouseFk',
+                    autocomplete: {
+                        url: 'Warehouses',
+                    }
+                },
+            ]
+        };
     }
 
     setDelivered() {