@universis/ngx-tables 0.6.20 → 0.7.2

package/fesm5/universis-ngx-tables.js

@@ -8,8 +8,6 @@ import { HttpClient } from '@angular/common/http';
 import { ClientDataQueryable, ResponseError, TextUtils } from '@themost/client';
 import { BehaviorSubject } from 'rxjs';
 import { AngularDataContext } from '@themost/angular';
-import { __awaiter, __generator, __extends, __values, __assign, __spread } from 'tslib';
-import { Injectable, Pipe, Component, ElementRef, Input, ViewChild, ViewEncapsulation, EventEmitter, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, Directive, HostListener, ChangeDetectorRef, InjectionToken, Inject, Injector, ChangeDetectionStrategy } from '@angular/core';
 import { DatePipe, CommonModule } from '@angular/common';
 import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { FormArray, FormBuilder, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -21,6 +19,10 @@ import { ActivatedRoute, Router, NavigationStart, RouterModule } from '@angular/
 import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { GroupByPipe, NgPipesModule } from 'ngx-pipes';
+import { __extends, __assign, __awaiter, __generator, __values, __spread } from 'tslib';
+import { Injectable, Directive, Optional, Input, Pipe, Component, ElementRef, ViewChild, ViewEncapsulation, EventEmitter, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, ChangeDetectorRef, InjectionToken, Inject, Injector, ChangeDetectionStrategy } from '@angular/core';
+import { createFeatureSelector, createSelector, select, Store, StoreModule } from '@ngrx/store';
+import { first } from 'rxjs/operators';
 
 var AdvancedColumnFormatter = /** @class */ (function () {
     function AdvancedColumnFormatter() {
@@ -600,12 +602,17 @@ var AdvancedTableComponent = /** @class */ (function () {
         this.init = new EventEmitter();
         this.reload = new EventEmitter();
         this.select = new EventEmitter();
+        this.draw = new EventEmitter();
+        this.page = new EventEmitter();
+        this.order = new EventEmitter();
+        this.scroll = new EventEmitter();
         this.selectedItems = new EventEmitter();
         this.scrollable = true;
         this.serverSide = true;
         this.lengthMenu = [50, 100, 200, 500];
         this.paging = true;
         this.pageLength = 25;
+        this.stateSave = false;
         this.scrollY = 800;
         this.scrollX = true;
         /**
@@ -1124,6 +1131,27 @@ var AdvancedTableComponent = /** @class */ (function () {
                     }, 0);
                 }
             });
+            tableElement_1.on('order.dt', function (event) {
+                if (_this.dataTable) {
+                    var order = _this.dataTable.order();
+                    if (order && order.length) {
+                        _this.order.emit(order);
+                    }
+                }
+            }).on('draw.dt', function (event) {
+                _this.draw.emit();
+                if (_this.dataTable) {
+                    var 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)
@@ -1148,10 +1176,6 @@ var AdvancedTableComponent = /** @class */ (function () {
                 // user interface additions
                 // handle page change event (a trick for firing draw.dt events)
                 tableElement_1
-                    // for each page
-                    .on('page.dt', function ($event) {
-                    var info = _this.dataTable.page.info();
-                })
                     // handle draw events
                     .on('draw.dt', function () {
                     if (_this.customSelect) {
@@ -1256,7 +1280,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                     // get page size param
                     var top = aoData[4].value;
                     // get search value
-                    var searchText = aoData[5].value;
+                    var search = aoData[5].value;
                     // get data queryable
                     var q = self._query instanceof ClientDataQueryable ? self._query : self._context.model(self.config.model).asQueryable();
                     // apply paging params
@@ -1273,7 +1297,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                         q.setParam('$orderby', orderByStr);
                     }
                     // configure $select parameter
-                    var select = self.config.columns.filter(function (column) {
+                    var select$$1 = self.config.columns.filter(function (column) {
                         if (column.virtual === true) {
                             return false;
                         }
@@ -1286,7 +1310,7 @@ var AdvancedTableComponent = /** @class */ (function () {
                             return column.name;
                         }
                     });
-                    q.select.apply(q, select);
+                    q.select.apply(q, select$$1);
                     // configure $filter
                     if (queryParams.$filter && queryParams.$filter.length) {
                         // set route filter
@@ -1363,6 +1387,20 @@ var AdvancedTableComponent = /** @class */ (function () {
                 },
                 language: Object.assign({}, self.translator.transform('Tables.DataTable'), { emptyTable: ' ' }),
             };
+            var stateSettings = {
+                stateSave: this.stateSave
+            };
+            if (this.stateLoadCallback) {
+                Object.assign(stateSettings, {
+                    stateLoadCallback: this.stateLoadCallback
+                });
+            }
+            if (this.stateSaveCallback) {
+                Object.assign(stateSettings, {
+                    stateSaveCallback: this.stateSaveCallback
+                });
+            }
+            Object.assign(settings, stateSettings);
             if (this.scrollable) {
                 // set continuous scrolling
                 Object.assign(settings, {
@@ -1383,15 +1421,22 @@ var AdvancedTableComponent = /** @class */ (function () {
             }
             if (this.selectable) ;
             // handle init.dt event and emit local event
-            this.dataTable = tableElement_1.DataTable(settings);
-            tableElement_1.on('init.dt', function () {
-                if (_this.dataTable == null) {
-                    return;
-                }
-                // restore default empty table html
-                // (due to ng async binding)
-                _this.init.emit(_this.dataTable);
-            });
+            this.dataTable = tableElement_1.on('init.dt', function (event) {
+                var scroller = jQuery(event.target).parent();
+                // handle scrolling
+                scroller.on('scroll', function (scrollEvent) {
+                    var target = jQuery(scrollEvent.target);
+                    var top = target.scrollTop();
+                    var left = target.scrollLeft();
+                    if (_this.dataTable) {
+                        _this.scroll.emit({
+                            top: top,
+                            left: left
+                        });
+                    }
+                });
+            }).DataTable(settings);
+            this.init.emit();
             // show or hide header
             if (!this.showHeader) {
                 this._element.nativeElement
@@ -1410,6 +1455,16 @@ var AdvancedTableComponent = /** @class */ (function () {
             }
         }
     };
+    AdvancedTableComponent.prototype.scrollTop = function (value) {
+        if (this.dataTable) {
+            this.dataTable.parent().scrollTop(value);
+        }
+    };
+    AdvancedTableComponent.prototype.scrollLeft = function (value) {
+        if (this.dataTable) {
+            this.dataTable.parent().scrollLeft(value);
+        }
+    };
     Object.defineProperty(AdvancedTableComponent.prototype, "lastQuery", {
         get: function () {
             var _this = this;
@@ -1640,12 +1695,19 @@ var AdvancedTableComponent = /** @class */ (function () {
         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',] }],
+        order: [{ type: Output, args: ['order',] }],
+        scroll: [{ type: Output, args: ['scroll',] }],
         selectedItems: [{ type: Output, args: ['selectedItems',] }],
         scrollable: [{ type: Input }],
         serverSide: [{ type: Input }],
         lengthMenu: [{ type: Input }],
         paging: [{ type: Input }],
         pageLength: [{ type: Input }],
+        stateSave: [{ type: Input }],
+        stateLoadCallback: [{ type: Input }],
+        stateSaveCallback: [{ type: Input }],
         scrollY: [{ type: Input }],
         scrollX: [{ type: Input }],
         selectable: [{ type: Input }],
@@ -2743,6 +2805,7 @@ var AdvancedTableSearchComponent = /** @class */ (function (_super) {
         _this.showMore = true;
         _this.mergeQueryParams = false;
         _this.viewChange = new EventEmitter();
+        _this.listChange = new EventEmitter();
         _this.userSearchList = [];
         _this.selectedList = null;
         return _this;
@@ -2897,6 +2960,9 @@ var AdvancedTableSearchComponent = /** @class */ (function (_super) {
                     queryParamsHandling: 'merge',
                 });
             }
+            this.filterChange.emit({
+                q: searchText
+            });
             // otherwise do search
             this.table.search(searchText);
             return false;
@@ -3115,6 +3181,7 @@ var AdvancedTableSearchComponent = /** @class */ (function (_super) {
                         else {
                             this.table.query = query;
                         }
+                        this.filterChange.emit(this.filter);
                         this.table.fetch();
                         _a.label = 2;
                     case 2: return [2 /*return*/];
@@ -3261,7 +3328,8 @@ var AdvancedTableSearchComponent = /** @class */ (function (_super) {
         showMore: [{ type: Input }],
         mergeQueryParams: [{ type: Input }],
         searchText: [{ type: ViewChild, args: ['searchText',] }],
-        viewChange: [{ type: Output, args: ['viewChange',] }]
+        viewChange: [{ type: Output, args: ['viewChange',] }],
+        listChange: [{ type: Output, args: ['listChange',] }]
     };
     return AdvancedTableSearchComponent;
 }(AdvancedTableSearchBaseComponent));
@@ -3609,9 +3677,9 @@ var BtnExpDirective = /** @class */ (function () {
         var _this = this;
         var selectQuery = query.getParams().$select;
         var selectQueryArray = selectQuery.split(',');
-        selectQueryArray = selectQueryArray.map(function (select) {
+        selectQueryArray = selectQueryArray.map(function (select$$1) {
             var e_1, _a, e_2, _b;
-            var words = select.split(' ');
+            var words = select$$1.split(' ');
             if (words.length === 3) {
                 if (tableConfig && tableConfig.columns) {
                     try {
@@ -4537,6 +4605,193 @@ var TABLES_EN = {
     }
 };
 
+var TableActionTypes;
+(function (TableActionTypes) {
+    TableActionTypes["LoadFilter"] = "[Table] Load Filter";
+    TableActionTypes["AppendFilter"] = "[Table] Append Filter";
+    TableActionTypes["AppendState"] = "[Table] Append State";
+})(TableActionTypes || (TableActionTypes = {}));
+var AppendFilter = /** @class */ (function () {
+    function AppendFilter(id, filter) {
+        this.id = id;
+        this.filter = filter;
+        this.type = TableActionTypes.AppendFilter;
+    }
+    return AppendFilter;
+}());
+var AppendState = /** @class */ (function () {
+    function AppendState(id, data) {
+        this.id = id;
+        this.data = data;
+        this.type = TableActionTypes.AppendState;
+    }
+    return AppendState;
+}());
+
+var initialState = {};
+function tableReducer(state, action) {
+    if (state === void 0) { state = initialState; }
+    switch (action.type) {
+        case TableActionTypes.LoadFilter:
+            return state[action.id];
+        case TableActionTypes.AppendFilter:
+            state[action.id] = __assign({}, state[action.id], { filter: action.filter });
+            return state;
+        case TableActionTypes.AppendState:
+            state[action.id] = __assign({}, state[action.id], { table: action.data });
+            return state;
+        default:
+            return state;
+    }
+}
+var tableReducers = {
+    tables: tableReducer,
+};
+var featureName = 'tables';
+var getTablesState = createFeatureSelector(featureName);
+var selectTable = createSelector(getTablesState, function (state, props) {
+    return state.tables[props.id];
+});
+
+var AdvancedTableState = /** @class */ (function () {
+    function AdvancedTableState(table, store) {
+        this.table = table;
+        this.store = store;
+    }
+    AdvancedTableState.prototype.ngOnInit = function () {
+        var _this = this;
+        if (this.store == null) {
+            return;
+        }
+        this.table.stateSave = true;
+        this.table.stateLoadCallback = function (settings, callback) {
+            _this.store.pipe(select(selectTable, { id: _this.tableState }), first()).subscribe(function (state) {
+                return callback(state && state.table);
+            });
+        };
+        var firstDraw = true;
+        this.table.draw.subscribe(function () {
+            if (firstDraw === false) {
+                return;
+            }
+            if (_this.table.dataTable == null) {
+                return;
+            }
+            firstDraw = false;
+            var loadeStateSettings = _this.table.dataTable.settings()[0];
+            var scrollerSettings = loadeStateSettings.oSavedState &&
+                loadeStateSettings.oSavedState.scroller;
+            if (scrollerSettings && scrollerSettings.topRow) {
+                var scroller = _this.table.dataTable.scroller();
+                scroller.scrollToRow(scrollerSettings.topRow, true);
+            }
+        });
+        this.table.stateSaveCallback = function (settings, data) {
+            _this.store.dispatch(new AppendState(_this.tableState, data));
+        };
+    };
+    AdvancedTableState.decorators = [
+        { type: Directive, args: [{
+                    // tslint:disable-next-line: directive-selector
+                    selector: '[tableState]',
+                },] }
+    ];
+    /** @nocollapse */
+    AdvancedTableState.ctorParameters = function () { return [
+        { type: AdvancedTableComponent },
+        { type: Store, decorators: [{ type: Optional }] }
+    ]; };
+    AdvancedTableState.propDecorators = {
+        tableState: [{ type: Input }]
+    };
+    return AdvancedTableState;
+}());
+
+var AdvancedTableSearchComponentNotNull = /** @class */ (function (_super) {
+    __extends(AdvancedTableSearchComponentNotNull, _super);
+    function AdvancedTableSearchComponentNotNull() {
+        return _super.call(this, 'Advanced table search component cannot be empty at this context.') || this;
+    }
+    return AdvancedTableSearchComponentNotNull;
+}(Error));
+var AdvancedSearchState = /** @class */ (function () {
+    function AdvancedSearchState(search, store) {
+        this.search = search;
+        this.store = store;
+    }
+    AdvancedSearchState.prototype.ngOnInit = function () {
+        var _this = this;
+        if (this.store == null) {
+            return;
+        }
+        if (this.search == null) {
+            throw new AdvancedTableSearchComponentNotNull();
+        }
+        if (this.search.table) {
+            // set auto load to false
+            this.search.table.autoLoad = false;
+            // handle filtering
+            this.search.filterChange.subscribe(function (filter) {
+                _this.onSearchFilter(filter);
+            });
+            // handle table state (via directive)
+            var tableState = new AdvancedTableState(this.search.table, this.store);
+            tableState.tableState = this.searchState;
+            tableState.ngOnInit();
+            // handle table init
+            this.search.table.init.subscribe(function () {
+                return _this.onTableInit();
+            });
+        }
+    };
+    AdvancedSearchState.prototype.onTableInit = function () {
+        var _this = this;
+        this.store.pipe(select(selectTable, { id: this.searchState }), first()).subscribe(function (state) {
+            // use order
+            if (state) {
+                if (state.order && state.order.length) {
+                    _this.search.table.dataTable.order(state.order);
+                }
+                // use text search
+                if (state.filter && state.filter.q) {
+                    _this.search.text = state.filter.q;
+                    _this.search.collapsed = true;
+                    return _this.search.table.search(_this.search.text);
+                }
+                // use predefined search 
+                if (state.filter && state.filter.s) {
+                    _this.search.selectedList = _this.search.userSearchList.find(function (item) {
+                        return item.name === state.filter.s;
+                    });
+                    return _this.search.search();
+                }
+                if (state.filter) {
+                    _this.search.filter = state.filter;
+                }
+                return _this.search.search();
+            }
+        });
+    };
+    AdvancedSearchState.prototype.onSearchFilter = function (filter) {
+        this.store.dispatch(new AppendFilter(this.searchState, filter));
+    };
+    AdvancedSearchState.decorators = [
+        { type: Directive, args: [{
+                    // tslint:disable-next-line: directive-selector
+                    selector: '[searchState]',
+                },] }
+    ];
+    /** @nocollapse */
+    AdvancedSearchState.ctorParameters = function () { return [
+        { type: AdvancedTableSearchComponent },
+        { type: Store, decorators: [{ type: Optional }] }
+    ]; };
+    AdvancedSearchState.propDecorators = {
+        searchState: [{ type: Input }]
+    };
+    return AdvancedSearchState;
+}());
+
 var ɵ0 = FORMATTERS;
 var TablesModule = /** @class */ (function () {
     function TablesModule(_translateService) {
@@ -4570,7 +4825,8 @@ var TablesModule = /** @class */ (function () {
                         SharedModule,
                         ModalModule,
                         ProgressbarModule,
-                        NgPipesModule
+                        NgPipesModule,
+                        StoreModule.forFeature(featureName, tableReducers)
                     ],
                     providers: [DatePipe, TemplatePipe,
                         {
@@ -4600,7 +4856,9 @@ var TablesModule = /** @class */ (function () {
                         AdvancedAggregatorListComponent,
                         AdvancedAggregatorPipe,
                         ParseTitlePipe,
-                        AddItemsComponent
+                        AddItemsComponent,
+                        AdvancedSearchState,
+                        AdvancedTableState
                     ],
                     exports: [
                         AdvancedTableComponent,
@@ -4616,7 +4874,9 @@ var TablesModule = /** @class */ (function () {
                         AdvancedTableEditorDirective,
                         AdvancedAggregatorComponent,
                         AdvancedAggregatorListComponent,
-                        AddItemsComponent
+                        AddItemsComponent,
+                        AdvancedSearchState,
+                        AdvancedTableState
                     ],
                     entryComponents: [
                         AdvancedTableModalBaseComponent,
@@ -4643,6 +4903,6 @@ var TablesModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService };
+export { AdvancedSearchState as ɵe, AdvancedTableState as ɵf, featureName as ɵd, tableReducer as ɵa, tableReducers as ɵc, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService };
 
 //# sourceMappingURL=universis-ngx-tables.js.map