Skip to content

Commit 3401dba

Browse files
wsteixeirawsteixeira
committed
feat(table): coloca o columns-manager do mesmo lado do p-actions
Colocando o columns-manager do mesmo lado do p-actions, melhorando a usabilidade do componente, principalmente do mobile. Fixes po-ui#1194
1 parent b3e4b4c commit 3401dba

File tree

5 files changed

+129
-37
lines changed

5 files changed

+129
-37
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1024,7 +1024,7 @@ describe('PoTableColumnManagerComponent:', () => {
10241024
describe(`onChangeColumns`, () => {
10251025
it(`should set 'defaultColumns' with 'columns.currentValue' if 'defaultColumns' and ' currentValue' are different`, () => {
10261026
component['defaultColumns'] = <any>['column 1'];
1027-
component['lastVisibleColumnsSelected'] = undefined;
1027+
component['isFirstUpdate'] = true;
10281028

10291029
const columns = {
10301030
firstChange: false,
@@ -1038,9 +1038,9 @@ describe('PoTableColumnManagerComponent:', () => {
10381038
expect(component['defaultColumns']).toEqual(<any>columns.currentValue);
10391039
});
10401040

1041-
it(`should set 'defaultColumns' with 'columns.currentValue' if 'lastVisibleColumnsSelected' is true and 'currentValue' not is empty`, () => {
1041+
it(`should set 'defaultColumns' with 'columns.currentValue' if 'isFirstUpdate' is true and 'currentValue' not is empty`, () => {
10421042
component['defaultColumns'] = <any>[];
1043-
component['lastVisibleColumnsSelected'] = undefined;
1043+
component['isFirstUpdate'] = true;
10441044
const columns = {
10451045
firstChange: true,
10461046
currentValue: ['column 1']

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export class PoTableColumnManagerComponent implements OnChanges, OnDestroy {
8484
private restoreDefaultEvent: boolean;
8585
private lastEmittedValue: Array<string>;
8686
private minColumns: number = 1;
87+
private isFirstUpdate = true;
8788

8889
@Input('p-max-columns') set maxColumns(value: number) {
8990
this._maxColumns = convertToInt(value, PoTableColumnManagerMaxColumnsDefault);
@@ -356,7 +357,8 @@ export class PoTableColumnManagerComponent implements OnChanges, OnDestroy {
356357
this.columnUpdate = columns.currentValue;
357358

358359
// atualizara o defaultColumns, quando for a primeira vez ou quando o defaultColumns for diferente do currentValue
359-
if (!this.lastVisibleColumnsSelected && this.stringify(this.defaultColumns) !== this.stringify(currentValue)) {
360+
if (this.isFirstUpdate && this.stringify(this.defaultColumns) !== this.stringify(currentValue)) {
361+
this.isFirstUpdate = false;
360362
this.defaultColumns = [...currentValue];
361363
}
362364

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

+82-16
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,30 @@
7777
></th>
7878

7979
<!-- Coluna criada para caso as ações fiquem no lado esquerdo -->
80+
<th
81+
#columnManagerLeft
82+
*ngIf="hasValidColumns && !hideColumnsManager && !actionRight"
83+
[class.po-table-header-column-manager]="!isSingleAction || !hasVisibleActions"
84+
[class.po-table-header-column-manager-border]="!height && container"
85+
[class.po-table-header-single-action]="isSingleAction"
86+
>
87+
<div
88+
[class.po-table-header-column-manager-border]="height && container"
89+
[class.po-table-header-column-manager-fixed-inner]="height"
90+
[style.width.px]="height && visibleActions.length ? columnManagerLeft.offsetWidth : undefined"
91+
>
92+
<button
93+
#columnManagerTargetLeft
94+
type="button"
95+
[attr.aria-label]="literals.columnsManager"
96+
class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
97+
p-tooltip-position="right"
98+
[p-tooltip]="literals.columnsManager"
99+
(click)="onOpenColumnManager()"
100+
></button>
101+
</div>
102+
</th>
103+
80104
<th
81105
#columnActionLeft
82106
*ngIf="!actionRight && (visibleActions.length > 1 || isSingleAction)"
@@ -121,19 +145,19 @@
121145
></th>
122146

123147
<th
124-
#columnManager
125-
*ngIf="hasValidColumns && !hideColumnsManager"
126-
[class.po-table-header-column-manager]="!isSingleAction || !actionRight"
148+
#columnManagerRight
149+
*ngIf="hasValidColumns && !hideColumnsManager && actionRight"
150+
[class.po-table-header-column-manager]="!isSingleAction || !hasVisibleActions"
127151
[class.po-table-header-column-manager-border]="!height && container"
128-
[class.po-table-header-single-action]="isSingleAction && actionRight"
152+
[class.po-table-header-single-action]="isSingleAction"
129153
>
130154
<div
131155
[class.po-table-header-column-manager-border]="height && container"
132156
[class.po-table-header-column-manager-fixed-inner]="height"
133-
[style.width.px]="height && visibleActions.length ? columnManager.offsetWidth : undefined"
157+
[style.width.px]="height && visibleActions.length ? columnManagerRight.offsetWidth : undefined"
134158
>
135159
<button
136-
#columnManagerTarget
160+
#columnManagerTargetRight
137161
type="button"
138162
[attr.aria-label]="literals.columnsManager"
139163
class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
@@ -380,9 +404,33 @@
380404
></th>
381405

382406
<!-- Coluna criada para caso as ações fiquem no lado esquerdo -->
407+
<th
408+
#columnManagerLeft
409+
*ngIf="hasValidColumns && !hideColumnsManager && !actionRight"
410+
[class.po-table-header-column-manager]="!isSingleAction || !hasVisibleActions"
411+
[class.po-table-header-column-manager-border]="!height && container"
412+
[class.po-table-header-single-action]="isSingleAction"
413+
>
414+
<div
415+
[class.po-table-header-column-manager-border]="height && container"
416+
[class.po-table-header-column-manager-fixed-inner]="height"
417+
[style.width.px]="height && visibleActions.length ? columnManagerLeft.offsetWidth : undefined"
418+
>
419+
<button
420+
#columnManagerTargetLeft
421+
type="button"
422+
[attr.aria-label]="literals.columnsManager"
423+
class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
424+
p-tooltip-position="right"
425+
[p-tooltip]="literals.columnsManager"
426+
(click)="onOpenColumnManager()"
427+
></button>
428+
</div>
429+
</th>
430+
383431
<th
384432
#columnActionLeft
385-
*ngIf="!actionRight && (visibleActions.length > 1 || isSingleAction)"
433+
*ngIf="hasVisibleActions && hideColumnsManager && !actionRight"
386434
[class.po-table-header-master-detail]="!isSingleAction"
387435
[class.po-table-header-single-action]="isSingleAction"
388436
></th>
@@ -424,19 +472,19 @@
424472
></th>
425473

426474
<th
427-
#columnManager
428-
*ngIf="hasValidColumns && !hideColumnsManager"
429-
[class.po-table-header-column-manager]="!isSingleAction || !actionRight"
475+
#columnManagerRight
476+
*ngIf="hasValidColumns && !hideColumnsManager && actionRight"
477+
[class.po-table-header-column-manager]="!isSingleAction || !hasVisibleActions"
430478
[class.po-table-header-column-manager-border]="!height && container"
431-
[class.po-table-header-single-action]="isSingleAction && actionRight"
479+
[class.po-table-header-single-action]="isSingleAction"
432480
>
433481
<div
434482
[class.po-table-header-column-manager-border]="height && container"
435483
[class.po-table-header-column-manager-fixed-inner]="height"
436-
[style.width.px]="height && visibleActions.length ? columnManager.offsetWidth : undefined"
484+
[style.width.px]="height && visibleActions.length ? columnManagerRight.offsetWidth : undefined"
437485
>
438486
<button
439-
#columnManagerTarget
487+
#columnManagerTargetRight
440488
type="button"
441489
[attr.aria-label]="literals.columnsManager"
442490
class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
@@ -486,6 +534,11 @@
486534
>
487535
</ng-template>
488536

537+
<!-- Coluna para não ficar em branco nas linhas de gerenciamento -->
538+
<ng-container *ngIf="!actionRight && !hasVisibleActions && !hideColumnsManager">
539+
<td class="po-table-column"></td>
540+
</ng-container>
541+
489542
<!-- Valida se a origem do detail é pela diretiva -->
490543
<td
491544
*ngIf="hasRowTemplate && !hasRowTemplateWithArrowDirectionRight"
@@ -700,7 +753,7 @@
700753
<td
701754
*ngIf="isSingleAction"
702755
class="po-table-column po-table-column-single-action"
703-
[style.width.px]="height && actionRight ? getWidthColumnManager() : ''"
756+
[style.width.px]="height && actionRight ? getWidthColumnManagerRight() : ''"
704757
[style.max-width.px]="height && !actionRight ? getColumnWidthActionsLeft() : ''"
705758
[style.width.px]="height && !actionRight ? getColumnWidthActionsLeft() : ''"
706759
>
@@ -721,10 +774,23 @@
721774
</ng-template>
722775

723776
<po-table-column-manager
724-
*ngIf="!hideColumnsManager"
777+
*ngIf="!hideColumnsManager && actionRight"
778+
[p-columns]="columns"
779+
[p-max-columns]="maxColumns"
780+
[p-target]="columnManagerTargetRight"
781+
[p-last-visible-columns-selected]="lastVisibleColumnsSelected"
782+
(p-visible-columns-change)="onVisibleColumnsChange($event)"
783+
(p-change-visible-columns)="onChangeVisibleColumns($event)"
784+
[p-columns-default]="initialColumns"
785+
(p-initial-columns)="onColumnRestoreManager($event)"
786+
>
787+
</po-table-column-manager>
788+
789+
<po-table-column-manager
790+
*ngIf="!hideColumnsManager && !actionRight"
725791
[p-columns]="columns"
726792
[p-max-columns]="maxColumns"
727-
[p-target]="columnManagerTarget"
793+
[p-target]="columnManagerTargetLeft"
728794
[p-last-visible-columns-selected]="lastVisibleColumnsSelected"
729795
(p-visible-columns-change)="onVisibleColumnsChange($event)"
730796
(p-change-visible-columns)="onChangeVisibleColumns($event)"

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

+22-9
Original file line numberDiff line numberDiff line change
@@ -438,6 +438,7 @@ describe('PoTableComponent:', () => {
438438
});
439439

440440
it('should toggle column sortable as false', () => {
441+
component.actionRight = true;
441442
component.sort = true;
442443

443444
fixture.detectChanges();
@@ -755,6 +756,7 @@ describe('PoTableComponent:', () => {
755756
});
756757

757758
it('should contain more than 1 "header-master-detail" if actionRight is false and "isSingleAction" is false', () => {
759+
component.hideColumnsManager = true;
758760
component.selectable = true;
759761
component.actions = [
760762
{ label: 'PO1', visible: true },
@@ -2343,11 +2345,12 @@ describe('PoTableComponent:', () => {
23432345
expect(nativeElement.querySelector(`th.po-table-header-master-detail`)).toBe(null);
23442346
});
23452347

2346-
it(`should contains 3 td if has 2 columns, column manager and haven't actions`, () => {
2348+
it(`should contains 4 td if has 2 columns, column manager and haven't actions`, () => {
23472349
component.items = [{ name: 'John', age: 24 }];
23482350
component.columns = [{ property: 'name' }, { property: 'age' }];
23492351
component.actions = [];
23502352
component.hideColumnsManager = false;
2353+
component.actionRight = false;
23512354

23522355
component.tableRowTemplate = {
23532356
...mockTableDetailDiretive,
@@ -2357,7 +2360,8 @@ describe('PoTableComponent:', () => {
23572360
fixture.detectChanges();
23582361

23592362
const columnsManagerTd = 1;
2360-
const expectedValue = component.columns.length + columnsManagerTd;
2363+
const masterDetailTd = 1;
2364+
const expectedValue = component.columns.length + columnsManagerTd + masterDetailTd;
23612365

23622366
expect(nativeElement.querySelectorAll('td').length).toBe(expectedValue);
23632367
});
@@ -2459,13 +2463,22 @@ describe('PoTableComponent:', () => {
24592463
expect(component.firstAction).toEqual(firstAction);
24602464
});
24612465

2462-
it('columnManagerTarget: should set property and call `detectChanges`', () => {
2466+
it('columnManagerTargetLeft: should set property and call `detectChanges`', () => {
2467+
const spyDetectChanges = spyOn(component['changeDetector'], 'detectChanges');
2468+
2469+
component.columnManagerTargetLeft = new ElementRef('<th></th>');
2470+
2471+
expect(spyDetectChanges).toHaveBeenCalled();
2472+
expect(component.columnManagerTargetLeft).toBeTruthy();
2473+
});
2474+
2475+
it('columnManagerTargetRight: should set property and call `detectChanges`', () => {
24632476
const spyDetectChanges = spyOn(component['changeDetector'], 'detectChanges');
24642477

2465-
component.columnManagerTarget = new ElementRef('<th></th>');
2478+
component.columnManagerTargetRight = new ElementRef('<th></th>');
24662479

24672480
expect(spyDetectChanges).toHaveBeenCalled();
2468-
expect(component.columnManagerTarget).toBeTruthy();
2481+
expect(component.columnManagerTargetRight).toBeTruthy();
24692482
});
24702483

24712484
describe(`hasSelectableColumn`, () => {
@@ -2988,7 +3001,7 @@ describe('PoTableComponent:', () => {
29883001
expect(fakeThis.poTableThead.nativeElement.scrollLeft).toEqual(100);
29893002
});
29903003

2991-
it('getWidthColumnManager, should return width of column manager', () => {
3004+
it('getWidthColumnManagerRight, should return width of column manager', () => {
29923005
const fakeThis = {
29933006
columnManager: {
29943007
nativeElement: {
@@ -2999,19 +3012,19 @@ describe('PoTableComponent:', () => {
29993012

30003013
fixture.detectChanges();
30013014

3002-
component['getWidthColumnManager'].call(fakeThis);
3015+
component['getWidthColumnManagerRight'].call(fakeThis);
30033016

30043017
expect(fakeThis.columnManager.nativeElement.offsetWidth).toEqual(120);
30053018
});
30063019

3007-
it('getWidthColumnManager, should return undefined if not contain column manager', () => {
3020+
it('getWidthColumnManagerRight, should return undefined if not contain column manager', () => {
30083021
const fakeThis = {
30093022
columnManager: undefined
30103023
};
30113024

30123025
fixture.detectChanges();
30133026

3014-
const valueWidth = component['getWidthColumnManager'].call(fakeThis);
3027+
const valueWidth = component['getWidthColumnManagerRight'].call(fakeThis);
30153028

30163029
expect(valueWidth).toEqual(undefined);
30173030
});

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

+19-8
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
9797
@ViewChild('poTableTbody', { read: ElementRef, static: false }) poTableTbody;
9898
@ViewChild('poTableThead', { read: ElementRef, static: false }) poTableThead;
9999
@ViewChild('poTableTbodyVirtual', { read: ElementRef, static: false }) poTableTbodyVirtual;
100-
@ViewChild('columnManager', { read: ElementRef, static: false }) columnManager;
100+
@ViewChild('columnManagerLeft', { read: ElementRef, static: false }) columnManagerLeft;
101+
@ViewChild('columnManagerRight', { read: ElementRef, static: false }) columnManagerRight;
101102
@ViewChild('columnActionLeft', { read: ElementRef, static: false }) columnActionLeft;
102103

103104
@ViewChildren('actionsIconElement', { read: ElementRef }) actionsIconElement: QueryList<any>;
@@ -111,7 +112,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
111112
itemSize: number = 32;
112113
lastVisibleColumnsSelected: Array<PoTableColumn>;
113114

114-
private _columnManagerTarget: ElementRef;
115+
private _columnManagerTargetLeft: ElementRef;
116+
private _columnManagerTargetRight: ElementRef;
115117
private differ;
116118
private footerHeight;
117119
private headerHeight;
@@ -124,13 +126,22 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
124126
private clickListener: () => void;
125127
private resizeListener: () => void;
126128

127-
@ViewChild('columnManagerTarget') set columnManagerTarget(value: ElementRef) {
128-
this._columnManagerTarget = value;
129+
@ViewChild('columnManagerTargetLeft') set columnManagerTargetLeft(value: ElementRef) {
130+
this._columnManagerTargetLeft = value;
129131
this.changeDetector.detectChanges();
130132
}
131133

132-
get columnManagerTarget() {
133-
return this._columnManagerTarget;
134+
get columnManagerTargetLeft() {
135+
return this._columnManagerTargetLeft;
136+
}
137+
138+
@ViewChild('columnManagerTargetRight') set columnManagerTargetRight(value: ElementRef) {
139+
this._columnManagerTargetRight = value;
140+
this.changeDetector.detectChanges();
141+
}
142+
143+
get columnManagerTargetRight() {
144+
return this._columnManagerTargetRight;
134145
}
135146

136147
constructor(
@@ -554,8 +565,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
554565
this.poTableThead.nativeElement.scrollLeft = this.poTableTbodyVirtual.nativeElement.scrollLeft;
555566
}
556567

557-
public getWidthColumnManager() {
558-
return this.columnManager?.nativeElement.offsetWidth;
568+
public getWidthColumnManagerRight() {
569+
return this.columnManagerRight?.nativeElement.offsetWidth;
559570
}
560571

561572
public getColumnWidthActionsLeft() {

0 commit comments

Comments
 (0)