@universis/ngx-tables 0.6.21 → 0.7.1

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) {
@@ -542,6 +544,7 @@ class AdvancedTableComponent {
         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;
@@ -549,6 +552,7 @@ class AdvancedTableComponent {
         this.lengthMenu = [50, 100, 200, 500];
         this.paging = true;
         this.pageLength = 25;
+        this.stateSave = false;
         this.scrollY = 800;
         this.scrollX = true;
         /**
@@ -1045,7 +1049,14 @@ class AdvancedTableComponent {
                     }, 0);
                 }
             });
-            tableElement.on('draw.dt', (event) => {
+            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();
@@ -1204,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;
                         }
@@ -1217,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
@@ -1294,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, {
@@ -1328,8 +1353,8 @@ class AdvancedTableComponent {
                         });
                     }
                 });
-                this.init.emit();
             }).DataTable(settings);
+            this.init.emit();
             // show or hide header
             if (!this.showHeader) {
                 this._element.nativeElement
@@ -1598,6 +1623,7 @@ AdvancedTableComponent.propDecorators = {
     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 }],
@@ -1605,6 +1631,9 @@ AdvancedTableComponent.propDecorators = {
     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 }],
@@ -2745,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;
     }
@@ -2892,6 +2922,9 @@ class AdvancedTableSearchComponent extends AdvancedTableSearchBaseComponent {
                     queryParamsHandling: 'merge',
                 });
             }
+            this.filterChange.emit({
+                q: searchText
+            });
             // otherwise do search
             this.table.search(searchText);
             return false;
@@ -3102,6 +3135,7 @@ class AdvancedTableSearchComponent extends AdvancedTableSearchBaseComponent {
                 else {
                     this.table.query = query;
                 }
+                this.filterChange.emit(this.filter);
                 this.table.fetch();
             }
         });
@@ -3230,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 = {
@@ -3527,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) {
@@ -4355,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) {
@@ -4386,7 +4598,8 @@ TablesModule.decorators = [
                     SharedModule,
                     ModalModule,
                     ProgressbarModule,
-                    NgPipesModule
+                    NgPipesModule,
+                    StoreModule.forFeature(featureName, tableReducers)
                 ],
                 providers: [DatePipe, TemplatePipe,
                     {
@@ -4416,7 +4629,9 @@ TablesModule.decorators = [
                     AdvancedAggregatorListComponent,
                     AdvancedAggregatorPipe,
                     ParseTitlePipe,
-                    AddItemsComponent
+                    AddItemsComponent,
+                    AdvancedSearchState,
+                    AdvancedTableState
                 ],
                 exports: [
                     AdvancedTableComponent,
@@ -4432,7 +4647,9 @@ TablesModule.decorators = [
                     AdvancedTableEditorDirective,
                     AdvancedAggregatorComponent,
                     AdvancedAggregatorListComponent,
-                    AddItemsComponent
+                    AddItemsComponent,
+                    AdvancedSearchState,
+                    AdvancedTableState
                 ],
                 entryComponents: [
                     AdvancedTableModalBaseComponent,
@@ -4457,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