@universis/ngx-tables 0.6.20 → 0.7.2

package/fesm2015/universis-ngx-tables.js

@@ -9,7 +9,6 @@ import { ClientDataQueryable, ResponseError, TextUtils } from '@themost/client';
 import { BehaviorSubject } from 'rxjs';
 import { AngularDataContext } from '@themost/angular';
 import { __awaiter } from 'tslib';
-import { Injectable, Directive, Output, EventEmitter, Pipe, Component, Input, ViewChild, ViewEncapsulation, ChangeDetectorRef, ElementRef, Inject, InjectionToken, Injector, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, 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 +20,9 @@ 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 { Injectable, Directive, Optional, Input, Output, EventEmitter, Pipe, Component, ViewChild, ViewEncapsulation, ChangeDetectorRef, ElementRef, Inject, InjectionToken, Injector, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, ChangeDetectionStrategy } from '@angular/core';
+import { createFeatureSelector, createSelector, select, Store, StoreModule } from '@ngrx/store';
+import { first } from 'rxjs/operators';
 
 class AdvancedColumnFormatter {
     static template(expr) {
@@ -540,12 +542,17 @@ class AdvancedTableComponent {
         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;
         /**
@@ -1042,6 +1049,27 @@ class AdvancedTableComponent {
                     }, 0);
                 }
             });
+            tableElement.on('order.dt', (event) => {
+                if (this.dataTable) {
+                    const order = this.dataTable.order();
+                    if (order && order.length) {
+                        this.order.emit(order);
+                    }
+                }
+            }).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)
@@ -1066,10 +1094,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) {
@@ -1170,11 +1194,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
@@ -1191,7 +1215,7 @@ class AdvancedTableComponent {
                         q.setParam('$orderby', orderByStr);
                     }
                     // configure $select parameter
-                    const select = self.config.columns.filter((column) => {
+                    const select$$1 = self.config.columns.filter((column) => {
                         if (column.virtual === true) {
                             return false;
                         }
@@ -1204,7 +1228,7 @@ class AdvancedTableComponent {
                             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
@@ -1281,6 +1305,20 @@ class AdvancedTableComponent {
                 },
                 language: Object.assign({}, self.translator.transform('Tables.DataTable'), { emptyTable: ' ' }),
             };
+            const 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, {
@@ -1301,15 +1339,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
+                        });
+                    }
+                });
+            }).DataTable(settings);
+            this.init.emit();
             // show or hide header
             if (!this.showHeader) {
                 this._element.nativeElement
@@ -1328,6 +1373,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;
@@ -1566,12 +1621,19 @@ 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',] }],
+    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 }],
@@ -2712,6 +2774,7 @@ class AdvancedTableSearchComponent extends AdvancedTableSearchBaseComponent {
         this.showMore = true;
         this.mergeQueryParams = false;
         this.viewChange = new EventEmitter();
+        this.listChange = new EventEmitter();
         this.userSearchList = [];
         this.selectedList = null;
     }
@@ -2859,6 +2922,9 @@ class AdvancedTableSearchComponent extends AdvancedTableSearchBaseComponent {
                     queryParamsHandling: 'merge',
                 });
             }
+            this.filterChange.emit({
+                q: searchText
+            });
             // otherwise do search
             this.table.search(searchText);
             return false;
@@ -3069,6 +3135,7 @@ class AdvancedTableSearchComponent extends AdvancedTableSearchBaseComponent {
                 else {
                     this.table.query = query;
                 }
+                this.filterChange.emit(this.filter);
                 this.table.fetch();
             }
         });
@@ -3197,7 +3264,8 @@ AdvancedTableSearchComponent.propDecorators = {
     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',] }]
 };
 
 const FORMATTERS = {
@@ -3494,8 +3562,8 @@ class BtnExpDirective {
     constructQueryParam(query, tableConfig) {
         let selectQuery = query.getParams().$select;
         let selectQueryArray = selectQuery.split(',');
-        selectQueryArray = selectQueryArray.map((select) => {
-            const words = select.split(' ');
+        selectQueryArray = selectQueryArray.map((select$$1) => {
+            const words = select$$1.split(' ');
             if (words.length === 3) {
                 if (tableConfig && tableConfig.columns) {
                     for (const column of tableConfig.columns) {
@@ -4322,6 +4390,183 @@ const TABLES_EN = {
     }
 };
 
+var TableActionTypes;
+(function (TableActionTypes) {
+    TableActionTypes["LoadFilter"] = "[Table] Load Filter";
+    TableActionTypes["AppendFilter"] = "[Table] Append Filter";
+    TableActionTypes["AppendState"] = "[Table] Append State";
+})(TableActionTypes || (TableActionTypes = {}));
+class AppendFilter {
+    constructor(id, filter) {
+        this.id = id;
+        this.filter = filter;
+        this.type = TableActionTypes.AppendFilter;
+    }
+}
+class AppendState {
+    constructor(id, data) {
+        this.id = id;
+        this.data = data;
+        this.type = TableActionTypes.AppendState;
+    }
+}
+
+const initialState = {};
+function tableReducer(state = initialState, action) {
+    switch (action.type) {
+        case TableActionTypes.LoadFilter:
+            return state[action.id];
+        case TableActionTypes.AppendFilter:
+            state[action.id] = Object.assign({}, state[action.id], { filter: action.filter });
+            return state;
+        case TableActionTypes.AppendState:
+            state[action.id] = Object.assign({}, state[action.id], { table: action.data });
+            return state;
+        default:
+            return state;
+    }
+}
+const tableReducers = {
+    tables: tableReducer,
+};
+const featureName = 'tables';
+const getTablesState = createFeatureSelector(featureName);
+const selectTable = createSelector(getTablesState, (state, props) => {
+    return state.tables[props.id];
+});
+
+class AdvancedTableState {
+    constructor(table, store) {
+        this.table = table;
+        this.store = store;
+    }
+    ngOnInit() {
+        if (this.store == null) {
+            return;
+        }
+        this.table.stateSave = true;
+        this.table.stateLoadCallback = (settings, callback) => {
+            this.store.pipe(select(selectTable, { id: this.tableState }), first()).subscribe((state) => {
+                return callback(state && state.table);
+            });
+        };
+        let firstDraw = true;
+        this.table.draw.subscribe(() => {
+            if (firstDraw === false) {
+                return;
+            }
+            if (this.table.dataTable == null) {
+                return;
+            }
+            firstDraw = false;
+            const loadeStateSettings = this.table.dataTable.settings()[0];
+            const scrollerSettings = loadeStateSettings.oSavedState &&
+                loadeStateSettings.oSavedState.scroller;
+            if (scrollerSettings && scrollerSettings.topRow) {
+                const scroller = this.table.dataTable.scroller();
+                scroller.scrollToRow(scrollerSettings.topRow, true);
+            }
+        });
+        this.table.stateSaveCallback = (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 = () => [
+    { type: AdvancedTableComponent },
+    { type: Store, decorators: [{ type: Optional }] }
+];
+AdvancedTableState.propDecorators = {
+    tableState: [{ type: Input }]
+};
+
+class AdvancedTableSearchComponentNotNull extends Error {
+    constructor() {
+        super('Advanced table search component cannot be empty at this context.');
+    }
+}
+class AdvancedSearchState {
+    constructor(search, store) {
+        this.search = search;
+        this.store = store;
+    }
+    ngOnInit() {
+        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((filter) => {
+                this.onSearchFilter(filter);
+            });
+            // handle table state (via directive)
+            const tableState = new AdvancedTableState(this.search.table, this.store);
+            tableState.tableState = this.searchState;
+            tableState.ngOnInit();
+            // handle table init
+            this.search.table.init.subscribe(() => {
+                return this.onTableInit();
+            });
+        }
+    }
+    onTableInit() {
+        this.store.pipe(select(selectTable, { id: this.searchState }), first()).subscribe((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((item) => {
+                        return item.name === state.filter.s;
+                    });
+                    return this.search.search();
+                }
+                if (state.filter) {
+                    this.search.filter = state.filter;
+                }
+                return this.search.search();
+            }
+        });
+    }
+    onSearchFilter(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 = () => [
+    { type: AdvancedTableSearchComponent },
+    { type: Store, decorators: [{ type: Optional }] }
+];
+AdvancedSearchState.propDecorators = {
+    searchState: [{ type: Input }]
+};
+
 const ɵ0 = FORMATTERS;
 class TablesModule {
     constructor(_translateService) {
@@ -4353,7 +4598,8 @@ TablesModule.decorators = [
                     SharedModule,
                     ModalModule,
                     ProgressbarModule,
-                    NgPipesModule
+                    NgPipesModule,
+                    StoreModule.forFeature(featureName, tableReducers)
                 ],
                 providers: [DatePipe, TemplatePipe,
                     {
@@ -4383,7 +4629,9 @@ TablesModule.decorators = [
                     AdvancedAggregatorListComponent,
                     AdvancedAggregatorPipe,
                     ParseTitlePipe,
-                    AddItemsComponent
+                    AddItemsComponent,
+                    AdvancedSearchState,
+                    AdvancedTableState
                 ],
                 exports: [
                     AdvancedTableComponent,
@@ -4399,7 +4647,9 @@ TablesModule.decorators = [
                     AdvancedTableEditorDirective,
                     AdvancedAggregatorComponent,
                     AdvancedAggregatorListComponent,
-                    AddItemsComponent
+                    AddItemsComponent,
+                    AdvancedSearchState,
+                    AdvancedTableState
                 ],
                 entryComponents: [
                     AdvancedTableModalBaseComponent,
@@ -4424,6 +4674,6 @@ TablesModule.ctorParameters = () => [
  * 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