fix(table): ajusta propriedade width

Ajusta propriedade width das colunas Fixes DTHFUI-7754
po-ui · Jan 29, 2024 · c46d0b0 · c46d0b0
1 parent 535cf44
commit c46d0b0
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 15 deletions.
diff --git a/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts b/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts
@@ -257,8 +257,13 @@ export interface PoTableColumn {
   visible?: boolean;
 
   /**
-   * A largura da coluna pode ser informada em pixels ou porcentagem.
-   * > Exemplo: '100px' ou '20%'.
+   *
+   * hoje o tamanho mínimo das colunas é de 32px, respeitando o padding lateral.
+   * Boas Práticas:
+   * Indicamos:
+   * - para colunas com 2 das propriedades (property, [p-draggable] e [p-sort]) : 96px
+   * - para colunas com 3 propriedades (property, [p-draggable] e [p-sort]) : 144px
+   *
    */
   width?: string;
 

diff --git a/projects/ui/src/lib/components/po-table/po-table-base.component.ts b/projects/ui/src/lib/components/po-table/po-table-base.component.ts
@@ -452,6 +452,7 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
   paramsFilter: {};
   filteredItems: Array<any> = [];
   initialized = false;
+  fixedLayout: boolean = false;
   private initialVisibleColumns: boolean = false;
   private _spacing: PoTableColumnSpacing = PoTableColumnSpacing.Medium;
   private _filteredColumns: Array<string>;

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
@@ -103,7 +103,8 @@
     [ngClass]="{
       'po-table-interactive': selectable || sort,
       'po-table-selectable': selectable,
-      'po-table-striped': striped
+      'po-table-striped': striped,
+      'po-table-data-fixed-columns': applyFixedColumns()
     }"
     [attr.p-spacing]="spacing"
   >
@@ -440,9 +441,9 @@
       [ngClass]="{
         'po-table-interactive': selectable || sort,
         'po-table-selectable': selectable,
-        'po-table-striped': striped
+        'po-table-striped': striped,
+        'po-table-data-fixed-columns': applyFixedColumns()
       }"
-      [ngStyle]="{ 'table-layout': !hasItems ? 'fixed' : 'auto' }"
       [attr.p-spacing]="spacing"
     >
       <thead class="po-table-header-sticky" [style.top]="inverseOfTranslation">
@@ -507,7 +508,7 @@
                   JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&
                   (sortedColumn.ascending || !sortedColumn.ascending)
               }"
-              [ngStyle]="{ 'width': !hasItems ? '100%' : 'auto' }"
+              [ngStyle]="{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }"
               [class.po-table-header-subtitle]="column.type === 'subtitle'"
               [class.po-table-column-drag-box]="this.isDraggable"
               (click)="sortColumn(column)"
@@ -558,7 +559,7 @@
                   JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&
                   (sortedColumn.ascending || !sortedColumn.ascending)
               }"
-              [ngStyle]="{ 'width': !hasItems ? '100%' : 'auto' }"
+              [ngStyle]="{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }"
               [class.po-table-header-subtitle]="column.type === 'subtitle'"
               (click)="sortColumn(column)"
               [pFrozenColumn]="column.fixed"

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
@@ -210,7 +210,8 @@ describe('PoTableComponent:', () => {
       verifyCalculateHeightTableContainer: () => {},
       checkChangesItems: () => {},
       debounceResize: () => true,
-      checkInfiniteScroll: () => {}
+      checkInfiniteScroll: () => {},
+      applyFixedColumns: () => {}
     };
   }
 
@@ -2803,26 +2804,26 @@ describe('PoTableComponent:', () => {
       expect(component.columnCountForMasterDetail).toBe(countColumns);
     });
 
-    it('columnCountForMasterDetail: should return 7 columnCount if actions is empty and has 5 columns', () => {
+    it('columnCountForMasterDetail: should return 6 columnCount if actions is empty and has 5 columns', () => {
       component.actions = [];
       component.columns = [...columns];
 
       const columnCountColumnManager = 1;
 
-      const countColumns = columns.length + 1 + columnCountColumnManager;
+      const countColumns = columns.length + columnCountColumnManager;
 
       expect(component.columnCountForMasterDetail).toBe(countColumns);
     });
 
-    it('columnCountForMasterDetail: should return 8 columnCount if actions is empty, has 5 columns and is selectable', () => {
+    it('columnCountForMasterDetail: should return 7 columnCount if actions is empty, has 5 columns and is selectable', () => {
       component.actions = [];
       component.columns = [...columns];
       component.selectable = true;
 
       const columnCountColumnManager = 1;
       const columnCountCheckbox = 1;
 
-      const countColumns = columns.length + 1 + columnCountColumnManager + columnCountCheckbox;
+      const countColumns = columns.length + columnCountColumnManager + columnCountCheckbox;
 
       expect(component.columnCountForMasterDetail).toBe(countColumns);
     });

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
@@ -230,9 +230,7 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
 
   get columnCountForMasterDetail() {
     // caso tiver ações será utilizado a sua coluna para exibir o columnManager
-    const columnManager = this.actions.length ? 0 : 1;
-
-    return this.mainColumns.length + 1 + (this.actions.length > 0 ? 1 : 0) + (this.selectable ? 1 : 0) + columnManager;
+    return this.mainColumns.length + 1 + (this.actions.length > 0 ? 1 : 0) + (this.selectable ? 1 : 0);
   }
 
   get detailHideSelect() {
@@ -307,6 +305,7 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
     this.initialized = true;
     this.changeHeaderWidth();
     this.changeSizeLoading();
+    this.applyFixedColumns();
   }
 
   showMoreInfiniteScroll({ target }): void {
@@ -317,6 +316,7 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
   }
 
   ngDoCheck() {
+    this.applyFixedColumns();
     this.checkChangesItems();
     this.verifyCalculateHeightTableContainer();
 
@@ -356,6 +356,13 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
     this.initializeData(queryParams);
   }
 
+  /**
+   * Verifica se columns possuem a propriedade width.
+   */
+  applyFixedColumns(): boolean {
+    return !this.columns.some(column => !column.width);
+  }
+
   /**
    * Método que colapsa uma linha com detalhe quando executada.
    *