Skip to content

Commit 5619247

Browse files
authored
Merge pull request #4 from vakrilov/testing
chore: Rebase on master
2 parents 9f8383b + 0edad68 commit 5619247

34 files changed

+987
-484
lines changed
+14-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
11
import { Component } from "@angular/core";
2+
import { Router, NavigationEnd } from "@angular/router";
3+
import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
24

35
@Component({
46
selector: "ns-app",
57
templateUrl: "app.component.html",
68
})
79

8-
export class AppComponent { }
10+
export class AppComponent {
11+
constructor(router: Router, location: NSLocationStrategy) {
12+
router.events.subscribe(e => {
13+
// console.log("[ROUTER]: " + e.toString());
14+
15+
if (e instanceof NavigationEnd) {
16+
console.log("[ROUTER]: " + e.toString());
17+
console.log(location.toString());
18+
}
19+
});
20+
}
21+
}

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { AppComponent } from "./app.component";
66
import { ItemService } from "./item/item.service";
77
import { ItemsComponent } from "./item/items.component";
88
import { ItemDetailComponent } from "./item/item-detail.component";
9+
import { HomeComponent } from "./home/home.component";
10+
import { ModalTest } from "./modal/modal-test";
911

1012
// Uncomment and add to NgModule imports if you need to use two-way binding
1113
// import { NativeScriptFormsModule } from "nativescript-angular/forms";
@@ -21,10 +23,14 @@ import { ItemDetailComponent } from "./item/item-detail.component";
2123
NativeScriptModule,
2224
AppRoutingModule
2325
],
26+
entryComponents: [...ModalTest.entries],
2427
declarations: [
2528
AppComponent,
2629
ItemsComponent,
27-
ItemDetailComponent
30+
ItemDetailComponent,
31+
HomeComponent,
32+
ModalTest,
33+
...ModalTest.entries
2834
],
2935
providers: [
3036
ItemService

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

+10-3
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@ import { NgModule } from "@angular/core";
22
import { NativeScriptRouterModule } from "nativescript-angular/router";
33
import { Routes } from "@angular/router";
44

5+
import { HomeComponent } from "./home/home.component";
56
import { ItemsComponent } from "./item/items.component";
67
import { ItemDetailComponent } from "./item/item-detail.component";
8+
import { ModalTest } from "./modal/modal-test";
79

810
const routes: Routes = [
9-
{ path: "", redirectTo: "/items", pathMatch: "full" },
10-
{ path: "items", component: ItemsComponent },
11-
{ path: "item/:id", component: ItemDetailComponent },
11+
{ path: "", redirectTo: "/home", pathMatch: "full" },
12+
13+
{ path: "home", component: HomeComponent },
14+
15+
{ path: "modal", component: ModalTest , children: [
16+
{ path: "items", component: ItemsComponent },
17+
{ path: "item/:id", component: ItemDetailComponent },
18+
] },
1219
];
1320

1421
@NgModule({
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Component, ViewContainerRef } from "@angular/core";
2+
import { RouterExtensions } from "nativescript-angular/router";
3+
4+
@Component({
5+
selector: "modal-test",
6+
template: `
7+
<GridLayout rows="*, auto">
8+
<Button text="got to modal page" (tap)="gotToModal()"></Button>
9+
</GridLayout>
10+
`
11+
})
12+
export class HomeComponent {
13+
14+
public result: string = "result";
15+
16+
constructor(private _routerExtensions: RouterExtensions, private vcRef: ViewContainerRef) { }
17+
18+
public gotToModal() {
19+
this._routerExtensions.navigate(["/modal"]); //{clearHistory: true}
20+
}
21+
}

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit } from "@angular/core";
1+
import { Component, OnInit, OnDestroy } from "@angular/core";
22
import { ActivatedRoute } from "@angular/router";
33

44
import { Item } from "./item";
@@ -9,7 +9,7 @@ import { ItemService } from "./item.service";
99
moduleId: module.id,
1010
templateUrl: "./item-detail.component.html",
1111
})
12-
export class ItemDetailComponent implements OnInit {
12+
export class ItemDetailComponent implements OnInit, OnDestroy {
1313
item: Item;
1414

1515
constructor(
@@ -21,4 +21,7 @@ export class ItemDetailComponent implements OnInit {
2121
const id = +this.route.snapshot.params["id"];
2222
this.item = this.itemService.getItem(id);
2323
}
24+
25+
ngOnDestroy(): void {
26+
}
2427
}

e2e/modal-navigation-ng/app/item/items.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<StackLayout class="page">
2727
<ListView [items]="items" class="list-group">
2828
<ng-template let-item="item">
29-
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
29+
<Label [nsRouterLink]="['../item', item.id]" [text]="item.name"
3030
class="list-group-item"></Label>
3131
</ng-template>
3232
</ListView>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Component, Input } from "@angular/core";
2+
import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
3+
import { RouterExtensions, PageRoute } from "nativescript-angular/router";
4+
import { ActivatedRoute } from "@angular/router";
5+
import { View } from "ui/core/view"
6+
7+
@Component({
8+
selector: "modal-content",
9+
template: `
10+
<GridLayout #rootLayout margin="24" horizontalAlignment="center" verticalAlignment="center" rows="*, auto">
11+
<StackLayout>
12+
<page-router-outlet></page-router-outlet>
13+
</StackLayout>
14+
<StackLayout row="1" orientation="horizontal" marginTop="12">
15+
<Button text="back" (tap)="back()"></Button>
16+
<Button text="ok" (tap)="close('OK')"></Button>
17+
<Button text="cancel" (tap)="close(rootLayout)"></Button>
18+
</StackLayout>
19+
</GridLayout>
20+
`
21+
})
22+
export class ModalContent {
23+
24+
@Input() public prompt: string;
25+
public yes: boolean = true;
26+
27+
constructor(private params: ModalDialogParams, private nav: RouterExtensions, private activeRoute: ActivatedRoute) {
28+
console.log("ModalContent.constructor: " + JSON.stringify(params));
29+
this.prompt = params.context.promptMsg;
30+
}
31+
32+
public back() {
33+
this.nav.back();
34+
}
35+
36+
public close(layoutRoot: View) {
37+
layoutRoot.closeModal();
38+
// this.params.closeCallback(res);
39+
}
40+
41+
ngOnInit() {
42+
this.nav.navigate(["items"], { relativeTo: this.activeRoute });
43+
console.log("ModalContent.ngOnInit");
44+
}
45+
46+
ngOnDestroy() {
47+
console.log("ModalContent.ngOnDestroy");
48+
}
49+
50+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component, ViewContainerRef } from "@angular/core";
2+
import * as dialogs from "ui/dialogs";
3+
import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
4+
import { ModalContent } from "./modal-content";
5+
import { ModalTest } from "./modal-test";
6+
7+
@Component({
8+
selector: "modal-nested-test",
9+
template: `
10+
<modal-test></modal-test>
11+
`
12+
})
13+
export class ModalNestedTest {
14+
15+
static entries = [
16+
ModalContent
17+
];
18+
19+
static exports = [
20+
ModalTest
21+
];
22+
23+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { Component, ViewContainerRef } from "@angular/core";
2+
import * as dialogs from "ui/dialogs";
3+
import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
4+
import { ModalContent } from "./modal-content";
5+
6+
@Component({
7+
selector: "modal-test",
8+
template: `
9+
<GridLayout rows="*, auto">
10+
<StackLayout verticalAlignment="top" margin="12">
11+
<Button text="show component" (tap)="showModal(false)"></Button>
12+
<Button text="show component fullscreen" (tap)="showModal(true)"></Button>
13+
14+
<Button text="alert" (tap)="showAlert()"></Button>
15+
<Button text="confirm" (tap)="showConfirm()"></Button>
16+
<Button text="prompt" (tap)="showPrompt()"></Button>
17+
<Button text="action" (tap)="showAction()"></Button>
18+
<Button text="login" (tap)="showLogin()"></Button>
19+
</StackLayout>
20+
<Label [text]="'RESULT: ' + result" row="1" margin="12"></Label>
21+
</GridLayout>
22+
`
23+
})
24+
export class ModalTest {
25+
26+
public result: string = "result";
27+
28+
constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) { }
29+
30+
static entries = [
31+
ModalContent
32+
];
33+
34+
public showModal(fullscreen: boolean) {
35+
const options: ModalDialogOptions = {
36+
context: { promptMsg: "This is the prompt message!" },
37+
fullscreen: fullscreen,
38+
viewContainerRef: this.vcRef
39+
};
40+
41+
this.modal.showModal(ModalContent, options).then((res: string) => {
42+
this.result = res || "empty result";
43+
// console.log("MODAL:" + this.result);
44+
});
45+
}
46+
47+
public showAlert() {
48+
dialogs.alert({
49+
title: "Alert Title",
50+
message: "The name will change.",
51+
okButtonText: "OK"
52+
}).then(() => {
53+
this.result = "alert closed";
54+
});
55+
}
56+
57+
public showConfirm() {
58+
dialogs.confirm({
59+
title: "Name",
60+
message: "Do you want to change the name?",
61+
cancelButtonText: "No",
62+
neutralButtonText: "Ignore",
63+
okButtonText: "Yes"
64+
}).then((confirmResult) => {
65+
this.result = confirmResult + "";
66+
});
67+
}
68+
69+
public showPrompt() {
70+
dialogs.prompt({
71+
title: "Name",
72+
message: "Enter name:",
73+
cancelButtonText: "Cancel",
74+
neutralButtonText: "Ignore",
75+
okButtonText: "OK",
76+
defaultText: "John Reese",
77+
inputType: dialogs.inputType.text
78+
}).then((promptResult) => {
79+
this.result = promptResult.result ? promptResult.text : "no result";
80+
});
81+
}
82+
83+
public showAction() {
84+
dialogs.action({
85+
message: "Choose action:",
86+
cancelButtonText: "Close",
87+
actions: ["Foo", "Bar"]
88+
}).then((actionResult) => {
89+
this.result = actionResult;
90+
});
91+
}
92+
93+
public showLogin() {
94+
dialogs.login({
95+
title: "Name",
96+
message: "Enter name:",
97+
cancelButtonText: "Cancel",
98+
neutralButtonText: "Ignore",
99+
okButtonText: "OK",
100+
userName: "John",
101+
password: "Reese"
102+
}).then((loginResult) => {
103+
this.result = loginResult.result ?
104+
("user: " + loginResult.userName + " pass: " + loginResult.password) :
105+
"no result";
106+
});
107+
}
108+
109+
}

0 commit comments

Comments
 (0)