refactor: Replace ngx-bootstrap dropdown w/ cdk menu and overlay

* Continues towards migrating away from the ngx-bootstrap library in favor of using cdk. Cdk components have better a11y support and are style agnostic. We can still apply bootstrap styles to them, but gives us the options to move away from bootstrap in the future. * Still using bootstrap styling for visual consistency. * Replaced all dropdown usages with menu and overlay
bluehalo · Aug 23, 2023 · 7274e58 · 7274e58
1 parent 2acc842
commit 7274e58
Show file tree

Hide file tree

Showing 36 changed files with 534 additions and 414 deletions.
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
@@ -6,12 +6,10 @@ import { TitleStrategy, provideRouter, withHashLocation } from '@angular/router'
 
 import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 
 import { providerCdkDialog } from './common/dialog/provider';
 import { authInterceptor } from './core/auth/auth.interceptor';
@@ -27,12 +25,13 @@ export const appConfig: ApplicationConfig = {
 		importProvidersFrom(
 			AlertModule.forRoot(),
 			BsDatepickerModule.forRoot(),
-			BsDropdownModule.forRoot(),
 			ModalModule.forRoot(),
 			PopoverModule.forRoot(),
 			TabsModule.forRoot(),
-			TooltipModule.forRoot(),
-			TypeaheadModule.forRoot()
+			TooltipModule.forRoot()
+			// If still using uncomment imports below.
+			// BsDropdownModule.forRoot(),
+			// TypeaheadModule.forRoot()
 		),
 		provideAnimations(),
 		provideHttpClient(

diff --git a/src/app/common/cdk-menu-item-router-link.directive.ts b/src/app/common/cdk-menu-item-router-link.directive.ts
@@ -0,0 +1,20 @@
+import { CdkMenuItem } from '@angular/cdk/menu';
+import { Directive, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+/**
+ * Work around for bug where CdkMenuItems w/ RouterLink don't trigger properly when using keyboard navigation.
+ */
+@Directive({
+	selector: '[cdkMenuItem][routerLink]',
+	standalone: true
+})
+export class CdkMenuItemRouterLinkDirective {
+	menuItem = inject(CdkMenuItem);
+	routerLink = inject(RouterLink);
+	constructor() {
+		this.menuItem.triggered.subscribe(() => {
+			this.routerLink.onClick(0, false, false, false, false);
+		});
+	}
+}
diff --git a/src/app/common/search-input/search-input.component.spec.ts b/src/app/common/search-input/search-input.component.spec.ts
@@ -41,6 +41,7 @@ describe('SearchInputComponent', () => {
 	}));
 
 	it('should not apply the search if keyup is never triggered', fakeAsync(() => {
+		componentInstance.preferInputEvent = false;
 		inputElement.nativeElement.value = 'search value';
 		fixture.detectChanges();
 		// need to trigger input event here so ngModel will set `search` property correctly

diff --git a/src/app/common/search-input/search-input.component.ts b/src/app/common/search-input/search-input.component.ts
@@ -35,7 +35,7 @@ export class SearchInputComponent {
 	/**
 	 * If true, searches will be made on `input` events, otherwise searches will be made on `keyup` events
 	 */
-	@Input() preferInputEvent = false;
+	@Input() preferInputEvent = true;
 
 	/**
 	 * Specifies a minimum character count required to search.

diff --git a/src/app/common/table/filter/_shared.scss b/src/app/common/table/filter/_shared.scss
@@ -15,7 +15,7 @@ button.dropdown-toggle {
 
 .dropdown-menu {
 	font-size: $filter-dropdown-font-size;
-	margin-top: 0.5rem;
+	//margin-top: 0.5rem;
 	max-height: $filter-dropdown-max-height;
 
 	input {

diff --git a/src/app/common/table/filter/asy-abstract-header-filter.component.ts b/src/app/common/table/filter/asy-abstract-header-filter.component.ts
@@ -28,6 +28,8 @@ export abstract class AsyAbstractHeaderFilterComponent
 
 	isFiltered = false;
 
+	isOpen = false;
+
 	private storage = new SessionStorageService();
 
 	/**

diff --git a/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.html b/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.html
@@ -1,22 +1,34 @@
-<span class="dropdown" container="body" dropdown [insideClick]="true">
-	<button class="dropdown-toggle dropdown-toggle-hide-caret" dropdownToggle>
-		<span
-			class="filter fa-solid fa-list"
-			container="body"
-			placement="bottom"
-			tooltip="Apply Filters"
-			[hidden]="isFiltered"
-		></span>
-		<span
-			class="filter fa-solid fa-filter"
-			container="body"
-			placement="bottom"
-			tooltip="Edit Filters"
-			[hidden]="!isFiltered"
-		></span>
-	</button>
+<button
+	class="dropdown-toggle dropdown-toggle-hide-caret"
+	cdkOverlayOrigin
+	#trigger
+	(click)="isOpen = !isOpen"
+>
+	<span
+		class="filter fa-solid fa-list"
+		container="body"
+		placement="bottom"
+		tooltip="Apply Filters"
+		[hidden]="isFiltered"
+	></span>
+	<span
+		class="filter fa-solid fa-filter"
+		container="body"
+		placement="bottom"
+		tooltip="Edit Filters"
+		[hidden]="!isFiltered"
+	></span>
+</button>
 
-	<div class="dropdown-menu" [class.dropdown-menu-right]="dropdownMenuRight" *dropdownMenu>
+<ng-template
+	cdkConnectedOverlay
+	cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+	[cdkConnectedOverlayHasBackdrop]="true"
+	[cdkConnectedOverlayOpen]="isOpen"
+	[cdkConnectedOverlayOrigin]="trigger"
+	(backdropClick)="isOpen = false"
+>
+	<div class="dropdown-menu" cdkTrapFocus cdkTrapFocusAutoCapture>
 		<div class="form-check">
 			<input
 				class="form-check-input"
@@ -108,4 +120,4 @@
 			/>
 		</div>
 	</div>
-</span>
+</ng-template>
diff --git a/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.spec.ts b/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.spec.ts
@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { DateTime, Settings } from 'luxon';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { AsyFilterDirective } from '../asy-filter.directive';
 import { AsyHeaderDateFilterComponent } from './asy-header-date-filter.component';
@@ -36,7 +35,7 @@ describe('AsyHeaderDateFilter', () => {
 		filterSpy.deregister.and.callFake(() => {});
 
 		await TestBed.configureTestingModule({
-			imports: [BrowserAnimationsModule, BsDropdownModule, AsyHeaderDateFilterComponent],
+			imports: [BrowserAnimationsModule, AsyHeaderDateFilterComponent],
 			providers: [{ provide: AsyFilterDirective, useValue: filterSpy as AsyFilterDirective }]
 		}).compileComponents();
 

diff --git a/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.ts b/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.ts
@@ -1,11 +1,12 @@
+import { A11yModule } from '@angular/cdk/a11y';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject, Optional } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NgSelectModule } from '@ng-select/ng-select';
 import { DateTime } from 'luxon';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import {
@@ -20,12 +21,15 @@ import {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	standalone: true,
 	imports: [
-		BsDropdownModule,
 		FormsModule,
 		NgSelectModule,
 		BsDatepickerModule,
 		TitleCasePipe,
-		TooltipModule
+		TooltipModule,
+		CdkOverlayOrigin,
+		CdkConnectedOverlay,
+		A11yModule,
+		OverlayModule
 	]
 })
 export class AsyHeaderDateFilterComponent extends AsyAbstractHeaderFilterComponent {

diff --git a/src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.html b/src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.html
@@ -1,26 +1,34 @@
-<span class="dropdown" container="body" dropdown [insideClick]="true">
-	<button class="dropdown-toggle dropdown-toggle-hide-caret" dropdownToggle>
-		<span
-			class="filter fa-solid fa-list"
-			container="body"
-			placement="bottom"
-			tooltip="Apply Filters"
-			[hidden]="isFiltered"
-		></span>
-		<span
-			class="filter fa-solid fa-filter"
-			container="body"
-			placement="bottom"
-			tooltip="Edit Filters"
-			[hidden]="!isFiltered"
-		></span>
-	</button>
+<button
+	class="dropdown-toggle dropdown-toggle-hide-caret"
+	cdkOverlayOrigin
+	#trigger
+	(click)="isOpen = !isOpen"
+>
+	<span
+		class="filter fa-solid fa-list"
+		container="body"
+		placement="bottom"
+		tooltip="Apply Filters"
+		[hidden]="isFiltered"
+	></span>
+	<span
+		class="filter fa-solid fa-filter"
+		container="body"
+		placement="bottom"
+		tooltip="Edit Filters"
+		[hidden]="!isFiltered"
+	></span>
+</button>
 
-	<div
-		class="dropdown-menu d-flex flex-column"
-		[ngClass]="{ 'dropdown-menu-right': dropdownMenuRight }"
-		*dropdownMenu
-	>
+<ng-template
+	cdkConnectedOverlay
+	cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+	[cdkConnectedOverlayHasBackdrop]="true"
+	[cdkConnectedOverlayOpen]="isOpen"
+	[cdkConnectedOverlayOrigin]="trigger"
+	(backdropClick)="isOpen = false"
+>
+	<div class="dropdown-menu d-flex flex-column" cdkTrapFocus cdkTrapFocusAutoCapture>
 		<ng-container *ngIf="showSearch">
 			<div class="search mt-2">
 				<asy-search-input
@@ -86,4 +94,4 @@
 			</div>
 		</ng-container>
 	</div>
-</span>
+</ng-template>
diff --git a/src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.ts b/src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.ts
@@ -1,8 +1,9 @@
+import { A11yModule } from '@angular/cdk/a11y';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { NgClass, NgFor, NgIf, TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject, Input, Optional, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { SearchInputComponent } from '../../../search-input/search-input.component';
@@ -27,14 +28,17 @@ export type ListFilterOption = {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	standalone: true,
 	imports: [
-		BsDropdownModule,
 		NgClass,
 		NgIf,
 		SearchInputComponent,
 		NgFor,
 		FormsModule,
 		TitleCasePipe,
-		TooltipModule
+		TooltipModule,
+		CdkOverlayOrigin,
+		CdkConnectedOverlay,
+		A11yModule,
+		OverlayModule
 	],
 	providers: [TitleCasePipe]
 })

diff --git a/src/app/common/table/filter/asy-header-text-filter/asy-header-text-filter.component.html b/src/app/common/table/filter/asy-header-text-filter/asy-header-text-filter.component.html
@@ -1,26 +1,34 @@
-<span class="dropdown" container="body" dropdown [insideClick]="true">
-	<button class="dropdown-toggle dropdown-toggle-hide-caret" dropdownToggle>
-		<span
-			class="filter fa-solid fa-list"
-			container="body"
-			placement="bottom"
-			tooltip="Apply Filters"
-			[hidden]="isFiltered"
-		></span>
-		<span
-			class="filter fa-solid fa-filter"
-			container="body"
-			placement="bottom"
-			tooltip="Edit Filters"
-			[hidden]="!isFiltered"
-		></span>
-	</button>
+<button
+	class="dropdown-toggle dropdown-toggle-hide-caret"
+	cdkOverlayOrigin
+	#trigger
+	(click)="isOpen = !isOpen"
+>
+	<span
+		class="filter fa-solid fa-list"
+		container="body"
+		placement="bottom"
+		tooltip="Apply Filters"
+		[hidden]="isFiltered"
+	></span>
+	<span
+		class="filter fa-solid fa-filter"
+		container="body"
+		placement="bottom"
+		tooltip="Edit Filters"
+		[hidden]="!isFiltered"
+	></span>
+</button>
 
-	<div
-		class="dropdown-menu d-flex flex-column"
-		[ngClass]="{ 'dropdown-menu-right': dropdownMenuRight }"
-		*dropdownMenu
-	>
+<ng-template
+	cdkConnectedOverlay
+	cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+	[cdkConnectedOverlayHasBackdrop]="true"
+	[cdkConnectedOverlayOpen]="isOpen"
+	[cdkConnectedOverlayOrigin]="trigger"
+	(backdropClick)="isOpen = false"
+>
+	<div class="dropdown-menu d-flex flex-column" cdkTrapFocus cdkTrapFocusAutoCapture>
 		<div class="mt-3">
 			<ng-select
 				[(ngModel)]="option"
@@ -41,4 +49,4 @@
 			</asy-search-input>
 		</div>
 	</div>
-</span>
+</ng-template>
diff --git a/src/app/common/table/filter/asy-header-text-filter/asy-header-text-filter.component.ts b/src/app/common/table/filter/asy-header-text-filter/asy-header-text-filter.component.ts
@@ -1,10 +1,11 @@
+import { A11yModule } from '@angular/cdk/a11y';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject, Input, Optional } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NgSelectModule } from '@ng-select/ng-select';
 import escapeRegExp from 'lodash/escapeRegExp';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { SearchInputComponent } from '../../../search-input/search-input.component';
@@ -24,12 +25,15 @@ type BuildFilterFunction = (search: string, option: TextFilterOption) => any;
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	standalone: true,
 	imports: [
-		BsDropdownModule,
 		NgClass,
 		NgSelectModule,
 		FormsModule,
 		SearchInputComponent,
-		TooltipModule
+		TooltipModule,
+		A11yModule,
+		OverlayModule,
+		CdkConnectedOverlay,
+		CdkOverlayOrigin
 	]
 })
 export class AsyHeaderTextFilterComponent extends AsyAbstractHeaderFilterComponent {