From aa1fe6b6dd18bf294bbfb1b15cb8e955b822a3e7 Mon Sep 17 00:00:00 2001 From: "ana.espejo" Date: Thu, 26 Sep 2024 11:06:40 -0300 Subject: [PATCH] fix(table): possibilita desabilitar a propriedade p-virtual-scroll Identificada incompatibilidade do virtual-scroll com linhas de alturas indefinidas. Possibilita desabilitar a propriedade p-virtual-scroll. Fixes DTHFUI-9499 --- .../po-page-dynamic-table.component.html | 1 + .../po-page-dynamic-table.component.spec.ts | 17 +++++ .../po-page-dynamic-table.component.ts | 23 +++++++ ...dynamic-table-drag-and-drop.component.html | 2 + .../po-lookup/po-lookup-base.component.ts | 16 +++++ .../po-lookup-modal-base.component.ts | 17 +++++ .../po-lookup-modal.component.html | 1 + .../po-lookup/po-lookup.component.spec.ts | 3 + .../po-field/po-lookup/po-lookup.component.ts | 2 + .../sample-po-lookup-labs.component.html | 2 + .../sample-po-lookup-labs.component.ts | 3 +- .../services/po-lookup-modal.service.spec.ts | 1 + .../services/po-lookup-modal.service.ts | 3 + .../interfaces/po-table-column.interface.ts | 1 + .../po-table/po-table-base.component.spec.ts | 17 +++++ .../po-table/po-table-base.component.ts | 23 +++++++ .../po-table/po-table.component.html | 22 +++++-- .../po-table/po-table.component.spec.ts | 62 ++++++++++++++++++- .../components/po-table/po-table.component.ts | 42 ++++++++++--- .../sample-po-table-airfare.component.html | 1 + .../sample-po-table-heroes.component.html | 2 + .../sample-po-table-labs.component.html | 1 + .../sample-po-table-labs.component.ts | 3 +- 23 files changed, 246 insertions(+), 19 deletions(-) diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.html b/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.html index c5cb3a22f8..a264fb61c8 100644 --- a/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.html +++ b/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.html @@ -33,6 +33,7 @@ [p-text-wrap]="textWrap" [p-draggable]="draggable" [p-spacing]="spacing" + [p-virtual-scroll]="virtualScroll" > diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.spec.ts b/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.spec.ts index 4ed4de3a25..172c4d8378 100644 --- a/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.spec.ts +++ b/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.spec.ts @@ -171,6 +171,23 @@ describe('PoPageDynamicTableComponent:', () => { expectPropertiesValues(component, 'spacing', [invalidValue], PoTableColumnSpacing.Medium); }); }); + + it('p-virtual-scroll: should default virtualScroll to true when height is defined.', () => { + component.height = 300; + expect(component.virtualScroll).toBe(true); + }); + + it('p-virtual-scroll: should allow setting virtualScroll to false when height is defined.', () => { + component.height = 300; + component.virtualScroll = false; + expect(component.virtualScroll).toBe(false); + }); + + it('p-virtual-scroll: should allow setting virtualScroll to true when height is defined.', () => { + component.height = 300; + component.virtualScroll = true; + expect(component.virtualScroll).toBe(true); + }); }); describe('Methods:', () => { diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts b/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts index dec6a63b9c..f77f8067eb 100644 --- a/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts +++ b/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts @@ -297,6 +297,7 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent private _hideCloseDisclaimers: Array = []; private _draggable = false; private _spacing: PoTableColumnSpacing = PoTableColumnSpacing.Medium; + private _virtualScroll?: boolean = true; private set defaultPageActions(value: Array) { this._defaultPageActions = value; @@ -552,6 +553,8 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * + * > Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. + * * @default `false` */ @Input({ alias: 'p-text-wrap', transform: convertToBoolean }) textWrap?: boolean = false; @@ -572,6 +575,26 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent return this._draggable; } + /** + * @optional + * + * @description + * + * Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. + * Requer altura (`p-height`) para funcionar corretamente. + * + * > Incompatível com `p-text-wrap` e `master-detail`, pois o `virtual-scroll` exige altura fixa nas linhas. + * + * @default `true` + */ + @Input('p-virtual-scroll') set virtualScroll(value: boolean) { + this._virtualScroll = convertToBoolean(value && this.height > 0); + } + + get virtualScroll() { + return this._virtualScroll; + } + constructor( private router: Router, private activatedRoute: ActivatedRoute, diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-drag-and-drop/sample-po-page-dynamic-table-drag-and-drop.component.html b/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-drag-and-drop/sample-po-page-dynamic-table-drag-and-drop.component.html index 289d80eba4..1a38025d95 100644 --- a/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-drag-and-drop/sample-po-page-dynamic-table-drag-and-drop.component.html +++ b/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-drag-and-drop/sample-po-page-dynamic-table-drag-and-drop.component.html @@ -8,5 +8,7 @@ [p-infinite-scroll]="true" [p-fields]="fields" [p-service-api]="serviceApi" + [p-text-wrap]="true" + [p-virtual-scroll]="false" > diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.ts b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.ts index be4d7d6386..f8eba2c757 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.ts @@ -310,10 +310,26 @@ export abstract class PoLookupBaseComponent * * Esta propriedade aplica-se ao texto contido nas células da tabela. * + * > Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. + * * @default `false` */ @Input({ alias: 'p-text-wrap', transform: convertToBoolean }) textWrap?: boolean = false; + /** + * @optional + * + * @description + * + * Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. + * A altura da tabela já é pré-definida, portanto o `virtual-scroll` será ativado automaticamente. + * + * > Incompatível com `p-text-wrap` e `master-detail`, pois o `virtual-scroll` exige altura fixa nas linhas. + * + * @default `true` + */ + @Input({ alias: 'p-virtual-scroll', transform: convertToBoolean }) virtualScroll?: boolean = true; + /** * Evento será disparado quando ocorrer algum erro na requisição de busca do item. * Será passado por parâmetro o objeto de erro retornado. diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal-base.component.ts b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal-base.component.ts index 4d51f84cdd..3d48437b88 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal-base.component.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal-base.component.ts @@ -161,9 +161,26 @@ export abstract class PoLookupModalBaseComponent implements OnDestroy, OnInit { * Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. + * + * > Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. + * */ @Input({ alias: 'p-text-wrap', transform: convertToBoolean }) textWrap?: boolean = false; + /** + * @optional + * + * @description + * + * Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. + * A altura da tabela já é pré-definida, portanto o `virtual-scroll` será ativado automaticamente. + * + * > Incompatível com `p-text-wrap` e `master-detail`, pois o `virtual-scroll` exige altura fixa nas linhas. + * + * @default `true` + */ + @Input({ alias: 'p-virtual-scroll', transform: convertToBoolean }) virtualScroll?: boolean = true; + /** * @optional * diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal.component.html b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal.component.html index 9879be7d5a..8ed8350d65 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal.component.html +++ b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal.component.html @@ -64,6 +64,7 @@ [p-infinite-scroll]="infiniteScroll" [p-spacing]="spacing" [p-text-wrap]="textWrap" + [p-virtual-scroll]="virtualScroll" (p-selected)="onSelect($event)" (p-unselected)="onUnselect($event)" (p-all-selected)="onAllSelected($event)" diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.spec.ts b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.spec.ts index 02bfd26bd9..b2dd4efd76 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.spec.ts @@ -960,6 +960,7 @@ describe('PoLookupComponent:', () => { component.fieldValue = 'value'; component.spacing = PoTableColumnSpacing.Medium; component.textWrap = false; + component.virtualScroll = true; component.changeVisibleColumns = new EventEmitter(); component.columnRestoreManager = new EventEmitter(); @@ -976,6 +977,7 @@ describe('PoLookupComponent:', () => { fieldValue, spacing, textWrap, + virtualScroll, changeVisibleColumns, columnRestoreManager } = component; @@ -997,6 +999,7 @@ describe('PoLookupComponent:', () => { fieldValue, spacing, textWrap, + virtualScroll, changeVisibleColumns, columnRestoreManager }; diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.ts b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.ts index e0c87d0477..55aced9a87 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.ts @@ -206,6 +206,7 @@ export class PoLookupComponent extends PoLookupBaseComponent implements AfterVie fieldValue, spacing, textWrap, + virtualScroll, changeVisibleColumns, columnRestoreManager } = this; @@ -227,6 +228,7 @@ export class PoLookupComponent extends PoLookupBaseComponent implements AfterVie fieldValue, spacing, textWrap, + virtualScroll, changeVisibleColumns, columnRestoreManager }); diff --git a/projects/ui/src/lib/components/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.html b/projects/ui/src/lib/components/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.html index 4fb93e8ebd..c2625924e1 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.html +++ b/projects/ui/src/lib/components/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.html @@ -12,6 +12,7 @@ [p-field-value]="fieldValue" [p-help]="help" [p-hide-columns-manager]="properties.includes('hideColumnsManager')" + [p-infinite-scroll]="properties.includes('infiniteScroll')" [p-label]="label" [p-literals]="customLiterals" [p-multiple]="properties.includes('multiple')" @@ -22,6 +23,7 @@ [p-show-required]="properties.includes('showRequired')" [p-spacing]="spacing" [p-text-wrap]="properties.includes('textWrap')" + [p-virtual-scroll]="properties.includes('virtualScroll')" (p-change)="changeEvent('p-change')" (p-error)="changeEvent('p-error')" (p-selected)="changeEvent('p-selected')" diff --git a/projects/ui/src/lib/components/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.ts b/projects/ui/src/lib/components/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.ts index a03d18957c..136f67bdda 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.ts @@ -65,7 +65,8 @@ export class SamplePoLookupLabsComponent implements OnInit { { value: 'multiple', label: 'Multiple' }, { value: 'autoHeight', label: 'Auto Height' }, { value: 'hideColumnsManager', label: 'Hide Columns Manager' }, - { value: 'textWrap', label: 'Text Wrap' } + { value: 'textWrap', label: 'Text Wrap' }, + { value: 'virtualScroll', label: 'Virtual Sroll' } ]; private readonly columnsDefinition = { diff --git a/projects/ui/src/lib/components/po-field/po-lookup/services/po-lookup-modal.service.spec.ts b/projects/ui/src/lib/components/po-field/po-lookup/services/po-lookup-modal.service.spec.ts index 5cf4e8c42e..82ec106abf 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/services/po-lookup-modal.service.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/services/po-lookup-modal.service.spec.ts @@ -48,6 +48,7 @@ describe('PoLookupModalService:', () => { fieldLabel: 'label', spacing: 'medium', textWrap: false, + virtualScroll: true, changeVisibleColumns: new EventEmitter(), columnRestoreManager: new EventEmitter() }; diff --git a/projects/ui/src/lib/components/po-field/po-lookup/services/po-lookup-modal.service.ts b/projects/ui/src/lib/components/po-field/po-lookup/services/po-lookup-modal.service.ts index 293e696879..3fb68a173e 100644 --- a/projects/ui/src/lib/components/po-field/po-lookup/services/po-lookup-modal.service.ts +++ b/projects/ui/src/lib/components/po-field/po-lookup/services/po-lookup-modal.service.ts @@ -50,6 +50,7 @@ export class PoLookupModalService { fieldValue: string; spacing: string; textWrap: boolean; + virtualScroll: boolean; changeVisibleColumns: Function; columnRestoreManager: Function; }): void { @@ -68,6 +69,7 @@ export class PoLookupModalService { fieldValue, spacing, textWrap, + virtualScroll, changeVisibleColumns, columnRestoreManager } = params; @@ -92,6 +94,7 @@ export class PoLookupModalService { this.componentRef.instance.hideColumnsManager = hideColumnsManager; this.componentRef.instance.spacing = spacing; this.componentRef.instance.textWrap = textWrap; + this.componentRef.instance.virtualScroll = virtualScroll; this.componentRef.changeDetectorRef.detectChanges(); this.componentRef.instance.openModal(); } diff --git a/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts b/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts index e4c2a9bd15..a5545d4c94 100644 --- a/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts +++ b/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts @@ -224,6 +224,7 @@ export interface PoTableColumn { * e o tipo _Date_ padrão do Javascript, por exemplo: `'2017-11-28T00:00:00-02:00'` ou `new Date(2017, 10, 28)`. * * - `detail`: array de objetos para o master-detail. + * + Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. * - `icon`: *array* de *string* ou objetos para a coluna de ícones. * - `label`: texto com destaque. * - `link`: habilita link na coluna para ação ou navegação. diff --git a/projects/ui/src/lib/components/po-table/po-table-base.component.spec.ts b/projects/ui/src/lib/components/po-table/po-table-base.component.spec.ts index b0f776e8ae..f16f7d472d 100644 --- a/projects/ui/src/lib/components/po-table/po-table-base.component.spec.ts +++ b/projects/ui/src/lib/components/po-table/po-table-base.component.spec.ts @@ -1712,5 +1712,22 @@ describe('PoTableBaseComponent:', () => { it('p-infinite-scroll-distance: should update property `p-infinite-scroll-distance` with values > 100 .', () => { expectSettersMethod(component, 'infiniteScrollDistance', 150, 'infiniteScrollDistance', 100); }); + + it('p-virtual-scroll: should default virtualScroll to true when height is defined.', () => { + component.height = 300; + expect(component.virtualScroll).toBe(true); + }); + + it('p-virtual-scroll: should allow setting virtualScroll to false when height is defined.', () => { + component.height = 300; + component.virtualScroll = false; + expect(component.virtualScroll).toBe(false); + }); + + it('p-virtual-scroll: should allow setting virtualScroll to true when height is defined.', () => { + component.height = 300; + component.virtualScroll = true; + expect(component.virtualScroll).toBe(true); + }); }); }); diff --git a/projects/ui/src/lib/components/po-table/po-table-base.component.ts b/projects/ui/src/lib/components/po-table/po-table-base.component.ts index ca021035fd..0671e2daa5 100644 --- a/projects/ui/src/lib/components/po-table/po-table-base.component.ts +++ b/projects/ui/src/lib/components/po-table/po-table-base.component.ts @@ -181,6 +181,8 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy { * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * + * > Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. + * * @default `false` */ @Input({ alias: 'p-text-wrap', transform: convertToBoolean }) textWrap?: boolean = false; @@ -501,6 +503,7 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy { private _infiniteScroll?: boolean = false; private _draggable?: boolean = false; private _hideActionFixedColumns?: boolean = false; + private _virtualScroll?: boolean = true; constructor( private poDate: PoDateService, @@ -975,6 +978,26 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy { return this._draggable; } + /** + * @optional + * + * @description + * + * Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. + * Requer altura (`p-height`) para funcionar corretamente. + * + * > Incompatível com `p-text-wrap` e `master-detail`, pois o `virtual-scroll` exige altura fixa nas linhas. + * + * @default `true` + */ + @Input('p-virtual-scroll') set virtualScroll(value: boolean) { + this._virtualScroll = convertToBoolean(value && this.height > 0); + } + + get virtualScroll() { + return this._virtualScroll; + } + ngOnDestroy() { this.poTableServiceSubscription?.unsubscribe(); } diff --git a/projects/ui/src/lib/components/po-table/po-table.component.html b/projects/ui/src/lib/components/po-table/po-table.component.html index 4572a654f0..b6d1dbbff4 100644 --- a/projects/ui/src/lib/components/po-table/po-table.component.html +++ b/projects/ui/src/lib/components/po-table/po-table.component.html @@ -60,8 +60,13 @@ [style.opacity]="tableOpacity" >
-
- +
+
+ +
+
+ +
@@ -99,6 +104,7 @@ - + { expect(spy).not.toHaveBeenCalled(); }); - it('includeInfiniteScroll: should call `scrollListeneter called when `infiniteScroll` is used', () => { + it('includeInfiniteScroll: should call `scrollListener` when `infiniteScroll` is used (virtualScroll is false)', () => { component.height = 100; component.infiniteScroll = true; - const spy = spyOn(poTableService, 'scrollListener').and.returnValue( + component.virtualScroll = false; + + const mockScrollableElement = { + scrollHeight: 200, + closest: jasmine.createSpy('closest').and.returnValue({}), + addEventListener: jasmine.createSpy('addEventListener'), + removeEventListener: jasmine.createSpy('removeEventListener') + }; + + component.tableScrollable = new ElementRef(mockScrollableElement); + + const spyScrollListener = spyOn(poTableService, 'scrollListener').and.returnValue( + of({ target: { offsetHeight: 100, scrollTop: 100, scrollHeight: 1 } }) + ); + + component['includeInfiniteScroll'](); + + expect(spyScrollListener).toHaveBeenCalledWith(mockScrollableElement.closest()); + expect(mockScrollableElement.closest).toHaveBeenCalledWith('.po-table-container-overflow'); + }); + + it('includeInfiniteScroll: should call `scrollListener` when `infiniteScroll` is used (virtualScroll is true)', () => { + component.height = 100; + component.infiniteScroll = true; + component.virtualScroll = true; + + const mockTableVirtualScroll = new ElementRef({ + nativeElement: { + scrollHeight: 200 + } + }); + + component.tableVirtualScroll = mockTableVirtualScroll; + + const spyScrollListener = spyOn(poTableService, 'scrollListener').and.returnValue( of({ target: { offsetHeight: 100, scrollTop: 100, scrollHeight: 1 } }) ); component['includeInfiniteScroll'](); - expect(spy).toHaveBeenCalled(); + + expect(spyScrollListener).toHaveBeenCalled(); + }); + + it('checkInfiniteScroll: should use tableScrollable scrollHeight when virtualScroll is false', () => { + const spyDetectChanges = spyOn(component['changeDetector'], 'detectChanges'); + const spyIncludeInfiniteScroll = spyOn(component, 'includeInfiniteScroll'); + + component.height = 100; + component.virtualScroll = false; + spyOnProperty(component, 'hasItems').and.returnValue(true); + component.infiniteScroll = true; + + const mockTableScrollable = new ElementRef({ + scrollHeight: 120, + closest: () => null + }); + component.tableScrollable = mockTableScrollable; + + component['checkInfiniteScroll'](); + + expect(spyIncludeInfiniteScroll).toHaveBeenCalled(); + expect(spyDetectChanges).toHaveBeenCalled(); }); it('checkInfiniteScroll: should call includeInfiniteScroll if height is smaller than scrollHeight', () => { diff --git a/projects/ui/src/lib/components/po-table/po-table.component.ts b/projects/ui/src/lib/components/po-table/po-table.component.ts index 6e21f96f7f..bf439ae650 100644 --- a/projects/ui/src/lib/components/po-table/po-table.component.ts +++ b/projects/ui/src/lib/components/po-table/po-table.component.ts @@ -118,6 +118,7 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI @ViewChild('tableTemplate', { read: ElementRef, static: false }) tableTemplate; @ViewChild('tableVirtualScroll', { read: ElementRef, static: false }) tableVirtualScroll; + @ViewChild('tableScrollable', { read: ElementRef, static: false }) tableScrollable; @ViewChild('columnManager', { read: ElementRef, static: false }) columnManager; @ViewChild('columnBatchActions', { read: ElementRef, static: false }) columnBatchActions; @@ -735,7 +736,15 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI protected checkInfiniteScroll(): void { if (this.hasInfiniteScroll()) { - if (this.tableVirtualScroll.nativeElement.scrollHeight >= this.height) { + let scrollHeight = 0; + + if (this.virtualScroll) { + scrollHeight = this.tableVirtualScroll.nativeElement.scrollHeight; + } else { + scrollHeight = this.tableScrollable.nativeElement.scrollHeight; + } + + if (scrollHeight >= this.height) { this.includeInfiniteScroll(); } else { this.infiniteScroll = false; @@ -855,18 +864,31 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI } private hasInfiniteScroll(): boolean { - return ( - this.infiniteScroll && - this.hasItems && - !this.subscriptionScrollEvent && - this.height && - this.tableVirtualScroll.nativeElement.scrollHeight - ); + let scrollHeight = 0; + + if (this.virtualScroll && this.tableVirtualScroll) { + scrollHeight = this.tableVirtualScroll.nativeElement.scrollHeight; + } + if (!this.virtualScroll && this.tableScrollable) { + scrollHeight = this.tableScrollable.nativeElement.scrollHeight; + } + + return this.infiniteScroll && this.hasItems && !this.subscriptionScrollEvent && this.height > 0 && scrollHeight > 0; } private includeInfiniteScroll(): void { - this.scrollEvent$ = this.defaultService.scrollListener(this.tableVirtualScroll.nativeElement); - this.subscriptionScrollEvent = this.scrollEvent$.subscribe(event => this.showMoreInfiniteScroll(event)); + let element: HTMLElement | null = null; + + if (this.virtualScroll) { + element = this.tableVirtualScroll?.nativeElement; + } else { + element = this.tableScrollable.nativeElement.closest('.po-table-container-overflow'); + } + + if (element) { + this.scrollEvent$ = this.defaultService.scrollListener(element); + this.subscriptionScrollEvent = this.scrollEvent$.subscribe(event => this.showMoreInfiniteScroll(event)); + } this.changeDetector.detectChanges(); } diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.html b/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.html index 83ee5f3cdb..e10927b39d 100644 --- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.html +++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.html @@ -14,6 +14,7 @@ [p-columns]="columns" [p-items]="items" [p-max-columns]="7" + [p-virtual-scroll]="false" (p-collapsed)="onCollapseDetail()" (p-expanded)="onExpandDetail()" (p-selected)="sumTotal($event)" diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-heroes/sample-po-table-heroes.component.html b/projects/ui/src/lib/components/po-table/samples/sample-po-table-heroes/sample-po-table-heroes.component.html index 35c2bfd581..cdae2910e0 100644 --- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-heroes/sample-po-table-heroes.component.html +++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-heroes/sample-po-table-heroes.component.html @@ -16,6 +16,7 @@ (p-delete-items)="deleteItems($event)" [p-hide-action-fixed-columns]="true" [p-text-wrap]="true" + [p-virtual-scroll]="false" > @@ -31,6 +32,7 @@ [p-items]="itemsSelected" [p-hide-action-fixed-columns]="true" [p-text-wrap]="true" + [p-virtual-scroll]="false" > diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.html b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.html index 22d33f8226..16f077eb8a 100644 --- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.html +++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.html @@ -22,6 +22,7 @@ [p-single-select]="selection.includes('singleSelect')" [p-sort]="properties.includes('sort')" [p-striped]="properties.includes('striped')" + [p-virtual-scroll]="properties.includes('virtualScroll')" (p-all-selected)="changeEvent('p-all-selected')" (p-all-unselected)="changeEvent('p-all-unselected')" (p-collapsed)="changeEvent('p-collapsed')" diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.ts b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.ts index 5c729ee256..3d42e4d2ad 100644 --- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.ts +++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.ts @@ -96,7 +96,8 @@ export class SamplePoTableLabsComponent implements OnInit { { label: 'Actions Right', value: 'actionsRight' }, { label: 'Draggable', value: 'draggable' }, { label: 'Hide action fixed columns', value: 'fixed' }, - { label: 'Hide Table Search', value: 'hideTableSearch' } + { label: 'Hide Table Search', value: 'hideTableSearch' }, + { label: 'Virtual Scroll', value: 'virtualScroll' } ]; public readonly typeHeaderOptions: Array = [