fix(table): corrige quebra de colunas

Corrige a quebra de colunas ao redimensionar
a janela do navegador quando usamos uma
`PoTable` dentro de uma `PoTab`.

Fixes DTHFUI-6154

Author: Rafael Lourenço Marques

projects/ui/src/lib/components/po-table/po-table-base.component.spec.ts

@@ -17,7 +17,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 @Directive()
 class PoTableComponent extends PoTableBaseComponent {
-  calculateWidthHeaders() {}
   checkInfiniteScroll() {}
   calculateHeightTableContainer(height) {}
 }
@@ -106,22 +105,18 @@ describe('PoTableBaseComponent:', () => {
     expectPropertiesValues(component, 'items', [], []);
   });
 
-  it('should set selectable and call calculateWidthHeaders', () => {
-    spyOn(component, 'calculateWidthHeaders');
+  it('should set selectable', () => {
     const validValues = ['', true, 1];
     const invalidValues = [undefined, null, false, 0];
 
     expectPropertiesValues(component, 'selectable', validValues, true);
     expectPropertiesValues(component, 'selectable', invalidValues, false);
-    expect(component.calculateWidthHeaders).toHaveBeenCalled();
   });
 
-  it('should set hideDetail and call calculateWidthHeaders', () => {
-    spyOn(component, 'calculateWidthHeaders');
+  it('should set hideDetail', () => {
     expectSettersMethod(component, 'hideDetail', '', 'hideDetail', true);
     expectSettersMethod(component, 'hideDetail', 'true', 'hideDetail', true);
     expectSettersMethod(component, 'hideDetail', 'false', 'hideDetail', false);
-    expect(component.calculateWidthHeaders).toHaveBeenCalled();
   });
 
   it('should call setColumnLink when set columns', () => {
@@ -164,19 +159,14 @@ describe('PoTableBaseComponent:', () => {
     });
   });
 
-  it('should set height and call calculateWidthHeaders', () => {
-    spyOn(component, 'calculateWidthHeaders');
-
+  it('should set height', () => {
     expectSettersMethod(component, 'height', 100, 'height', 100);
-    expect(component.calculateWidthHeaders).toHaveBeenCalled();
   });
 
-  it('should set columns and call calculateWidthHeaders', () => {
-    spyOn(component, 'calculateWidthHeaders');
+  it('should set columns', () => {
     component.columns = [{ property: 'teste', label: 'label' }];
 
     expect(component.columns).toEqual([{ property: 'teste', label: 'label' }]);
-    expect(component.calculateWidthHeaders).toHaveBeenCalled();
   });
 
   it('should set hideSelectAll to true if singleSelect', () => {
@@ -1348,22 +1338,16 @@ describe('PoTableBaseComponent:', () => {
       expectPropertiesValues(component, 'loading', booleanInvalidValues, false);
     });
 
-    it('p-loading: should update property `p-loading` with valid values and call `calculateWidthHeaders`', () => {
-      spyOn(component, 'calculateWidthHeaders');
-
+    it('p-loading: should update property `p-loading` with valid values', () => {
       expectPropertiesValues(component, 'loading', booleanValidTrueValues, true);
-
-      expect(component.calculateWidthHeaders).toHaveBeenCalled();
     });
 
-    it('p-columns: should call `setColumnLink` and `calculateWidthHeaders` if has values', () => {
+    it('p-columns: should call `setColumnLink` if has values', () => {
       spyOn(component, <any>'setColumnLink');
-      spyOn(component, 'calculateWidthHeaders');
 
       component.columns = [{ label: 'table', property: 'table' }];
 
       expect(component['setColumnLink']).toHaveBeenCalled();
-      expect(component.calculateWidthHeaders).toHaveBeenCalled();
     });
 
     it('p-columns, p-items: should call `getDefaultColumns` with item if doesn`t have columns but has items to set default column', () => {

projects/ui/src/lib/components/po-table/po-table-base.component.ts

@@ -391,7 +391,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
 
     if (this._columns.length) {
       this.setColumnLink();
-      this.calculateWidthHeaders();
     } else if (this.hasItems) {
       this._columns = this.getDefaultColumns(this.items[0]);
     }
@@ -433,7 +432,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
    */
   @Input('p-height') set height(height: number) {
     this._height = height;
-    this.calculateWidthHeaders();
   }
 
   get height() {
@@ -451,7 +449,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
    */
   @Input('p-hide-detail') set hideDetail(hideDetail: boolean) {
     this._hideDetail = hideDetail != null && hideDetail.toString() === '' ? true : convertToBoolean(hideDetail);
-    this.calculateWidthHeaders();
   }
 
   get hideDetail() {
@@ -523,7 +520,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
    */
   @Input('p-loading') set loading(loading: boolean) {
     this._loading = convertToBoolean(loading);
-    this.calculateWidthHeaders();
   }
 
   get loading() {
@@ -546,7 +542,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
    */
   @Input('p-actions') set actions(actions: Array<PoTableAction>) {
     this._actions = actions;
-    this.calculateWidthHeaders();
   }
 
   get actions() {
@@ -570,7 +565,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
    */
   @Input('p-selectable') set selectable(value: boolean) {
     this._selectable = <any>value === '' ? true : convertToBoolean(value);
-    this.calculateWidthHeaders();
   }
 
   get selectable() {
@@ -986,7 +980,5 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
 
   protected abstract calculateHeightTableContainer(height);
 
-  protected abstract calculateWidthHeaders();
-
   protected abstract checkInfiniteScroll();
 }

projects/ui/src/lib/components/po-table/po-table.component.html

@@ -58,7 +58,7 @@
 <ng-template #tableHeaderTemplate>
   <table class="po-table" [class.po-table-striped]="striped" [class.po-table-layout-fixed]="hideTextOverflow">
     <thead>
-      <tr [class.po-table-header]="!height">
+      <tr [class.po-table-header]="height">
         <th *ngIf="hasSelectableColumn" class="po-table-column-selectable">
           <div [class.po-table-header-fixed-inner]="height">
             <po-checkbox
@@ -94,7 +94,7 @@
           class="po-table-header-ellipsis"
           [style.width]="column.width"
           [style.max-width]="column.width"
-          [style.min-width]="column.width"
+          [style.min-width]="column.width || '50px'"
           [class.po-clickable]="(sort && column.sortable !== false) || hasService"
           [class.po-table-header-subtitle]="column.type === 'subtitle'"
           (click)="sortColumn(column)"
@@ -134,6 +134,7 @@
           >
             <button
               #columnManagerTarget
+              type="button"
               [attr.aria-label]="literals.columnsManager"
               class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
               p-tooltip-position="left"
@@ -153,8 +154,8 @@
     #poTableTbodyVirtual
     [itemSize]="itemSize"
     [style.height.px]="heightTableVirtual"
-    [minBufferPx]="height < 100 ? 100 : height"
-    [maxBufferPx]="height < 200 ? 200 : height"
+    [minBufferPx]="heightTableVirtual < 100 ? 100 : heightTableVirtual"
+    [maxBufferPx]="heightTableVirtual < 200 ? 200 : heightTableVirtual"
     (scroll)="syncronizeHorizontalScroll()"
   >
     <table class="po-table" [class.po-table-striped]="striped" [class.po-table-layout-fixed]="hideTextOverflow">
@@ -380,6 +381,7 @@
 
         <!-- Coluna criada para caso as ações fiquem no lado esquerdo -->
         <th
+          #columnActionLeft
           *ngIf="!actionRight && (visibleActions.length > 1 || isSingleAction)"
           [class.po-table-header-master-detail]="!isSingleAction"
           [class.po-table-header-single-action]="isSingleAction"
@@ -435,6 +437,7 @@
           >
             <button
               #columnManagerTarget
+              type="button"
               [attr.aria-label]="literals.columnsManager"
               class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
               p-tooltip-position="left"

projects/ui/src/lib/components/po-table/po-table.component.spec.ts

@@ -608,14 +608,12 @@ describe('PoTableComponent:', () => {
     expect(tableElement.offsetHeight + tableFooterElement.offsetHeight + tableHeaderElement.offsetHeight).toBe(150);
   });
 
-  it('should call calculateWidthHeaders and setTableOpacity in debounceResize', fakeAsync(() => {
-    spyOn(component, <any>'calculateWidthHeaders');
+  it('should call setTableOpacity in debounceResize', fakeAsync(() => {
     spyOn(component, <any>'setTableOpacity');
 
     component['debounceResize']();
     tick(500);
 
-    expect(component['calculateWidthHeaders']).toHaveBeenCalled();
     expect(component['setTableOpacity']).toHaveBeenCalled();
   }));
 
@@ -688,6 +686,34 @@ describe('PoTableComponent:', () => {
     expect(component['footerHeight']).toBe(10);
   });
 
+  it('should return true in verifyChangeHeightInHeader', () => {
+    component['headerHeight'] = 1;
+    spyOn(component, <any>'getHeightTableHeader').and.returnValue(10);
+
+    expect(component['verifyChangeHeightInHeader']()).toBeTruthy();
+  });
+
+  it('should return false in verifyChangeHeightInHeader', () => {
+    component['headerHeight'] = 10;
+    spyOn(component, <any>'getHeightTableHeader').and.returnValue(10);
+
+    expect(component['verifyChangeHeightInHeader']()).toBeFalsy();
+  });
+
+  it('should calculate height when change the header height', () => {
+    component['_height'] = 100;
+    component['headerHeight'] = 100;
+
+    spyOn(component, <any>'verifyChangeHeightInHeader').and.returnValue(true);
+    spyOn(component, <any>'getHeightTableHeader').and.returnValue(10);
+    spyOn(component, <any>'calculateHeightTableContainer');
+
+    component['verifyCalculateHeightTableContainer']();
+
+    expect(component['calculateHeightTableContainer']).toHaveBeenCalled();
+    expect(component['headerHeight']).toBe(10);
+  });
+
   it('shouldn`t calculate height when not change the footer height', () => {
     component['_height'] = 100;
     component['footerHeight'] = 100;
@@ -840,13 +866,6 @@ describe('PoTableComponent:', () => {
     expect(component['getHeightTableHeader'].call(fakeThis)).toBe(100);
   });
 
-  it('should return the header table height equal to 0', () => {
-    const fakeThis = {
-      poTableThead: undefined
-    };
-    expect(component['getHeightTableHeader'].call(fakeThis)).toBe(0);
-  });
-
   it('should set tableOpacity property with method setTableOpacity', () => {
     component['setTableOpacity'](1);
 

projects/ui/src/lib/components/po-table/po-table.component.ts

@@ -102,19 +102,19 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
 
   @ViewChildren('actionsIconElement', { read: ElementRef }) actionsIconElement: QueryList<any>;
   @ViewChildren('actionsElement', { read: ElementRef }) actionsElement: QueryList<any>;
-  @ViewChildren('headersTable') headersTable: QueryList<any>;
 
   heightTableContainer: number;
   heightTableVirtual: number;
   popupTarget;
   tableOpacity: number = 0;
   tooltipText: string;
-  itemSize: number;
+  itemSize: number = 32;
   lastVisibleColumnsSelected: Array<PoTableColumn>;
 
   private _columnManagerTarget: ElementRef;
   private differ;
   private footerHeight;
+  private headerHeight;
   private initialized = false;
   private timeoutResize;
   private visibleElement = false;
@@ -245,7 +245,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
       this.checkInfiniteScroll();
       this.visibleElement = true;
     }
-    document.body.offsetWidth > 1366 ? (this.itemSize = 44) : (this.itemSize = 32);
+
+    this.itemSize = document.body.offsetWidth > 1366 ? 44 : 32;
   }
 
   ngOnDestroy() {
@@ -571,20 +572,6 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
     this.changeDetector.detectChanges();
   }
 
-  protected calculateWidthHeaders() {
-    setTimeout(() => {
-      if (this.height) {
-        this.headersTable.forEach(header => {
-          const divHeader = header.nativeElement.querySelector('.po-table-header-fixed-inner');
-          if (divHeader) {
-            divHeader.style.width = `${header.nativeElement.offsetWidth}px`;
-          }
-        });
-      }
-      this.changeDetector.detectChanges();
-    });
-  }
-
   protected checkInfiniteScroll(): void {
     if (this.hasInfiniteScroll()) {
       if (this.poTableTbodyVirtual.nativeElement.scrollHeight >= this.height) {
@@ -622,8 +609,6 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   private debounceResize() {
     clearTimeout(this.timeoutResize);
     this.timeoutResize = setTimeout(() => {
-      this.calculateWidthHeaders();
-
       // show the table
       this.setTableOpacity(1);
     });
@@ -639,7 +624,9 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   }
 
   private getHeightTableHeader() {
-    return this.poTableThead ? this.poTableThead.nativeElement.offsetHeight : 0;
+    return this.poTableThead?.nativeElement?.offsetHeight
+      ? this.poTableThead.nativeElement.offsetHeight
+      : this.itemSize;
   }
 
   private hasInfiniteScroll(): boolean {
@@ -694,9 +681,18 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
     return this.footerHeight !== this.getHeightTableFooter();
   }
 
-  private verifyCalculateHeightTableContainer() {
+  private verifyChangeHeightInHeader() {
+    return this.headerHeight !== this.getHeightTableHeader();
+  }
+
+  protected verifyCalculateHeightTableContainer() {
     if (this.height && this.verifyChangeHeightInFooter()) {
       this.footerHeight = this.getHeightTableFooter();
+
+      if (this.verifyChangeHeightInHeader()) {
+        this.headerHeight = this.getHeightTableHeader();
+      }
+
       this.calculateHeightTableContainer(this.height);
     }
   }