Skip to content

Commit

Permalink
Create DialogCdkService and Module
Browse files Browse the repository at this point in the history
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
meisekimiu committed May 8, 2024
1 parent d5f18ae commit 80b1d81
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/app/dialog-cdk/dialog-cdk.module.ts
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 {}
39 changes: 39 additions & 0 deletions src/app/dialog-cdk/dialog-cdk.service.spec.ts
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);
});
});
17 changes: 17 additions & 0 deletions src/app/dialog-cdk/dialog-cdk.service.ts
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);
}
}

0 comments on commit 80b1d81

Please sign in to comment.