feat(demo): add eager loaded dialog example

taiga-family · Jan 11, 2023 · 32d6be9 · 32d6be9
1 parent eedc4ca
commit 32d6be9
Show file tree

Hide file tree

Showing 18 changed files with 155 additions and 31 deletions.
diff --git a/...cts/demo/src/modules/customization/routable-dialog/examples/1/dialog-content.component.ts b/...cts/demo/src/modules/customization/routable-dialog/examples/1/dialog-content.component.ts
@@ -0,0 +1,8 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+    selector: 'tui-example-dialog-content',
+    template: 'Eager loaded dialog content',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DialogContentComponent {}
diff --git a/projects/demo/src/modules/customization/routable-dialog/examples/1/page-1.component.html b/projects/demo/src/modules/customization/routable-dialog/examples/1/page-1.component.html
@@ -0,0 +1,10 @@
+<button
+    tuiButton
+    routerLink="path/to/eager/loaded/dialog"
+>
+    Open dialog
+</button>
+
+<!-- step 1: add router-outlet to the page -->
+<!-- Needed for opening a dialog over of the page-->
+<router-outlet></router-outlet>
diff --git a/...table-dialog/examples/1/page.component.ts → ...ble-dialog/examples/1/page-1.component.ts b/...table-dialog/examples/1/page.component.ts → ...ble-dialog/examples/1/page-1.component.ts
@@ -3,9 +3,9 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-page-example',
-    templateUrl: './page.component.html',
+    selector: 'tui-page-1-example',
+    templateUrl: './page-1.component.html',
     changeDetection,
     encapsulation,
 })
-export class TuiPageExampleComponent {}
+export class TuiPage1ExampleComponent {}
diff --git a/projects/demo/src/modules/customization/routable-dialog/examples/1/page-1.module.ts b/projects/demo/src/modules/customization/routable-dialog/examples/1/page-1.module.ts
@@ -0,0 +1,28 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {TuiButtonModule} from '@taiga-ui/core';
+import {tuiWrapInEagerDialog} from '@taiga-ui/kit';
+
+import {DialogContentComponent} from './dialog-content.component';
+import {TuiPage1ExampleComponent} from './page-1.component';
+
+@NgModule({
+    declarations: [TuiPage1ExampleComponent, DialogContentComponent],
+    exports: [TuiPage1ExampleComponent],
+    imports: [
+        RouterModule.forChild([
+            {
+                path: ``,
+                component: TuiPage1ExampleComponent,
+                children: [
+                    tuiWrapInEagerDialog(
+                        `path/to/eager/loaded/dialog`,
+                        DialogContentComponent,
+                    ),
+                ],
+            },
+        ]),
+        TuiButtonModule,
+    ],
+})
+export class TuiPage1ExampleModule {}
diff --git a/...ialog-content/dialog-content.component.ts → ...ialog-content/dialog-content.component.ts b/...ialog-content/dialog-content.component.ts → ...ialog-content/dialog-content.component.ts
@@ -2,7 +2,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
     selector: 'tui-example-dialog-content',
-    template: 'Custom dialog content',
+    template: 'Lazy loaded dialog content',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogContentComponent {}
diff --git a/...1/dialog-content/dialog-content.module.ts → ...2/dialog-content/dialog-content.module.ts b/...1/dialog-content/dialog-content.module.ts → ...2/dialog-content/dialog-content.module.ts
@@ -1,13 +1,13 @@
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
-import {tuiWrapInDialog} from '@taiga-ui/kit';
+import {tuiWrapInLazyDialog} from '@taiga-ui/kit';
 
 import {DialogContentComponent} from './dialog-content.component';
 
 @NgModule({
     declarations: [DialogContentComponent],
     // step 3:  use tuiWrapInDialog for component
-    imports: [RouterModule.forChild([tuiWrapInDialog(DialogContentComponent)])],
+    imports: [RouterModule.forChild([tuiWrapInLazyDialog(DialogContentComponent)])],
     exports: [DialogContentComponent],
 })
 export class DialogContentModule {}
diff --git a/...ble-dialog/examples/1/page.component.html → ...e-dialog/examples/2/page-2.component.html b/...ble-dialog/examples/1/page.component.html → ...e-dialog/examples/2/page-2.component.html
@@ -1,6 +1,6 @@
 <button
     tuiButton
-    routerLink="path/to/dialog"
+    routerLink="path/to/lazy/loaded/dialog"
 >
     Open dialog
 </button>

diff --git a/projects/demo/src/modules/customization/routable-dialog/examples/2/page-2.component.ts b/projects/demo/src/modules/customization/routable-dialog/examples/2/page-2.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-page-2-example',
+    templateUrl: './page-2.component.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiPage2ExampleComponent {}
diff --git a/...routable-dialog/examples/1/page.module.ts → ...utable-dialog/examples/2/page-2.module.ts b/...routable-dialog/examples/1/page.module.ts → ...utable-dialog/examples/2/page-2.module.ts
@@ -1,29 +1,31 @@
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiButtonModule} from '@taiga-ui/core';
+import {TuiRoutableDialogModule} from '@taiga-ui/kit';
 
-import {TuiPageExampleComponent} from './page.component';
+import {TuiPage2ExampleComponent} from './page-2.component';
 
 @NgModule({
-    declarations: [TuiPageExampleComponent],
-    exports: [TuiPageExampleComponent],
+    declarations: [TuiPage2ExampleComponent],
+    exports: [TuiPage2ExampleComponent],
     imports: [
+        TuiRoutableDialogModule,
+        TuiButtonModule,
         RouterModule.forChild([
             {
                 path: ``,
-                component: TuiPageExampleComponent,
+                component: TuiPage2ExampleComponent,
                 children: [
                     // step 2: add lazy loading for component module as usual
                     {
-                        path: `path/to/dialog`,
+                        path: `path/to/lazy/loaded/dialog`,
                         loadChildren: async () =>
                             (await import(`./dialog-content/dialog-content.module`))
                                 .DialogContentModule,
                     },
                 ],
             },
         ]),
-        TuiButtonModule,
     ],
 })
-export class TuiPageExampleModule {}
+export class TuiPage2ExampleModule {}
diff --git a/projects/demo/src/modules/customization/routable-dialog/routable-dialog.component.ts b/projects/demo/src/modules/customization/routable-dialog/routable-dialog.component.ts
@@ -9,13 +9,21 @@ import {TuiDocExample} from '@taiga-ui/addon-doc';
 })
 export class RoutableDialogComponent {
     readonly example1: TuiDocExample = {
-        'page.template': import('./examples/1/page.component.html?raw'),
-        'page.module': import('./examples/1/page.module.ts?raw'),
+        'page.template': import('./examples/1/page-1.component.html?raw'),
+        'page.module': import('./examples/1/page-1.module.ts?raw'),
         'dialog-content.component': import(
-            './examples/1/dialog-content/dialog-content.component.ts?raw'
+            './examples/1/dialog-content.component.ts?raw'
+        ),
+    };
+
+    readonly example2: TuiDocExample = {
+        'page.template': import('./examples/2/page-2.component.html?raw'),
+        'page.module': import('./examples/2/page-2.module.ts?raw'),
+        'dialog-content.component': import(
+            './examples/2/dialog-content/dialog-content.component.ts?raw'
         ),
         'dialog-content.module': import(
-            './examples/1/dialog-content/dialog-content.module.ts?raw'
+            './examples/2/dialog-content/dialog-content.module.ts?raw'
         ),
     };
 }
diff --git a/projects/demo/src/modules/customization/routable-dialog/routable-dialog.module.ts b/projects/demo/src/modules/customization/routable-dialog/routable-dialog.module.ts
@@ -3,15 +3,13 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiButtonModule} from '@taiga-ui/core';
-import {TuiRoutableDialogModule} from '@taiga-ui/kit';
 
 import {RoutableDialogComponent} from './routable-dialog.component';
 
 @NgModule({
     imports: [
         CommonModule,
         TuiAddonDocModule,
-        TuiRoutableDialogModule,
         RouterModule.forChild([
             {
                 path: ``,
@@ -20,8 +18,14 @@ import {RoutableDialogComponent} from './routable-dialog.component';
                     {
                         path: ``,
                         loadChildren: async () =>
-                            (await import(`./examples/1/page.module`))
-                                .TuiPageExampleModule,
+                            (await import(`./examples/1/page-1.module`))
+                                .TuiPage1ExampleModule,
+                    },
+                    {
+                        path: ``,
+                        loadChildren: async () =>
+                            (await import(`./examples/2/page-2.module`))
+                                .TuiPage2ExampleModule,
                     },
                 ],
             },

diff --git a/projects/demo/src/modules/customization/routable-dialog/routable-dialog.template.html b/projects/demo/src/modules/customization/routable-dialog/routable-dialog.template.html
@@ -6,9 +6,17 @@
 
     <tui-doc-example
         i18n-heading
-        heading="Lazy loading example"
+        heading="Eager loading dialog"
         [content]="example1"
     >
         <router-outlet></router-outlet>
     </tui-doc-example>
+
+    <tui-doc-example
+        i18n-heading
+        heading="Lazy loading dialog"
+        [content]="example2"
+    >
+        <router-outlet></router-outlet>
+    </tui-doc-example>
 </tui-doc-page>
diff --git a/projects/kit/components/routable-dialog/index.ts b/projects/kit/components/routable-dialog/index.ts
@@ -1,2 +1,3 @@
 export * from './routable-dialog.module';
-export * from './tui-wrap-in-dialog';
+export * from './tui-wrap-in-eager-dialog';
+export * from './tui-wrap-in-lazy-dialog';
diff --git a/projects/kit/components/routable-dialog/routable-dialog.component.ts b/projects/kit/components/routable-dialog/routable-dialog.component.ts
@@ -36,12 +36,17 @@ export class TuiRoutableDialog {
     }
 
     private navigateToParent(): void {
-        const urlSegments: UrlSegment[] = this.route.parent?.snapshot.url || [];
-
-        const backUrl = urlSegments.map(() => '..').join('/');
+        const backUrl =
+            this.route.snapshot.data['backUrl'] ?? this.getLazyLoadedBackUrl();
 
         void this.router.navigate([backUrl], {
             relativeTo: this.route,
         });
     }
+
+    private getLazyLoadedBackUrl(): string {
+        const urlSegments: UrlSegment[] = this.route.parent?.snapshot.url || [];
+
+        return urlSegments.map(() => '..').join('/');
+    }
 }
diff --git a/projects/kit/components/routable-dialog/test/tui-wrap-in-eager-dialog.spec.ts b/projects/kit/components/routable-dialog/test/tui-wrap-in-eager-dialog.spec.ts
@@ -0,0 +1,21 @@
+import {TuiRoutableDialog} from '../routable-dialog.component';
+import {tuiWrapInEagerDialog} from '../tui-wrap-in-eager-dialog';
+
+class DialogComponent {}
+
+describe(`tuiWrapInEagerDialog`, () => {
+    it(`result route data is expected`, () => {
+        const result = tuiWrapInEagerDialog(`path/to/dialog`, DialogComponent);
+
+        const expected = {
+            path: `path/to/dialog`,
+            component: TuiRoutableDialog,
+            data: {
+                dialog: DialogComponent,
+                backUrl: `../../..`,
+            },
+        };
+
+        expect(result).toEqual(expected);
+    });
+});
diff --git a/...le-dialog/test/tui-wrap-in-dialog.spec.ts → ...alog/test/tui-wrap-in-lazy-dialog.spec.ts b/...le-dialog/test/tui-wrap-in-dialog.spec.ts → ...alog/test/tui-wrap-in-lazy-dialog.spec.ts
@@ -1,11 +1,11 @@
 import {TuiRoutableDialog} from '../routable-dialog.component';
-import {tuiWrapInDialog} from '../tui-wrap-in-dialog';
+import {tuiWrapInLazyDialog} from '../tui-wrap-in-lazy-dialog';
 
 class DialogComponent {}
 
-describe(`tuiWrapInDialog`, () => {
+describe(`tuiWrapInLazyDialog`, () => {
     it(`result route data is expected`, () => {
-        const result = tuiWrapInDialog(DialogComponent);
+        const result = tuiWrapInLazyDialog(DialogComponent);
 
         const expected = {
             path: ``,

diff --git a/projects/kit/components/routable-dialog/tui-wrap-in-eager-dialog.ts b/projects/kit/components/routable-dialog/tui-wrap-in-eager-dialog.ts
@@ -0,0 +1,18 @@
+import {Type} from '@angular/core';
+import {Route} from '@angular/router';
+
+import {TuiRoutableDialog} from './routable-dialog.component';
+
+export function tuiWrapInEagerDialog(path: string, component: Type<any>): Route {
+    return {
+        path,
+        component: TuiRoutableDialog,
+        data: {
+            dialog: component,
+            backUrl: path
+                .split(`/`)
+                .map(() => `..`)
+                .join(`/`),
+        },
+    };
+}
diff --git a/...nts/routable-dialog/tui-wrap-in-dialog.ts → ...outable-dialog/tui-wrap-in-lazy-dialog.ts b/...nts/routable-dialog/tui-wrap-in-dialog.ts → ...outable-dialog/tui-wrap-in-lazy-dialog.ts
@@ -3,7 +3,7 @@ import {Route} from '@angular/router';
 
 import {TuiRoutableDialog} from './routable-dialog.component';
 
-export function tuiWrapInDialog(component: Type<any>): Route {
+export function tuiWrapInLazyDialog(component: Type<any>): Route {
     return {
         path: ``,
         component: TuiRoutableDialog,