wrong config caching (#251)

* wrong config caching

* test fix

cypress/integration/many-tables.spec.ts

@@ -29,6 +29,11 @@ context('Many tables', () => {
         .get('#configurationBasic > tbody > tr:nth-child(1) > td:nth-child(3) > div').contains('ZILLANET')
       ;
     });
+    it('has rows limit set to 3', () => {
+      cy
+        .get('#paginationconfigurationBasic > div > div.ngx-pagination-range > div > div > div')
+        .contains('3');
+    });
   });
 
   describe('configurationAdvanced', () => {
@@ -54,5 +59,10 @@ context('Many tables', () => {
         .get('#configurationAdvanced > tbody > tr:nth-child(1) > td:nth-child(3) > div').contains('KONGENE')
       ;
     });
+    it('has rows limit set to 4', () => {
+      cy
+        .get('#paginationconfigurationAdvanced > div > div.ngx-pagination-range > div > div > div')
+        .contains('4');
+    });
   });
 });

package.json

@@ -12,6 +12,7 @@
     "lint": "ng lint",
     "e2e": "npm run cy:ci",
     "cy:serve": "http-server dist/demo -p 4201",
+    "cy:local": "ng serve --port=4201",
     "cy:test": "cypress open",
     "cy:open": "cypress open",
     "cy:run": "cypress run",

projects/ngx-easy-table/src/lib/components/base/base.component.ts

@@ -9,7 +9,6 @@ import {
   OnChanges,
   OnInit,
   Output,
-  SimpleChange,
   SimpleChanges,
   TemplateRef,
   ViewChild,
@@ -68,15 +67,7 @@ export class BaseComponent implements OnInit, OnChanges {
   public config: Config;
   onSelectAllBinded = this.onSelectAll.bind(this);
 
-  @Input('configuration')
-  set configuration(value: Config) {
-    this.config = value;
-  }
-
-  get configuration(): Config {
-    return this.config;
-  }
-
+  @Input() configuration: Config;
   @Input() data: any[];
   @Input() pagination: Pagination;
   @Input() groupRowsBy: string;
@@ -108,10 +99,10 @@ export class BaseComponent implements OnInit, OnChanges {
       console.error('[columns] property required!');
     }
     if (this.configuration) {
-      DefaultConfigService.config = this.configuration;
+      this.config = this.configuration;
+    } else {
+      this.config = DefaultConfigService.config;
     }
-
-    this.config = DefaultConfigService.config;
     this.limit = this.config.rows;
     if (this.groupRowsBy) {
       this.grouped = GroupRowsService.doGroupRows(this.data, this.groupRowsBy);
@@ -120,10 +111,11 @@ export class BaseComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const data: SimpleChange = changes.data;
-    const pagination: SimpleChange = changes.pagination;
-    const groupRowsBy: SimpleChange = changes.groupRowsBy;
+    const { configuration, data, pagination, groupRowsBy } = changes;
     this.toggleRowIndex = changes.toggleRowIndex;
+    if (configuration && configuration.currentValue) {
+      this.config = configuration.currentValue;
+    }
     if (data && data.currentValue) {
       this.doApplyData(data);
     }
@@ -141,27 +133,27 @@ export class BaseComponent implements OnInit, OnChanges {
 
   isOrderEnabled(column: Columns) {
     const columnOrderEnabled = column.orderEnabled === undefined ? true : !!column.orderEnabled;
-    return DefaultConfigService.config.orderEnabled && columnOrderEnabled;
+    return this.config.orderEnabled && columnOrderEnabled;
   }
 
   orderBy(column: Columns): void {
     if (typeof column.orderEnabled !== 'undefined' && !column.orderEnabled) {
       return;
     }
     this.sortKey = column.key;
-    if (!DefaultConfigService.config.orderEnabled || this.sortKey === '') {
+    if (!this.config.orderEnabled || this.sortKey === '') {
       return;
     }
 
     this.setColumnOrder(this.sortKey);
-    if (!DefaultConfigService.config.orderEventOnly && !column.orderEventOnly) {
+    if (!this.config.orderEventOnly && !column.orderEventOnly) {
       this.sortBy.key = this.sortKey;
       this.sortBy.order = this.sortState.get(this.sortKey);
     } else {
       this.sortBy.key = '';
       this.sortBy.order = '';
     }
-    if (!DefaultConfigService.config.serverPagination) {
+    if (!this.config.serverPagination) {
       this.data = [...this.data];
     }
     this.sortBy = { ...this.sortBy };
@@ -173,17 +165,17 @@ export class BaseComponent implements OnInit, OnChanges {
   }
 
   onClick($event: MouseEvent, row: object, key: ColumnKeyType, colIndex: number | null, rowIndex: number): void {
-    if (DefaultConfigService.config.selectRow) {
+    if (this.config.selectRow) {
       this.selectedRow = rowIndex;
     }
-    if (DefaultConfigService.config.selectCol && colIndex) {
+    if (this.config.selectCol && colIndex) {
       this.selectedCol = colIndex;
     }
-    if (DefaultConfigService.config.selectCell && colIndex) {
+    if (this.config.selectCell && colIndex) {
       this.selectedRow = rowIndex;
       this.selectedCol = colIndex;
     }
-    if (DefaultConfigService.config.clickEvent) {
+    if (this.config.clickEvent) {
       const value: TableMouseEvent = {
         event: $event,
         row,
@@ -221,14 +213,14 @@ export class BaseComponent implements OnInit, OnChanges {
   }
 
   onSearch($event: Array<{ key: string; value: string }>): void {
-    if (!DefaultConfigService.config.serverPagination) {
+    if (!this.config.serverPagination) {
       this.term = $event;
     }
     this.emitEvent(Event.onSearch, $event);
   }
 
   onGlobalSearch(value: string): void {
-    if (!DefaultConfigService.config.serverPagination) {
+    if (!this.config.serverPagination) {
       this.globalSearchTerm = value;
     }
     this.emitEvent(Event.onGlobalSearch, value);

projects/ngx-easy-table/src/lib/components/pagination/pagination.component.ts

@@ -4,11 +4,12 @@ import {
   EventEmitter,
   HostListener,
   Input,
+  OnChanges,
   Output,
+  SimpleChanges,
   ViewChild,
 } from '@angular/core';
 import { Config } from '../..';
-import { DefaultConfigService } from '../../services/config-service';
 import { PaginationControlsDirective } from 'ngx-pagination';
 
 export interface PaginationRange {
@@ -21,15 +22,15 @@ export interface PaginationRange {
   templateUrl: './pagination.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PaginationComponent {
+export class PaginationComponent implements OnChanges {
   @ViewChild('paginationDirective', { static: true }) paginationDirective: PaginationControlsDirective;
   @ViewChild('paginationRange', { static: false }) paginationRange;
   @Input() pagination;
   @Input() config: Config;
   @Input() id;
   @Output() readonly updateRange: EventEmitter<PaginationRange> = new EventEmitter();
   public ranges: number[] = [5, 10, 25, 50, 100];
-  public selectedLimit: number = DefaultConfigService.config.rows;
+  public selectedLimit: number;
   public showRange = false;
   public screenReaderPaginationLabel = 'Pagination';
   public screenReaderPageLabel = 'page';
@@ -46,6 +47,13 @@ export class PaginationComponent {
     }
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    const { config } = changes;
+    if (config && config.currentValue) {
+      this.selectedLimit = this.config.rows;
+    }
+  }
+
   onPageChange(page: number): void {
     this.updateRange.emit({
       page,

src/app/demo/many-tables/configuration-advanced.service.ts

@@ -13,7 +13,7 @@ export class ConfigurationAdvancedService {
     selectRow: true,
     selectCol: false,
     selectCell: false,
-    rows: 10,
+    rows: 4,
     additionalActions: false,
     serverPagination: false,
     isLoading: false,

src/app/demo/many-tables/configuration-basic.service.ts

@@ -13,7 +13,7 @@ export class ConfigurationBasicService {
     selectRow: true,
     selectCol: false,
     selectCell: false,
-    rows: 10,
+    rows: 3,
     additionalActions: false,
     serverPagination: false,
     isLoading: false,