@universis/ngx-tables 0.6.18 → 0.6.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/universis-ngx-tables.umd.js +101 -37
- package/bundles/universis-ngx-tables.umd.js.map +1 -1
- package/bundles/universis-ngx-tables.umd.min.js +1 -1
- package/bundles/universis-ngx-tables.umd.min.js.map +1 -1
- package/esm2015/lib/components/advanced-aggregator-list/advanced-aggregator-list.component.js +2 -2
- package/esm2015/lib/components/advanced-search-form/advanced-search-form.component.js +5 -2
- package/esm2015/lib/components/advanced-table/advanced-table.component.js +100 -39
- package/esm5/lib/components/advanced-aggregator-list/advanced-aggregator-list.component.js +2 -2
- package/esm5/lib/components/advanced-search-form/advanced-search-form.component.js +5 -2
- package/esm5/lib/components/advanced-table/advanced-table.component.js +98 -37
- package/fesm2015/universis-ngx-tables.js +103 -39
- package/fesm2015/universis-ngx-tables.js.map +1 -1
- package/fesm5/universis-ngx-tables.js +101 -37
- package/fesm5/universis-ngx-tables.js.map +1 -1
- package/lib/components/advanced-table/advanced-table.component.d.ts +8 -0
- package/package.json +1 -1
- package/universis-ngx-tables.metadata.json +1 -1
|
@@ -779,6 +779,9 @@
|
|
|
779
779
|
this.init = new i0.EventEmitter();
|
|
780
780
|
this.reload = new i0.EventEmitter();
|
|
781
781
|
this.select = new i0.EventEmitter();
|
|
782
|
+
this.draw = new i0.EventEmitter();
|
|
783
|
+
this.page = new i0.EventEmitter();
|
|
784
|
+
this.scroll = new i0.EventEmitter();
|
|
782
785
|
this.selectedItems = new i0.EventEmitter();
|
|
783
786
|
this.scrollable = true;
|
|
784
787
|
this.serverSide = true;
|
|
@@ -927,32 +930,55 @@
|
|
|
927
930
|
AdvancedTableComponent.prototype.search = function (searchText) {
|
|
928
931
|
var _this = this;
|
|
929
932
|
this.query = this.query || this._context.model(this.config.model).asQueryable();
|
|
930
|
-
if (
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
933
|
+
if (this.serverSide) {
|
|
934
|
+
if (searchText && this.config.searchExpression) {
|
|
935
|
+
// validate search text in double quotes
|
|
936
|
+
if (/^"(.*?)"$/.test(searchText)) {
|
|
937
|
+
this.query.setParam('$filter', this._template.transform(this.config.searchExpression, {
|
|
938
|
+
text: searchText.replace(/^"|"$/g, ''),
|
|
939
|
+
}));
|
|
940
|
+
}
|
|
941
|
+
else {
|
|
942
|
+
// try to split words
|
|
943
|
+
var words = searchText.split(' ');
|
|
944
|
+
// join words to a single filter
|
|
945
|
+
var filter = words.map(function (word) {
|
|
946
|
+
return _this._template.transform(_this.config.searchExpression, {
|
|
947
|
+
text: word,
|
|
948
|
+
});
|
|
949
|
+
}).join(' and ');
|
|
950
|
+
// set filter
|
|
951
|
+
this.query.setParam('$filter', filter);
|
|
952
|
+
}
|
|
936
953
|
}
|
|
937
954
|
else {
|
|
938
|
-
//
|
|
939
|
-
|
|
940
|
-
// join words to a single filter
|
|
941
|
-
var filter = words.map(function (word) {
|
|
942
|
-
return _this._template.transform(_this.config.searchExpression, {
|
|
943
|
-
text: word,
|
|
944
|
-
});
|
|
945
|
-
}).join(' and ');
|
|
946
|
-
// set filter
|
|
947
|
-
this.query.setParam('$filter', filter);
|
|
955
|
+
// clear filter
|
|
956
|
+
this.query.setParam('$filter', null);
|
|
948
957
|
}
|
|
958
|
+
this._firstLoad = false;
|
|
959
|
+
this.dataTable.draw();
|
|
949
960
|
}
|
|
950
961
|
else {
|
|
951
|
-
//
|
|
952
|
-
this.
|
|
962
|
+
// ensure empty table layout
|
|
963
|
+
this.resetEmptyTable();
|
|
964
|
+
// search locally
|
|
965
|
+
this.dataTable.search(searchText.trim()).draw();
|
|
966
|
+
// get indexes of filtered rows
|
|
967
|
+
var indexes = Array.from(this.dataTable.context[0].aiDisplay);
|
|
968
|
+
// set recordsFiltered
|
|
969
|
+
var recordsFiltered = indexes.length;
|
|
970
|
+
// set recordsTotal
|
|
971
|
+
var recordsTotal = indexes.length;
|
|
972
|
+
// retrieve data from indexes
|
|
973
|
+
var rows_1 = Array.from(this.dataTable.rows().data());
|
|
974
|
+
var data = indexes.map(function (index) { return rows_1[index]; });
|
|
975
|
+
// emit results to load output
|
|
976
|
+
this.load.emit({
|
|
977
|
+
data: data,
|
|
978
|
+
recordsFiltered: recordsFiltered,
|
|
979
|
+
recordsTotal: recordsTotal
|
|
980
|
+
});
|
|
953
981
|
}
|
|
954
|
-
this._firstLoad = false;
|
|
955
|
-
this.dataTable.draw();
|
|
956
982
|
};
|
|
957
983
|
AdvancedTableComponent.prototype.fetch = function (clearSelected) {
|
|
958
984
|
// if data table is null
|
|
@@ -1280,6 +1306,20 @@
|
|
|
1280
1306
|
}, 0);
|
|
1281
1307
|
}
|
|
1282
1308
|
});
|
|
1309
|
+
tableElement_1.on('draw.dt', function (event) {
|
|
1310
|
+
_this.draw.emit();
|
|
1311
|
+
if (_this.dataTable) {
|
|
1312
|
+
var info = _this.dataTable.page.info();
|
|
1313
|
+
_this.page.emit(info);
|
|
1314
|
+
try {
|
|
1315
|
+
_this.dataTable.columns.adjust();
|
|
1316
|
+
}
|
|
1317
|
+
catch (err) {
|
|
1318
|
+
console.error('ERROR', 'An error occurred while adjusting table columns');
|
|
1319
|
+
console.error(err);
|
|
1320
|
+
}
|
|
1321
|
+
}
|
|
1322
|
+
});
|
|
1283
1323
|
// allow selection
|
|
1284
1324
|
if (this.selectable) {
|
|
1285
1325
|
// get first column (as row primary key)
|
|
@@ -1304,10 +1344,6 @@
|
|
|
1304
1344
|
// user interface additions
|
|
1305
1345
|
// handle page change event (a trick for firing draw.dt events)
|
|
1306
1346
|
tableElement_1
|
|
1307
|
-
// for each page
|
|
1308
|
-
.on('page.dt', function ($event) {
|
|
1309
|
-
var info = _this.dataTable.page.info();
|
|
1310
|
-
})
|
|
1311
1347
|
// handle draw events
|
|
1312
1348
|
.on('draw.dt', function () {
|
|
1313
1349
|
if (_this.customSelect) {
|
|
@@ -1412,7 +1448,7 @@
|
|
|
1412
1448
|
// get page size param
|
|
1413
1449
|
var top = aoData[4].value;
|
|
1414
1450
|
// get search value
|
|
1415
|
-
var
|
|
1451
|
+
var search = aoData[5].value;
|
|
1416
1452
|
// get data queryable
|
|
1417
1453
|
var q = self._query instanceof client.ClientDataQueryable ? self._query : self._context.model(self.config.model).asQueryable();
|
|
1418
1454
|
// apply paging params
|
|
@@ -1539,15 +1575,22 @@
|
|
|
1539
1575
|
}
|
|
1540
1576
|
if (this.selectable) ;
|
|
1541
1577
|
// handle init.dt event and emit local event
|
|
1542
|
-
this.dataTable = tableElement_1.
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1578
|
+
this.dataTable = tableElement_1.on('init.dt', function (event) {
|
|
1579
|
+
var scroller = jQuery(event.target).parent();
|
|
1580
|
+
// handle scrolling
|
|
1581
|
+
scroller.on('scroll', function (scrollEvent) {
|
|
1582
|
+
var target = jQuery(scrollEvent.target);
|
|
1583
|
+
var top = target.scrollTop();
|
|
1584
|
+
var left = target.scrollLeft();
|
|
1585
|
+
if (_this.dataTable) {
|
|
1586
|
+
_this.scroll.emit({
|
|
1587
|
+
top: top,
|
|
1588
|
+
left: left
|
|
1589
|
+
});
|
|
1590
|
+
}
|
|
1591
|
+
});
|
|
1592
|
+
_this.init.emit();
|
|
1593
|
+
}).DataTable(settings);
|
|
1551
1594
|
// show or hide header
|
|
1552
1595
|
if (!this.showHeader) {
|
|
1553
1596
|
this._element.nativeElement
|
|
@@ -1566,6 +1609,16 @@
|
|
|
1566
1609
|
}
|
|
1567
1610
|
}
|
|
1568
1611
|
};
|
|
1612
|
+
AdvancedTableComponent.prototype.scrollTop = function (value) {
|
|
1613
|
+
if (this.dataTable) {
|
|
1614
|
+
this.dataTable.parent().scrollTop(value);
|
|
1615
|
+
}
|
|
1616
|
+
};
|
|
1617
|
+
AdvancedTableComponent.prototype.scrollLeft = function (value) {
|
|
1618
|
+
if (this.dataTable) {
|
|
1619
|
+
this.dataTable.parent().scrollLeft(value);
|
|
1620
|
+
}
|
|
1621
|
+
};
|
|
1569
1622
|
Object.defineProperty(AdvancedTableComponent.prototype, "lastQuery", {
|
|
1570
1623
|
get: function () {
|
|
1571
1624
|
var _this = this;
|
|
@@ -1622,6 +1675,10 @@
|
|
|
1622
1675
|
var query_1 = this._context.model(this.config.model).asQueryable();
|
|
1623
1676
|
// select attributes
|
|
1624
1677
|
query_1.setParam('$select', this.lastQueryParams.$select);
|
|
1678
|
+
if (this.lastQueryParams.$expand) {
|
|
1679
|
+
// apply expand attributes
|
|
1680
|
+
query_1.setParam('$expand', this.lastQueryParams.$expand);
|
|
1681
|
+
}
|
|
1625
1682
|
// apply filter for row
|
|
1626
1683
|
findKeys_1.forEach(function (key) {
|
|
1627
1684
|
var column = _this.config.columns.find(function (col) {
|
|
@@ -1708,7 +1765,8 @@
|
|
|
1708
1765
|
// due to ng data binding
|
|
1709
1766
|
// empty table template has no translated text during ngOnInit()
|
|
1710
1767
|
if (this.dataTable && this.dataTable.context[0]) {
|
|
1711
|
-
this.dataTable.context[0].oLanguage.sEmptyTable =
|
|
1768
|
+
this.dataTable.context[0].oLanguage.sEmptyTable =
|
|
1769
|
+
this.dataTable.context[0].oLanguage.sZeroRecords = this.emptyTable.nativeElement.innerHTML;
|
|
1712
1770
|
}
|
|
1713
1771
|
};
|
|
1714
1772
|
AdvancedTableComponent.prototype.clearEmptyTable = function () {
|
|
@@ -1793,6 +1851,9 @@
|
|
|
1793
1851
|
init: [{ type: i0.Output, args: ['init',] }],
|
|
1794
1852
|
reload: [{ type: i0.Input, args: ['reload',] }],
|
|
1795
1853
|
select: [{ type: i0.Output, args: ['select',] }],
|
|
1854
|
+
draw: [{ type: i0.Output, args: ['draw',] }],
|
|
1855
|
+
page: [{ type: i0.Output, args: ['page',] }],
|
|
1856
|
+
scroll: [{ type: i0.Output, args: ['scroll',] }],
|
|
1796
1857
|
selectedItems: [{ type: i0.Output, args: ['selectedItems',] }],
|
|
1797
1858
|
scrollable: [{ type: i0.Input }],
|
|
1798
1859
|
serverSide: [{ type: i0.Input }],
|
|
@@ -2268,7 +2329,10 @@
|
|
|
2268
2329
|
var value = _this.formComponent.submission.data[key];
|
|
2269
2330
|
// the filter with type is a string and is not empty
|
|
2270
2331
|
var isEmptyString = typeof value === 'string' && value.length === 0;
|
|
2271
|
-
|
|
2332
|
+
// do not include empty objects in filter
|
|
2333
|
+
var isEmptyObject = typeof value === 'object' && Object.keys(value).length === 0;
|
|
2334
|
+
// make isEmptyString, isEmptyObject mutex
|
|
2335
|
+
if (!isEmptyString && !isEmptyObject) {
|
|
2272
2336
|
Object.defineProperty(_this.filter, key, {
|
|
2273
2337
|
configurable: true,
|
|
2274
2338
|
enumerable: true,
|
|
@@ -4317,7 +4381,7 @@
|
|
|
4317
4381
|
AdvancedAggregatorListComponent.decorators = [
|
|
4318
4382
|
{ type: i0.Component, args: [{
|
|
4319
4383
|
selector: 'app-advanced-aggregator-list',
|
|
4320
|
-
template: "<div id=\"group-list\" class=\"flex-column\" *ngIf=\"config && config.columns\">\n <ul class=\"sis--list-group sis--list-group-header\">\n <li class=\"sis--list-group-item text-wrap\">\n <div class=\"d-flex justify-content-center align-items-center\" *ngIf=\"body && body.length > 0\">\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column\"></div>\n <div *ngFor=\"let column of config.columns; let i = index\" class=\"text-left\"\n [class]=\"config.columns[i].length\"\n [translate]=\"config.columns[i].type === 'action' ? '' : column.title\" [ngClass]=\"{\n 'd-none': config.columns[i].hidden\n }\"></div>\n </div>\n </li>\n </ul>\n\n <!-- The list of entries -->\n <ul class=\"sis--list-group sis--list-group-body\" *ngIf=\"body && body.length > 0\">\n <li class=\"sis--list-group-item text-wrap\" *ngFor=\"let entry of body | orderBy: config.orderBy\">\n <div class=\"d-flex justify-content-center align-items-center list-color\">\n <!-- The list of actions -->\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column text-left pr-0\">\n <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, entry)\"\n [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n <i
|
|
4384
|
+
template: "<div id=\"group-list\" class=\"flex-column\" *ngIf=\"config && config.columns\">\n <ul class=\"sis--list-group sis--list-group-header\">\n <li class=\"sis--list-group-item text-wrap\">\n <div class=\"d-flex justify-content-center align-items-center\" *ngIf=\"body && body.length > 0\">\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column\"></div>\n <div *ngFor=\"let column of config.columns; let i = index\" class=\"text-left\"\n [class]=\"config.columns[i].length\"\n [translate]=\"config.columns[i].type === 'action' ? '' : column.title\" [ngClass]=\"{\n 'd-none': config.columns[i].hidden\n }\"></div>\n </div>\n </li>\n </ul>\n\n <!-- The list of entries -->\n <ul class=\"sis--list-group sis--list-group-body\" *ngIf=\"body && body.length > 0\">\n <li class=\"sis--list-group-item text-wrap\" *ngFor=\"let entry of body | orderBy: config.orderBy\">\n <div class=\"d-flex justify-content-center align-items-center list-color\">\n <!-- The list of actions -->\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column text-left pr-0\">\n <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, entry)\"\n [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n <i class=\"\" [class]=\"'fas text-indigo ml-2 ' + 'fa-' + action.icon\"></i>\n </button>\n <span class=\"px-0\">\n <i class=\"fa fa-fw\"> </i>\n </span>\n\n </div>\n <!-- The list of data -->\n <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.columns[i].length\" class=\"text-left\"\n [ngClass]=\"{\n 'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n 'd-none': config.columns[i].hidden,\n 'd-md-block': !config.columns[i].hidden\n }\"\n [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n <span class=\"text-secondary\"\n *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') && config.columns[i].type === 'text')\"\n [ngClass]=\"{\n 'font-xs': config.columns[i].variant !== 'primary',\n 'text-body': config.columns[i].variant === 'primary',\n 'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && entry[config.columns[i].condition],\n 'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !entry[config.columns[i].condition],\n 'font-lg': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length > 3,\n 'font-2xl': config.columns[i].variant === 'redGreen' && entry[column.name] && entry[column.name].length <= 3\n }\">\n {{entry[column.name] || '-'}}\n </span>\n\n <span *ngIf=\"config.columns[i].type === 'boolean'\">\n <i class=\"fa font-lg\" [ngClass]=\"{\n 'fa-check text-success': entry[column.name].toString() === config.columns[i].trueValue,\n 'fa-times text-danger': entry[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant !== 'checkOrDash'\n }\"></i>\n <span\n *ngIf=\"entry[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant === 'checkOrDash'\"\n class=\"text-secondary font-xs\">-</span>\n </span>\n </div>\n </div>\n <div *ngIf=\"entry && entry.subitems\">\n <div *ngFor=\"let subitem of entry.subitems\" class=\"d-flex justify-content-center align-items-center list-color\">\n <div *ngIf=\"config.actions && config.actions.length > 0\" class=\"sis--list-group-item_sm_column text-left pr-0\">\n <span class=\"px-0\">\n <i class=\"fa fa-fw\"> </i>\n </span>\n <button *ngFor=\"let action of config.actions\" (click)=\"callCallback(action.identifier, subitem)\"\n [title]=\"(action.title ? action.title : '') | translate \" class=\"btn btn-default px-0\">\n <i *ngIf=\"action.type === 'edit'\" class=\"fas fa-edit text-indigo\"></i>\n </button>\n </div>\n <div class=\"text-left\"></div>\n <div *ngFor=\"let column of config.columns; let i=index\" [class]=\"config.columns[i].length\" class=\"text-left\"\n [ngClass]=\"{\n 'text-truncate': config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate,\n 'd-none': config.columns[i].hidden,\n 'd-md-block': !config.columns[i].hidden\n }\"\n [title]=\"config.columns[i].hasOwnProperty('truncate') && config.columns[i].truncate ? entry[column.name] : ''\">\n <span class=\"text-secondary\"\n *ngIf=\"!config.columns[i].hasOwnProperty('type') || (config.columns[i].hasOwnProperty('type') && config.columns[i].type === 'text')\"\n [ngClass]=\"{\n 'font-xs': config.columns[i].variant !== 'primary',\n 'text-body': config.columns[i].variant === 'primary',\n 'text-success': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && subitem[config.columns[i].condition],\n 'text-danger': config.columns[i].variant === 'redGreen' && config.columns[i].hasOwnProperty('condition') && !subitem[config.columns[i].condition],\n 'font-lg': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length > 3,\n 'font-2xl': config.columns[i].variant === 'redGreen' && subitem[column.name] && subitem[column.name].length <= 3\n }\">\n {{subitem[column.name] || '-'}}\n </span>\n <span *ngIf=\"config.columns[i].type === 'boolean'\">\n <i class=\"fa font-lg\" [ngClass]=\"{\n 'fa-check text-success': subitem[column.name].toString() === config.columns[i].trueValue,\n 'fa-times text-danger': subitem[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant !== 'checkOrDash'\n }\"></i>\n <span\n *ngIf=\"subitem[column.name].toString() !== config.columns[i].trueValue && config.columns[i].variant === 'checkOrDash'\"\n class=\"text-secondary font-xs\">-</span>\n </span>\n </div>\n </div>\n </div>\n </li>\n </ul>\n</div>\n"
|
|
4321
4385
|
}] }
|
|
4322
4386
|
];
|
|
4323
4387
|
/** @nocollapse */
|