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 #1194
po-ui · Jul 19, 2022 · 65df6c5 · 65df6c5
1 parent b3e4b4c
commit 65df6c5
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 33 deletions.
diff --git a/...lib/components/po-table/po-table-column-manager/po-table-column-manager.component.spec.ts b/...lib/components/po-table/po-table-column-manager/po-table-column-manager.component.spec.ts
@@ -1024,7 +1024,7 @@ describe('PoTableColumnManagerComponent:', () => {
     describe(`onChangeColumns`, () => {
       it(`should set 'defaultColumns' with 'columns.currentValue' if 'defaultColumns' and ' currentValue' are different`, () => {
         component['defaultColumns'] = <any>['column 1'];
-        component['lastVisibleColumnsSelected'] = undefined;
+        component['isFirstUpdate'] = true;
 
         const columns = {
           firstChange: false,
@@ -1038,9 +1038,9 @@ describe('PoTableColumnManagerComponent:', () => {
         expect(component['defaultColumns']).toEqual(<any>columns.currentValue);
       });
 
-      it(`should set 'defaultColumns' with 'columns.currentValue' if 'lastVisibleColumnsSelected' is true and 'currentValue' not is empty`, () => {
+      it(`should set 'defaultColumns' with 'columns.currentValue' if 'isFirstUpdate' is true and 'currentValue' not is empty`, () => {
         component['defaultColumns'] = <any>[];
-        component['lastVisibleColumnsSelected'] = undefined;
+        component['isFirstUpdate'] = true;
         const columns = {
           firstChange: true,
           currentValue: ['column 1']

diff --git a/.../src/lib/components/po-table/po-table-column-manager/po-table-column-manager.component.ts b/.../src/lib/components/po-table/po-table-column-manager/po-table-column-manager.component.ts
@@ -84,6 +84,7 @@ export class PoTableColumnManagerComponent implements OnChanges, OnDestroy {
   private restoreDefaultEvent: boolean;
   private lastEmittedValue: Array<string>;
   private minColumns: number = 1;
+  private isFirstUpdate = true;
 
   @Input('p-max-columns') set maxColumns(value: number) {
     this._maxColumns = convertToInt(value, PoTableColumnManagerMaxColumnsDefault);
@@ -356,7 +357,8 @@ export class PoTableColumnManagerComponent implements OnChanges, OnDestroy {
     this.columnUpdate = columns.currentValue;
 
     // atualizara o defaultColumns, quando for a primeira vez ou quando o defaultColumns for diferente do currentValue
-    if (!this.lastVisibleColumnsSelected && this.stringify(this.defaultColumns) !== this.stringify(currentValue)) {
+    if (this.isFirstUpdate && this.stringify(this.defaultColumns) !== this.stringify(currentValue)) {
+      this.isFirstUpdate = false;
       this.defaultColumns = [...currentValue];
     }
 

diff --git a/projects/ui/src/lib/components/po-table/po-table.component.html b/projects/ui/src/lib/components/po-table/po-table.component.html
@@ -77,6 +77,30 @@
         ></th>
 
         <!-- Coluna criada para caso as ações fiquem no lado esquerdo -->
+        <th
+          #columnManagerLeft
+          *ngIf="hasValidColumns && !hideColumnsManager && !actionRight"
+          [class.po-table-header-column-manager]="!isSingleAction || !hasVisibleActions"
+          [class.po-table-header-column-manager-border]="!height && container"
+          [class.po-table-header-single-action]="isSingleAction"
+        >
+          <div
+            [class.po-table-header-column-manager-border]="height && container"
+            [class.po-table-header-column-manager-fixed-inner]="height"
+            [style.width.px]="height && visibleActions.length ? columnManagerLeft.offsetWidth : undefined"
+          >
+            <button
+              #columnManagerTargetLeft
+              type="button"
+              [attr.aria-label]="literals.columnsManager"
+              class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
+              p-tooltip-position="right"
+              [p-tooltip]="literals.columnsManager"
+              (click)="onOpenColumnManager()"
+            ></button>
+          </div>
+        </th>
+
         <th
           #columnActionLeft
           *ngIf="!actionRight && (visibleActions.length > 1 || isSingleAction)"
@@ -121,19 +145,19 @@
         ></th>
 
         <th
-          #columnManager
-          *ngIf="hasValidColumns && !hideColumnsManager"
-          [class.po-table-header-column-manager]="!isSingleAction || !actionRight"
+          #columnManagerRight
+          *ngIf="hasValidColumns && !hideColumnsManager && actionRight"
+          [class.po-table-header-column-manager]="!isSingleAction || !hasVisibleActions"
           [class.po-table-header-column-manager-border]="!height && container"
-          [class.po-table-header-single-action]="isSingleAction && actionRight"
+          [class.po-table-header-single-action]="isSingleAction"
         >
           <div
             [class.po-table-header-column-manager-border]="height && container"
             [class.po-table-header-column-manager-fixed-inner]="height"
-            [style.width.px]="height && visibleActions.length ? columnManager.offsetWidth : undefined"
+            [style.width.px]="height && visibleActions.length ? columnManagerRight.offsetWidth : undefined"
           >
             <button
-              #columnManagerTarget
+              #columnManagerTargetRight
               type="button"
               [attr.aria-label]="literals.columnsManager"
               class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
@@ -380,9 +404,33 @@
         ></th>
 
         <!-- Coluna criada para caso as ações fiquem no lado esquerdo -->
+        <th
+          #columnManagerLeft
+          *ngIf="hasValidColumns && !hideColumnsManager && !actionRight"
+          [class.po-table-header-column-manager]="!isSingleAction || !hasVisibleActions"
+          [class.po-table-header-column-manager-border]="!height && container"
+          [class.po-table-header-single-action]="isSingleAction"
+        >
+          <div
+            [class.po-table-header-column-manager-border]="height && container"
+            [class.po-table-header-column-manager-fixed-inner]="height"
+            [style.width.px]="height && visibleActions.length ? columnManagerLeft.offsetWidth : undefined"
+          >
+            <button
+              #columnManagerTargetLeft
+              type="button"
+              [attr.aria-label]="literals.columnsManager"
+              class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
+              p-tooltip-position="right"
+              [p-tooltip]="literals.columnsManager"
+              (click)="onOpenColumnManager()"
+            ></button>
+          </div>
+        </th>
+
         <th
           #columnActionLeft
-          *ngIf="!actionRight && (visibleActions.length > 1 || isSingleAction)"
+          *ngIf="hasVisibleActions && hideColumnsManager && !actionRight"
           [class.po-table-header-master-detail]="!isSingleAction"
           [class.po-table-header-single-action]="isSingleAction"
         ></th>
@@ -424,19 +472,19 @@
         ></th>
 
         <th
-          #columnManager
-          *ngIf="hasValidColumns && !hideColumnsManager"
-          [class.po-table-header-column-manager]="!isSingleAction || !actionRight"
+          #columnManagerRight
+          *ngIf="hasValidColumns && !hideColumnsManager && actionRight"
+          [class.po-table-header-column-manager]="!isSingleAction || !hasVisibleActions"
           [class.po-table-header-column-manager-border]="!height && container"
-          [class.po-table-header-single-action]="isSingleAction && actionRight"
+          [class.po-table-header-single-action]="isSingleAction"
         >
           <div
             [class.po-table-header-column-manager-border]="height && container"
             [class.po-table-header-column-manager-fixed-inner]="height"
-            [style.width.px]="height && visibleActions.length ? columnManager.offsetWidth : undefined"
+            [style.width.px]="height && visibleActions.length ? columnManagerRight.offsetWidth : undefined"
           >
             <button
-              #columnManagerTarget
+              #columnManagerTargetRight
               type="button"
               [attr.aria-label]="literals.columnsManager"
               class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
@@ -486,6 +534,11 @@
           >
           </ng-template>
 
+          <!-- Coluna para não ficar em branco nas linhas de gerenciamento -->
+          <ng-container *ngIf="!actionRight && !hasVisibleActions && !hideColumnsManager">
+            <td class="po-table-column"></td>
+          </ng-container>
+
           <!-- Valida se a origem do detail é pela diretiva -->
           <td
             *ngIf="hasRowTemplate && !hasRowTemplateWithArrowDirectionRight"
@@ -700,7 +753,7 @@
   <td
     *ngIf="isSingleAction"
     class="po-table-column po-table-column-single-action"
-    [style.width.px]="height && actionRight ? getWidthColumnManager() : ''"
+    [style.width.px]="height && actionRight ? getWidthColumnManagerRight() : ''"
     [style.max-width.px]="height && !actionRight ? getColumnWidthActionsLeft() : ''"
     [style.width.px]="height && !actionRight ? getColumnWidthActionsLeft() : ''"
   >
@@ -721,10 +774,23 @@
 </ng-template>
 
 <po-table-column-manager
-  *ngIf="!hideColumnsManager"
+  *ngIf="!hideColumnsManager && actionRight"
+  [p-columns]="columns"
+  [p-max-columns]="maxColumns"
+  [p-target]="columnManagerTargetRight"
+  [p-last-visible-columns-selected]="lastVisibleColumnsSelected"
+  (p-visible-columns-change)="onVisibleColumnsChange($event)"
+  (p-change-visible-columns)="onChangeVisibleColumns($event)"
+  [p-columns-default]="initialColumns"
+  (p-initial-columns)="onColumnRestoreManager($event)"
+>
+</po-table-column-manager>
+
+<po-table-column-manager
+  *ngIf="!hideColumnsManager && !actionRight"
   [p-columns]="columns"
   [p-max-columns]="maxColumns"
-  [p-target]="columnManagerTarget"
+  [p-target]="columnManagerTargetLeft"
   [p-last-visible-columns-selected]="lastVisibleColumnsSelected"
   (p-visible-columns-change)="onVisibleColumnsChange($event)"
   (p-change-visible-columns)="onChangeVisibleColumns($event)"

diff --git a/projects/ui/src/lib/components/po-table/po-table.component.spec.ts b/projects/ui/src/lib/components/po-table/po-table.component.spec.ts
@@ -438,6 +438,7 @@ describe('PoTableComponent:', () => {
   });
 
   it('should toggle column sortable as false', () => {
+    component.actionRight = true;
     component.sort = true;
 
     fixture.detectChanges();
@@ -755,6 +756,7 @@ describe('PoTableComponent:', () => {
   });
 
   it('should contain more than 1 "header-master-detail" if actionRight is false and "isSingleAction" is false', () => {
+    component.hideColumnsManager = true;
     component.selectable = true;
     component.actions = [
       { label: 'PO1', visible: true },
@@ -2343,11 +2345,12 @@ describe('PoTableComponent:', () => {
       expect(nativeElement.querySelector(`th.po-table-header-master-detail`)).toBe(null);
     });
 
-    it(`should contains 3 td if has 2 columns, column manager and haven't actions`, () => {
+    it(`should contains 4 td if has 2 columns, column manager and haven't actions`, () => {
       component.items = [{ name: 'John', age: 24 }];
       component.columns = [{ property: 'name' }, { property: 'age' }];
       component.actions = [];
       component.hideColumnsManager = false;
+      component.actionRight = false;
 
       component.tableRowTemplate = {
         ...mockTableDetailDiretive,
@@ -2357,7 +2360,8 @@ describe('PoTableComponent:', () => {
       fixture.detectChanges();
 
       const columnsManagerTd = 1;
-      const expectedValue = component.columns.length + columnsManagerTd;
+      const masterDetailTd = 1;
+      const expectedValue = component.columns.length + columnsManagerTd + masterDetailTd;
 
       expect(nativeElement.querySelectorAll('td').length).toBe(expectedValue);
     });
@@ -2459,13 +2463,22 @@ describe('PoTableComponent:', () => {
       expect(component.firstAction).toEqual(firstAction);
     });
 
-    it('columnManagerTarget: should set property and call `detectChanges`', () => {
+    it('columnManagerTargetLeft: should set property and call `detectChanges`', () => {
+      const spyDetectChanges = spyOn(component['changeDetector'], 'detectChanges');
+
+      component.columnManagerTargetLeft = new ElementRef('<th></th>');
+
+      expect(spyDetectChanges).toHaveBeenCalled();
+      expect(component.columnManagerTargetLeft).toBeTruthy();
+    });
+
+    it('columnManagerTargetRight: should set property and call `detectChanges`', () => {
       const spyDetectChanges = spyOn(component['changeDetector'], 'detectChanges');
 
-      component.columnManagerTarget = new ElementRef('<th></th>');
+      component.columnManagerTargetRight = new ElementRef('<th></th>');
 
       expect(spyDetectChanges).toHaveBeenCalled();
-      expect(component.columnManagerTarget).toBeTruthy();
+      expect(component.columnManagerTargetRight).toBeTruthy();
     });
 
     describe(`hasSelectableColumn`, () => {

diff --git a/projects/ui/src/lib/components/po-table/po-table.component.ts b/projects/ui/src/lib/components/po-table/po-table.component.ts
@@ -97,7 +97,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   @ViewChild('poTableTbody', { read: ElementRef, static: false }) poTableTbody;
   @ViewChild('poTableThead', { read: ElementRef, static: false }) poTableThead;
   @ViewChild('poTableTbodyVirtual', { read: ElementRef, static: false }) poTableTbodyVirtual;
-  @ViewChild('columnManager', { read: ElementRef, static: false }) columnManager;
+  @ViewChild('columnManagerLeft', { read: ElementRef, static: false }) columnManagerLeft;
+  @ViewChild('columnManagerRight', { read: ElementRef, static: false }) columnManagerRight;
   @ViewChild('columnActionLeft', { read: ElementRef, static: false }) columnActionLeft;
 
   @ViewChildren('actionsIconElement', { read: ElementRef }) actionsIconElement: QueryList<any>;
@@ -111,7 +112,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   itemSize: number = 32;
   lastVisibleColumnsSelected: Array<PoTableColumn>;
 
-  private _columnManagerTarget: ElementRef;
+  private _columnManagerTargetLeft: ElementRef;
+  private _columnManagerTargetRight: ElementRef;
   private differ;
   private footerHeight;
   private headerHeight;
@@ -124,13 +126,22 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   private clickListener: () => void;
   private resizeListener: () => void;
 
-  @ViewChild('columnManagerTarget') set columnManagerTarget(value: ElementRef) {
-    this._columnManagerTarget = value;
+  @ViewChild('columnManagerTargetLeft') set columnManagerTargetLeft(value: ElementRef) {
+    this._columnManagerTargetLeft = value;
     this.changeDetector.detectChanges();
   }
 
-  get columnManagerTarget() {
-    return this._columnManagerTarget;
+  get columnManagerTargetLeft() {
+    return this._columnManagerTargetLeft;
+  }
+
+  @ViewChild('columnManagerTargetRight') set columnManagerTargetRight(value: ElementRef) {
+    this._columnManagerTargetRight = value;
+    this.changeDetector.detectChanges();
+  }
+
+  get columnManagerTargetRight() {
+    return this._columnManagerTargetRight;
   }
 
   constructor(
@@ -554,8 +565,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
     this.poTableThead.nativeElement.scrollLeft = this.poTableTbodyVirtual.nativeElement.scrollLeft;
   }
 
-  public getWidthColumnManager() {
-    return this.columnManager?.nativeElement.offsetWidth;
+  public getWidthColumnManagerRight() {
+    return this.columnManagerRight?.nativeElement.offsetWidth;
   }
 
   public getColumnWidthActionsLeft() {