fix(components/ag-grid): compact cell text wrapping (#2304)

* fix(components/ag-grid): compact cell text wrapping * Prettier * Remove column type changes
blackbaud · May 17, 2024 · a56061b · a56061b
1 parent 83a1111
commit a56061b
Show file tree

Hide file tree

Showing 10 changed files with 390 additions and 138 deletions.
diff --git a/apps/e2e/ag-grid-storybook-e2e/src/e2e/data-manager.component.cy.ts b/apps/e2e/ag-grid-storybook-e2e/src/e2e/data-manager.component.cy.ts
@@ -21,6 +21,8 @@ describe(`ag-grid-storybook data manager`, () => {
           ['normal-with-top-scroll', 'normal with top scroll'],
           ['auto-height', 'auto height'],
           ['auto-height-with-top-scroll', 'auto height with top scroll'],
+          ['wrap-text', 'wrap text'],
+          ['wrap-text-no-select', 'wrap text, no select checkbox'],
         ].forEach(([domLayout, label]) => {
           describe(`${label} layout${compact ? ', compact' : ''}`, () => {
             beforeEach(() => {
@@ -32,31 +34,30 @@ describe(`ag-grid-storybook data manager`, () => {
 
             it(`should render ag-grid with data manager, ${label} layout${compact ? ', compact' : ''}`, () => {
               // eslint-disable-next-line cypress/no-unnecessary-waiting
-              cy.get('#ready')
+              cy.get('#ready', { timeout: 10000 })
                 .should('exist')
                 .end()
 
                 .get('#storybook-root')
                 .should('exist')
-                .should('be.visible')
-                .end()
+                .should('be.visible');
+
+              if (!domLayout.includes('no-select')) {
                 // Verify that the checkboxes are visible.
-                .get('[name="center"] .sky-ag-grid-cell-row-selector')
-                .should('have.length.gt', 14)
-                .should('have.descendants', '.sky-switch-control')
-                .end()
-                // Necessary to wait for the grid to render.
-                .wait(1000)
-                .get('#storybook-root')
-                .skyVisualTest(
-                  /* spell-checker:disable-next-line */
-                  `datamanagercomponent-datamanager--data-manager-${domLayout}-${theme}${compact ? '-compact' : ''}`,
-                  {
-                    clip: { x: 0, y: 0, width: 1280, height: 600 },
-                    overwrite: true,
-                    disableTimersAndAnimations: true,
-                  },
-                );
+                cy.get('[name="center"] .sky-ag-grid-cell-row-selector')
+                  .should('have.length.gt', 14)
+                  .should('have.descendants', '.sky-switch-control');
+              }
+
+              cy.get('#storybook-root').skyVisualTest(
+                /* spell-checker:disable-next-line */
+                `datamanagercomponent-datamanager--data-manager-${domLayout}-${theme}${compact ? '-compact' : ''}`,
+                {
+                  clip: { x: 0, y: 0, width: 1280, height: 600 },
+                  overwrite: true,
+                  disableTimersAndAnimations: true,
+                },
+              );
             });
           });
         });

diff --git a/apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.component.html b/apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.component.html
@@ -5,24 +5,74 @@
         <sky-checkbox
           formControlName="enableTopScroll"
           icon="arrows-h"
-          label="Top scroll"
-        ></sky-checkbox>
-        <sky-radio-group ariaLabel="DOM layout" formControlName="domLayout">
-          <div class="sky-switch-icon-group">
-            <sky-radio
-              icon="square-o"
-              label="Normal"
-              value="normal"
-            ></sky-radio>
-            <sky-radio
-              icon="arrows-v"
-              label="Auto-height"
-              value="autoHeight"
-            ></sky-radio>
-          </div>
+          title="Top scroll"
+          labelText="Top scroll"
+          labelHidden
+        />
+        <sky-checkbox
+          formControlName="wrapText"
+          icon="align-left-text"
+          title="Wrap text"
+          labelText="Wrap text"
+          labelHidden
+        />
+        <sky-checkbox
+          formControlName="autoHeightColumns"
+          icon="divider"
+          title="Autoheight columns"
+          labelText="Autoheight columns"
+          labelHidden
+        />
+        <sky-checkbox
+          formControlName="showSelect"
+          icon="check"
+          title="Show select column"
+          labelText="Show select column"
+          labelHidden
+        />
+        <sky-checkbox
+          formControlName="compact"
+          icon="font-size"
+          title="Compact layout"
+          labelText="Compact layout"
+          labelHidden
+        />
+        <sky-radio-group
+          labelText="DOM layout"
+          labelHidden
+          formControlName="domLayout"
+          class="sky-switch-icon-group"
+        >
+          <sky-radio
+            icon="square-o"
+            title="Normal DOM layout"
+            labelText="Normal"
+            labelHidden
+            value="normal"
+          />
+          <sky-radio
+            icon="arrows-v"
+            title="Auto-height DOM layout"
+            labelText="Auto-height"
+            labelHidden
+            value="autoHeight"
+          />
         </sky-radio-group>
       </form>
     </sky-data-manager-toolbar-primary-item>
+    <sky-data-manager-toolbar-primary-item>
+      <sky-dropdown buttonStyle="link">
+        <sky-dropdown-button> Show dropdown </sky-dropdown-button>
+        <sky-dropdown-menu>
+          <sky-dropdown-item>
+            <button type="button" click>Option 1</button>
+          </sky-dropdown-item>
+          <sky-dropdown-item>
+            <button type="button">Option 2</button>
+          </sky-dropdown-item>
+        </sky-dropdown-menu>
+      </sky-dropdown>
+    </sky-data-manager-toolbar-primary-item>
   </sky-data-manager-toolbar>
   <sky-data-view skyAgGridDataManagerAdapter [viewId]="viewId">
     <sky-ag-grid-wrapper *ngIf="isActive$ | async" [compact]="compact">

diff --git a/apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.component.stories.ts b/apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.component.stories.ts
@@ -75,3 +75,43 @@ DataManagerAutoHeightWithTopScrollCompact.args = {
   domLayout: 'autoHeight',
   enableTopScroll: true,
 };
+
+export const DataManagerWrapText: Story = {};
+DataManagerWrapText.args = {
+  compact: false,
+  domLayout: 'normal',
+  enableTopScroll: false,
+  showSelect: true,
+  wrapText: true,
+  autoHeightColumns: true,
+};
+
+export const DataManagerWrapTextCompact: Story = {};
+DataManagerWrapTextCompact.args = {
+  compact: true,
+  domLayout: 'normal',
+  enableTopScroll: false,
+  showSelect: true,
+  wrapText: true,
+  autoHeightColumns: true,
+};
+
+export const DataManagerWrapTextNoSelect: Story = {};
+DataManagerWrapTextNoSelect.args = {
+  compact: false,
+  domLayout: 'normal',
+  enableTopScroll: false,
+  showSelect: false,
+  wrapText: true,
+  autoHeightColumns: true,
+};
+
+export const DataManagerWrapTextNoSelectCompact: Story = {};
+DataManagerWrapTextNoSelectCompact.args = {
+  compact: true,
+  domLayout: 'normal',
+  enableTopScroll: false,
+  showSelect: false,
+  wrapText: true,
+  autoHeightColumns: true,
+};
diff --git a/apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.component.ts b/apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.component.ts
@@ -4,6 +4,7 @@ import {
   Input,
   OnInit,
   ViewEncapsulation,
+  inject,
 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';
@@ -15,14 +16,25 @@ import {
 import { FontLoadingService } from '@skyux/storybook';
 
 import { GridOptions } from 'ag-grid-community';
-import { BehaviorSubject, Observable, combineLatest, timer } from 'rxjs';
-import { filter, first, map } from 'rxjs/operators';
+import {
+  BehaviorSubject,
+  Observable,
+  combineLatest,
+  filter,
+  first,
+  map,
+  timer,
+} from 'rxjs';
 
 import { columnDefinitions, data } from '../shared/baseball-players-data';
 
 interface GridSettingsType {
   enableTopScroll: FormControl<boolean>;
   domLayout: FormControl<'normal' | 'autoHeight' | 'print'>;
+  compact: FormControl<boolean>;
+  wrapText: FormControl<boolean>;
+  autoHeightColumns: FormControl<boolean>;
+  showSelect: FormControl<boolean>;
 }
 
 @Component({
@@ -52,6 +64,15 @@ export class DataManagerComponent implements OnInit {
   @Input()
   public enableTopScroll = true;
 
+  @Input()
+  public showSelect = true;
+
+  @Input()
+  public wrapText = false;
+
+  @Input()
+  public autoHeightColumns = false;
+
   public dataManagerConfig: SkyDataManagerConfig = {};
 
   public defaultDataState = new SkyDataManagerState({
@@ -83,34 +104,31 @@ export class DataManagerComponent implements OnInit {
     ],
   });
 
-  public viewId = 'gridView';
+  public readonly viewId = 'gridView';
 
   public dataState: SkyDataManagerState | undefined;
   public items = data.slice(0, 50);
-  public settingsKey = 'ag-grid-storybook-data-manager';
+  public readonly settingsKey = 'ag-grid-storybook-data-manager';
   public gridOptions: GridOptions = {};
-  public isActive$ = new BehaviorSubject(true);
-  public gridSettings: FormGroup<GridSettingsType>;
-  public ready: Observable<boolean>;
+  public readonly isActive$ = new BehaviorSubject(true);
+  public readonly gridSettings: FormGroup<GridSettingsType>;
+  public readonly ready: Observable<boolean>;
 
-  readonly #agGridService: SkyAgGridService;
-  readonly #dataManagerService: SkyDataManagerService;
+  readonly #agGridService = inject(SkyAgGridService);
+  readonly #dataManagerService = inject(SkyDataManagerService);
   readonly #gridReady = new BehaviorSubject(false);
-  readonly #fontLoadingService: FontLoadingService;
-
-  constructor(
-    formBuilder: FormBuilder,
-    dataManagerService: SkyDataManagerService,
-    agGridService: SkyAgGridService,
-    fontLoadingService: FontLoadingService,
-  ) {
-    this.#agGridService = agGridService;
-    this.#dataManagerService = dataManagerService;
-    this.#fontLoadingService = fontLoadingService;
+  readonly #fontLoadingService = inject(FontLoadingService);
 
+  constructor(formBuilder: FormBuilder) {
     this.gridSettings = formBuilder.group<GridSettingsType>({
       enableTopScroll: formBuilder.nonNullable.control(this.enableTopScroll),
+      showSelect: formBuilder.nonNullable.control(this.showSelect),
       domLayout: formBuilder.nonNullable.control(this.domLayout),
+      compact: formBuilder.nonNullable.control(this.compact),
+      wrapText: formBuilder.nonNullable.control(this.wrapText),
+      autoHeightColumns: formBuilder.nonNullable.control(
+        this.autoHeightColumns,
+      ),
     });
     this.ready = combineLatest([
       this.#gridReady,
@@ -126,6 +144,10 @@ export class DataManagerComponent implements OnInit {
     this.gridSettings.setValue({
       enableTopScroll: this.enableTopScroll,
       domLayout: this.domLayout,
+      autoHeightColumns: this.autoHeightColumns,
+      wrapText: this.wrapText,
+      compact: this.compact,
+      showSelect: this.showSelect,
     });
     this.#applyGridOptions();
 
@@ -154,41 +176,63 @@ export class DataManagerComponent implements OnInit {
         return {
           id: col.field ?? '',
           label: col.headerName ?? '',
-          alwaysDisplayed: ['select'].includes(col.field ?? ''),
+          alwaysDisplayed:
+            this.showSelect && ['select'].includes(col.field ?? ''),
         };
       }),
     });
 
     this.gridSettings.valueChanges.subscribe((value) => {
       this.isActive$.next(false);
       this.enableTopScroll = !!value.enableTopScroll;
+      this.showSelect = !!value.showSelect;
       this.domLayout = value.domLayout ?? 'autoHeight';
+      this.compact = !!value.compact;
+      this.wrapText = !!value.wrapText;
+      this.autoHeightColumns = !!value.autoHeightColumns;
       this.#applyGridOptions();
       setTimeout(() => this.isActive$.next(true));
     });
   }
 
-  #applyGridOptions() {
+  #applyGridOptions(): void {
+    if (this.gridOptions.defaultColDef?.wrapText !== this.wrapText) {
+      if (this.wrapText) {
+        this.items = data.slice(0, 50).map((item) => ({
+          ...item,
+          name: [item.name, item.name, item.name].join(' '),
+        }));
+      } else {
+        this.items = data.slice(0, 50);
+      }
+    }
     this.gridOptions = this.#agGridService.getGridOptions({
       gridOptions: {
         columnDefs: [
-          {
-            field: 'select',
-            headerName: '',
-            width: 30,
-            type: SkyCellType.RowSelector,
-          },
+          ...(this.showSelect
+            ? [
+                {
+                  field: 'select',
+                  headerName: '',
+                  type: SkyCellType.RowSelector,
+                },
+              ]
+            : []),
           ...columnDefinitions,
         ],
         context: {
           enableTopScroll: this.enableTopScroll,
         },
         domLayout: this.domLayout,
+        defaultColDef: {
+          wrapText: this.wrapText,
+          autoHeight: this.autoHeightColumns,
+        },
         suppressColumnVirtualisation: true,
         suppressRowVirtualisation: true,
         onFirstDataRendered: () => {
           // Delay to allow the grid to render before capturing the screenshot.
-          timer(800)
+          timer(1800)
             .pipe(first())
             .subscribe(() => this.#gridReady.next(true));
         },

diff --git a/apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.module.ts b/apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.module.ts
@@ -5,6 +5,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { SkyAgGridModule } from '@skyux/ag-grid';
 import { SkyDataManagerModule } from '@skyux/data-manager';
 import { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';
+import { SkyDropdownModule } from '@skyux/popovers';
 
 import { AgGridModule } from 'ag-grid-angular';
 
@@ -25,6 +26,7 @@ const routes: Routes = [{ path: '', component: DataManagerComponent }];
     ReactiveFormsModule,
     AgGridModule,
     InlineHelpModule,
+    SkyDropdownModule,
   ],
   exports: [DataManagerComponent],
 })