master header component

src/app/app.component.ts

@@ -2,8 +2,6 @@ import { Component, ViewChild } from '@angular/core';
 import { Nav, Platform } from 'ionic-angular';
 import { StatusBar, Splashscreen } from 'ionic-native';
 
-import { Page1 } from '../pages/page1/page1';
-import { Page2 } from '../pages/page2/page2';
 import { LoginPage } from "../pages/login/login";
 import { HomePage } from "../pages/home/home";
 import { CustomersPage } from "../pages/customers/customers";
@@ -73,18 +71,20 @@ export class MyApp {
         ];
     }
 
+    /**
+     *
+     */
     initializeApp() {
         this.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.
             StatusBar.styleDefault();
             Splashscreen.hide();
         });
     }
 
+    /**
+     *
+     */
     openPage(page) {
-        // Reset the content nav to have just this page
-        // we wouldn't want the back button to show in this scenario
         this.nav.setRoot(page.component);
     }
 }

src/app/app.module.ts

@@ -3,11 +3,14 @@ import { ReactiveFormsModule } from "@angular/forms";
 import { IonicApp, IonicModule, IonicErrorHandler } from "ionic-angular";
 import { MyApp } from "./app.component";
 
+// Components
+import { OMasterHeader } from "../components/omaster-header/omaster-header";
+
 // Pages
 import { LoginPage } from "../pages/login/login";
 import { HomePage } from "../pages/home/home";
-import { Page1 } from '../pages/page1/page1';
-import { Page2 } from '../pages/page2/page2';
+import { ProductsPage } from "../pages/products/products";
+import { OrdersPage } from "../pages/orders/orders";
 import { ToolsPage } from "../pages/tools/tools";
 import { AboutPage } from "../pages/about/about";
 
@@ -27,8 +30,8 @@ import { MenuPipe } from "../pipes/menu";
         // Pages
         LoginPage,
         HomePage,
-        Page1,
-        Page2,
+        ProductsPage,
+        OrdersPage,
         ToolsPage,
         AboutPage,
         // Pipes
@@ -43,10 +46,10 @@ import { MenuPipe } from "../pipes/menu";
         MyApp,
         LoginPage,
         HomePage,
+        ProductsPage,
+        OrdersPage,
         ToolsPage,
-        AboutPage,
-        Page1,
-        Page2
+        AboutPage
     ],
     providers: [
         OdooRPCService,

src/components/omaster-header/omaster-header.html

@@ -0,0 +1,25 @@
+<ion-header>
+    <ion-navbar color="primary">
+        <button ion-button menuToggle>
+            <ion-icon name="menu"></ion-icon>
+        </button>
+
+        <ion-title>{{ title }}</ion-title>
+
+        <ion-buttons end>
+            <button ion-button (click)="toggleSearch()">
+                <ion-icon color="ligth" name="search"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-navbar>
+</ion-header>
+
+<ion-toolbar color="primary" *ngIf="isSearchMode()">
+    <ion-searchbar placeholder="Buscar" debounce="1000" (ionInput)="searchInput($event)"></ion-searchbar>
+    
+    <ion-buttons end>
+        <button ion-button (click)="toggleSearch()">
+            <ion-icon name="arrow-forward"></ion-icon>
+        </button>
+    </ion-buttons>
+</ion-toolbar>

src/components/omaster-header/omaster-header.ts

@@ -0,0 +1,47 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+
+@Component({
+    selector: "omaster-header",
+    templateUrl: "omaster-header.html"
+})
+export class OMasterHeader {
+
+    searchMode: boolean;
+
+    @Input()
+    title: string;
+
+    @Output()
+    toggle: EventEmitter<any>;
+
+    @Output()
+    search: EventEmitter<any>;
+
+    constructor() { 
+        this.searchMode = false;
+        this.toggle = new EventEmitter();
+        this.search = new EventEmitter();
+    }
+
+    /**
+     *
+     */
+    toggleSearch(): void {
+        this.searchMode = !this.searchMode;
+        this.toggle.emit();
+    }
+
+    /**
+     *
+     */
+    isSearchMode(): boolean {
+        return this.searchMode;
+    }
+
+    /**
+     *
+     */
+    searchInput(event): void {
+        this.search.emit(event);
+    } 
+}

src/pages/page1/page1.html

@@ -1,21 +0,0 @@
-<ion-header>
-  <ion-navbar>
-    <button ion-button menuToggle>
-      <ion-icon name="menu"></ion-icon>
-    </button>
-    <ion-title>Page One</ion-title>
-  </ion-navbar>
-</ion-header>
-
-<ion-content padding>
-  <h3>Ionic Menu Starter</h3>
-
-  <p>
-    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
-  </p>
-
-  <button ion-button secondary menuToggle>Toggle Menu</button>
-
-  <button ion-button (click)="testLogin($event)">Login</button>
-  <button ion-button (click)="testCall($event)">Call</button>
-</ion-content>

src/pages/page1/page1.scss

@@ -1,3 +0,0 @@
-page-page1 {
-
-}

src/pages/page1/page1.ts

@@ -1,39 +0,0 @@
-import { Component } from '@angular/core';
-import { NavController } from 'ionic-angular';
-
-import { AuthService } from "../../services/auth-service";
-import { OdooService } from "../../services/odoo-service";
-import { PouchService } from "../../services/pouch-service";
-
-@Component({
-    selector: 'page-page1',
-    templateUrl: 'page1.html'
-})
-export class Page1 {
-
-    constructor(
-        public navCtrl: NavController,
-        public auth: AuthService,
-        public odoo: OdooService,
-        public pouch: PouchService
-    ) { 
-      
-    }
-
-    /**
-     *
-     */
-    testLogin(e) {
-     
-    }
-
-    /**
-     *
-     */
-    testCall(e) {
-        this.odoo.checkAccessRights('res.partner', ['read']).subscribe(result => {
-            console.log(result);
-            
-        });
-    }
-}

src/pages/page2/page2.html

@@ -1,23 +0,0 @@
-<ion-header>
-  <ion-navbar>
-    <button ion-button menuToggle>
-      <ion-icon name="menu"></ion-icon>
-    </button>
-    <ion-title>Page Two</ion-title>
-  </ion-navbar>
-</ion-header>
-
-<ion-content>
-  <ion-list>
-    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
-      <ion-icon [name]="item.icon" item-left></ion-icon>
-      {{item.title}}
-      <div class="item-note" item-right>
-        {{item.note}}
-      </div>
-    </button>
-  </ion-list>
-  <div *ngIf="selectedItem" padding>
-    You navigated here from <b>{{selectedItem.title}}</b>
-  </div>
-</ion-content>

src/pages/page2/page2.scss

@@ -1,3 +0,0 @@
-page-page2 {
-
-}

src/pages/page2/page2.ts

@@ -1,38 +0,0 @@
-import { Component } from '@angular/core';
-
-import { NavController, NavParams } from 'ionic-angular';
-
-@Component({
-  selector: 'page-page2',
-  templateUrl: 'page2.html'
-})
-export class Page2 {
-  selectedItem: any;
-  icons: string[];
-  items: Array<{title: string, note: string, icon: string}>;
-
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
-    // If we navigated to this page, we will have an item available as a nav param
-    this.selectedItem = navParams.get('item');
-
-    // Let's populate this page with some filler content for funzies
-    this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
-    'american-football', 'boat', 'bluetooth', 'build'];
-
-    this.items = [];
-    for (let i = 1; i < 11; i++) {
-      this.items.push({
-        title: 'Item ' + i,
-        note: 'This is item #' + i,
-        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
-      });
-    }
-  }
-
-  itemTapped(event, item) {
-    // That's right, we're pushing to ourselves!
-    this.navCtrl.push(Page2, {
-      item: item
-    });
-  }
-}

src/pages/products/products.html

@@ -1,17 +1,14 @@
-<!--
-  Generated template for the Products page.
-
-  See http://ionicframework.com/docs/v2/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
 
-  <ion-navbar>
-    <ion-title>products</ion-title>
-  </ion-navbar>
+    <ion-navbar>
+        <button ion-button menuToggle>
+            <ion-icon name="menu"></ion-icon>
+        </button>
 
-</ion-header>
+        <ion-title>Productos</ion-title>
+    </ion-navbar>
 
+</ion-header>
 
 <ion-content padding>