autocomplete options added to smart table
gitea/salix/pipeline/head There was a failure building this commit Details

This commit is contained in:
Carlos Jimenez Ruiz 2021-10-29 15:52:04 +02:00
parent a1970c6fc8
commit 11f24372e5
4 changed files with 77 additions and 8 deletions

View File

@ -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>

View File

@ -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(`
<vn-textfield
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}']"
ng-keydown="$ctrl.searchByColumn($event, this, '${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.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: '<?'
}
});

View File

@ -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()"

View File

@ -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() {