From d653530dc57cccf202e4f6f51f4671f57cc37595 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sun, 30 Jun 2019 19:59:22 +0200 Subject: [PATCH] wrong config caching (#251) * wrong config caching * test fix --- cypress/integration/many-tables.spec.ts | 10 +++++ package.json | 1 + .../src/lib/components/base/base.component.ts | 44 ++++++++----------- .../pagination/pagination.component.ts | 14 ++++-- .../configuration-advanced.service.ts | 2 +- .../configuration-basic.service.ts | 2 +- 6 files changed, 42 insertions(+), 31 deletions(-) diff --git a/cypress/integration/many-tables.spec.ts b/cypress/integration/many-tables.spec.ts index 599c307b..1fab9335 100644 --- a/cypress/integration/many-tables.spec.ts +++ b/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'); + }); }); }); diff --git a/package.json b/package.json index 9757f10b..18feb915 100644 --- a/package.json +++ b/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", diff --git a/projects/ngx-easy-table/src/lib/components/base/base.component.ts b/projects/ngx-easy-table/src/lib/components/base/base.component.ts index 27b2bb4a..0bca51cc 100644 --- a/projects/ngx-easy-table/src/lib/components/base/base.component.ts +++ b/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,7 +133,7 @@ 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 { @@ -149,19 +141,19 @@ export class BaseComponent implements OnInit, OnChanges { 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); diff --git a/projects/ngx-easy-table/src/lib/components/pagination/pagination.component.ts b/projects/ngx-easy-table/src/lib/components/pagination/pagination.component.ts index 06212012..ede58d78 100644 --- a/projects/ngx-easy-table/src/lib/components/pagination/pagination.component.ts +++ b/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,7 +22,7 @@ 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; @@ -29,7 +30,7 @@ export class PaginationComponent { @Input() id; @Output() readonly updateRange: EventEmitter = 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, diff --git a/src/app/demo/many-tables/configuration-advanced.service.ts b/src/app/demo/many-tables/configuration-advanced.service.ts index 3938e842..6d190563 100755 --- a/src/app/demo/many-tables/configuration-advanced.service.ts +++ b/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, diff --git a/src/app/demo/many-tables/configuration-basic.service.ts b/src/app/demo/many-tables/configuration-basic.service.ts index c40fa476..506dd673 100755 --- a/src/app/demo/many-tables/configuration-basic.service.ts +++ b/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,