chore(modal-navigation-app): Add modal-navigation test app (#1358)

* chore(modal-navigation): update modal-navigation app

* feat: complete componets and navigation

Author: ADjenkov

Diff for: e2e/modal-navigation-ng/app/app.module.ts

@@ -3,17 +3,18 @@ import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 import { AppRoutingModule } from "./app.routing";
 import { AppComponent } from "./app.component";
 
-import { ItemService } from "./item/item.service";
-import { ItemsComponent } from "./item/items.component";
-import { ItemDetailComponent } from "./item/item-detail.component";
 import { HomeComponent } from "./home/home.component";
-import { ModalTest } from "./modal/modal-test";
+import { SecondComponent } from "./second/second.component";
+import { ModalSecondComponent } from "./modal-second/modal-second.component";
+import { ModalComponent } from "./modal/modal.component";
+import { NestedModalComponent } from "./modal-nested/modal-nested.component";
+import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
 
-// Uncomment and add to NgModule imports if you need to use two-way binding
-// import { NativeScriptFormsModule } from "nativescript-angular/forms";
+import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
+import { routerTraceCategory } from "nativescript-angular/trace";
 
-// Uncomment and add to NgModule imports  if you need to use the HTTP wrapper
-// import { NativeScriptHttpModule } from "nativescript-angular/http";
+// addCategories(routerTraceCategory);
+// traceEnable();
 
 @NgModule({
     bootstrap: [
@@ -23,17 +24,15 @@ import { ModalTest } from "./modal/modal-test";
         NativeScriptModule,
         AppRoutingModule
     ],
-    entryComponents: [...ModalTest.entries],
+    entryComponents: [ModalRouterComponent, NestedModalComponent, ModalComponent],
     declarations: [
         AppComponent,
-        ItemsComponent,
-        ItemDetailComponent,
         HomeComponent,
-        ModalTest,
-        ...ModalTest.entries
-    ],
-    providers: [
-        ItemService
+        SecondComponent,
+        ModalComponent,
+        NestedModalComponent,
+        ModalRouterComponent,
+        ModalSecondComponent
     ],
     schemas: [
         NO_ERRORS_SCHEMA

Diff for: e2e/modal-navigation-ng/app/app.routing.ts

@@ -1,21 +1,34 @@
 import { NgModule } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
-import { Routes } from "@angular/router";
+import { Routes, ChildrenOutletContexts } from "@angular/router";
 
 import { HomeComponent } from "./home/home.component";
-import { ItemsComponent } from "./item/items.component";
-import { ItemDetailComponent } from "./item/item-detail.component";
-import { ModalTest } from "./modal/modal-test";
+import { SecondComponent } from "./second/second.component";
+import { ModalSecondComponent } from "./modal-second/modal-second.component";
+import { ModalComponent } from "./modal/modal.component";
+import { NestedModalComponent } from "./modal-nested/modal-nested.component";
+import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
 
 const routes: Routes = [
     { path: "", redirectTo: "/home", pathMatch: "full" },
-
-    { path: "home", component: HomeComponent },
-
-    { path: "modal", component: ModalTest , children: [
-        { path: "items", component: ItemsComponent },
-        { path: "item/:id", component: ItemDetailComponent },
-    ] },
+    {
+        path: "home", component: HomeComponent, children: [
+            {
+                path: "modal", component: ModalComponent, children: [
+                    { path: "nested-frame-modal", component: NestedModalComponent }]
+            },
+            { path: "modal-second", component: ModalSecondComponent }
+        ]
+    },
+    {
+        path: "second", component: SecondComponent, children: [
+            {
+                path: "modal", component: ModalComponent, children: [
+                    { path: "nested-frame-modal", component: NestedModalComponent }]
+            },
+            { path: "modal-second", component: ModalSecondComponent }
+        ]
+    }
 ];
 
 @NgModule({

Diff for: e2e/modal-navigation-ng/app/home/home.component.html

@@ -0,0 +1,12 @@
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="Home"></Label>
+</ActionBar>
+
+<StackLayout>
+    <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
+    <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
+    <Button text="Navigate To Second Page" (tap)="onNavigateSecond()"></Button>
+    <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
+    <Button text="Reset Tab Root View"></Button>
+    <Button text="Reset Layout Root View"></Button>
+</StackLayout>  

Diff for: e2e/modal-navigation-ng/app/home/home.component.ts

@@ -1,21 +1,55 @@
 import { Component, ViewContainerRef } from "@angular/core";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { EventData } from "tns-core-modules/data/observable";
+import { Frame } from "tns-core-modules/ui/frame";
+import { View } from "tns-core-modules/ui/core/view";
+import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
+import { PageRouterOutlet } from "nativescript-angular/router/page-router-outlet";
 import { RouterExtensions } from "nativescript-angular/router";
+import { ModalComponent } from "../modal/modal.component";
 
 @Component({
-    selector: "modal-test",
-    template: `
-    <GridLayout rows="*, auto">
-        <Button text="got to modal page" (tap)="gotToModal()"></Button>
-    </GridLayout>
-    `
+    moduleId: module.id,
+    selector: "home-page",
+    templateUrl: "./home.component.html"
 })
 export class HomeComponent {
+    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private routerExtension: RouterExtensions) { }
 
-    public result: string = "result";
+    onModalNoFrame(args: EventData) {
+        const options: ModalDialogOptions = {
+            context: {
+                navigationVisibility: false
+            },
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
 
-    constructor(private _routerExtensions: RouterExtensions, private vcRef: ViewContainerRef) { }
+        this.modal.showModal(ModalComponent, options).then((res: string) => {
+            console.log("moda-no-frame closed");
+        });
+    }
+
+    onModalFrame(args: EventData) {
+        const options: ModalDialogOptions = {
+            context: {
+                navigationVisibility: true,
+                modalRoute: "modal"
+            },
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
+
+        this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
+            console.log("moda-frame closed");
+        });
+    }
+
+    onNavigateSecond(args: EventData) {
+        this.routerExtension.navigate(["second"]);
+    }
 
-    public gotToModal() {
-        this._routerExtensions.navigate(["/modal"]); //{clearHistory: true}
+    onFrameRootViewReset(args: EventData) {
+        
     }
 }

Diff for: e2e/modal-navigation-ng/app/item/item-detail.component.html

@@ -0,0 +1,8 @@
+
+<ActionBar *ngIf="navigationVisibility === 'visible'">
+    <Label class="action-bar-title" text="Modal Nested"></Label>
+</ActionBar>
+
+<GridLayout #rootLayout rows="auto" (showingModally)="onShowingModally($event)" backgroundColor="lightBlue">
+    <Button text="Close Modal Nested" (tap)="close(rootLayout)"></Button>
+</GridLayout>

Diff for: e2e/modal-navigation-ng/app/item/item-detail.component.ts

@@ -0,0 +1,26 @@
+import { Component } from "@angular/core";
+import { View, ShownModallyData } from "ui/core/view"
+import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
+
+@Component({
+    moduleId: module.id,
+    selector: "modal-nested-page",
+    templateUrl: "./modal-nested.component.html"
+})
+export class NestedModalComponent {
+    public navigationVisibility: string = "collapse";
+
+    constructor(private params: ModalDialogParams) {
+
+        console.log("ModalNestedContent.constructor: " + JSON.stringify(params));
+        this.navigationVisibility = params.context.navigationVisibility ? "visible" : "collapse";
+    }
+
+    close(layoutRoot: View) {
+        layoutRoot.closeModal();
+    }
+
+    onShowingModally(args: ShownModallyData) {
+        console.log("modal-page showingModally");
+    }
+}

Diff for: e2e/modal-navigation-ng/app/item/item.service.ts

@@ -0,0 +1,9 @@
+
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="Modal Second"></Label>
+</ActionBar>
+
+<GridLayout #rootLayout rows="auto, auto" (loaded)="onLoaded($event)">
+    <Button text="Go Back" (tap)="goBack()"></Button>
+    <Button row="1" text="Close Modal Nested" (tap)="close(rootLayout)"></Button>
+</GridLayout>

Diff for: e2e/modal-navigation-ng/app/item/item.ts

@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import { View, EventData } from "ui/core/view"
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Component({
+    moduleId: module.id,
+    selector: "modal-second-page",
+    templateUrl: "./modal-second.component.html"
+})
+export class ModalSecondComponent {
+    constructor(private routerExtension: RouterExtensions) { }
+
+    onLoaded(args: EventData) {
+        console.log("modal-second loaded");
+    }
+
+    goBack(args: EventData) {
+        this.routerExtension.back();
+    }
+
+    close(layoutRoot: View) {
+        layoutRoot.closeModal();
+    }
+}