fix: auto sizing grid columns would create tiny columns when too many columns (#2057)

matheus-relief · AntoineRelief · web-flow · commit 6afea60bf26a · 2023-11-09T10:34:24.000+01:00
---------

Co-authored-by: Antoine Hurard &lt;antoine.reliefapps@gmail.com&gt;
diff --git a/libs/shared/src/lib/components/ui/core-grid/grid/grid.component.ts b/libs/shared/src/lib/components/ui/core-grid/grid/grid.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  HostListener,
   Inject,
   Input,
   OnChanges,
@@ -54,6 +53,12 @@ import { UnsubscribeComponent } from '../../../utils/unsubscribe/unsubscribe.com
 import { DOCUMENT } from '@angular/common';
 import { WidgetComponent } from '../../../widget/widget.component';
 import { DatePipe } from '../../../../pipes/date/date.pipe';
+import { ResizeObservable } from '../../../../utils/rxjs/resize-observable.util';
+
+/** Minimum column width */
+const MIN_COLUMN_WIDTH = 100;
+/** Maximum column width */
+const MAX_COLUMN_WIDTH = 250;
 
 /**
  * Test if an element match a css selector
@@ -283,14 +288,6 @@ export class GridComponent
     };
   }
 
-  /**
-   * Listen to window resize event in order to trigger the column automatic width update
-   */
-  @HostListener('window:resize', ['$event'])
-  onWindowResize() {
-    this.setColumnsWidth();
-  }
-
   /**
    * Constructor of the grid component
    *
@@ -304,6 +301,7 @@ export class GridComponent
    * @param dashboardService Dashboard service
    * @param translate The translate service
    * @param snackBar The snackbar service
+   * @param el Ref to html element
    * @param document document
    */
   constructor(
@@ -317,6 +315,7 @@ export class GridComponent
     private dashboardService: DashboardService,
     private translate: TranslateService,
     private snackBar: SnackbarService,
+    private el: ElementRef,
     @Inject(DOCUMENT) private document: Document
   ) {
     super();
@@ -373,6 +372,9 @@ export class GridComponent
         500
       );
     });
+    new ResizeObservable(this.gridRef.nativeElement)
+      .pipe(debounceTime(100), takeUntil(this.destroy$))
+      .subscribe(() => this.setColumnsWidth());
   }
 
   override ngOnDestroy(): void {
@@ -752,7 +754,6 @@ export class GridComponent
     this.action.emit({ action: 'cancel' });
   }
 
-  // === EXPORT ===
   /**
    * Downloads file of record.
    *
@@ -789,7 +790,6 @@ export class GridComponent
     });
   }
 
-  // === UTILITIES ===
   /**
    * Checks if element overflows
    *
@@ -912,7 +912,7 @@ export class GridComponent
   }
 
   /**
-   * Calls layout format from utils.ts to get the formated fields
+   * Calls layout format from utils.ts to get the formatted fields
    *
    * @param name Content of the field as a string
    * @param field Field data
@@ -978,14 +978,15 @@ export class GridComponent
    * Automatically set the width of each column
    */
   private setColumnsWidth() {
+    console.log(this.layout);
     const gridElement = this.gridRef.nativeElement;
     const gridTotalWidth = gridElement.offsetWidth;
 
     // Stores the columns width percentage
     const activeColumns: { [key: string]: number } = {};
 
     // Verify what kind of field is and deal with this logic
-    const typesFields: any = [];
+    const typesFields: { field: string; type: string; title: string }[] = [];
     this.fields.forEach((field: any) => {
       typesFields.push({
         field: field.name,
@@ -1017,34 +1018,23 @@ export class GridComponent
             activeColumns[type.field] < data[type.field].length) ||
           (type.title && activeColumns[type.field] < type.title.length)
         ) {
-          let defaultLengthValue = type.title.length;
+          const titleSize = type.title.length;
+          let contentSize = 0;
           switch (type.type) {
             case 'time':
             case 'datetime-local':
             case 'datetime':
             case 'date': {
-              const contentDefaultValue = (
-                this.datePipe.transform(data[type.field]) || ''
-              ).length;
-              if (contentDefaultValue > defaultLengthValue) {
-                defaultLengthValue = contentDefaultValue;
-              }
-              activeColumns[type.field] = defaultLengthValue;
+              contentSize = (this.datePipe.transform(data[type.field]) || '')
+                .length;
               break;
             }
             case 'file': {
-              if (data[type.field][0]?.name?.length > defaultLengthValue) {
-                defaultLengthValue = data[type.field][0]?.name.length;
-              }
-              activeColumns[type.field] = defaultLengthValue;
+              contentSize = data[type.field][0]?.name?.length || 0;
               break;
             }
             case 'numeric': {
-              const contentDefaultValue = data[type.field]?.toString()?.length;
-              if (contentDefaultValue > defaultLengthValue) {
-                defaultLengthValue = contentDefaultValue;
-              }
-              activeColumns[type.field] = defaultLengthValue;
+              contentSize = data[type.field]?.toString()?.length;
               break;
             }
             case 'checkbox':
@@ -1053,30 +1043,46 @@ export class GridComponent
               (data[type.field] || []).forEach((obj: any) => {
                 checkboxLength += obj.length;
               });
-              if (checkboxLength > defaultLengthValue) {
-                defaultLengthValue = checkboxLength;
-              }
-              activeColumns[type.field] = defaultLengthValue;
+              contentSize = checkboxLength;
               break;
             }
             case 'boolean':
             case 'color': {
               //min size
-              activeColumns[type.field] = type.title;
+              contentSize = 0;
               break;
             }
             default: {
-              const contentDefaultValue = (data[type.field] || '').length;
-              if (contentDefaultValue > defaultLengthValue) {
-                defaultLengthValue = contentDefaultValue;
-              }
-              activeColumns[type.field] = defaultLengthValue;
+              contentSize = (data[type.field] || '').length;
             }
           }
+
+          activeColumns[type.field] = Math.max(titleSize, contentSize);
         }
       });
     });
 
+    const avgPixelPerCol = gridTotalWidth / typesFields.length;
+
+    // If there are too many columns, we can't do the calculations by percentage
+    // Instead, clamp the columns to the min and max width
+    if (avgPixelPerCol < MIN_COLUMN_WIDTH * 1.1) {
+      this.columns.forEach((column) => {
+        const colWidth = activeColumns[column.field];
+        if (colWidth) {
+          column.width = Math.min(
+            Math.max(colWidth * pixelWidthPerCharacter, MIN_COLUMN_WIDTH),
+            MAX_COLUMN_WIDTH
+          );
+        }
+
+        // Make sure that every column has a width set
+        if (column.width <= 0) {
+          column.width = MIN_COLUMN_WIDTH;
+        }
+      });
+      return;
+    }
     // Calculates the widest column in character number
     const maxCharacterToDisplay = Math.floor(
       maxPixelsPerColumn / pixelWidthPerCharacter
@@ -1119,27 +1125,29 @@ export class GridComponent
     // Order the values from thinner to wider column element
     arrayColumns.sort((a, b) => a.value - b.value);
 
-    const widestColumnIndex = arrayColumns.length - 1;
-    // if the value of the smallest element is 4x times smaller than the widest one
-    // or the total percentage did not reach 100% after all conversions
-    // we adjust the overall percentages set for columns
-    while (
-      arrayColumns[0].value < 0.25 * arrayColumns[widestColumnIndex].value ||
-      total_percentage < 100
-    ) {
-      // Add the percentage available
-      if (total_percentage < 100) {
-        activeColumns[arrayColumns[0].key] += 1;
-        total_percentage += 1;
-        arrayColumns[0].value += 1;
-      } else {
-        // Remove percentage from the biggest and put in the smallest
-        activeColumns[arrayColumns[0].key] += 1;
-        activeColumns[arrayColumns[widestColumnIndex].key] -= 1;
-        arrayColumns[0].value += 1;
-        arrayColumns[widestColumnIndex].value -= 1;
+    if (arrayColumns.length > 0) {
+      const widestColumnIndex = arrayColumns.length - 1;
+      // if the value of the smallest element is 4x times smaller than the widest one
+      // or the total percentage did not reach 100% after all conversions
+      // we adjust the overall percentages set for columns
+      while (
+        arrayColumns[0].value < 0.25 * arrayColumns[widestColumnIndex].value ||
+        total_percentage < 100
+      ) {
+        // Add the percentage available
+        if (total_percentage < 100) {
+          activeColumns[arrayColumns[0].key] += 1;
+          total_percentage += 1;
+          arrayColumns[0].value += 1;
+        } else {
+          // Remove percentage from the biggest and put in the smallest
+          activeColumns[arrayColumns[0].key] += 1;
+          activeColumns[arrayColumns[widestColumnIndex].key] -= 1;
+          arrayColumns[0].value += 1;
+          arrayColumns[widestColumnIndex].value -= 1;
+        }
+        arrayColumns.sort((a, b) => a.value - b.value);
       }
-      arrayColumns.sort((a, b) => a.value - b.value);
     }
 
     // Finally, resize the columns
@@ -1157,6 +1165,10 @@ export class GridComponent
           column.width = Math.floor((min_percentage * gridTotalWidth) / 100);
         }
       }
+      // Make sure that every column has a width set
+      if (column.width <= 0) {
+        column.width = MIN_COLUMN_WIDTH;
+      }
     });
   }
 }
diff --git a/libs/shared/src/lib/utils/rxjs/resize-observable.util.ts b/libs/shared/src/lib/utils/rxjs/resize-observable.util.ts
@@ -0,0 +1,29 @@
+import { Observable } from 'rxjs';
+
+/**
+ * Resize observer as observable.
+ * Allow to use debounceTime before calling callback.
+ */
+export class ResizeObservable extends Observable<ResizeObserverEntry[]> {
+  /**
+   * Resize observer as observable.
+   * Allow to use debounceTime before calling callback.
+   *
+   * @param elem HTML element to observe
+   */
+  constructor(elem: HTMLElement) {
+    super((subscriber) => {
+      const ro = new ResizeObserver((entries) => {
+        subscriber.next(entries);
+      });
+
+      // Observe one or multiple elements
+      ro.observe(elem);
+
+      return function unsubscribe() {
+        ro.unobserve(elem);
+        ro.disconnect();
+      };
+    });
+  }
+}
