creada interface de busqueda y listaje de elementos a traves de modelado de datos

src/app/app.html

@@ -1,18 +1,21 @@
 <ion-menu [content]="content">
     <ion-header>
-        <ion-toolbar color="eiru">
+        <ion-toolbar color="primary">
             <ion-title>Menú</ion-title>
         </ion-toolbar>
     </ion-header>
 
     <ion-content>
         <ion-list inset>
-            <button ion-item menuClose><ion-icon color="eiru" name="home" style="padding-right: 25px;"></ion-icon>Inicio</button>
+            <button ion-item menuClose>
+                <ion-icon color="primary" name="home" style="padding-right: 25px;"></ion-icon>
+                Inicio
+            </button>
 
             <div *ngFor="let e of entries">
                 <ion-list-header>{{ e.title }}</ion-list-header>
                 <button ion-item menuClose *ngFor="let p of e.pages" (click)="openPage(p)">
-                    <ion-icon color="eiru" name="{{ p.icon }}" style="padding-right: 25px;"></ion-icon>
+                    <ion-icon color="primary" name="{{ p.icon }}" style="padding-right: 25px;" item-left></ion-icon>
                     {{ p.title }}
                 </button>
             </div>

src/defaults/default-listable.ts

@@ -0,0 +1,64 @@
+import { IListable } from '../interfaces/listable-interface';
+
+export abstract class DefaultListable<T> implements IListable<T> {
+
+    private isSearch: boolean;
+    private elements: Array<T>;
+
+    constructor(
+    ) {
+        this.isSearch = false;
+        this.elements = [];
+    }
+
+    /**
+     *
+     */
+    add(T: any): void {
+        this.elements.push(T);
+    }
+
+    /**
+     *
+     */
+    remove(T: any): void {
+        let index = this.elements.indexOf(T);
+        this.elements.slice(index, 1);
+    }
+
+    /**
+     *
+     */
+    get(T: any): T {
+        let index = this.elements.indexOf(T);
+        return this.elements[index];
+    }
+
+    /**
+     *
+     */
+    list(): Array<T> {
+        return this.elements;
+    }
+
+    /**
+     *
+     */
+    search(by: string): Array<T> {
+        return null;
+    }
+
+    /**
+     *
+     */
+    toggleSearch(): void {
+        this.isSearch = !this.isSearch;
+    }
+
+    /**
+     *
+     */
+    isSearching(): boolean {
+        return this.isSearch;
+    }
+}

src/defaults/default-navigable.ts

@@ -1,7 +1,7 @@
 import { INavigable } from '../interfaces/navigable-interface';
 import { NavController } from 'ionic-angular'
 
-export class DefaultNavigable implements INavigable {
+export abstract class DefaultNavigable implements INavigable {
 
     constructor(public navCtrl: NavController) {}
 

src/interfaces/listable-interface.ts

@@ -0,0 +1,25 @@
+import { ISearchable } from './searchable-interface';
+
+export interface IListable<T> extends ISearchable<T> {
+
+    /**
+     *
+     */
+    add(T: any): void;
+
+    /**
+     *
+     */
+    remove(T: any): void;
+
+    /**
+     *
+     */
+    list(): Array<T>;
+
+    /**
+     *
+     */
+    get(T: any): T;
+
+}

src/interfaces/searchable-interface.ts

@@ -0,0 +1,17 @@
+export interface ISearchable<T> {
+    
+    /**
+     *
+     */
+    search(by: string): Array<T>;
+
+    /**
+     *
+     */
+    toggleSearch(): void;
+
+    /**
+     *
+     */
+    isSearching(): boolean;
+}

src/models/product.ts

@@ -0,0 +1,50 @@
+export class Product {
+
+    constructor(
+        private _id: number,
+        private _name: string,
+        private _displayName: string
+    ) {}
+
+    /**
+     *
+     */
+    get id(): number {
+        return this._id;
+    }
+
+    /**
+     *
+     */
+    set id(_id: number) {
+        this._id = _id;
+    }
+
+    /**
+     *
+     */
+    get name(): string {
+        return this._name;
+    }
+
+    /**
+     *
+     */
+    set name(_name: string) {
+        this._name = _name;
+    }
+
+    /**
+     *
+     */
+    get displayName(): string {
+        return this._displayName;
+    }
+
+    /**
+     *
+     */
+    set displayName(_displayName: string) {
+        this._displayName = _displayName;
+    }
+}

src/models/stock.ts

@@ -0,0 +1,4 @@
+export class Stock {
+
+    constructor() {}
+}

src/models/warehouse.ts

@@ -0,0 +1,5 @@
+export class Warehouse {
+
+    constructor() {}
+
+}

src/pages/about/about.html

@@ -1,13 +1,13 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
+    <ion-navbar color="primary">
 
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
         </button>
 
         <ion-title>Acerca</ion-title>
-        
+
     </ion-navbar>
 
 </ion-header>

src/pages/call-list/call-list.html

@@ -1,7 +1,7 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
-        
+    <ion-navbar color="primary">
+
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
         </button>

src/pages/customer-list/customer-list.html

@@ -1,25 +1,25 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
+    <ion-navbar color="primary">
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
         </button>
 
         <ion-title>Clientes</ion-title>
 
-        <ion-buttons end color="eiru">
-            <button  (click)="toggleSearch()">
-                <ion-icon name="search"></ion-icon>
+        <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="eiru" *ngIf="search">
+<ion-toolbar color="primary" *ngIf="search">
     <ion-searchbar placeholder="Buscar" (ionInput)="filterNews($event)"></ion-searchbar>
     <ion-buttons end>
-        <button (click)="toggleSearch()">
+        <button ion-button (click)="toggleSearch()">
             <ion-icon name="exit"></ion-icon>
         </button>
     </ion-buttons>

src/pages/customer-list/customer-list.scss

@@ -1,3 +1,6 @@
 page-customer-list {
-
+    ion-buttons button span ion-icon {
+        padding: 0 6px !important;
+        font-size: 1.4em !important;
+    }
 }

src/pages/home/home.html

@@ -1,6 +1,6 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
+    <ion-navbar color="primary">
 
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>

src/pages/lead-list/lead-list.html

@@ -1,6 +1,6 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
+    <ion-navbar color="primary">
 
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>

src/pages/login/login.html

@@ -16,5 +16,5 @@
         </ion-item>
     </ion-list>
 
-    <button ion-button block color="primary" (click)="signin()" [disabled]="!tokenService.url || !tokenService.username || !tokenService.password">Entrar</button>
+    <button ion-button block color="secondary" (click)="signin()" [disabled]="!tokenService.url || !tokenService.username || !tokenService.password">Entrar</button>
 </ion-content>

src/pages/opportunity-list/opportunity-list.html

@@ -1,13 +1,13 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
+    <ion-navbar color="primary">
 
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
         </button>
 
         <ion-title>Oportunidades</ion-title>
-        
+
     </ion-navbar>
 
 </ion-header>

src/pages/product-list/product-list.html

@@ -1,18 +1,52 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
-
+    <ion-navbar color="primary">
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
         </button>
 
         <ion-title>Productos</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="isSearching()">
+    <ion-searchbar placeholder="Buscar" (ionInput)="search($event)"></ion-searchbar>
+    <ion-buttons end>
+        <button ion-button (click)="toggleSearch()">
+            <ion-icon name="exit"></ion-icon>
+        </button>
+    </ion-buttons>
+</ion-toolbar>
 
-<ion-content padding>
+<ion-content>
 
+    <ion-card *ngFor="let p of list()">
+        <ion-item>
+            <ion-avatar item-left>
+                <img src="./assets/images/no_product.png" />
+            </ion-avatar>
+            <h2>{{ p.name }}</h2>
+        </ion-item>
+        <ion-row>
+            <ion-col>
+                <button ion-button primary clear small>
+                    <ion-icon name="cash"></ion-icon>
+                    <div>0 Ventas</div>
+                </button>
+            </ion-col>
+        </ion-row>
+    </ion-card>
+
+    <ion-fab right bottom>
+        <button ion-fab color="yellow">
+            <ion-icon name="add" color="light"></ion-icon>
+        </button>
+    </ion-fab>
 </ion-content>

src/pages/product-list/product-list.scss

@@ -1,3 +1,14 @@
 page-product-list {
+    ion-buttons button span ion-icon {
+        padding: 0 6px !important;
+        font-size: 1.4em !important;
+    }
 
+    ion-card ion-row ion-col button {
+        text-transform: none !important;
+    }
+
+    ion-card ion-row ion-col button ion-icon {
+        padding: 0 6px !important;
+    }
 }

src/pages/product-list/product-list.ts

@@ -1,14 +1,26 @@
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
+import { DefaultListable } from '../../defaults/default-listable';
+import { Product } from '../../models/product';
 
 @Component({
     selector: 'page-product-list',
     templateUrl: 'product-list.html'
 })
+export class ProductListPage extends DefaultListable<Product> {
 
-export class ProductListPage {
+    constructor(public navCtrl: NavController) {
+        super();
 
-    constructor(public navCtrl: NavController) {}
+        this.init();
+    }
+
+    init(): void {
+
+        for (let i = 0; i < 100; i++) {
+            this.add(new Product(i + 1, 'Product' + (i + 1), ''));
+        }
+    }
 
     ionViewDidLoad() {
         console.log('Hello ProductList Page');

src/pages/project-list/project-list.html

@@ -1,13 +1,13 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
+    <ion-navbar color="primary">
 
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
         </button>
 
         <ion-title>Proyectos</ion-title>
-        
+
     </ion-navbar>
 
 </ion-header>

src/pages/settings/settings.html

@@ -1,6 +1,6 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
+    <ion-navbar color="primary">
 
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>

src/pages/task-list/task-list.html

@@ -1,6 +1,6 @@
 <ion-header>
 
-    <ion-navbar color="eiru">
+    <ion-navbar color="primary">
 
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>

src/providers/token-service.ts

@@ -17,7 +17,9 @@ export class TokenService {
     constructor(public http: Http) {
     }
 
-    // Get token
+    /**
+     * Pass token auth
+     */
     getToken(): void {
         // let response = this.getTokenFromServer();
         //
@@ -29,12 +31,16 @@ export class TokenService {
         this.checkTokenOnServer();
     }
 
-    // Check if token is present locally
+    /**
+     * Check if token is present locally
+     */
     tokenIsPresent(): boolean {
         return this.getTokenFromLocal() ? true : false;
     }
 
-    // Check local token on the server
+    /**
+     * Check local token on the server
+     */
     checkTokenOnServer(): Observable<Response> {
         let body = 'token=' + this.getTokenFromLocal();
         let headers = new Headers({ 'Content-Type':  'application/x-www-form-urlencoded' });
@@ -42,38 +48,53 @@ export class TokenService {
 
         return this.http.post(this.normalizeCheckUrl(this.url), body, options).map(this.extractCheckData).catch(this.handleError);
     }
+    /**
+    * Extract check value from token verification
+    */
 
-    // Extract check value from token verification
     private extractCheckData(response: Response): boolean {
         let body = response.json();
         return body.token == 'valid' ? true : false;
     }
 
-    // Get token from
+    /**
+     * Get token from local storage
+     */
     private getTokenFromLocal(): string {
         return localStorage.getItem('odoo');
     }
 
+    /**
+     * Store token locally
+     */
     private setLocalToken(value): void {
         localStorage.setItem('odoo', value);
     }
 
-    // Check if introduced url is valid
+    /**
+     * Check if introduced url is valid
+     */
     private checkUrl(): boolean {
         return this.url.includes('.');
     }
 
-    // Normalize provide url
+    /**
+     * Handle error if ocurred
+     */
     private normalizeCheckUrl(url: string): string {
         return (url.startsWith('http://') ? url : 'http://' + url) + '/api/check';
     }
 
-    // Normalize provide url
+    /**
+     * Normalize provide url
+     */
     private normalizeJwtUrl(url: string): string {
         return (url.startsWith('http://') ? url : 'http://' + url) + '/api/jwt';
     }
 
-    // Get token from server
+    /**
+     * Get token from server
+     */
     private getTokenFromServer(): Observable<Token> {
         let body = 'username=' + this.username + '&password=' + this.password;
         let headers = new Headers({ 'Content-Type':  'application/x-www-form-urlencoded' });
@@ -82,7 +103,9 @@ export class TokenService {
         return this.http.post(this.normalizeJwtUrl(this.url), body, options).map(this.extractTokenData).catch(this.handleError);
     }
 
-    // Extract token data from http response
+    /**
+     * Extract token data from http response
+     */
     private extractTokenData(response: Response) {
         let body = response.json();
         let token = new Token(body.token);
@@ -90,7 +113,9 @@ export class TokenService {
         return token;
     }
 
-    // Handle error if ocurred
+    /**
+     * Handle error if ocurred
+     */
     private handleError(error: any) {
         let msg = error._body;
 

src/theme/global.scss

@@ -1,12 +1 @@
-// http://ionicframework.com/docs/v2/theming/
 
-
-// Global CSS
-// --------------------------------------------------
-// Put CSS rules here that you want to apply globally.
-//
-// To declare rules for a specific mode, create a child rule
-// for the .md, .ios, or .wp mode classes. The mode class is
-// automatically applied to the <body> element in the app.
-//
-// App Shared Sass variables belong in app.variables.scss.

src/theme/variables.scss

@@ -24,14 +24,14 @@ $background-color:  #fff;
 
 $colors: (
   // primary:    #387ef5,
-  primary:    #7985cb,
-  secondary:  #32db64,
+  primary:    #3f50b4,
+  // secondary:  #32db64,
+  secondary:  #7985cb,
   danger:     #f53d3d,
   light:      #f4f4f4,
   dark:       #222,
   favorite:   #69BB7B,
-  yellow:     #FBC02D,
-  eiru:       #3f50b4,
+  yellow:     #FBC02D
 );