@universis/ngx-tables 0.6.21 → 0.7.1

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() {
@@ -602,6 +604,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         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;
@@ -609,6 +612,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         this.lengthMenu = [50, 100, 200, 500];
         this.paging = true;
         this.pageLength = 25;
+        this.stateSave = false;
         this.scrollY = 800;
         this.scrollX = true;
         /**
@@ -1127,7 +1131,14 @@ var AdvancedTableComponent = /** @class */ (function () {
                     }, 0);
                 }
             });
-            tableElement_1.on('draw.dt', function (event) {
+            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();
@@ -1286,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;
                         }
@@ -1299,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
@@ -1376,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, {
@@ -1410,8 +1435,8 @@ var AdvancedTableComponent = /** @class */ (function () {
                         });
                     }
                 });
-                _this.init.emit();
             }).DataTable(settings);
+            this.init.emit();
             // show or hide header
             if (!this.showHeader) {
                 this._element.nativeElement
@@ -1672,6 +1697,7 @@ var AdvancedTableComponent = /** @class */ (function () {
         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 }],
@@ -1679,6 +1705,9 @@ var AdvancedTableComponent = /** @class */ (function () {
         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 }],
@@ -2776,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;
@@ -2930,6 +2960,9 @@ var AdvancedTableSearchComponent = /** @class */ (function (_super) {
                     queryParamsHandling: 'merge',
                 });
             }
+            this.filterChange.emit({
+                q: searchText
+            });
             // otherwise do search
             this.table.search(searchText);
             return false;
@@ -3148,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*/];
@@ -3294,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));
@@ -3642,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 {
@@ -4570,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) {
@@ -4603,7 +4825,8 @@ var TablesModule = /** @class */ (function () {
                         SharedModule,
                         ModalModule,
                         ProgressbarModule,
-                        NgPipesModule
+                        NgPipesModule,
+                        StoreModule.forFeature(featureName, tableReducers)
                     ],
                     providers: [DatePipe, TemplatePipe,
                         {
@@ -4633,7 +4856,9 @@ var TablesModule = /** @class */ (function () {
                         AdvancedAggregatorListComponent,
                         AdvancedAggregatorPipe,
                         ParseTitlePipe,
-                        AddItemsComponent
+                        AddItemsComponent,
+                        AdvancedSearchState,
+                        AdvancedTableState
                     ],
                     exports: [
                         AdvancedTableComponent,
@@ -4649,7 +4874,9 @@ var TablesModule = /** @class */ (function () {
                         AdvancedTableEditorDirective,
                         AdvancedAggregatorComponent,
                         AdvancedAggregatorListComponent,
-                        AddItemsComponent
+                        AddItemsComponent,
+                        AdvancedSearchState,
+                        AdvancedTableState
                     ],
                     entryComponents: [
                         AdvancedTableModalBaseComponent,
@@ -4676,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