pie de lista personalizado

src/app/app.html

@@ -1,4 +1,5 @@
 <ion-menu [content]="content">
+    
     <ion-header>
         <ion-toolbar color="primary">
             <ion-title>Menú</ion-title>

src/app/app.module.ts

@@ -6,7 +6,8 @@ import { LoginPage } from '../pages/login/login';
 import { HallPage } from '../pages/hall/hall';
 import { HomePage } from '../pages/home/home';
 
-import { OdooListHeader } from "../components/odoo-list-header/odoo-list-header";
+import { OListHeader } from "../components/olist-header/olist-header";
+import { OListFooter } from "../components/olist-footer/olist-footer";
 
 import { CustomerListPage } from '../pages/customer-list/customer-list';
 import { CustomerOptions } from "../pages/customer-list/customer-options";
@@ -77,7 +78,8 @@ import { DoubleTapDirective } from "../directives/double-tap-directive";
         // Directives
         DoubleTapDirective,
         // Components
-        OdooListHeader
+        OListHeader,
+        OListFooter
     ],
     imports: [
         IonicModule.forRoot(OdooMobileApp),

src/components/olist-footer/olist-footer.html

@@ -0,0 +1,9 @@
+<div class="no-element" *ngIf="showEmptyMessage()">
+    <h2>Sin elementos</h2>
+</div>
+
+<ion-fab right bottom>
+    <button ion-fab color="yellow" (click)="createNewElement($event)">
+        <ion-icon name="add" color="light"></ion-icon>
+    </button>
+</ion-fab>

src/components/olist-footer/olist-footer.scss

@@ -0,0 +1,3 @@
+ocontent-footer {
+    
+}

src/components/olist-footer/olist-footer.ts

@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter, ContentChild } from "@angular/core";
+import { Content } from "ionic-angular";
+
+@Component({
+    selector: "olist-footer",
+    templateUrl: "olist-footer.html",
+    viewProviders: [ Content ]
+})
+export class OListFooter {
+
+    @Input()
+    hasElements: boolean;
+
+    @Output()
+    create: EventEmitter<any>;
+
+    @Output()
+    more: EventEmitter<any>;
+
+    constructor() { 
+        this.hasElements = false;
+        this.create = new EventEmitter();
+        this.more = new EventEmitter();
+    }
+
+    /**
+     *
+     */
+    showEmptyMessage(): boolean {
+        return !this.hasElements;
+    }
+
+    /**
+     *
+     */
+    createNewElement(event): void {
+        this.create.emit(event);
+    }
+
+    /**
+     *
+     */
+    showMoreElements(event): void {
+        this.more.emit(event);
+    }
+}

src/components/odoo-list-header/odoo-list-header.ts → src/components/olist-header/olist-header.ts

@@ -1,10 +1,10 @@
 import { Component, Input, Output, EventEmitter } from "@angular/core";
 
 @Component({
-    selector: "odoo-list-header",
-    templateUrl: "odoo-list-header.html"
+    selector: "olist-header",
+    templateUrl: "olist-header.html"
 })
-export class OdooListHeader {
+export class OListHeader {
 
     searchMode: boolean;
 

src/pages/budget-details/budget-details.html

@@ -1,12 +1,23 @@
 <ion-header>
-    <ion-navbar>
+    <ion-navbar color="primary">
         <ion-title>Presupuesto</ion-title>
+
+        <ion-buttons end>
+            <button ion-button (click)="save()">
+                <ion-icon color="ligth" name="archive"></ion-icon>
+            </button>
+        </ion-buttons>
     </ion-navbar>
 </ion-header>
 
 
 <ion-content>
 
-    <h2>Hello</h2>
+    <ion-list>
+        <ion-item>
+            <ion-label stacked>Nombre</ion-label>
+            <ion-input type="text" [(ngModel)]="saleOrder.name" required></ion-input>
+        </ion-item>
+    </ion-list>
 
 </ion-content>

src/pages/budget-details/budget-details.ts

@@ -1,22 +1,33 @@
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
+import { DataProvider } from "../../providers/data-provider";
+import { SaleOrder } from "../../models/sale.order";
 
-/*
-  Generated class for the BudgetDetails page.
-
-  See http://ionicframework.com/docs/v2/components/#navigation for more info on
-  Ionic pages and navigation.
-*/
 @Component({
-  selector: 'page-budget-details',
-  templateUrl: 'budget-details.html'
+    selector: 'page-budget-details',
+    templateUrl: 'budget-details.html',
+    providers: [ SaleOrder ]
 })
 export class BudgetDetailsPage {
 
-  constructor(public navCtrl: NavController) {}
-
-  ionViewDidLoad() {
-    console.log('Hello BudgetDetailsPage Page');
-  }
+    constructor(
+        public navCtrl: NavController,
+        public saleOrder: SaleOrder,
+        public db: DataProvider
+    ) { }
+    
+    /**
+     *
+     */
+    ionViewDidLoad() {
+        console.log('Hello BudgetDetailsPage Page');
+    }
 
+    save(): void {
+        this.db.save(DataProvider.DOCS.SALE_ORDER, this.saleOrder).then(saleOrder => { 
+            console.log(saleOrder);
+            
+            this.navCtrl.pop(this);
+        }).catch(e => console.log(e));
+    }
 }

src/pages/budget-list/budget-list.html

@@ -1,28 +1,19 @@
-<odoo-list-header [title]="'Presupuestos'" (toggle)="toggleSearch()" (search)="search($event)"></odoo-list-header>
+<olist-header title="Presupuestos" (toggle)="toggleSearch()" (search)="search($event)"></olist-header>
 
 <ion-content>
 
-    <ion-card *ngFor="let b of elements; trackBy:trackByElements">
+    <ion-card *ngFor="let sale of visibleElements; trackBy:trackByElements">
+
         <ion-item>
-            <h2>{{ b.name }}</h2>
+            <h2>{{ sale.name }}</h2>
 
-            <button ion-button primary clear item-right (click)="showOptions($event, b)">
+            <button ion-button primary clear item-right (click)="showOptions($event, item)">
                 <ion-icon name="more"></ion-icon>
             </button>
         </ion-item>
-    </ion-card>
-
-    <div class="no-element" *ngIf="!hasVisibleElements()">
-        <h2>Sin elementos</h2>
-    </div>
 
-    <ion-infinite-scroll (ionInfinite)="seek($event)">
-        <ion-infinite-scroll-content></ion-infinite-scroll-content>
-    </ion-infinite-scroll>
+    </ion-card>
 
-    <ion-fab right bottom>
-        <button ion-fab color="yellow" (click)="goToPage(null)">
-            <ion-icon name="add" color="light"></ion-icon>
-        </button>
-    </ion-fab>    
+    <olist-footer [hasElements]="hasVisibleElements()" (create)="goToPage(null)" (more)="seek($event)"></olist-footer>
 </ion-content>
+

src/pages/budget-list/budget-list.ts

@@ -36,9 +36,13 @@ export class BudgetListPage extends DefaultListable<SaleOrder> implements INavig
 
         this.db.getAll(DataProvider.DOCS.SALE_ORDER).then(orders => {
             this.elements = orders.filter(item => {
-                return item.state === "draft" && item.doc_state !== "deleted"; 
+                // return item.state === "draft" && item.doc_state !== "deleted";
+                return true;
             });
 
+            console.log(this.elements);
+            
+
             loader.dismiss();
         }, e => { 
             console.log(e);