[#2, #3] - update README and add redirectPath option to dlg cfg

Author: agrgic16

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2019] [Ante Grgić]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,27 +1,148 @@
-# NgDialogRouter
+# ng-dialog-router
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.1.
+A small angular library that allows you to configure instances of @angular/material's MatDialog as part of your routing configuration.
 
-## Development server
+## Getting Started
+In your angular app, run `npm install ng-dialog-router --save` OR `yarn add ng-dialog-router`
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+### Prerequisites
+Starting from scratch, please do the following:
+- Generate Angular App Using [Angular CLI](https://cli.angular.io/)
+- Install Angular Material by running `npm install @angular/material --save` OR `yarn add @angular/material`
+- Install ng-dialog-router by running `npm install ng-dialog-router --save` OR `yarn add ng-dialog-router`
+- Finally, in src/styles.scss, import the Angular Material core styles as `@import "~@angular/material/prebuilt-themes/indigo-pink.css";`
 
-## Code scaffolding
+### Usage
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+#### Essentials
+ng-dialog-router simply uses an angular route resolver to convert your
+normal route configuration into one that is displayed in a dialog.
 
-## Build
+It should be provided to the `dlgRef` resolve property.
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+```ts
+import { DialogResolverService } from 'ng-dialog-router';
+import { SampleDialogComponent } from '../sample-dialog/sample-dialog.component';
 
-## Running unit tests
+const route = {
+ path: '0',
+ component: SampleDialogComponent,
+ resolve: { dlgRef: DialogResolverService },
+}
+```
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+#### Managing the dialog config settings
+The typical angular material options can be passed to the `dlg` property of the route `data`.
+The Angular Material Dialog documentation can be found here [Angular Material Dialog](https://material.angular.io/components/dialog/overview).
+```ts
+import { DialogResolverService, DialogRouteConfig } from 'ng-dialog-router';
+import { SampleDialogComponent } from '../sample-dialog/sample-dialog.component';
 
-## Running end-to-end tests
+const route = {
+ path: '0',
+ component: SampleDialogComponent,
+ resolve: { dlgRef: DialogResolverService },
+ data: {
+ dlg: {
+ data: { name: 'Sample Dialog #a.0' },
+ position: { left: '0' },
+ width: '500px',
+ } as DialogRouteConfig,
+ },
+}
+```
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+#### Additional config settings provided by this library
 
-## Further help
+For best results, using the strongly typed `DialogRouteConfig` interface for the `route.data.dlg` property
+is recommended via the `as DialogRouteConfig` syntax.
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+##### `redirectPath: string[]`
+By default, when the dialog is closed it will redirect up one level in the url tree.
+So if we are at `/home/0/a` it will navigate back to `/home/0`. ng-dialog-router has an additional
+option to allow for a custom redirect path, in case we want the dialog to go back to `/home`
+upon closing via the property `redirectPath`.
+
+```ts
+const route = {
+ path: '0',
+ component: SampleDialogComponent,
+ resolve: { dlgRef: DialogResolverService },
+ data: {
+ dlg: {
+ data: { name: 'Sample Dialog #a.0' },
+ position: { left: '0' },
+ width: '500px',
+ redirectPath: [ 'home' ],
+ } as DialogRouteConfig,
+ },
+}
+```
+
+### Full Usage Example (implemented in app's routing module)
+
+#### app/routing/routes.ts
+```ts
+import { Routes } from '@angular/router';
+import { DialogResolverService, DialogRouteConfig } from 'ng-dialog-router';
+import { SampleDialogComponent } from '../sample-dialog/sample-dialog.component';
+import { HomeComponent } from '../home/home.component';
+
+export const routes: Routes = [
+ {
+ path: 'home',
+ component: HomeComponent,
+ children: [
+ {
+ path: '0',
+ component: SampleDialogComponent,
+ resolve: { dlgRef: DialogResolverService },
+ data: {
+ dlg: {
+ data: { name: 'Sample Dialog #a.0' },
+ position: { left: '0' },
+ redirectPath: ['home'],
+ width: '500px',
+ } as DialogRouteConfig,
+ },
+ },
+ ],
+ },
+];
+```
+
+#### app/routing/routing.module.ts
+```ts
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { DialogRouterModule } from 'ng-dialog-router';
+import { routes } from './routes';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ RouterModule.forRoot(routes),
+ DialogRouterModule,
+ ],
+ exports: [
+ RouterModule,
+ DialogRouterModule,
+ ]
+})
+export class RoutingModule { }
+
+```
+
+## Built With
+* [Angular CLI](https://cli.angular.io/)
+* [Angular Material](https://material.angular.io/)
+
+## Versioning
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/agrgic16/ng-dialog-router/tags).
+
+## Authors
+* **Ante Grgić** - *Initial work* - [GitHub](https://github.com/agrgic16)
+
+## License
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

e2e/src/app.e2e-spec.ts

@@ -13,6 +13,11 @@ describe('workspace-project App', () => {
  expect(page.getTitleText()).toEqual('Welcome to ng-dialog-router!');
  });
 
+ it('should navigate to a dialog route', () => {
+ page.navigateToDialog0();
+ expect(page.getDialog0TitleText()).toEqual('sample-dialog works!');
+ });
+
  afterEach(async () => {
  // Assert that there are no errors emitted from the browser
  const logs = await browser.manage().logs().get(logging.Type.BROWSER);

e2e/src/app.po.ts

@@ -8,4 +8,12 @@ export class AppPage {
  getTitleText() {
  return element(by.css('app-root h1')).getText() as Promise<string>;
  }
+
+ navigateToDialog0() {
+ return browser.get(`${browser.baseUrl}/home/0`);
+ }
+
+ getDialog0TitleText() {
+ return element(by.css('h3')).getText() as Promise<string>;
+ }
 }

package.json

@@ -1,13 +1,37 @@
 {
  "name": "ng-dialog-router-app",
  "version": "0.0.0",
+ "license": "MIT",
+ "author": {
+ "name": "Ante Grgić",
+ "email": "ante16@gmail.com"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/agrgic16/ng-dialog-router"
+ },
+ "keywords": [
+ "angular",
+ "@angular",
+ "@angular/material",
+ "angular/router",
+ "ng",
+ "dialog",
+ "modal",
+ "router",
+ "routing",
+ "material",
+ "mat-dialog",
+ "ng-dialog-router" 
+ ],
  "scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build_lib": "ng build ng-dialog-router",
+ "copy_readme": "cp README.md dist/ng-dialog-router",
  "npm_pack": "cd dist/ng-dialog-router && npm pack",
- "package": "npm run build_lib && npm run npm_pack",
+ "package": "npm run build_lib && npm run copy_readme && npm run npm_pack",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"

projects/ng-dialog-router/package.json

@@ -1,6 +1,6 @@
 {
  "name": "ng-dialog-router",
- "version": "0.0.5",
+ "version": "0.0.6",
  "license": "MIT",
  "author": {
  "name": "Ante Grgić",

projects/ng-dialog-router/src/lib/dialog-resolver.service.ts

@@ -1,27 +1,36 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, Router } from '@angular/router';
-import { of } from 'rxjs';
-import { tap, takeUntil, take } from 'rxjs/operators';
 import { MatDialog, MatDialogRef } from '@angular/material';
-import { DialogRouterComponent } from './dialog-router.component';
+import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import { tap, takeUntil, take, mapTo } from 'rxjs/operators';
+import { DialogRouteConfig } from './models/dialog-route-config.model';
 
 @Injectable()
 export class DialogResolverService implements Resolve<MatDialogRef<any>> {
- dialogRef: MatDialogRef<DialogRouterComponent>;
- constructor(
- public dialog: MatDialog,
- public route: ActivatedRoute,
- public router: Router,
- ) { }
+ dialogRef: MatDialogRef<any>;
+ constructor(public dialog: MatDialog, public router: Router) { }
 
  resolve(nextRoute: ActivatedRouteSnapshot, routerState: RouterStateSnapshot) {
- this.dialogRef = this.dialog.open( DialogRouterComponent, { ...nextRoute.data.dlg } );
+ let redirect: string[];
+ let cfg: DialogRouteConfig;
+ const { data } = nextRoute;
+ if (!!data && !!data.dlg) {
+ const { redirectPath, ...dlgCfg } = data.dlg as DialogRouteConfig;
+ redirect = redirectPath;
+ cfg = dlgCfg;
+ } else {
+ const { redirectPath, ...dlgCfg } = { } as DialogRouteConfig;
+ redirect = redirectPath;
+ cfg = dlgCfg;
+ }
+ const navigateAfterClose = redirect || routerState.url.split('/').filter(p => !nextRoute.url.map(u => u.path).includes(p) && p !== '');
+ this.dialogRef = this.dialog.open(nextRoute.routeConfig.component, { ...cfg, closeOnNavigation: true });
  this.dialogRef.afterClosed().pipe(
- tap(() => this.router.navigate(['..'], { relativeTo: this.route })),
+ tap(() => this.router.navigate(navigateAfterClose)),
  take(1),
  ).subscribe();
 
- return of(this.dialogRef).pipe(
+ return this.dialogRef.afterOpened().pipe(
+ mapTo(this.dialogRef),
  takeUntil(this.dialogRef.afterClosed()),
  );
  }

projects/ng-dialog-router/src/lib/models/dialog-route-config.model.ts

@@ -0,0 +1,5 @@
+import { MatDialogConfig } from '@angular/material';
+
+export class DialogRouteConfig extends MatDialogConfig {
+ redirectPath?: string[];
+}

projects/ng-dialog-router/src/public_api.ts

@@ -5,3 +5,4 @@
 export * from './lib/dialog-resolver.service';
 export * from './lib/dialog-router.component';
 export * from './lib/dialog-router.module';
+export * from './lib/models/dialog-route-config.model';

src/app/app.component.html

@@ -5,9 +5,5 @@ <h1>
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
+<a [routerLink]="['home']">home</a>
 <router-outlet></router-outlet>
-<ul>
- <li *ngFor="let route of dialogRoutes">
- <a [routerLink]="route">{{route.join('/')}}</a>
- </li>
-</ul>