feat(tabs): add topics tab in let menu

Author: lanceli

src/app/app.component.ts

@@ -2,19 +2,22 @@ import { Component, ViewChild } from '@angular/core';
 import { Nav, Platform } from 'ionic-angular';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
+import { TabsService } from '../providers/tabs-service';
+import { Tab } from '../classes/tab';
 
 
 @Component({
-  templateUrl: 'app.html'
+  templateUrl: 'app.html',
+  providers: [TabsService]
 })
 export class MyApp {
   @ViewChild(Nav) nav: Nav;
 
   rootPage = 'topics';
 
-  pages: Array<{title: string, component: any}>;
+  tabs: Tab[];
 
-  constructor(public platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
+  constructor(public platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private tabsService: TabsService) {
     platform.ready().then(() => {
       // Okay, so the platform is ready and our plugins are available.
       // Here you can do any higher level native things you might need.
@@ -27,6 +30,14 @@ export class MyApp {
   }
 
   ngAfterViewInit() {
-    console.log('ng after view init')
+    console.log('ng after view init');
+    this.tabs = this.tabsService.getTabs();
+  }
+
+  openTab(tab: any) {
+    console.log('open tab', tab)
+    this.nav.setRoot('topics', {
+      tab: tab.value
+    });
   }
 }

src/app/app.html

@@ -7,13 +7,16 @@
 
   <ion-content>
     <ion-list>
-      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
-        {{p.title}}
-      </button>
+      <ion-item class="item-divider">
+        板块
+      </ion-item>
+      <ion-item *ngFor="let tab of tabs" (click)="openTab(tab)" menuClose>
+        {{tab.label}}
+      </ion-item>
     </ion-list>
   </ion-content>
 
 </ion-menu>
 
 <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
-<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
+<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

src/classes/tab.ts

@@ -0,0 +1,6 @@
+export class Tab {
+  value: string;
+  label: string;
+}
+
+

src/pages/topics/topic.ts renamed to src/classes/topic.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams, IonicPage } from 'ionic-angular';
 
-import { Topic } from '../topics/topic';
+import { Topic } from '../../classes/topic';
 import { TopicService } from '../../providers/topic-service';
 /*
   Generated class for the Topic page.

src/pages/topic/topic.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams, IonicPage } from 'ionic-angular';
 
-import { Topic } from './topic';
+import { Topic } from '../../classes/topic';
 
 import { TopicService } from '../../providers/topic-service';
 
@@ -13,12 +13,13 @@ import { TopicService } from '../../providers/topic-service';
 */
 
 @IonicPage({
-	name: 'topics'
+  name: 'topics',
+  segment: 'topics/:tab'
 })
 @Component({
   selector: 'page-topics',
   templateUrl: 'topics.html',
-	providers: [TopicService]
+  providers: [TopicService]
 })
 export class TopicsPage {
 
@@ -28,31 +29,39 @@ export class TopicsPage {
   constructor(public navCtrl: NavController, public navParams: NavParams, private topicService: TopicService) {
   }
 
-	ngOnInit(): void {
-		this.getTopics()
-	}
+  ngOnInit(): void {
+    let newTab = this.navParams.get('tab');
+    if (newTab) {
+      console.log('changing tab');
+      this.topicService.currentTab = newTab;
+    }
+    console.log('current tab', this.topicService.currentTab);
+    this.doRefresh();
+  }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad TopicsPage');
   }
 
-	onSelect(topic: Topic): void {
-		console.log(topic)
-		this.navCtrl.push('topic', {id: topic.id})
-	}
+  onSelect(topic: Topic): void {
+    console.log(topic)
+    this.navCtrl.push('topic', {id: topic.id})
+  }
 
-	getTopics(): void {
-		this.topicService.getTopics().then(
-			topics => this.topics = topics
-		);
-	}
+  getTopics(): void {
+    this.topicService.getTopics().then(
+      topics => this.topics = topics
+    );
+  }
 
-  doRefresh(refresher): void {
+  doRefresh(refresher = undefined): void {
     console.log('do refresh')
     this.topicService.refresh().then(
       (topics) => {
         this.topics = topics;
-        refresher.complete();
+        if (refresher) {
+          refresher.complete();
+        }
       }
     );
   }

src/pages/topics/topics.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+
+import { Tab } from '../classes/tab';
+/*
+  Generated class for the TabsService provider.
+
+  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
+  for more info on providers and Angular 2 DI.
+*/
+@Injectable()
+export class TabsService {
+  tabs: Tab[] = [
+    {
+      value: 'all',
+      label: '最新'
+    },
+    {
+      value: 'share',
+      label: '分享'
+    },
+    {
+      value: 'ask',
+      label: '问答'
+    },
+    {
+      value: 'job',
+      label: '招聘'
+    },
+    {
+      value: undefined,
+      label: '其他'
+    }
+  ]
+
+  getTabs(): Tab[] {
+    return this.tabs;
+  }
+}
+

src/providers/tabs-service.ts

@@ -3,7 +3,7 @@ import { Http } from '@angular/http';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
 
-import { Topic } from '../pages/topics/topic';
+import { Topic } from '../classes/topic';
 
 /*
   Generated class for the TopicService provider.
@@ -15,7 +15,7 @@ import { Topic } from '../pages/topics/topic';
 export class TopicService {
   private topicsUrl: string = 'https://cnodejs.org/api/v1/topics'
   private topicUrl: string = 'https://cnodejs.org/api/v1/topic'
-  private currentTab: string = 'all'
+  currentTab: string = 'all'
   private nextPage: number = 2
   private hasNextPage: boolean = true
   topics: Topic[] = []