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-ui · Sep 30, 2024 · aa1fe6b · aa1fe6b
1 parent da6beb3
commit aa1fe6b
Show file tree

Hide file tree

Showing 23 changed files with 246 additions and 19 deletions.
diff --git a/...s/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.html b/...s/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"
   >
   </po-table>
 </po-page-dynamic-search>
diff --git a/...emplates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.spec.ts b/...emplates/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/...cts/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts b/...cts/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<string> = [];
   private _draggable = false;
   private _spacing: PoTableColumnSpacing = PoTableColumnSpacing.Medium;
+  private _virtualScroll?: boolean = true;
 
   private set defaultPageActions(value: Array<PoPageAction>) {
     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/...age-dynamic-table-drag-and-drop/sample-po-page-dynamic-table-drag-and-drop.component.html b/...age-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"
 >
 </po-page-dynamic-table>
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
@@ -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/...i/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal-base.component.ts b/...i/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/...s/ui/src/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal.component.html b/...s/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
@@ -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
@@ -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/...nts/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.html b/...nts/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/...nents/po-field/po-lookup/samples/sample-po-lookup-labs/sample-po-lookup-labs.component.ts b/...nents/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -60,8 +60,13 @@
         [style.opacity]="tableOpacity"
       >
         <div *ngIf="height" class="po-table-container" [style.height.px]="heightTableContainer">
-          <div #poTableTbody class="po-table-container-fixed-inner">
-            <ng-container *ngTemplateOutlet="tableVirtualScrollTemplate"></ng-container>
+          <div #poTableTbody [class.po-table-container-fixed-inner]="virtualScroll">
+            <div *ngIf="virtualScroll">
+              <ng-container *ngTemplateOutlet="tableVirtualScrollTemplate"></ng-container>
+            </div>
+            <div *ngIf="!virtualScroll" class="po-table-container-overflow" [style.height.px]="heightTableContainer">
+              <ng-container *ngTemplateOutlet="tableTemplate"></ng-container>
+            </div>
           </div>
         </div>
 
@@ -99,6 +104,7 @@
 <!-- Table default-->
 <ng-template #tableTemplate>
   <table
+    #tableScrollable
     class="po-table"
     [ngClass]="{
       'po-table-interactive': selectable || sort,
@@ -109,9 +115,9 @@
     }"
     [attr.p-spacing]="spacing"
   >
-    <thead>
+    <thead [class.po-table-header-sticky]="height > 0 && !virtualScroll">
       <tr
-        [ngClass]="{ 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable }"
+        [ngClass]="!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''"
         [class.po-table-header]="!height"
         cdkDropList
         cdkDropListOrientation="horizontal"
@@ -168,6 +174,10 @@
                 JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&
                 (sortedColumn.ascending || !sortedColumn.ascending)
             }"
+            [ngStyle]="{
+              'width':
+                height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''
+            }"
             [class.po-table-header-subtitle]="column.type === 'subtitle'"
             [class.po-table-column-drag-box]="this.isDraggable"
             (click)="sortColumn(column)"
@@ -220,6 +230,10 @@
                 JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&
                 (sortedColumn.ascending || !sortedColumn.ascending)
             }"
+            [ngStyle]="{
+              'width':
+                height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''
+            }"
             [class.po-table-header-subtitle]="column.type === 'subtitle'"
             (click)="sortColumn(column)"
             [pFrozenColumn]="column.fixed"