@universis/ngx-tables 0.6.20 → 0.7.2

package/bundles/universis-ngx-tables.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('iso-639-1/build'), require('rxjs'), require('jquery'), require('datatables.net'), require('lodash'), require('datatables.net-scroller'), require('rxjs/add/observable/combineLatest'), require('@angular/common/http'), require('@themost/client'), require('@themost/angular'), require('@angular/core'), require('@angular/common'), require('@ngx-translate/core'), require('@angular/forms'), require('@universis/common'), require('@universis/common/routing'), require('@universis/forms'), require('angular-formio'), require('@angular/router'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/progressbar'), require('ngx-pipes')) :
-    typeof define === 'function' && define.amd ? define('@universis/ngx-tables', ['exports', 'iso-639-1/build', 'rxjs', 'jquery', 'datatables.net', 'lodash', 'datatables.net-scroller', 'rxjs/add/observable/combineLatest', '@angular/common/http', '@themost/client', '@themost/angular', '@angular/core', '@angular/common', '@ngx-translate/core', '@angular/forms', '@universis/common', '@universis/common/routing', '@universis/forms', 'angular-formio', '@angular/router', 'ngx-bootstrap/modal', 'ngx-bootstrap/progressbar', 'ngx-pipes'], factory) :
-    (factory((global.universis = global.universis || {}, global.universis['ngx-tables'] = {}),global.ISO6391,global.rxjs,global.jQuery_,null,global.lodash,null,global.rxjs['add/observable/combineLatest'],global.ng.common.http,global.client,global.i1,global.ng.core,global.ng.common,global.core,global.ng.forms,global.i2,global.routing,global.forms$1,global.angularFormio,global.ng.router,global.modal,global.progressbar,global.ngxPipes));
-}(this, (function (exports,ISO6391,rxjs,jQuery_,datatables_net,lodash,datatables_netScroller,combineLatest,http,client,i1,i0,common,core,forms,i2,routing,forms$1,angularFormio,i1$1,modal,progressbar,ngxPipes) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('iso-639-1/build'), require('rxjs'), require('jquery'), require('datatables.net'), require('lodash'), require('datatables.net-scroller'), require('rxjs/add/observable/combineLatest'), require('@angular/common/http'), require('@themost/client'), require('@themost/angular'), require('@angular/common'), require('@ngx-translate/core'), require('@angular/forms'), require('@universis/common'), require('@universis/common/routing'), require('@universis/forms'), require('angular-formio'), require('@angular/router'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/progressbar'), require('ngx-pipes'), require('@angular/core'), require('@ngrx/store'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@universis/ngx-tables', ['exports', 'iso-639-1/build', 'rxjs', 'jquery', 'datatables.net', 'lodash', 'datatables.net-scroller', 'rxjs/add/observable/combineLatest', '@angular/common/http', '@themost/client', '@themost/angular', '@angular/common', '@ngx-translate/core', '@angular/forms', '@universis/common', '@universis/common/routing', '@universis/forms', 'angular-formio', '@angular/router', 'ngx-bootstrap/modal', 'ngx-bootstrap/progressbar', 'ngx-pipes', '@angular/core', '@ngrx/store', 'rxjs/operators'], factory) :
+    (factory((global.universis = global.universis || {}, global.universis['ngx-tables'] = {}),global.ISO6391,global.rxjs,global.jQuery_,null,global.lodash,null,global.rxjs['add/observable/combineLatest'],global.ng.common.http,global.client,global.i1,global.ng.common,global.core,global.ng.forms,global.i2,global.routing,global.forms$1,global.angularFormio,global.ng.router,global.modal,global.progressbar,global.ngxPipes,global.ng.core,global.store,global.rxjs.operators));
+}(this, (function (exports,ISO6391,rxjs,jQuery_,datatables_net,lodash,datatables_netScroller,combineLatest,http,client,i1,common,core,forms,i2,routing,forms$1,angularFormio,i1$1,modal,progressbar,ngxPipes,i0,store,operators) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -779,12 +779,17 @@
             this.init = new i0.EventEmitter();
             this.reload = new i0.EventEmitter();
             this.select = new i0.EventEmitter();
+            this.draw = new i0.EventEmitter();
+            this.page = new i0.EventEmitter();
+            this.order = new i0.EventEmitter();
+            this.scroll = new i0.EventEmitter();
             this.selectedItems = new i0.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;
             /**
@@ -1303,6 +1308,27 @@
                         }, 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)
@@ -1327,10 +1353,6 @@
                     // 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) {
@@ -1435,7 +1457,7 @@
                         // 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 client.ClientDataQueryable ? self._query : self._context.model(self.config.model).asQueryable();
                         // apply paging params
@@ -1542,6 +1564,20 @@
                     },
                     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, {
@@ -1562,15 +1598,22 @@
                 }
                 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
@@ -1589,6 +1632,16 @@
                 }
             }
         };
+        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;
@@ -1821,12 +1874,19 @@
             init: [{ type: i0.Output, args: ['init',] }],
             reload: [{ type: i0.Input, args: ['reload',] }],
             select: [{ type: i0.Output, args: ['select',] }],
+            draw: [{ type: i0.Output, args: ['draw',] }],
+            page: [{ type: i0.Output, args: ['page',] }],
+            order: [{ type: i0.Output, args: ['order',] }],
+            scroll: [{ type: i0.Output, args: ['scroll',] }],
             selectedItems: [{ type: i0.Output, args: ['selectedItems',] }],
             scrollable: [{ type: i0.Input }],
             serverSide: [{ type: i0.Input }],
             lengthMenu: [{ type: i0.Input }],
             paging: [{ type: i0.Input }],
             pageLength: [{ type: i0.Input }],
+            stateSave: [{ type: i0.Input }],
+            stateLoadCallback: [{ type: i0.Input }],
+            stateSaveCallback: [{ type: i0.Input }],
             scrollY: [{ type: i0.Input }],
             scrollX: [{ type: i0.Input }],
             selectable: [{ type: i0.Input }],
@@ -2948,6 +3008,7 @@
             _this.showMore = true;
             _this.mergeQueryParams = false;
             _this.viewChange = new i0.EventEmitter();
+            _this.listChange = new i0.EventEmitter();
             _this.userSearchList = [];
             _this.selectedList = null;
             return _this;
@@ -3102,6 +3163,9 @@
                         queryParamsHandling: 'merge',
                     });
                 }
+                this.filterChange.emit({
+                    q: searchText
+                });
                 // otherwise do search
                 this.table.search(searchText);
                 return false;
@@ -3323,6 +3387,7 @@
                             else {
                                 this.table.query = query;
                             }
+                            this.filterChange.emit(this.filter);
                             this.table.fetch();
                             _a.label = 2;
                         case 2: return [2 /*return*/];
@@ -3472,7 +3537,8 @@
             showMore: [{ type: i0.Input }],
             mergeQueryParams: [{ type: i0.Input }],
             searchText: [{ type: i0.ViewChild, args: ['searchText',] }],
-            viewChange: [{ type: i0.Output, args: ['viewChange',] }]
+            viewChange: [{ type: i0.Output, args: ['viewChange',] }],
+            listChange: [{ type: i0.Output, args: ['listChange',] }]
         };
         return AdvancedTableSearchComponent;
     }(AdvancedTableSearchBaseComponent));
@@ -4798,6 +4864,199 @@
         }
     };
 
+    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 = store.createFeatureSelector(featureName);
+    var selectTable = store.createSelector(getTablesState, function (state, props) {
+        return state.tables[props.id];
+    });
+
+    var AdvancedTableState = /** @class */ (function () {
+        function AdvancedTableState(table, store$$1) {
+            this.table = table;
+            this.store = store$$1;
+        }
+        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(store.select(selectTable, { id: _this.tableState }), operators.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: i0.Directive, args: [{
+                        // tslint:disable-next-line: directive-selector
+                        selector: '[tableState]',
+                    },] }
+        ];
+        /** @nocollapse */
+        AdvancedTableState.ctorParameters = function () {
+            return [
+                { type: AdvancedTableComponent },
+                { type: store.Store, decorators: [{ type: i0.Optional }] }
+            ];
+        };
+        AdvancedTableState.propDecorators = {
+            tableState: [{ type: i0.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$$1) {
+            this.search = search;
+            this.store = store$$1;
+        }
+        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(store.select(selectTable, { id: this.searchState }), operators.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: i0.Directive, args: [{
+                        // tslint:disable-next-line: directive-selector
+                        selector: '[searchState]',
+                    },] }
+        ];
+        /** @nocollapse */
+        AdvancedSearchState.ctorParameters = function () {
+            return [
+                { type: AdvancedTableSearchComponent },
+                { type: store.Store, decorators: [{ type: i0.Optional }] }
+            ];
+        };
+        AdvancedSearchState.propDecorators = {
+            searchState: [{ type: i0.Input }]
+        };
+        return AdvancedSearchState;
+    }());
+
     var ɵ0 = FORMATTERS;
     var TablesModule = /** @class */ (function () {
         function TablesModule(_translateService) {
@@ -4831,7 +5090,8 @@
                             i2.SharedModule,
                             modal.ModalModule,
                             progressbar.ProgressbarModule,
-                            ngxPipes.NgPipesModule
+                            ngxPipes.NgPipesModule,
+                            store.StoreModule.forFeature(featureName, tableReducers)
                         ],
                         providers: [common.DatePipe, i2.TemplatePipe,
                             {
@@ -4861,7 +5121,9 @@
                             AdvancedAggregatorListComponent,
                             AdvancedAggregatorPipe,
                             ParseTitlePipe,
-                            AddItemsComponent
+                            AddItemsComponent,
+                            AdvancedSearchState,
+                            AdvancedTableState
                         ],
                         exports: [
                             AdvancedTableComponent,
@@ -4877,7 +5139,9 @@
                             AdvancedTableEditorDirective,
                             AdvancedAggregatorComponent,
                             AdvancedAggregatorListComponent,
-                            AddItemsComponent
+                            AddItemsComponent,
+                            AdvancedSearchState,
+                            AdvancedTableState
                         ],
                         entryComponents: [
                             AdvancedTableModalBaseComponent,
@@ -4906,6 +5170,11 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.ɵe = AdvancedSearchState;
+    exports.ɵf = AdvancedTableState;
+    exports.ɵd = featureName;
+    exports.ɵa = tableReducer;
+    exports.ɵc = tableReducers;
     exports.AdvancedListComponent = AdvancedListComponent;
     exports.AdvancedRowActionComponent = AdvancedRowActionComponent;
     exports.AdvancedSearchFormComponent = AdvancedSearchFormComponent;