fix(table): ajusta redimensionamento do loading

Author: felipepetuco

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

@@ -20,6 +20,8 @@ import { PoTableService } from './services/po-table.service';
 class PoTableComponent extends PoTableBaseComponent {
   checkInfiniteScroll() {}
   calculateHeightTableContainer(height) {}
+  changeSizeLoading() {}
+  changeHeaderWidth() {}
 }
 
 describe('PoTableBaseComponent:', () => {
@@ -532,6 +534,39 @@ describe('PoTableBaseComponent:', () => {
       expect(component.calculateHeightTableContainer).not.toHaveBeenCalled();
     });
 
+    it('ngOnChanges: should call `changeSizeLoading` if height is changed', () => {
+      spyOn(component, 'changeSizeLoading');
+      const height = 400;
+      const changes = <any>{ height };
+      component.height = height;
+
+      component.ngOnChanges(changes);
+
+      expect(component['changeSizeLoading']).toHaveBeenCalled();
+    });
+
+    it('ngOnChanges: should call `changeSizeLoading` if there is items', () => {
+      spyOn(component, 'changeSizeLoading');
+      items = component.items;
+      const changes = <any>{ items };
+      component.items = items;
+
+      component.ngOnChanges(changes);
+
+      expect(component['changeSizeLoading']).toHaveBeenCalled();
+    });
+
+    it('ngOnChanges: should´n call `changeSizeLoading` if there is no items', () => {
+      spyOn(component, 'changeSizeLoading');
+      items = null;
+      const changes = <any>{ items };
+      component.items = null;
+
+      component.ngOnChanges(changes);
+
+      expect(component['changeSizeLoading']).toHaveBeenCalled();
+    });
+
     describe('isEverySelected:', () => {
       let rows;
 

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

@@ -451,6 +451,7 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
   itemsSelected: Array<any> = [];
   paramsFilter: {};
   filteredItems: Array<any> = [];
+  initialized = false;
   private initialVisibleColumns: boolean = false;
   private _spacing: PoTableColumnSpacing = PoTableColumnSpacing.Medium;
   private _filteredColumns: Array<string>;
@@ -963,6 +964,11 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
     if (changes.height) {
       this.calculateHeightTableContainer(this.height);
     }
+
+    if ((changes.height || changes.items) && this.initialized) {
+      this.changeHeaderWidth();
+    }
+    this.changeSizeLoading();
   }
 
   selectAllRows() {
@@ -1277,4 +1283,8 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
   protected abstract calculateHeightTableContainer(height);
 
   protected abstract checkInfiniteScroll();
+
+  protected abstract changeSizeLoading();
+
+  protected abstract changeHeaderWidth();
 }

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

@@ -50,11 +50,8 @@
 </po-container>
 
 <ng-template #tableContainerTemplate>
-  <div [class.po-table-container-relative]="loading">
-    <div *ngIf="loading" class="po-table-overlay">
-      <po-loading class="po-table-overlay-content" [p-text]="literals.loadingData"></po-loading>
-    </div>
-
+  <div [class.po-table-container-sticky]="loading">
+    <po-loading-overlay *ngIf="loading" [p-text]="literals.loadingData" [p-size]="sizeLoading"></po-loading-overlay>
     <div class="po-table-main-container">
       <div
         #tableWrapper
@@ -865,7 +862,7 @@
 </ng-template>
 
 <ng-template #noColumnsWithHeight>
-  <div class="po-table-header-fixed-inner" [style.width.px]="noColumnsHeader?.nativeElement.offsetWidth">
+  <div class="po-table-header-fixed-inner" [style.width.px]="headerWidth">
     {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}
   </div>
 </ng-template>

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

@@ -2156,19 +2156,17 @@ describe('PoTableComponent:', () => {
 
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('div.po-table-container-relative')).toBeTruthy();
-      expect(nativeElement.querySelector('div.po-table-overlay')).toBeTruthy();
-      expect(nativeElement.querySelector('po-loading.po-table-overlay-content')).toBeTruthy();
+      expect(nativeElement.querySelector('div.po-table-container-sticky')).toBeTruthy();
+      expect(nativeElement.querySelector('po-loading-overlay')).toBeTruthy();
     });
 
     it('shouldn`t show loading on table', () => {
       component.loading = false;
 
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('div.po-table-container-relative')).toBeFalsy();
-      expect(nativeElement.querySelector('div.po-table-overlay')).toBeFalsy();
-      expect(nativeElement.querySelector('po-loading.po-table-overlay-content')).toBeFalsy();
+      expect(nativeElement.querySelector('div.po-table-container-sticky')).toBeFalsy();
+      expect(nativeElement.querySelector('po-loading-overlay')).toBeFalsy();
     });
 
     it('should show td with `po-table-column-actions` class if has more than 1 action', () => {
@@ -3195,4 +3193,82 @@ describe('PoTableComponent:', () => {
 
     expect(component['isDraggable']).toBeFalse();
   });
+
+  it('changeSizeLoading: should set sm  if height of parent element is smaller or equal 150px', () => {
+    const fakeTable = {
+      sizeLoading: 'sm',
+      tableWrapperElement: {
+        nativeElement: {
+          offsetHeight: 150
+        }
+      }
+    };
+
+    component['changeSizeLoading'].call(fakeTable);
+
+    expect(fakeTable.sizeLoading).toBe('sm');
+  });
+
+  it('changeSizeLoading: should set lg if height of parent element is higher or equal 260px', () => {
+    const fakeTable = {
+      sizeLoading: 'sm',
+      tableWrapperElement: {
+        nativeElement: {
+          offsetHeight: 260
+        }
+      }
+    };
+
+    component['changeSizeLoading'].call(fakeTable);
+
+    expect(fakeTable.sizeLoading).toBe('lg');
+  });
+
+  it('changeSizeLoading: should set md  if height of parent element is between 150px and 260px', () => {
+    const fakeTable = {
+      sizeLoading: 'sm',
+      tableWrapperElement: {
+        nativeElement: {
+          offsetHeight: 200
+        }
+      }
+    };
+
+    component['changeSizeLoading'].call(fakeTable);
+
+    expect(fakeTable.sizeLoading).toBe('md');
+  });
+
+  it('changeSizeLoading: should set lg if there is no height in parentElement', () => {
+    const fakeTable = {
+      sizeLoading: 'sm',
+      tableTemplate: {
+        nativeElement: {
+          parentElement: {
+            anotherProperty: null
+          }
+        }
+      }
+    };
+
+    component['changeSizeLoading'].call(fakeTable);
+
+    expect(fakeTable.sizeLoading).toBe('lg');
+  });
+
+  it('changeHeaderWidth: should set width if noColumnsHeader ', () => {
+    const fakeTable = {
+      headerWidth: null,
+      noColumnsHeader: {
+        nativeElement: {
+          offsetWidth: 300
+        }
+      },
+      changeDetector: { detectChanges: () => {} }
+    };
+
+    component['changeHeaderWidth'].call(fakeTable);
+
+    expect(fakeTable.headerWidth).toBe(300);
+  });
 });

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

@@ -141,6 +141,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   inputFieldValue = '';
   JSON: JSON;
   newOrderColumns: Array<PoTableColumn>;
+  sizeLoading: string = 'sm';
+  headerWidth: number;
 
   close: PoModalAction = {
     action: () => {
@@ -162,7 +164,6 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   private differ;
   private footerHeight;
   private headerHeight;
-  private initialized = false;
   private timeoutResize;
   private visibleElement = false;
   private scrollEvent$: Observable<any>;
@@ -295,8 +296,17 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
     this.idRadio = `po-radio-${uuid()}`;
   }
 
+  changeHeaderWidth() {
+    if (this.noColumnsHeader) {
+      this.headerWidth = this.noColumnsHeader?.nativeElement.offsetWidth;
+    }
+    this.changeDetector.detectChanges();
+  }
+
   ngAfterViewInit() {
     this.initialized = true;
+    this.changeHeaderWidth();
+    this.changeSizeLoading();
   }
 
   showMoreInfiniteScroll({ target }): void {
@@ -309,6 +319,7 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   ngDoCheck() {
     this.checkChangesItems();
     this.verifyCalculateHeightTableContainer();
+
     // Permite que os cabeçalhos sejam calculados na primeira vez que o componente torna-se visível,
     // evitando com isso, problemas com Tabs ou Divs que iniciem escondidas.
     if (this.tableWrapperElement?.nativeElement.offsetWidth && !this.visibleElement && this.initialized) {
@@ -725,6 +736,18 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
     this.eventDelete.emit(newItemsFiltered);
   }
 
+  protected changeSizeLoading() {
+    const tableHeight = this.tableWrapperElement?.nativeElement?.offsetHeight;
+
+    if (tableHeight <= 150) {
+      this.sizeLoading = 'sm';
+    } else if (tableHeight > 150 && tableHeight < 260) {
+      this.sizeLoading = 'md';
+    } else {
+      this.sizeLoading = 'lg';
+    }
+  }
+
   private checkChangesItems() {
     const changesItems = this.differ.diff(this.items);