feat(list-builder-view-grids): add new state architecture (Phase 1 & 2)

libs/components/list-builder-view-grids/src/index.ts

@@ -7,6 +7,7 @@ export { SkyColumnSelectorModule } from './lib/modules/column-selector/column-se
 export { SkyListColumnSelectorActionModule } from './lib/modules/list-column-selector-action/list-column-selector-action.module';
 
 export { SkyListViewGridComponent } from './lib/modules/list-view-grid/list-view-grid.component';
+export { NewSkyListViewGridComponent } from './lib/modules/list-view-grid/new-list-view-grid.component';
 export { SkyListViewGridModule } from './lib/modules/list-view-grid/list-view-grid.module';
 
 export { ListViewGridColumnsOrchestrator } from './lib/modules/list-view-grid/state/columns/columns.orchestrator';
@@ -20,6 +21,8 @@ export {
   GridStateOrchestrator,
 } from './lib/modules/list-view-grid/state/grid-state.rxstate';
 export { GridState } from './lib/modules/list-view-grid/state/grid-state.state-node';
+export { NewGridState } from './lib/modules/list-view-grid/state/new-grid-state';
+export { NewGridStateDispatcher } from './lib/modules/list-view-grid/state/new-grid-state-dispatcher';
 
 export { SkyListViewGridMessage } from './lib/modules/list-view-grid/types/list-view-grid-message';
 export { SkyListViewGridMessageType } from './lib/modules/list-view-grid/types/list-view-grid-message-type';
@@ -29,3 +32,4 @@ export { SkyListViewGridRowDeleteConfirmArgs } from './lib/modules/list-view-gri
 // Components and directives must be exported to support Angular’s “partial” Ivy compiler.
 // Obscure names are used to indicate types are not part of the public API.
 export { SkyListColumnSelectorActionComponent as λ1 } from './lib/modules/list-column-selector-action/list-column-selector-action.component';
+export { NewSkyListColumnSelectorActionComponent as λ2 } from './lib/modules/list-column-selector-action/new-list-column-selector-action.component';

libs/components/list-builder-view-grids/src/lib/modules/list-column-selector-action/list-column-selector-action.module.ts

@@ -12,6 +12,7 @@ import { SkyListBuilderViewGridsResourcesModule } from '../shared/sky-list-build
 
 import { SkyListColumnSelectorActionComponent } from './list-column-selector-action.component';
 import { SkyListColumnSelectorButtonComponent } from './list-column-selector-button.component';
+import { NewSkyListColumnSelectorActionComponent } from './new-list-column-selector-action.component';
 
 /**
  * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
@@ -20,6 +21,7 @@ import { SkyListColumnSelectorButtonComponent } from './list-column-selector-but
   declarations: [
     SkyListColumnSelectorActionComponent,
     SkyListColumnSelectorButtonComponent,
+    NewSkyListColumnSelectorActionComponent,
   ],
   imports: [
     CommonModule,
@@ -29,6 +31,10 @@ import { SkyListColumnSelectorButtonComponent } from './list-column-selector-but
     SkyListToolbarModule,
     SkyIconModule,
   ],
-  exports: [SkyListColumnSelectorActionComponent, SkyColumnSelectorModule],
+  exports: [
+    SkyListColumnSelectorActionComponent,
+    NewSkyListColumnSelectorActionComponent,
+    SkyColumnSelectorModule,
+  ],
 })
 export class SkyListColumnSelectorActionModule {}

libs/components/list-builder-view-grids/src/lib/modules/list-column-selector-action/new-list-column-selector-action.component.ts

@@ -0,0 +1,195 @@
+import {
+  AfterContentInit,
+  Component,
+  EventEmitter,
+  Input,
+  Optional,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { SkyGridColumnModel } from '@skyux/grids';
+import {
+  ListState,
+  ListStateDispatcher,
+  ListToolbarItemModel,
+  SkyListSecondaryActionsComponent,
+} from '@skyux/list-builder';
+import { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';
+
+import { Observable, combineLatest } from 'rxjs';
+import {
+  distinctUntilChanged,
+  map as observableMap,
+  take,
+} from 'rxjs/operators';
+
+import {
+  SkyColumnSelectorContext,
+  SkyColumnSelectorModel,
+} from '../column-selector/column-selector-context';
+import { SkyColumnSelectorComponent } from '../column-selector/column-selector-modal.component';
+import { NewSkyListViewGridComponent } from '../list-view-grid/new-list-view-grid.component';
+
+/**
+ * Provides a column selector modal for a list grid view when placed in a list toolbar.
+ * This component works with NewSkyListViewGridComponent and uses combineLatest
+ * with individual state observables instead of subscribing to the entire state object.
+ *
+ * @internal
+ */
+@Component({
+  selector: 'sky-new-list-column-selector-action',
+  templateUrl: './list-column-selector-action.component.html',
+  standalone: false,
+})
+export class NewSkyListColumnSelectorActionComponent
+  implements AfterContentInit
+{
+  /**
+   * Enables the column selector in the list toolbar. Set this attribute to the instance of
+   * the `sky-new-list-view-grid` component using the component's template reference variable.
+   */
+  @Input()
+  public gridView: NewSkyListViewGridComponent;
+
+  /**
+   * The `helpKey` string to associate with a help button in the grid header.
+   */
+  @Input()
+  public helpKey: string;
+
+  /**
+   * Fires when users click the help button and broadcasts the `helpKey`.
+   */
+  @Output()
+  public helpOpened = new EventEmitter<string>();
+
+  @ViewChild('columnChooser', {
+    static: true,
+  })
+  private columnChooserTemplate: TemplateRef<unknown>;
+
+  private columnSelectorActionItemToolbarIndex = 7000;
+
+  constructor(
+    public listState: ListState,
+    private modalService: SkyModalService,
+    private dispatcher: ListStateDispatcher,
+    @Optional() public secondaryActions: SkyListSecondaryActionsComponent
+  ) {}
+
+  public ngAfterContentInit(): void {
+    if (!this.secondaryActions) {
+      const columnChooserItem = new ListToolbarItemModel({
+        id: 'column-chooser',
+        template: this.columnChooserTemplate,
+        location: 'left',
+      });
+
+      this.dispatcher.toolbarAddItems(
+        [columnChooserItem],
+        this.columnSelectorActionItemToolbarIndex
+      );
+    }
+  }
+
+  public get isInGridView(): Observable<boolean> {
+    return this.listState.pipe(
+      observableMap((s) => s.views.active),
+      observableMap((activeView) => {
+        return this.gridView && activeView === this.gridView.id;
+      }),
+      distinctUntilChanged()
+    );
+  }
+
+  public get isInGridViewAndSecondary(): Observable<boolean> {
+    return this.listState.pipe(
+      observableMap((s) => s.views.active),
+      observableMap((activeView) => {
+        return (
+          this.secondaryActions &&
+          this.gridView &&
+          activeView === this.gridView.id
+        );
+      }),
+      distinctUntilChanged()
+    );
+  }
+
+  /**
+   * REFACTORED: Uses combineLatest with individual observables instead of
+   * subscribing to the entire state object.
+   */
+  public openColumnSelector(): void {
+    /* istanbul ignore else */
+    /* sanity check */
+    if (this.gridView) {
+      // REFACTORED: Use combineLatest with individual observables
+      combineLatest([
+        this.gridView.gridState.columnItems$,
+        this.gridView.gridState.displayedColumnItems$,
+      ])
+        .pipe(take(1))
+        .subscribe(([columnItems, displayedColumnItems]) => {
+          const columns: SkyColumnSelectorModel[] = columnItems
+            .filter((item: SkyGridColumnModel) => !item.locked)
+            .map((item: SkyGridColumnModel) => ({
+              id: item.id,
+              heading: item.heading,
+              description: item.description,
+            }));
+
+          const selectedColumnIds: string[] = displayedColumnItems
+            .filter((item: SkyGridColumnModel) => !item.locked)
+            .map((item: SkyGridColumnModel) => item.id);
+
+          this.openModal(columns, selectedColumnIds);
+        });
+    }
+  }
+
+  private openModal(
+    columns: SkyColumnSelectorModel[],
+    selectedColumnIds: string[]
+  ): void {
+    const modalInstance = this.modalService.open(SkyColumnSelectorComponent, {
+      providers: [
+        {
+          provide: SkyColumnSelectorContext,
+          useValue: {
+            columns,
+            selectedColumnIds,
+          },
+        },
+      ],
+      helpKey: this.helpKey,
+    });
+
+    modalInstance.helpOpened.subscribe((helpKey: string) => {
+      this.helpOpened.emit(helpKey);
+      this.helpOpened.complete();
+    });
+
+    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {
+      if (result.reason === 'save' && result.data) {
+        this.handleColumnSelection(result.data);
+      }
+    });
+  }
+
+  /**
+   * REFACTORED: Uses new state observable and dispatcher method.
+   */
+  private handleColumnSelection(newSelectedIds: string[]): void {
+    // Use columnItems$ observable to get current columns
+    this.gridView.gridState.columnItems$.pipe(take(1)).subscribe((columnItems) => {
+      const newDisplayedColumns = columnItems.filter((item) => {
+        return newSelectedIds.indexOf(item.id) > -1 || item.locked;
+      });
+      // REFACTORED: Use new dispatcher method instead of action dispatch
+      this.gridView.gridDispatcher.loadDisplayedColumns(newDisplayedColumns, true);
+    });
+  }
+}

libs/components/list-builder-view-grids/src/lib/modules/list-view-grid/list-view-grid.module.ts

@@ -7,22 +7,24 @@ import { SkyListColumnSelectorActionModule } from '../list-column-selector-actio
 import { SkyListBuilderViewGridsResourcesModule } from '../shared/sky-list-builder-view-grids-resources.module';
 
 import { SkyListViewGridComponent } from './list-view-grid.component';
+import { NewSkyListViewGridComponent } from './new-list-view-grid.component';
 
 /**
  * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
  */
 @NgModule({
-  declarations: [SkyListViewGridComponent],
+  declarations: [SkyListViewGridComponent, NewSkyListViewGridComponent],
   imports: [
     CommonModule,
     SkyWaitModule,
     SkyGridModule,
     SkyListBuilderViewGridsResourcesModule,
   ],
-  exports: [
-    SkyListViewGridComponent,
-    SkyListColumnSelectorActionModule,
-    SkyGridModule,
-  ],
+    exports: [
+      SkyListViewGridComponent,
+      NewSkyListViewGridComponent,
+      SkyListColumnSelectorActionModule,
+      SkyGridModule,
+    ],
 })
 export class SkyListViewGridModule {}