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

Author: ADjenkov

e2e/modal-navigation-ng/app/app.module.ts

@@ -6,8 +6,10 @@ 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 { ModalComponent } from "./modal/modal.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";
@@ -23,14 +25,14 @@ import { ModalTest } from "./modal/modal-test";
         NativeScriptModule,
         AppRoutingModule
     ],
-    entryComponents: [...ModalTest.entries],
+    entryComponents: [ModalComponent],
     declarations: [
         AppComponent,
         ItemsComponent,
         ItemDetailComponent,
         HomeComponent,
-        ModalTest,
-        ...ModalTest.entries
+        ModalComponent,
+        ModalRouterComponent
     ],
     providers: [
         ItemService

e2e/modal-navigation-ng/app/app.routing.ts

@@ -1,21 +1,20 @@
 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 { ModalComponent } from "./modal/modal.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: ModalRouterComponent, children: [
+                { path: "", component: ModalComponent }
+            ]
+        }]
+    }
 ];
 
 @NgModule({

e2e/modal-navigation-ng/app/home/home.component.html

@@ -0,0 +1,14 @@
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="Home"></Label>
+</ActionBar>
+
+<StackLayout>
+    <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="Reset Tab Root View" (tap)="onTabRootViewReset"></Button>
+    <Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset"></Button>
+</StackLayout>

e2e/modal-navigation-ng/app/home/home.component.ts

@@ -1,21 +1,29 @@
 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";
 
 @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";
+    public onModalFrame(args: EventData) {
+        const options: ModalDialogOptions = {
+            // context: null,
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
 
-    constructor(private _routerExtensions: RouterExtensions, private vcRef: ViewContainerRef) { }
-
-    public gotToModal() {
-        this._routerExtensions.navigate(["/modal"]); //{clearHistory: true}
+        this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
+             console.log("MODAL SHOWN");
+        });
     }
 }

e2e/modal-navigation-ng/app/modal/modal-nested-test.ts

@@ -0,0 +1 @@
+<page-router-outlet></page-router-outlet>

e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.html

@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import { Router, NavigationEnd, ActivatedRoute } from "@angular/router";
+import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Component({
+    selector: "ns-router",
+    templateUrl: "app.component.html",
+})
+
+export class ModalRouterComponent {
+    constructor(router: Router, location: NSLocationStrategy, private routerExtension: RouterExtensions, private activeRoute: ActivatedRoute) {
+        router.events.subscribe(e => {
+            if (e instanceof NavigationEnd) {
+                console.log("[ROUTER]: " + e.toString());
+                console.log(location.toString());
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.routerExtension.navigate(["modal"], { relativeTo: this.activeRoute });
+    }
+}

e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts

@@ -0,0 +1,16 @@
+<ActionBar>
+    <Label text="Modal"></Label>
+</ActionBar>
+
+<GridLayout #rootLayout rows="*, auto">
+    <StackLayout>
+      <!-- <page-router-outlet></page-router-outlet> -->
+    </StackLayout>    
+    <StackLayout backgroundColor="lightGreen">
+        <Button text="Navigate To Second Page" (tap)="onNavigate" visibility="{{ navigationVisibility }}"></Button>
+        <Button text="Show Dialog Confirm" (tap)="showDialogConfirm()"></Button>
+        <Button text="Show Nested Modal Page With Frame" (tap)="showNestedModalFrame()"></Button>
+        <Button text="Show Nested Modal Page" (tap)="showNestedModalPage()"></Button>
+        <Button text="Close Modal" (tap)="close(rootLayout)"></Button>
+    </StackLayout>
+</GridLayout>

e2e/modal-navigation-ng/app/modal/modal-test.ts

@@ -3,23 +3,14 @@ import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
 import { RouterExtensions, PageRoute } from "nativescript-angular/router";
 import { ActivatedRoute } from "@angular/router";
 import { View } from "ui/core/view"
+import { confirm } from "ui/dialogs";
 
 @Component({
-    selector: "modal-content",
-    template: `
-    <GridLayout #rootLayout margin="24" horizontalAlignment="center" verticalAlignment="center" rows="*, auto">
-        <StackLayout>
-          <page-router-outlet></page-router-outlet>
-        </StackLayout>    
-        <StackLayout row="1" orientation="horizontal" marginTop="12">
-                <Button text="back" (tap)="back()"></Button>
-                <Button text="ok" (tap)="close('OK')"></Button>
-                <Button text="cancel" (tap)="close(rootLayout)"></Button>
-        </StackLayout>
-    </GridLayout>
-    `
+    moduleId: module.id,
+    selector: "modal-page",
+    templateUrl: "./modal.component.html"
 })
-export class ModalContent {
+export class ModalComponent {
 
     @Input() public prompt: string;
     public yes: boolean = true;
@@ -35,16 +26,25 @@ export class ModalContent {
 
     public close(layoutRoot: View) {
         layoutRoot.closeModal();
-        // this.params.closeCallback(res);
     }
 
     ngOnInit() {
-        this.nav.navigate(["items"], { relativeTo: this.activeRoute });
-        console.log("ModalContent.ngOnInit");
     }
 
     ngOnDestroy() {
         console.log("ModalContent.ngOnDestroy");
     }
 
+    showDialogConfirm() {
+        let options = {
+            title: "Dialog",
+            message: "Message",
+            okButtonText: "Yes",
+            cancelButtonText: "No"
+
+        }
+        confirm(options).then((result: boolean) => {
+            console.log(result);
+        })
+    }
 }