Skip to content

Commit 9f146e0

Browse files
Rafael Lourenço Marquesalinelariguet
Rafael Lourenço Marques
authored and
alinelariguet
committed
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
1 parent cd019ef commit 9f146e0

File tree

5 files changed

+59
-65
lines changed

5 files changed

+59
-65
lines changed

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

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
1717

1818
@Directive()
1919
class PoTableComponent extends PoTableBaseComponent {
20-
calculateWidthHeaders() {}
2120
checkInfiniteScroll() {}
2221
calculateHeightTableContainer(height) {}
2322
}
@@ -106,22 +105,18 @@ describe('PoTableBaseComponent:', () => {
106105
expectPropertiesValues(component, 'items', [], []);
107106
});
108107

109-
it('should set selectable and call calculateWidthHeaders', () => {
110-
spyOn(component, 'calculateWidthHeaders');
108+
it('should set selectable', () => {
111109
const validValues = ['', true, 1];
112110
const invalidValues = [undefined, null, false, 0];
113111

114112
expectPropertiesValues(component, 'selectable', validValues, true);
115113
expectPropertiesValues(component, 'selectable', invalidValues, false);
116-
expect(component.calculateWidthHeaders).toHaveBeenCalled();
117114
});
118115

119-
it('should set hideDetail and call calculateWidthHeaders', () => {
120-
spyOn(component, 'calculateWidthHeaders');
116+
it('should set hideDetail', () => {
121117
expectSettersMethod(component, 'hideDetail', '', 'hideDetail', true);
122118
expectSettersMethod(component, 'hideDetail', 'true', 'hideDetail', true);
123119
expectSettersMethod(component, 'hideDetail', 'false', 'hideDetail', false);
124-
expect(component.calculateWidthHeaders).toHaveBeenCalled();
125120
});
126121

127122
it('should call setColumnLink when set columns', () => {
@@ -164,19 +159,14 @@ describe('PoTableBaseComponent:', () => {
164159
});
165160
});
166161

167-
it('should set height and call calculateWidthHeaders', () => {
168-
spyOn(component, 'calculateWidthHeaders');
169-
162+
it('should set height', () => {
170163
expectSettersMethod(component, 'height', 100, 'height', 100);
171-
expect(component.calculateWidthHeaders).toHaveBeenCalled();
172164
});
173165

174-
it('should set columns and call calculateWidthHeaders', () => {
175-
spyOn(component, 'calculateWidthHeaders');
166+
it('should set columns', () => {
176167
component.columns = [{ property: 'teste', label: 'label' }];
177168

178169
expect(component.columns).toEqual([{ property: 'teste', label: 'label' }]);
179-
expect(component.calculateWidthHeaders).toHaveBeenCalled();
180170
});
181171

182172
it('should set hideSelectAll to true if singleSelect', () => {
@@ -1348,22 +1338,16 @@ describe('PoTableBaseComponent:', () => {
13481338
expectPropertiesValues(component, 'loading', booleanInvalidValues, false);
13491339
});
13501340

1351-
it('p-loading: should update property `p-loading` with valid values and call `calculateWidthHeaders`', () => {
1352-
spyOn(component, 'calculateWidthHeaders');
1353-
1341+
it('p-loading: should update property `p-loading` with valid values', () => {
13541342
expectPropertiesValues(component, 'loading', booleanValidTrueValues, true);
1355-
1356-
expect(component.calculateWidthHeaders).toHaveBeenCalled();
13571343
});
13581344

1359-
it('p-columns: should call `setColumnLink` and `calculateWidthHeaders` if has values', () => {
1345+
it('p-columns: should call `setColumnLink` if has values', () => {
13601346
spyOn(component, <any>'setColumnLink');
1361-
spyOn(component, 'calculateWidthHeaders');
13621347

13631348
component.columns = [{ label: 'table', property: 'table' }];
13641349

13651350
expect(component['setColumnLink']).toHaveBeenCalled();
1366-
expect(component.calculateWidthHeaders).toHaveBeenCalled();
13671351
});
13681352

13691353
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‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
391391

392392
if (this._columns.length) {
393393
this.setColumnLink();
394-
this.calculateWidthHeaders();
395394
} else if (this.hasItems) {
396395
this._columns = this.getDefaultColumns(this.items[0]);
397396
}
@@ -433,7 +432,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
433432
*/
434433
@Input('p-height') set height(height: number) {
435434
this._height = height;
436-
this.calculateWidthHeaders();
437435
}
438436

439437
get height() {
@@ -451,7 +449,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
451449
*/
452450
@Input('p-hide-detail') set hideDetail(hideDetail: boolean) {
453451
this._hideDetail = hideDetail != null && hideDetail.toString() === '' ? true : convertToBoolean(hideDetail);
454-
this.calculateWidthHeaders();
455452
}
456453

457454
get hideDetail() {
@@ -523,7 +520,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
523520
*/
524521
@Input('p-loading') set loading(loading: boolean) {
525522
this._loading = convertToBoolean(loading);
526-
this.calculateWidthHeaders();
527523
}
528524

529525
get loading() {
@@ -546,7 +542,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
546542
*/
547543
@Input('p-actions') set actions(actions: Array<PoTableAction>) {
548544
this._actions = actions;
549-
this.calculateWidthHeaders();
550545
}
551546

552547
get actions() {
@@ -570,7 +565,6 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
570565
*/
571566
@Input('p-selectable') set selectable(value: boolean) {
572567
this._selectable = <any>value === '' ? true : convertToBoolean(value);
573-
this.calculateWidthHeaders();
574568
}
575569

576570
get selectable() {
@@ -986,7 +980,5 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
986980

987981
protected abstract calculateHeightTableContainer(height);
988982

989-
protected abstract calculateWidthHeaders();
990-
991983
protected abstract checkInfiniteScroll();
992984
}

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
<ng-template #tableHeaderTemplate>
5959
<table class="po-table" [class.po-table-striped]="striped" [class.po-table-layout-fixed]="hideTextOverflow">
6060
<thead>
61-
<tr [class.po-table-header]="!height">
61+
<tr [class.po-table-header]="height">
6262
<th *ngIf="hasSelectableColumn" class="po-table-column-selectable">
6363
<div [class.po-table-header-fixed-inner]="height">
6464
<po-checkbox
@@ -94,7 +94,7 @@
9494
class="po-table-header-ellipsis"
9595
[style.width]="column.width"
9696
[style.max-width]="column.width"
97-
[style.min-width]="column.width"
97+
[style.min-width]="column.width || '50px'"
9898
[class.po-clickable]="(sort && column.sortable !== false) || hasService"
9999
[class.po-table-header-subtitle]="column.type === 'subtitle'"
100100
(click)="sortColumn(column)"
@@ -134,6 +134,7 @@
134134
>
135135
<button
136136
#columnManagerTarget
137+
type="button"
137138
[attr.aria-label]="literals.columnsManager"
138139
class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
139140
p-tooltip-position="left"
@@ -153,8 +154,8 @@
153154
#poTableTbodyVirtual
154155
[itemSize]="itemSize"
155156
[style.height.px]="heightTableVirtual"
156-
[minBufferPx]="height < 100 ? 100 : height"
157-
[maxBufferPx]="height < 200 ? 200 : height"
157+
[minBufferPx]="heightTableVirtual < 100 ? 100 : heightTableVirtual"
158+
[maxBufferPx]="heightTableVirtual < 200 ? 200 : heightTableVirtual"
158159
(scroll)="syncronizeHorizontalScroll()"
159160
>
160161
<table class="po-table" [class.po-table-striped]="striped" [class.po-table-layout-fixed]="hideTextOverflow">
@@ -380,6 +381,7 @@
380381

381382
<!-- Coluna criada para caso as ações fiquem no lado esquerdo -->
382383
<th
384+
#columnActionLeft
383385
*ngIf="!actionRight && (visibleActions.length > 1 || isSingleAction)"
384386
[class.po-table-header-master-detail]="!isSingleAction"
385387
[class.po-table-header-single-action]="isSingleAction"
@@ -435,6 +437,7 @@
435437
>
436438
<button
437439
#columnManagerTarget
440+
type="button"
438441
[attr.aria-label]="literals.columnsManager"
439442
class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
440443
p-tooltip-position="left"

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

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -608,14 +608,12 @@ describe('PoTableComponent:', () => {
608608
expect(tableElement.offsetHeight + tableFooterElement.offsetHeight + tableHeaderElement.offsetHeight).toBe(150);
609609
});
610610

611-
it('should call calculateWidthHeaders and setTableOpacity in debounceResize', fakeAsync(() => {
612-
spyOn(component, <any>'calculateWidthHeaders');
611+
it('should call setTableOpacity in debounceResize', fakeAsync(() => {
613612
spyOn(component, <any>'setTableOpacity');
614613

615614
component['debounceResize']();
616615
tick(500);
617616

618-
expect(component['calculateWidthHeaders']).toHaveBeenCalled();
619617
expect(component['setTableOpacity']).toHaveBeenCalled();
620618
}));
621619

@@ -688,6 +686,34 @@ describe('PoTableComponent:', () => {
688686
expect(component['footerHeight']).toBe(10);
689687
});
690688

689+
it('should return true in verifyChangeHeightInHeader', () => {
690+
component['headerHeight'] = 1;
691+
spyOn(component, <any>'getHeightTableHeader').and.returnValue(10);
692+
693+
expect(component['verifyChangeHeightInHeader']()).toBeTruthy();
694+
});
695+
696+
it('should return false in verifyChangeHeightInHeader', () => {
697+
component['headerHeight'] = 10;
698+
spyOn(component, <any>'getHeightTableHeader').and.returnValue(10);
699+
700+
expect(component['verifyChangeHeightInHeader']()).toBeFalsy();
701+
});
702+
703+
it('should calculate height when change the header height', () => {
704+
component['_height'] = 100;
705+
component['headerHeight'] = 100;
706+
707+
spyOn(component, <any>'verifyChangeHeightInHeader').and.returnValue(true);
708+
spyOn(component, <any>'getHeightTableHeader').and.returnValue(10);
709+
spyOn(component, <any>'calculateHeightTableContainer');
710+
711+
component['verifyCalculateHeightTableContainer']();
712+
713+
expect(component['calculateHeightTableContainer']).toHaveBeenCalled();
714+
expect(component['headerHeight']).toBe(10);
715+
});
716+
691717
it('shouldn`t calculate height when not change the footer height', () => {
692718
component['_height'] = 100;
693719
component['footerHeight'] = 100;
@@ -840,13 +866,6 @@ describe('PoTableComponent:', () => {
840866
expect(component['getHeightTableHeader'].call(fakeThis)).toBe(100);
841867
});
842868

843-
it('should return the header table height equal to 0', () => {
844-
const fakeThis = {
845-
poTableThead: undefined
846-
};
847-
expect(component['getHeightTableHeader'].call(fakeThis)).toBe(0);
848-
});
849-
850869
it('should set tableOpacity property with method setTableOpacity', () => {
851870
component['setTableOpacity'](1);
852871

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

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -102,19 +102,19 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
102102

103103
@ViewChildren('actionsIconElement', { read: ElementRef }) actionsIconElement: QueryList<any>;
104104
@ViewChildren('actionsElement', { read: ElementRef }) actionsElement: QueryList<any>;
105-
@ViewChildren('headersTable') headersTable: QueryList<any>;
106105

107106
heightTableContainer: number;
108107
heightTableVirtual: number;
109108
popupTarget;
110109
tableOpacity: number = 0;
111110
tooltipText: string;
112-
itemSize: number;
111+
itemSize: number = 32;
113112
lastVisibleColumnsSelected: Array<PoTableColumn>;
114113

115114
private _columnManagerTarget: ElementRef;
116115
private differ;
117116
private footerHeight;
117+
private headerHeight;
118118
private initialized = false;
119119
private timeoutResize;
120120
private visibleElement = false;
@@ -245,7 +245,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
245245
this.checkInfiniteScroll();
246246
this.visibleElement = true;
247247
}
248-
document.body.offsetWidth > 1366 ? (this.itemSize = 44) : (this.itemSize = 32);
248+
249+
this.itemSize = document.body.offsetWidth > 1366 ? 44 : 32;
249250
}
250251

251252
ngOnDestroy() {
@@ -571,20 +572,6 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
571572
this.changeDetector.detectChanges();
572573
}
573574

574-
protected calculateWidthHeaders() {
575-
setTimeout(() => {
576-
if (this.height) {
577-
this.headersTable.forEach(header => {
578-
const divHeader = header.nativeElement.querySelector('.po-table-header-fixed-inner');
579-
if (divHeader) {
580-
divHeader.style.width = `${header.nativeElement.offsetWidth}px`;
581-
}
582-
});
583-
}
584-
this.changeDetector.detectChanges();
585-
});
586-
}
587-
588575
protected checkInfiniteScroll(): void {
589576
if (this.hasInfiniteScroll()) {
590577
if (this.poTableTbodyVirtual.nativeElement.scrollHeight >= this.height) {
@@ -622,8 +609,6 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
622609
private debounceResize() {
623610
clearTimeout(this.timeoutResize);
624611
this.timeoutResize = setTimeout(() => {
625-
this.calculateWidthHeaders();
626-
627612
// show the table
628613
this.setTableOpacity(1);
629614
});
@@ -639,7 +624,9 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
639624
}
640625

641626
private getHeightTableHeader() {
642-
return this.poTableThead ? this.poTableThead.nativeElement.offsetHeight : 0;
627+
return this.poTableThead?.nativeElement?.offsetHeight
628+
? this.poTableThead.nativeElement.offsetHeight
629+
: this.itemSize;
643630
}
644631

645632
private hasInfiniteScroll(): boolean {
@@ -694,9 +681,18 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
694681
return this.footerHeight !== this.getHeightTableFooter();
695682
}
696683

697-
private verifyCalculateHeightTableContainer() {
684+
private verifyChangeHeightInHeader() {
685+
return this.headerHeight !== this.getHeightTableHeader();
686+
}
687+
688+
protected verifyCalculateHeightTableContainer() {
698689
if (this.height && this.verifyChangeHeightInFooter()) {
699690
this.footerHeight = this.getHeightTableFooter();
691+
692+
if (this.verifyChangeHeightInHeader()) {
693+
this.headerHeight = this.getHeightTableHeader();
694+
}
695+
700696
this.calculateHeightTableContainer(this.height);
701697
}
702698
}

0 commit comments

Comments
 (0)