feat(components/ag-grid): support changing the tab focus behavior

blackbaud · Sep 17, 2024 · 985c120 · 985c120
1 parent 09af237
commit 985c120
Show file tree

Hide file tree

Showing 9 changed files with 402 additions and 106 deletions.
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/focus/data.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/focus/data.ts
@@ -0,0 +1,156 @@
+export interface AutocompleteOption {
+  id: string;
+  name: string;
+}
+
+export const DEPARTMENTS = [
+  {
+    id: '1',
+    name: 'Marketing',
+  },
+  {
+    id: '2',
+    name: 'Sales',
+  },
+  {
+    id: '3',
+    name: 'Engineering',
+  },
+  {
+    id: '4',
+    name: 'Customer Support',
+  },
+];
+
+export const JOB_TITLES: Record<string, AutocompleteOption[]> = {
+  Marketing: [
+    {
+      id: '1',
+      name: 'Social Media Coordinator',
+    },
+    {
+      id: '2',
+      name: 'Blog Manager',
+    },
+    {
+      id: '3',
+      name: 'Events Manager',
+    },
+  ],
+  Sales: [
+    {
+      id: '4',
+      name: 'Business Development Representative',
+    },
+    {
+      id: '5',
+      name: 'Account Executive',
+    },
+  ],
+  Engineering: [
+    {
+      id: '6',
+      name: 'Software Engineer',
+    },
+    {
+      id: '7',
+      name: 'Senior Software Engineer',
+    },
+    {
+      id: '8',
+      name: 'Principal Software Engineer',
+    },
+    {
+      id: '9',
+      name: 'UX Designer',
+    },
+    {
+      id: '10',
+      name: 'Product Manager',
+    },
+  ],
+  'Customer Support': [
+    {
+      id: '11',
+      name: 'Customer Support Representative',
+    },
+    {
+      id: '12',
+      name: 'Account Manager',
+    },
+    {
+      id: '13',
+      name: 'Customer Support Specialist',
+    },
+  ],
+};
+
+export interface AgGridDemoRow {
+  selected?: boolean;
+  name: string;
+  age: number;
+  startDate: Date;
+  endDate?: Date;
+  department: AutocompleteOption;
+  jobTitle?: AutocompleteOption;
+}
+
+export const AG_GRID_DEMO_DATA: AgGridDemoRow[] = [
+  {
+    selected: true,
+    name: 'Billy Bob',
+    age: 55,
+    startDate: new Date('12/1/1994'),
+    department: DEPARTMENTS[3],
+    jobTitle: JOB_TITLES['Customer Support'][1],
+  },
+  {
+    selected: false,
+    name: 'Jane Deere',
+    age: 33,
+    startDate: new Date('7/15/2009'),
+    department: DEPARTMENTS[2],
+    jobTitle: JOB_TITLES['Engineering'][2],
+  },
+  {
+    selected: false,
+    name: 'John Doe',
+    age: 38,
+    startDate: new Date('9/1/2017'),
+    endDate: new Date('9/30/2017'),
+    department: DEPARTMENTS[1],
+  },
+  {
+    selected: false,
+    name: 'David Smith',
+    age: 51,
+    startDate: new Date('1/1/2012'),
+    endDate: new Date('6/15/2018'),
+    department: DEPARTMENTS[2],
+    jobTitle: JOB_TITLES['Engineering'][4],
+  },
+  {
+    selected: true,
+    name: 'Emily Johnson',
+    age: 41,
+    startDate: new Date('1/15/2014'),
+    department: DEPARTMENTS[0],
+    jobTitle: JOB_TITLES['Marketing'][2],
+  },
+  {
+    selected: false,
+    name: 'Nicole Davidson',
+    age: 22,
+    startDate: new Date('11/1/2019'),
+    department: DEPARTMENTS[2],
+    jobTitle: JOB_TITLES['Engineering'][0],
+  },
+  {
+    selected: false,
+    name: 'Carl Roberts',
+    age: 23,
+    startDate: new Date('11/1/2019'),
+    department: DEPARTMENTS[2],
+    jobTitle: JOB_TITLES['Engineering'][3],
+  },
+];
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/focus/demo.component.html b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/focus/demo.component.html
@@ -0,0 +1,23 @@
+<sky-input-box
+  labelText="Start here"
+  helpPopoverContent="Then tab to the grid"
+  stacked
+>
+  <input type="text" />
+</sky-input-box>
+<div class="sky-margin-stacked-md">
+  <sky-ag-grid-wrapper>
+    <ag-grid-angular
+      class="sky-ag-grid-editable"
+      [gridOptions]="gridOptions"
+      [rowData]="gridData"
+    />
+  </sky-ag-grid-wrapper>
+</div>
+<sky-input-box
+  labelText="Or start here"
+  helpPopoverContent="Then tab backwards to the grid"
+  stacked
+>
+  <input type="text" />
+</sky-input-box>
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/focus/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/focus/demo.component.ts
@@ -0,0 +1,115 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { SkyAgGridModule, SkyAgGridService, SkyCellType } from '@skyux/ag-grid';
+import { SkyInputBoxModule } from '@skyux/forms';
+
+import { AgGridModule } from 'ag-grid-angular';
+import { ValueFormatterParams } from 'ag-grid-community';
+
+import { AG_GRID_DEMO_DATA, AgGridDemoRow } from './data';
+
+@Component({
+  standalone: true,
+  selector: 'app-demo',
+  templateUrl: './demo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AgGridModule, SkyAgGridModule, SkyInputBoxModule],
+})
+export class DemoComponent {
+  protected gridData = AG_GRID_DEMO_DATA;
+  protected gridOptions = inject(SkyAgGridService).getEditableGridOptions({
+    gridOptions: {
+      columnDefs: [
+        {
+          field: 'name',
+          headerName: 'Name',
+          type: SkyCellType.Text,
+          editable: true,
+          cellRendererParams: {
+            skyComponentProperties: {
+              validator: (value: string): boolean => String(value).length <= 10,
+              validatorMessage: `Value exceeds maximum length`,
+            },
+          },
+        },
+        {
+          field: 'age',
+          headerName: 'Age',
+          type: SkyCellType.Number,
+          editable: true,
+          cellRendererParams: {
+            skyComponentProperties: {
+              validator: (value: number): boolean => value >= 18,
+              validatorMessage: `Age must be 18+`,
+            },
+          },
+          maxWidth: 60,
+        },
+        {
+          field: 'startDate',
+          headerName: 'Start date',
+          type: SkyCellType.Date,
+          editable: true,
+          sort: 'asc',
+        },
+        {
+          field: 'endDate',
+          headerName: 'End date',
+          type: SkyCellType.Date,
+          editable: true,
+          valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+            this.#endDateFormatter(params),
+        },
+        {
+          field: 'department',
+          headerName: 'Department',
+          type: SkyCellType.Autocomplete,
+          editable: true,
+        },
+        {
+          field: 'jobTitle',
+          headerName: 'Title',
+          type: SkyCellType.Autocomplete,
+          editable: true,
+        },
+        {
+          colId: 'validationCurrency',
+          field: 'validationCurrency',
+          headerName: 'Validation currency',
+          type: [SkyCellType.CurrencyValidator],
+          editable: true,
+        },
+        {
+          colId: 'validationDate',
+          field: 'validationDate',
+          headerName: 'Validation date',
+          type: [SkyCellType.Date, SkyCellType.Validator],
+          editable: true,
+          cellRendererParams: {
+            skyComponentProperties: {
+              validator: (value: Date): boolean =>
+                !!value && value > new Date(1985, 9, 26),
+              validatorMessage: 'Enter a future date',
+            },
+          },
+        },
+      ],
+      focusGridInnerElement: (params) => {
+        params.api.startEditingCell({
+          rowIndex: 0,
+          colKey: 'name',
+        });
+        return true;
+      },
+    },
+  });
+
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
+    return params.value
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
+      : 'N/A';
+  }
+}
diff --git a/apps/code-examples/src/app/features/ag-grid.module.ts b/apps/code-examples/src/app/features/ag-grid.module.ts
@@ -16,6 +16,13 @@ const routes: Routes = [
         '../code-examples/ag-grid/data-entry-grid/data-manager-added/demo.component'
       ).then((c) => c.DemoComponent),
   },
+  {
+    path: 'data-entry-grid/focus',
+    loadComponent: () =>
+      import(
+        '../code-examples/ag-grid/data-entry-grid/focus/demo.component'
+      ).then((c) => c.DemoComponent),
+  },
   {
     path: 'data-entry-grid/inline-help',
     loadComponent: () =>

diff --git a/apps/code-examples/src/app/home/home.component.html b/apps/code-examples/src/app/home/home.component.html
@@ -20,6 +20,11 @@
           Data Entry Grid with Data Manager
         </a>
       </li>
+      <li>
+        <a routerLink="ag-grid/data-entry-grid/focus">
+          Data Entry Grid with Initial Focus
+        </a>
+      </li>
       <li>
         <a routerLink="ag-grid/data-entry-grid/inline-help">
           Data Entry Grid with inline help