fix(code-examples): satisfy ESLint rules for action button and AG Gri…

…d code examples (#2423)
blackbaud · Jul 2, 2024 · aef0a9a · aef0a9a
1 parent 864bab8
commit aef0a9a
Show file tree

Hide file tree

Showing 42 changed files with 312 additions and 196 deletions.
diff --git a/apps/code-examples/src/app/app.component.ts b/apps/code-examples/src/app/app.component.ts
@@ -29,7 +29,7 @@ export class AppComponent {
     });
 
     const themeSettings = new SkyThemeSettings(
-      SkyTheme.presets['modern'],
+      SkyTheme.presets.modern,
       SkyThemeMode.presets.light,
     );
 

diff --git a/apps/code-examples/src/app/app.module.ts b/apps/code-examples/src/app/app.module.ts
@@ -8,7 +8,7 @@ import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserAnimationsModule, BrowserModule, AppRoutingModule],
+  imports: [AppRoutingModule, BrowserAnimationsModule, BrowserModule],
   providers: [SkyThemeService],
   bootstrap: [AppComponent],
 })

diff --git a/...de-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/context-menu.component.ts b/...de-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -12,15 +14,15 @@ import { ICellRendererParams } from 'ag-grid-community';
   imports: [SkyDropdownModule],
 })
 export class ContextMenuComponent implements ICellRendererAngularComp {
-  public contextMenuAriaLabel = '';
-  public deleteAriaLabel = '';
-  public markInactiveAriaLabel = '';
-  public moreInfoAriaLabel = '';
+  protected contextMenuAriaLabel = '';
+  protected deleteAriaLabel = '';
+  protected markInactiveAriaLabel = '';
+  protected moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
@@ -32,6 +34,6 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   }
 
   protected actionClicked(action: string): void {
-    alert(`${action} clicked for ${this.#name}`);
+    console.error(`${action} clicked for ${this.#name}`);
   }
 }
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/data.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/data.ts
@@ -95,7 +95,7 @@ export interface AgGridDemoRow {
   jobTitle?: AutocompleteOption;
 }
 
-export const AG_GRID_DEMO_DATA = [
+export const AG_GRID_DEMO_DATA: AgGridDemoRow[] = [
   {
     selected: true,
     name: 'Billy Bob',

diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/demo.component.ts
@@ -85,7 +85,8 @@ export class DemoComponent {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -127,7 +128,9 @@ export class DemoComponent {
   constructor() {
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
     };
 
     this.gridOptions = this.#agGridSvc.getEditableGridOptions({
@@ -165,7 +168,7 @@ export class DemoComponent {
       if (result.reason === 'cancel' || result.reason === 'close') {
         alert('Edits canceled!');
       } else {
-        this.gridData = result.data;
+        this.gridData = result.data as AgGridDemoRow[];
 
         if (this.#gridApi) {
           this.#gridApi.refreshCells();
@@ -192,11 +195,13 @@ export class DemoComponent {
     }
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
-
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 }
diff --git a/...code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/edit-modal.component.ts b/...code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/edit-modal.component.ts
@@ -96,7 +96,7 @@ export class EditModalComponent {
         type: SkyCellType.Date,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {
           return { skyComponentProperties: { minDate: params.data.startDate } };
         },
@@ -107,7 +107,7 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
           return {
             skyComponentProperties: {
@@ -132,12 +132,9 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
-          const selectedDepartment: string =
-            params.data &&
-            params.data.department &&
-            params.data.department.name;
+          const selectedDepartment = params.data?.department?.name;
 
           const editParams: {
             skyComponentProperties: SkyAgGridAutocompleteProperties;
@@ -178,7 +175,9 @@ export class EditModalComponent {
 
     this.gridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
     };
 
     this.gridOptions = this.#agGridSvc.getEditableGridOptions({
@@ -196,15 +195,15 @@ export class EditModalComponent {
 
   #departmentSelectionChange(
     change: SkyAutocompleteSelectionChange,
-    node: IRowNode,
+    node: IRowNode<AgGridDemoRow>,
   ): void {
-    if (change.selectedItem && change.selectedItem !== node.data.department) {
+    if (change.selectedItem && change.selectedItem !== node.data?.department) {
       this.#clearJobTitle(node);
     }
   }
 
-  #clearJobTitle(node: IRowNode | null): void {
-    if (node) {
+  #clearJobTitle(node: IRowNode<AgGridDemoRow> | null): void {
+    if (node?.data) {
       node.data.jobTitle = undefined;
       this.#changeDetectorRef.markForCheck();
 

diff --git a/...rc/app/code-examples/ag-grid/data-entry-grid/data-manager-added/context-menu.component.ts b/...rc/app/code-examples/ag-grid/data-entry-grid/data-manager-added/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;

diff --git a/...amples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/demo.component.ts b/...amples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/demo.component.ts
@@ -15,7 +15,7 @@ import { SkyModalConfigurationInterface, SkyModalService } from '@skyux/modals';
 
 import { Subject, takeUntil } from 'rxjs';
 
-import { AG_GRID_DEMO_DATA } from './data';
+import { AG_GRID_DEMO_DATA, AgGridDemoRow } from './data';
 import { EditModalContext } from './edit-modal-context';
 import { EditModalComponent } from './edit-modal.component';
 import { FilterModalComponent } from './filter-modal.component';
@@ -130,7 +130,7 @@ export class DemoComponent implements OnInit, OnDestroy {
       if (result.reason === 'cancel' || result.reason === 'close') {
         alert('Edits canceled!');
       } else {
-        this.items = result.data;
+        this.items = result.data as AgGridDemoRow[];
         alert('Saving data!');
       }
 

diff --git a/.../src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/edit-modal.component.ts b/.../src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/edit-modal.component.ts
@@ -71,7 +71,7 @@ export class EditModalComponent {
         type: SkyCellType.Date,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {
           return {
             skyComponentProperties: {
@@ -86,7 +86,7 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
           return {
             skyComponentProperties: {
@@ -109,12 +109,9 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
-          const selectedDepartment: string =
-            params.data &&
-            params.data.department &&
-            params.data.department.name;
+          const selectedDepartment = params.data?.department?.name;
 
           const editParams: {
             skyComponentProperties: SkyAgGridAutocompleteProperties;
@@ -155,7 +152,9 @@ export class EditModalComponent {
 
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
     };
 
     this.gridOptions = this.#agGridService.getEditableGridOptions({
@@ -173,15 +172,15 @@ export class EditModalComponent {
 
   #departmentSelectionChange(
     change: SkyAutocompleteSelectionChange,
-    node: IRowNode,
+    node: IRowNode<AgGridDemoRow>,
   ): void {
-    if (change.selectedItem && change.selectedItem !== node.data.department) {
+    if (change.selectedItem && change.selectedItem !== node.data?.department) {
       this.#clearJobTitle(node);
     }
   }
 
-  #clearJobTitle(node: IRowNode | null): void {
-    if (node) {
+  #clearJobTitle(node: IRowNode<AgGridDemoRow> | null): void {
+    if (node?.data) {
       node.data.jobTitle = undefined;
 
       if (this.#gridApi) {

diff --git a/...rc/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filter-modal.component.ts b/...rc/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filter-modal.component.ts
@@ -13,6 +13,8 @@ import {
 import { SkyCheckboxModule } from '@skyux/forms';
 import { SkyModalInstance, SkyModalModule } from '@skyux/modals';
 
+import { Filters } from './filters';
+
 @Component({
   standalone: true,
   selector: 'app-filter-modal',
@@ -30,10 +32,10 @@ export class FilterModalComponent {
 
   constructor() {
     if (this.#context.filterData?.filters) {
-      const filters = this.#context.filterData.filters;
+      const filters = this.#context.filterData.filters as Filters;
 
-      this.jobTitle = filters.jobTitle || 'any';
-      this.hideSales = filters.hideSales || false;
+      this.jobTitle = filters.jobTitle ?? 'any';
+      this.hideSales = filters.hideSales ?? false;
     }
 
     this.#changeDetector.markForCheck();
@@ -46,7 +48,7 @@ export class FilterModalComponent {
     result.filters = {
       jobTitle: this.jobTitle,
       hideSales: this.hideSales,
-    };
+    } satisfies Filters;
 
     this.#changeDetector.markForCheck();
     this.#instance.save(result);

diff --git a/...code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filters.ts b/...code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filters.ts
@@ -0,0 +1,4 @@
+export interface Filters {
+  jobTitle?: string;
+  hideSales?: boolean;
+}
diff --git a/...s/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/view-grid.component.ts b/...s/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/view-grid.component.ts
@@ -28,6 +28,7 @@ import { Subject, of, takeUntil } from 'rxjs';
 
 import { ContextMenuComponent } from './context-menu.component';
 import { AgGridDemoRow } from './data';
+import { Filters } from './filters';
 
 @Component({
   standalone: true,
@@ -85,7 +86,8 @@ export class ViewGridComponent implements OnInit, OnDestroy {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -238,16 +240,21 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     this.#changeDetectorRef.markForCheck();
   }
 
-  protected onRowSelected(rowSelectedEvent: RowSelectedEvent): void {
-    if (!rowSelectedEvent.data.selected) {
+  protected onRowSelected(
+    rowSelectedEvent: RowSelectedEvent<AgGridDemoRow>,
+  ): void {
+    if (!rowSelectedEvent.data?.selected) {
       this.#updateData();
     }
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 
@@ -256,11 +263,11 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     const filterData = this.#dataState.filterData;
 
     if (filterData?.filters) {
-      const filters = filterData.filters;
+      const filters = filterData.filters as Filters;
 
       filteredItems = items.filter((item) => {
         return (
-          ((filters.hideSales && item.department.name !== 'Sales') ||
+          (!!(filters.hideSales && item.department.name !== 'Sales') ||
             !filters.hideSales) &&
           ((filters.jobTitle !== 'any' &&
             item.jobTitle?.name === filters.jobTitle) ||
@@ -286,7 +293,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
             property === 'name'
           ) {
             const propertyText = item[property]?.toLowerCase();
-            if (propertyText.indexOf(searchText) > -1) {
+            if (propertyText.includes(searchText)) {
               return true;
             }
           }
@@ -301,7 +308,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
 
   #setInitialColumnOrder(): void {
     const viewState = this.#dataState.getViewStateById(this.#viewId);
-    const visibleColumns = viewState?.displayedColumnIds || [];
+    const visibleColumns = viewState?.displayedColumnIds ?? [];
 
     this.#columnDefs.sort((col1, col2) => {
       const col1Index = visibleColumns.findIndex(