feat: complete componets and navigation

Author: ADjenkov

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

@@ -3,19 +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 { 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: [
@@ -25,17 +24,15 @@ import { ModalRouterComponent } from "./modal/modal-router/modal-router.componen
         NativeScriptModule,
         AppRoutingModule
     ],
-    entryComponents: [ModalComponent],
+    entryComponents: [ModalRouterComponent, NestedModalComponent, ModalComponent],
     declarations: [
         AppComponent,
-        ItemsComponent,
-        ItemDetailComponent,
         HomeComponent,
+        SecondComponent,
         ModalComponent,
-        ModalRouterComponent
-    ],
-    providers: [
-        ItemService
+        NestedModalComponent,
+        ModalRouterComponent,
+        ModalSecondComponent
     ],
     schemas: [
         NO_ERRORS_SCHEMA

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

@@ -3,17 +3,31 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { Routes, ChildrenOutletContexts } from "@angular/router";
 
 import { HomeComponent } from "./home/home.component";
+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, children: [{
-            path: "modal", component: ModalRouterComponent, children: [
-                { path: "", component: ModalComponent }
-            ]
-        }]
+        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 }
+        ]
     }
 ];
 

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

@@ -3,12 +3,10 @@
 </ActionBar>
 
 <StackLayout>
+    <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
     <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
-    <Button text="Show Modal Page" (tap)="onModalPage"></Button>
-    <Button text="Show Modal Layout" (tap)="onModalLayout"></Button>
-    <Button text="Show Modal TabView" (tap)="onModalTabView"></Button>
-    <Button text="Navigate To Second Page" (tap)="onNavigate"></Button>
-    <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset"></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" (tap)="onTabRootViewReset"></Button>
     <Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset"></Button>
 </StackLayout>

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

@@ -6,6 +6,7 @@ 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({
     moduleId: module.id,
@@ -15,15 +16,40 @@ import { RouterExtensions } from "nativescript-angular/router";
 export class HomeComponent {
     constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private routerExtension: RouterExtensions) { }
 
-    public onModalFrame(args: EventData) {
+    onModalNoFrame(args: EventData) {
         const options: ModalDialogOptions = {
-            // context: null,
+            context: {
+                navigationVisibility: false
+            },
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
+
+        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("MODAL SHOWN");
+            console.log("moda-frame closed");
         });
     }
+
+    onNavigateSecond(args: EventData) {
+        this.routerExtension.navigate(["second"]);
+    }
+
+    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();
+    }
+}