feat: set TabView as root (#74)

* feat: set TabView as root

Update to:
- angular@6
- rxjs@6
- nativescript-angular@next
- nativescript-dev-webpack@next

* fix: tslint errors

* refactor: remove onSelectedIndexChanged

* feat: add Android icons

* refactor: extract core module

* refactor(item-detail): use route snapshot instead of rxjs subscription

Author: Vasil Chimev

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-hdpi/browse.png

@@ -32,24 +32,26 @@ tns create my-tab-ng --template https://github.com/NativeScript/template-tab-nav
 ## Walkthrough
 
 ### Architecture
-There is one main component that holds the tabs page:
-- `/tabs/tabs.component.ts` - sets up the tab navigation page layout and references the navigatable views contents via custom components.
+The TabView component is set up as an application starting point in:
+- `app.component.ts` - sets up the tab view and defines page router otlets for its items.
 
-There are three blank custom components used for the tab views located in these folders:
-- `/tabs/browse`
-- `/tabs/home`
-- `/tabs/search`
+There are four components used for the tab views located in these folders:
+
+- `/browse`
+- `/home`
+- `/item-detail`
+- `/search`
 
 ### Styling
 This template is set up to use SASS for styling. All classes used are based on the {N} core theme – consult the [documentation](https://docs.nativescript.org/angular/ui/theme.html#theme) to understand how to customize it. Check it out to see what classes you can use on which component.
 
 It has 4 global style files that are located at the root of the app folder:
+- `_app-common.scss` - holds the CSS rules you want to apply on both iOS and Android here.
 - `_app-variables.scss` - holds the global SASS variables that are imported on each component's styles.
-- `app.scss` - the global common style sheet. These style rules are applied to both Android and iOS.
-- `platform.android.scss` - the global Android style sheet. These style rules are applied to Android only.
-- `platform.ios.scss` - the global iOS style sheet. These style rules are applied to iOS only.
+- `app.android.scss` - the global Android style sheet. These style rules are applied to Android only.
+- `app.ios.scss` - the global iOS style sheet. These style rules are applied to iOS only.
 
-Each component has 3 style files located in the its folder:
+A component could have 3 style files located in the its folder:
 - `_component-name.component.scss` - the component common style sheet. These style rules are applied to both Android and iOS.
 - `component-name.component.android.scss` - the component Android style sheet. These style rules are applied to Android only.
 - `component-name.component.ios.scss` - the component iOS style sheet. These style rules are applied to iOS only.

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-hdpi/home.png

@@ -1,2 +1,2 @@
 // Custom common variables
-@import '../app-variables';
+@import './app-variables';

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-hdpi/search.png

@@ -2,9 +2,21 @@ import { NgModule } from "@angular/core";
 import { Routes } from "@angular/router";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 
+import { BrowseComponent } from "./browse/browse.component";
+import { HomeComponent } from "./home/home.component";
+import { ItemDetailComponent } from "./item-detail/item-detail.component";
+import { SearchComponent } from "./search/search.component";
+
+export const COMPONENTS = [BrowseComponent, HomeComponent, ItemDetailComponent, SearchComponent];
+
 const routes: Routes = [
-    { path: "", redirectTo: "/tabs", pathMatch: "full" },
-    { path: "tabs", loadChildren: "./tabs/tabs.module#TabsModule" }
+    { path: "", redirectTo: "/(homeTab:home//browseTab:browse//searchTab:search)", pathMatch: "full" },
+
+    { path: "home", component: HomeComponent, outlet: "homeTab" },
+    { path: "browse", component: BrowseComponent, outlet: "browseTab" },
+    { path: "search", component: SearchComponent, outlet: "searchTab" },
+
+    { path: "item/:id", component: ItemDetailComponent, outlet: "homeTab" }
 ];
 
 @NgModule({

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-mdpi/browse.png

@@ -0,0 +1,7 @@
+@import 'app.component';
+
+// Place any CSS rules you want to apply only on Android here
+TabView {
+    tab-text-color: $blue-dark;
+    selected-tab-text-color: $item-active-color;
+}

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-mdpi/home.png

@@ -1 +1,18 @@
-<page-router-outlet></page-router-outlet>
+<TabView androidTabsPosition="bottom">
+
+    <page-router-outlet
+        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
+        name="homeTab">
+    </page-router-outlet>
+
+    <page-router-outlet
+        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
+        name="browseTab">
+    </page-router-outlet>
+
+    <page-router-outlet
+        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
+        name="searchTab">
+    </page-router-outlet>
+
+</TabView>

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-mdpi/search.png

@@ -1,4 +1,4 @@
-@import 'tabs.component';
+@import 'app.component';
 
 // Place any CSS rules you want to apply only on IOS here
 TabView {

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xhdpi/browse.png

@@ -1,7 +1,26 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { isAndroid } from "platform";
+import { SelectedIndexChangedEventData, TabView, TabViewItem } from "tns-core-modules/ui/tab-view";
 
 @Component({
     selector: "ns-app",
-    templateUrl: "app.component.html"
+    moduleId: module.id,
+    templateUrl: "app.component.html",
+    styleUrls: ["./app.component.scss"]
 })
-export class AppComponent { }
+export class AppComponent implements OnInit {
+
+    constructor() {
+        // Use the component constructor to inject providers.
+    }
+
+    ngOnInit(): void {
+        // Init your component properties here.
+    }
+
+    getIconSource(icon: string): string {
+        const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";
+
+        return iconPrefix + icon;
+    }
+}

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xhdpi/home.png

@@ -1,19 +1,22 @@
 import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 
-import { AppRoutingModule } from "./app-routing.module";
+import { AppRoutingModule, COMPONENTS } from "./app-routing.module";
 import { AppComponent } from "./app.component";
+import { CoreModule } from "./core/core.module";
 
 @NgModule({
     bootstrap: [
         AppComponent
     ],
     imports: [
         NativeScriptModule,
-        AppRoutingModule
+        AppRoutingModule,
+        CoreModule
     ],
     declarations: [
-        AppComponent
+        AppComponent,
+        ...COMPONENTS
     ],
     schemas: [
         NO_ERRORS_SCHEMA

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xhdpi/search.png

@@ -1,3 +1,7 @@
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="Browse"></Label>
+</ActionBar>
+
 <GridLayout class="page page-content">
     <Label class="page-icon fa" text="&#xf1ea;"></Label>
     <Label class="page-placeholder" text="<!-- Page content goes here -->"></Label>

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/browse.png

@@ -0,0 +1,9 @@
+import { NgModule } from "@angular/core";
+import { DataService } from "./data.service";
+
+@NgModule({
+    providers: [
+        DataService
+    ]
+})
+export class CoreModule { }

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/home.png

@@ -0,0 +1,102 @@
+import { Injectable } from "@angular/core";
+
+export interface IDataItem {
+    id: number;
+    name: string;
+    description: string;
+}
+
+@Injectable()
+export class DataService {
+
+    private items = new Array<IDataItem>(
+        {
+            id: 1,
+            name: "Item 1",
+            description: "Description for Item 1"
+        },
+        {
+            id: 2,
+            name: "Item 2",
+            description: "Description for Item 2"
+        },
+        {
+            id: 3,
+            name: "Item 3",
+            description: "Description for Item 3"
+        },
+        {
+            id: 4,
+            name: "Item 4",
+            description: "Description for Item 4"
+        },
+        {
+            id: 5,
+            name: "Item 5",
+            description: "Description for Item 5"
+        },
+        {
+            id: 6,
+            name: "Item 6",
+            description: "Description for Item 6"
+        },
+        {
+            id: 7,
+            name: "Item 7",
+            description: "Description for Item 7"
+        },
+        {
+            id: 8,
+            name: "Item 8",
+            description: "Description for Item 8"
+        },
+        {
+            id: 9,
+            name: "Item 9",
+            description: "Description for Item 9"
+        },
+        {
+            id: 10,
+            name: "Item 10",
+            description: "Description for Item 10"
+        },
+        {
+            id: 11,
+            name: "Item 11",
+            description: "Description for Item 11"
+        },
+        {
+            id: 12,
+            name: "Item 12",
+            description: "Description for Item 12"
+        },
+        {
+            id: 13,
+            name: "Item 13",
+            description: "Description for Item 13"
+        },
+        {
+            id: 14,
+            name: "Item 14",
+            description: "Description for Item 14"
+        },
+        {
+            id: 15,
+            name: "Item 15",
+            description: "Description for Item 15"
+        },
+        {
+            id: 16,
+            name: "Item 16",
+            description: "Description for Item 16"
+        }
+    );
+
+    getItems(): Array<IDataItem> {
+        return this.items;
+    }
+
+    getItem(id: number): IDataItem {
+        return this.items.filter((item) => item.id === id)[0];
+    }
+}

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/search.png

@@ -0,0 +1,11 @@
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="Home"></Label>
+</ActionBar>
+
+<GridLayout class="page page-content">
+    <ListView [items]="items" class="list-group">
+        <ng-template let-item="item">
+            <Label [nsRouterLink]="['../item', item.id]" [text]="item.name" class="list-group-item"></Label>
+        </ng-template>
+    </ListView>
+</GridLayout>

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xxxhdpi/browse.png

@@ -0,0 +1,18 @@
+import { Component, OnInit } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+import { DataService, IDataItem } from "../core/data.service";
+
+@Component({
+    selector: "Home",
+    moduleId: module.id,
+    templateUrl: "./home.component.html"
+})
+export class HomeComponent implements OnInit {
+    items: Array<IDataItem>;
+
+    constructor(private itemService: DataService, private router: RouterExtensions) { }
+
+    ngOnInit(): void {
+        this.items = this.itemService.getItems();
+    }
+}

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xxxhdpi/home.png

@@ -0,0 +1,8 @@
+<ActionBar class="action-bar">
+    <NavigationButton [nsRouterLink]="['../../home']" android.systemIcon="ic_menu_back"></NavigationButton>
+    <Label class="action-bar-title" [text]="item.name"></Label>
+</ActionBar>
+
+<GridLayout>
+    <Label class="m-10 h3" verticalAlignment="top" [text]="item.description"></Label>
+</GridLayout>

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xxxhdpi/search.png

@@ -0,0 +1,22 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { DataService, IDataItem } from "../core/data.service";
+
+@Component({
+    selector: "ItemDetail",
+    moduleId: module.id,
+    templateUrl: "./item-detail.component.html"
+})
+export class ItemDetailComponent implements OnInit {
+    item: IDataItem;
+
+    constructor(
+        private data: DataService,
+        private route: ActivatedRoute
+    ) { }
+
+    ngOnInit(): void {
+        const id = +this.route.snapshot.params.id;
+        this.item = this.data.getItem(id);
+    }
+}

packages/template-tab-navigation-ng/README.md

@@ -32,31 +32,31 @@
         "v8Flags": "--expose_gc"
     },
     "dependencies": {
-        "@angular/animations": "~5.2.0",
-        "@angular/common": "~5.2.0",
-        "@angular/compiler": "~5.2.0",
-        "@angular/core": "~5.2.0",
-        "@angular/forms": "~5.2.0",
-        "@angular/http": "~5.2.0",
-        "@angular/platform-browser": "~5.2.0",
-        "@angular/platform-browser-dynamic": "~5.2.0",
-        "@angular/router": "~5.2.0",
-        "nativescript-angular": "~5.3.0",
+        "@angular/animations": "~6.0.0",
+        "@angular/common": "~6.0.0",
+        "@angular/compiler": "~6.0.0",
+        "@angular/core": "~6.0.0",
+        "@angular/forms": "~6.0.0",
+        "@angular/http": "~6.0.0",
+        "@angular/platform-browser": "~6.0.0",
+        "@angular/platform-browser-dynamic": "~6.0.0",
+        "@angular/router": "~6.0.0",
+        "nativescript-angular": "next",
         "nativescript-theme-core": "~1.0.4",
         "reflect-metadata": "~0.1.10",
-        "rxjs": "~5.5.5",
-        "zone.js": "~0.8.18"
+        "rxjs": "~6.0.0",
+        "zone.js": "^0.8.4"
     },
     "devDependencies": {
         "codelyzer": "~4.0.2",
         "nativescript-dev-sass": "~1.5.0",
         "nativescript-dev-typescript": "~0.7.0",
-        "nativescript-dev-webpack": "~0.10.0",
+        "nativescript-dev-webpack": "next",
         "tslint": "~5.8.0",
         "typescript": "~2.7.2"
     },
     "scripts": {
         "preinstall": "node tools/preinstall.js",
         "postinstall": "node tools/postinstall.js"
     }
-}
+}

packages/template-tab-navigation-ng/tabs/_tabs.component.scss renamed to packages/template-tab-navigation-ng/_app.component.scss

@@ -1,3 +1,7 @@
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="Search"></Label>
+</ActionBar>
+
 <GridLayout class="page page-content">
     <Label class="page-icon fa" text="&#xf002;"></Label>
     <Label class="page-placeholder" text="<!-- Page content goes here -->"></Label>