Skip to content

Commit 7e7d405

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, melhora a usabilidade do componente, principalmente do mobile. Fixes po-ui#1194
1 parent 1fc2be3 commit 7e7d405

File tree

5 files changed

+88
-24
lines changed

5 files changed

+88
-24
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

+47-10
Original file line numberDiff line numberDiff line change
@@ -380,11 +380,33 @@
380380

381381
<!-- Coluna criada para caso as ações fiquem no lado esquerdo -->
382382
<th
383-
*ngIf="!actionRight && (visibleActions.length > 1 || isSingleAction)"
383+
*ngIf="hasVisibleActions && hideColumnsManager && !actionRight"
384384
[class.po-table-header-master-detail]="!isSingleAction"
385385
[class.po-table-header-single-action]="isSingleAction"
386386
></th>
387387

388+
<th
389+
#columnManagerLeft
390+
*ngIf="hasValidColumns && !hideColumnsManager && !actionRight"
391+
[class.po-table-header-column-manager]="!isSingleAction || !hasVisibleActions"
392+
[class.po-table-header-column-manager-border]="!height && container"
393+
[class.po-table-header-single-action]="isSingleAction"
394+
>
395+
<div
396+
[class.po-table-header-column-manager-border]="height && container"
397+
[class.po-table-header-column-manager-fixed-inner]="height"
398+
[style.width.px]="height && visibleActions.length ? columnManagerLeft.offsetWidth : undefined"
399+
>
400+
<button
401+
#columnManagerTargetLeft
402+
class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
403+
p-tooltip-position="left"
404+
[p-tooltip]="literals.columnsManager"
405+
(click)="onOpenColumnManager()"
406+
></button>
407+
</div>
408+
</th>
409+
388410
<th *ngIf="!hasMainColumns" #noColumnsHeader class="po-table-header-column po-text-center">
389411
<ng-container *ngIf="height; then noColumnsWithHeight; else noColumnsWithoutHeight"> </ng-container>
390412
</th>
@@ -422,20 +444,19 @@
422444
></th>
423445

424446
<th
425-
#columnManager
426-
*ngIf="hasValidColumns && !hideColumnsManager"
427-
[class.po-table-header-column-manager]="!isSingleAction || !actionRight"
447+
#columnManagerRight
448+
*ngIf="hasValidColumns && !hideColumnsManager && actionRight"
449+
[class.po-table-header-column-manager]="!isSingleAction"
428450
[class.po-table-header-column-manager-border]="!height && container"
429-
[class.po-table-header-single-action]="isSingleAction && actionRight"
451+
[class.po-table-header-single-action]="isSingleAction"
430452
>
431453
<div
432454
[class.po-table-header-column-manager-border]="height && container"
433455
[class.po-table-header-column-manager-fixed-inner]="height"
434-
[style.width.px]="height && visibleActions.length ? columnManager.offsetWidth : undefined"
456+
[style.width.px]="height && visibleActions.length ? columnManagerRight.offsetWidth : undefined"
435457
>
436458
<button
437-
#columnManagerTarget
438-
[attr.aria-label]="literals.columnsManager"
459+
#columnManagerTargetRight
439460
class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
440461
p-tooltip-position="left"
441462
[p-tooltip]="literals.columnsManager"
@@ -483,6 +504,11 @@
483504
>
484505
</ng-template>
485506

507+
<!-- Coluna para não ficar em branco nas linhas de gerenciamento -->
508+
<ng-container *ngIf="!actionRight && !hasVisibleActions && !hideColumnsManager">
509+
<td class="po-table-column"></td>
510+
</ng-container>
511+
486512
<!-- Valida se a origem do detail é pela diretiva -->
487513
<td
488514
*ngIf="hasRowTemplate && !hasRowTemplateWithArrowDirectionRight"
@@ -718,10 +744,21 @@
718744
</ng-template>
719745

720746
<po-table-column-manager
721-
*ngIf="!hideColumnsManager"
747+
*ngIf="!hideColumnsManager && actionRight"
748+
[p-columns]="columns"
749+
[p-max-columns]="maxColumns"
750+
[p-target]="columnManagerTargetRight"
751+
[p-last-visible-columns-selected]="lastVisibleColumnsSelected"
752+
(p-visible-columns-change)="onVisibleColumnsChange($event)"
753+
(p-change-visible-columns)="onChangeVisibleColumns($event)"
754+
>
755+
</po-table-column-manager>
756+
757+
<po-table-column-manager
758+
*ngIf="!hideColumnsManager && !actionRight"
722759
[p-columns]="columns"
723760
[p-max-columns]="maxColumns"
724-
[p-target]="columnManagerTarget"
761+
[p-target]="columnManagerTargetLeft"
725762
[p-last-visible-columns-selected]="lastVisibleColumnsSelected"
726763
(p-visible-columns-change)="onVisibleColumnsChange($event)"
727764
(p-change-visible-columns)="onChangeVisibleColumns($event)"

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

+18-5
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();
@@ -729,6 +730,7 @@ describe('PoTableComponent:', () => {
729730
});
730731

731732
it('should contain more than 1 "header-master-detail" if actionRight is false and "isSingleAction" is false', () => {
733+
component.hideColumnsManager = true;
732734
component.selectable = true;
733735
component.actions = [
734736
{ label: 'PO1', visible: true },
@@ -2324,11 +2326,12 @@ describe('PoTableComponent:', () => {
23242326
expect(nativeElement.querySelector(`th.po-table-header-master-detail`)).toBe(null);
23252327
});
23262328

2327-
it(`should contains 3 td if has 2 columns, column manager and haven't actions`, () => {
2329+
it(`should contains 4 td if has 2 columns, column manager and haven't actions`, () => {
23282330
component.items = [{ name: 'John', age: 24 }];
23292331
component.columns = [{ property: 'name' }, { property: 'age' }];
23302332
component.actions = [];
23312333
component.hideColumnsManager = false;
2334+
component.actionRight = false;
23322335

23332336
component.tableRowTemplate = {
23342337
...mockTableDetailDiretive,
@@ -2338,7 +2341,8 @@ describe('PoTableComponent:', () => {
23382341
fixture.detectChanges();
23392342

23402343
const columnsManagerTd = 1;
2341-
const expectedValue = component.columns.length + columnsManagerTd;
2344+
const masterDetailTd = 1;
2345+
const expectedValue = component.columns.length + columnsManagerTd + masterDetailTd;
23422346

23432347
expect(nativeElement.querySelectorAll('td').length).toBe(expectedValue);
23442348
});
@@ -2440,13 +2444,22 @@ describe('PoTableComponent:', () => {
24402444
expect(component.firstAction).toEqual(firstAction);
24412445
});
24422446

2443-
it('columnManagerTarget: should set property and call `detectChanges`', () => {
2447+
it('columnManagerTargetLeft: should set property and call `detectChanges`', () => {
2448+
const spyDetectChanges = spyOn(component['changeDetector'], 'detectChanges');
2449+
2450+
component.columnManagerTargetLeft = new ElementRef('<th></th>');
2451+
2452+
expect(spyDetectChanges).toHaveBeenCalled();
2453+
expect(component.columnManagerTargetLeft).toBeTruthy();
2454+
});
2455+
2456+
it('columnManagerTargetRight: should set property and call `detectChanges`', () => {
24442457
const spyDetectChanges = spyOn(component['changeDetector'], 'detectChanges');
24452458

2446-
component.columnManagerTarget = new ElementRef('<th></th>');
2459+
component.columnManagerTargetRight = new ElementRef('<th></th>');
24472460

24482461
expect(spyDetectChanges).toHaveBeenCalled();
2449-
expect(component.columnManagerTarget).toBeTruthy();
2462+
expect(component.columnManagerTargetRight).toBeTruthy();
24502463
});
24512464

24522465
describe(`hasSelectableColumn`, () => {

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

+17-5
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
112112
itemSize: number;
113113
lastVisibleColumnsSelected: Array<PoTableColumn>;
114114

115-
private _columnManagerTarget: ElementRef;
115+
private _columnManagerTargetLeft: ElementRef;
116+
private _columnManagerTargetRight: ElementRef;
116117
private differ;
117118
private footerHeight;
118119
private initialized = false;
@@ -124,13 +125,24 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
124125
private clickListener: () => void;
125126
private resizeListener: () => void;
126127

127-
@ViewChild('columnManagerTarget') set columnManagerTarget(value: ElementRef) {
128-
this._columnManagerTarget = value;
128+
@ViewChild('columnManagerTargetLeft') set columnManagerTargetLeft(value: ElementRef) {
129+
this._columnManagerTargetLeft = value;
130+
131+
this.changeDetector.detectChanges();
132+
}
133+
134+
get columnManagerTargetLeft() {
135+
return this._columnManagerTargetLeft;
136+
}
137+
138+
@ViewChild('columnManagerTargetRight') set columnManagerTargetRight(value: ElementRef) {
139+
this._columnManagerTargetRight = value;
140+
129141
this.changeDetector.detectChanges();
130142
}
131143

132-
get columnManagerTarget() {
133-
return this._columnManagerTarget;
144+
get columnManagerTargetRight() {
145+
return this._columnManagerTargetRight;
134146
}
135147

136148
constructor(

0 commit comments

Comments
 (0)