-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
The current DialogService used in the web-app uses deprecated Angular functionality and a few other architectural issues. The new archive type selection component uses a modal to select a type, so this is a good opportunity to finally start migrating over to using the Angular CDK Dialog instead of our custom DialogService. Create a new service that wraps around Angular CDK's DialogService. The reason to do this right now is so that there is little confusion over which `DialogService` components are using, though in the future it would probably be best to remove this wrapper service and import the Angular CDK DialogService once we have completely deleted the old one. See #269 for more information. PER-9568: Create new component to select archive type
- Loading branch information
1 parent
d5f18ae
commit 80b1d81
Showing
3 changed files
with
65 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { DialogModule as AngularCdkDialogModule } from '@angular/cdk/dialog'; | ||
|
||
@NgModule({ | ||
declarations: [], | ||
imports: [CommonModule, AngularCdkDialogModule], | ||
}) | ||
export class DialogCdkModule {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { TestBed } from '@angular/core/testing'; | ||
import { Dialog } from '@angular/cdk/dialog'; | ||
import { Component } from '@angular/core'; | ||
import { DialogCdkService } from './dialog-cdk.service'; | ||
|
||
@Component({ | ||
selector: 'pr-dummy', | ||
standalone: true, | ||
imports: [], | ||
template: 'Hello world', | ||
}) | ||
class DummyComponent {} | ||
|
||
describe('DialogCdkService', () => { | ||
let service: DialogCdkService; | ||
let dialog: Dialog; | ||
|
||
beforeEach(() => { | ||
TestBed.configureTestingModule({}); | ||
service = TestBed.inject(DialogCdkService); | ||
dialog = TestBed.inject(Dialog); | ||
}); | ||
|
||
it('should be created', () => { | ||
expect(service).toBeTruthy(); | ||
}); | ||
|
||
it('it wraps around Angular CDK dialog.open', () => { | ||
const open = spyOn(dialog, 'open').and.stub(); | ||
const config = { | ||
width: '640px', | ||
height: '480px', | ||
panelClass: 'test-dialog', | ||
}; | ||
service.open(DummyComponent, config); | ||
|
||
expect(open).toHaveBeenCalledWith(DummyComponent, config); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { Injectable, TemplateRef } from '@angular/core'; | ||
import { Dialog, DialogConfig, DialogRef } from '@angular/cdk/dialog'; | ||
import { BasePortalOutlet, ComponentType } from '@angular/cdk/portal'; | ||
|
||
@Injectable({ | ||
providedIn: 'root', | ||
}) | ||
export class DialogCdkService { | ||
constructor(private dialog: Dialog) {} | ||
|
||
public open<T, U, V>( | ||
component: ComponentType<T> | TemplateRef<T>, | ||
config?: DialogConfig<V, DialogRef<U, T>, BasePortalOutlet> | ||
): DialogRef<U, T> { | ||
return this.dialog.open(component, config); | ||
} | ||
} |