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
wsteixeira · Jul 11, 2022 · fbf4f4c · fbf4f4c
1 parent 1fc2be3
commit fbf4f4c
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 24 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
@@ -380,11 +380,33 @@
 
         <!-- Coluna criada para caso as ações fiquem no lado esquerdo -->
         <th
-          *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>
 
+        <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
+              class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
+              p-tooltip-position="left"
+              [p-tooltip]="literals.columnsManager"
+              (click)="onOpenColumnManager()"
+            ></button>
+          </div>
+        </th>
+
         <th *ngIf="!hasMainColumns" #noColumnsHeader class="po-table-header-column po-text-center">
           <ng-container *ngIf="height; then noColumnsWithHeight; else noColumnsWithoutHeight"> </ng-container>
         </th>
@@ -422,20 +444,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"
           [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
-              [attr.aria-label]="literals.columnsManager"
+              #columnManagerTargetRight
               class="po-table-header-column-manager-button po-icon po-icon-settings po-clickable"
               p-tooltip-position="left"
               [p-tooltip]="literals.columnsManager"
@@ -483,6 +504,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"
@@ -718,10 +744,21 @@
 </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)"
+>
+</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();
@@ -729,6 +730,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 },
@@ -2324,11 +2326,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,
@@ -2338,7 +2341,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);
     });
@@ -2440,13 +2444,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
@@ -112,7 +112,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   itemSize: number;
   lastVisibleColumnsSelected: Array<PoTableColumn>;
 
-  private _columnManagerTarget: ElementRef;
+  private _columnManagerTargetLeft: ElementRef;
+  private _columnManagerTargetRight: ElementRef;
   private differ;
   private footerHeight;
   private initialized = false;
@@ -124,13 +125,24 @@ 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 columnManagerTargetLeft() {
+    return this._columnManagerTargetLeft;
+  }
+
+  @ViewChild('columnManagerTargetRight') set columnManagerTargetRight(value: ElementRef) {
+    this._columnManagerTargetRight = value;
+
     this.changeDetector.detectChanges();
   }
 
-  get columnManagerTarget() {
-    return this._columnManagerTarget;
+  get columnManagerTargetRight() {
+    return this._columnManagerTargetRight;
   }
 
   constructor(