@universis/ngx-tables 0.6.18 → 0.6.21

package/fesm2015/universis-ngx-tables.js

@@ -540,6 +540,9 @@ class AdvancedTableComponent {
         this.init = new EventEmitter();
         this.reload = new EventEmitter();
         this.select = new EventEmitter();
+        this.draw = new EventEmitter();
+        this.page = new EventEmitter();
+        this.scroll = new EventEmitter();
         this.selectedItems = new EventEmitter();
         this.scrollable = true;
         this.serverSide = true;
@@ -667,32 +670,55 @@ class AdvancedTableComponent {
     // simple search
     search(searchText) {
         this.query = this.query || this._context.model(this.config.model).asQueryable();
-        if (searchText && this.config.searchExpression) {
-            // validate search text in double quotes
-            if (/^"(.*?)"$/.test(searchText)) {
-                this.query.setParam('$filter', this._template.transform(this.config.searchExpression, {
-                    text: searchText.replace(/^"|"$/g, ''),
-                }));
+        if (this.serverSide) {
+            if (searchText && this.config.searchExpression) {
+                // validate search text in double quotes
+                if (/^"(.*?)"$/.test(searchText)) {
+                    this.query.setParam('$filter', this._template.transform(this.config.searchExpression, {
+                        text: searchText.replace(/^"|"$/g, ''),
+                    }));
+                }
+                else {
+                    // try to split words
+                    const words = searchText.split(' ');
+                    // join words to a single filter
+                    const filter = words.map((word) => {
+                        return this._template.transform(this.config.searchExpression, {
+                            text: word,
+                        });
+                    }).join(' and ');
+                    // set filter
+                    this.query.setParam('$filter', filter);
+                }
             }
             else {
-                // try to split words
-                const words = searchText.split(' ');
-                // join words to a single filter
-                const filter = words.map((word) => {
-                    return this._template.transform(this.config.searchExpression, {
-                        text: word,
-                    });
-                }).join(' and ');
-                // set filter
-                this.query.setParam('$filter', filter);
+                // clear filter
+                this.query.setParam('$filter', null);
             }
+            this._firstLoad = false;
+            this.dataTable.draw();
         }
         else {
-            // clear filter
-            this.query.setParam('$filter', null);
+            // ensure empty table layout
+            this.resetEmptyTable();
+            // search locally
+            this.dataTable.search(searchText.trim()).draw();
+            // get indexes of filtered rows
+            const indexes = Array.from(this.dataTable.context[0].aiDisplay);
+            // set recordsFiltered
+            const recordsFiltered = indexes.length;
+            // set recordsTotal
+            const recordsTotal = indexes.length;
+            // retrieve data from indexes
+            const rows = Array.from(this.dataTable.rows().data());
+            const data = indexes.map(index => rows[index]);
+            // emit results to load output
+            this.load.emit({
+                data: data,
+                recordsFiltered: recordsFiltered,
+                recordsTotal: recordsTotal
+            });
         }
-        this._firstLoad = false;
-        this.dataTable.draw();
     }
     fetch(clearSelected) {
         // if data table is null
@@ -1019,6 +1045,20 @@ class AdvancedTableComponent {
                     }, 0);
                 }
             });
+            tableElement.on('draw.dt', (event) => {
+                this.draw.emit();
+                if (this.dataTable) {
+                    const info = this.dataTable.page.info();
+                    this.page.emit(info);
+                    try {
+                        this.dataTable.columns.adjust();
+                    }
+                    catch (err) {
+                        console.error('ERROR', 'An error occurred while adjusting table columns');
+                        console.error(err);
+                    }
+                }
+            });
             // allow selection
             if (this.selectable) {
                 // get first column (as row primary key)
@@ -1043,10 +1083,6 @@ class AdvancedTableComponent {
                 // user interface additions
                 // handle page change event (a trick for firing draw.dt events)
                 tableElement
-                    // for each page
-                    .on('page.dt', ($event) => {
-                    const info = this.dataTable.page.info();
-                })
                     // handle draw events
                     .on('draw.dt', () => {
                     if (this.customSelect) {
@@ -1147,11 +1183,11 @@ class AdvancedTableComponent {
                     // get order expression
                     const order = aoData[2].value;
                     // get skip records param
-                    const skip = aoData[3].value;
+                    let skip = aoData[3].value;
                     // get page size param
-                    const top = aoData[4].value;
+                    let top = aoData[4].value;
                     // get search value
-                    const searchText = aoData[5].value;
+                    const search = aoData[5].value;
                     // get data queryable
                     const q = self._query instanceof ClientDataQueryable ? self._query : self._context.model(self.config.model).asQueryable();
                     // apply paging params
@@ -1278,15 +1314,22 @@ class AdvancedTableComponent {
             }
             if (this.selectable) ;
             // handle init.dt event and emit local event
-            this.dataTable = tableElement.DataTable(settings);
-            tableElement.on('init.dt', () => {
-                if (this.dataTable == null) {
-                    return;
-                }
-                // restore default empty table html
-                // (due to ng async binding)
-                this.init.emit(this.dataTable);
-            });
+            this.dataTable = tableElement.on('init.dt', (event) => {
+                const scroller = jQuery(event.target).parent();
+                // handle scrolling
+                scroller.on('scroll', (scrollEvent) => {
+                    const target = jQuery(scrollEvent.target);
+                    const top = target.scrollTop();
+                    const left = target.scrollLeft();
+                    if (this.dataTable) {
+                        this.scroll.emit({
+                            top,
+                            left
+                        });
+                    }
+                });
+                this.init.emit();
+            }).DataTable(settings);
             // show or hide header
             if (!this.showHeader) {
                 this._element.nativeElement
@@ -1305,6 +1348,16 @@ class AdvancedTableComponent {
             }
         }
     }
+    scrollTop(value) {
+        if (this.dataTable) {
+            this.dataTable.parent().scrollTop(value);
+        }
+    }
+    scrollLeft(value) {
+        if (this.dataTable) {
+            this.dataTable.parent().scrollLeft(value);
+        }
+    }
     get lastQuery() {
         if (this.config == null) {
             return null;
@@ -1355,6 +1408,10 @@ class AdvancedTableComponent {
                 const query = this._context.model(this.config.model).asQueryable();
                 // select attributes
                 query.setParam('$select', this.lastQueryParams.$select);
+                if (this.lastQueryParams.$expand) {
+                    // apply expand attributes
+                    query.setParam('$expand', this.lastQueryParams.$expand);
+                }
                 // apply filter for row
                 findKeys.forEach((key) => {
                     const column = this.config.columns.find((col) => {
@@ -1441,7 +1498,8 @@ class AdvancedTableComponent {
         // due to ng data binding
         // empty table template has no translated text during ngOnInit()
         if (this.dataTable && this.dataTable.context[0]) {
-            this.dataTable.context[0].oLanguage.sEmptyTable = this.emptyTable.nativeElement.innerHTML;
+            this.dataTable.context[0].oLanguage.sEmptyTable =
+                this.dataTable.context[0].oLanguage.sZeroRecords = this.emptyTable.nativeElement.innerHTML;
         }
     }
     clearEmptyTable() {
@@ -1538,6 +1596,9 @@ AdvancedTableComponent.propDecorators = {
     init: [{ type: Output, args: ['init',] }],
     reload: [{ type: Input, args: ['reload',] }],
     select: [{ type: Output, args: ['select',] }],
+    draw: [{ type: Output, args: ['draw',] }],
+    page: [{ type: Output, args: ['page',] }],
+    scroll: [{ type: Output, args: ['scroll',] }],
     selectedItems: [{ type: Output, args: ['selectedItems',] }],
     scrollable: [{ type: Input }],
     serverSide: [{ type: Input }],
@@ -1983,7 +2044,10 @@ class AdvancedSearchFormComponent extends AdvancedTableSearchBaseComponent {
                 const value = this.formComponent.submission.data[key];
                 // the filter with type is a string and is not empty
                 const isEmptyString = typeof value === 'string' && value.length === 0;
-                if (!isEmptyString) {
+                // do not include empty objects in filter
+                const isEmptyObject = typeof value === 'object' && Object.keys(value).length === 0;
+                // make isEmptyString, isEmptyObject mutex
+                if (!isEmptyString && !isEmptyObject) {
                     Object.defineProperty(this.filter, key, {
                         configurable: true,
                         enumerable: true,
@@ -3863,7 +3927,7 @@ class AdvancedAggregatorListComponent {
 AdvancedAggregatorListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-advanced-aggregator-list',
-                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 *ngIf=\"action.type === 'edit'\" class=\"fas fa-edit text-indigo\"></i>\n          </button>\n          <span class=\"px-0\">\n            <i class=\"fa fa-fw\">&nbsp;</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          <button *ngIf=\"config.columns[i].type === 'action' && config.columns[i].variant === 'edit'\"\n            (click)=\"callCallback(config.columns[i].identifier, entry)\"\n            [title]=\"(config.columns[i].title ? config.columns[i].title : '') | translate \"\n            class=\"btn btn-default px-0 mx-0\">\n            <i class=\"fas fa-edit text-indigo\"></i>\n          </button>\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\">&nbsp;</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"
+                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\">&nbsp;</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\">&nbsp;</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"
             }] }
 ];
 /** @nocollapse */