mejorado métodos de persistencia de datos y acciones en listado de productos

.editorconfig

@@ -4,7 +4,7 @@
 root = true
 
 [*]
-indent_style = space
+indent_style = tabular
 indent_size = 4
 
 # We recommend you to keep these unchanged

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Nav, Platform } from 'ionic-angular';
 import { StatusBar } from 'ionic-native';
 
 import { LoginPage } from '../pages/login/login';
+import { HomePage } from '../pages/home/home';
 
 import { CustomerListPage } from '../pages/customer-list/customer-list';
 import { ProductListPage } from '../pages/product-list/product-list';
@@ -24,6 +25,7 @@ export class MyApp {
     @ViewChild(Nav) nav: Nav;
 
     rootPage: any = LoginPage;
+    homePage: any = HomePage;
     entries: Array<{ title: string, pages: Array<{ icon: string, title: string, component: any }> }>;
 
     constructor(public platform: Platform) {

src/app/app.html

@@ -7,7 +7,7 @@
 
     <ion-content>
         <ion-list inset>
-            <button ion-item menuClose>
+            <button ion-item menuClose (click)="nav.setRoot(homePage)">
                 <ion-icon color="primary" name="home" style="padding-right: 25px;"></ion-icon>
                 Inicio
             </button>

src/pages/product-details/product-details.html

@@ -1,16 +1,10 @@
 <ion-header>
     <ion-navbar color="primary">
-         <ion-buttons start>
-            <button ion-button>
-                <ion-icon name="close" (click)="dismiss()"></ion-icon>
-            </button>
-         </ion-buttons>
-
         <ion-title>Producto</ion-title>
 
         <ion-buttons end>
-            <button ion-button>
-                <ion-icon name="more"></ion-icon>
+            <button ion-button (click)="save()">
+                 <ion-icon color="ligth" name="document"></ion-icon>
             </button>
         </ion-buttons>
     </ion-navbar>
@@ -19,25 +13,66 @@
 
 <ion-content>
     <ion-card>
-        <img src="./assets/images/no_product.png" />
+        <div style="position: relative">
+            <img src="./assets/images/product.png" />
 
-        <ion-fab right top>
-            <button ion-fab color="yellow">
-                <ion-icon name="camera" color="light"></ion-icon>
-            </button>
-        </ion-fab>
+            <ion-fab left bottom>
+                <button ion-fab color="yellow" class="fab-picture">
+                    <ion-icon name="camera" color="light"></ion-icon>
+                </button>
+            </ion-fab>
+        </div>
     </ion-card>
 
     <ion-list>
+        <ion-list-header color="light">Información</ion-list-header>
+
+        <ion-item>
+            <ion-label stacked>Nombre del producto</ion-label>
+            <ion-input type="text" [(ngModel)]="product.name" required></ion-input>
+        </ion-item>
+
+        <ion-item>
+            <ion-label stacked>Tipo de producto</ion-label>
+            <ion-select [(ngModel)]="product.type">
+                <ion-option value="0">Almacenable</ion-option>
+                <ion-option value="1">Consumible</ion-option>
+                <ion-option value="2">Servicio</ion-option>
+            </ion-select>
+        </ion-item>
+
+        <ion-item>
+            <ion-label stacked>Precio de venta</ion-label>
+            <ion-input type="number" [(ngModel)]="product.salePrice"></ion-input>
+        </ion-item>
+
+        <ion-item>
+            <ion-label stacked>Código EAN13</ion-label>
+            <ion-input type="text" [(ngModel)]="product.ean13"></ion-input>
+        </ion-item>
+
+        <ion-item>
+            <ion-label stacked>Referencia Interna</ion-label>
+            <ion-input type="text" [(ngModel)]="product.reference"></ion-input>
+        </ion-item>
+
+        <ion-list-header color="light">Abastecimientos e inventario</ion-list-header>
+
+        <ion-item>
+            <ion-label stacked>Precio de costo</ion-label>
+            <ion-input type="number" [(ngModel)]="product.costPrice"></ion-input>
+        </ion-item>
+
         <ion-item>
-            <ion-label floating>Nombre</ion-label>
-            <ion-input type="text"></ion-input>
+            <ion-label stacked>Cantidad a mano</ion-label>
+            <ion-input type="number" [(ngModel)]="product.quantity"></ion-input>
         </ion-item>
 
         <ion-item>
-            <ion-label floating>Precio</ion-label>
-            <ion-input type="number"></ion-input>
+            <ion-label stacked>Activo</ion-label>
+            <ion-toggle [(ngModel)]="product.active"></ion-toggle>
         </ion-item>
+
     </ion-list>
 
 </ion-content>

src/pages/product-details/product-details.scss

@@ -1,12 +1,19 @@
 page-product-details {
+    ion-buttons button span ion-icon {
+        padding: 0 6px !important;
+        font-size: 1.4em !important;
+    }
+
     ion-card img {
         margin: 10px auto;
         display: block;
         width: 200px;
         height: 200px;
+        filter: blur(50%)
     }
 
-    ion-fab button {
-        margin-top: 200px;
+    button[fab].fab-picture {
+        top: calc(100% - 35px);
+        z-index: 50;
     }
 }

src/pages/product-details/product-details.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NavParams, ViewController } from 'ionic-angular';
+import { NavController, NavParams } from 'ionic-angular';
 import { Product } from '../../models/product'
 import { DataProvider } from '../../providers/data-provider'
 
@@ -10,12 +10,49 @@ import { DataProvider } from '../../providers/data-provider'
 })
 export class ProductDetailsPage {
 
-    constructor(public params: NavParams, public viewCtrl: ViewController,  public data: DataProvider) {}
+    product = {
+        name: "",
+        type: 0,
+        salePrice: 0,
+        ean13: "",
+        reference: "",
+        costPrice: 0,
+        quantity: 0,
+        salesCount: 0,
+        active: true
+    }
+
+    constructor(
+        public navCtrl: NavController,
+        public params: NavParams,
+        public data: DataProvider
+    ) { }
 
     ionViewDidLoad() {
-        this.data.save('product', {
-            name: 'product',
-            price: 1000
+        console.log(this.params);
+    }
+
+    /**
+     *
+     */
+    private isValidForm() {
+        if (!this.product.name) {
+            return false;
+        }
+
+        return true;
+    }
+    /**
+     *
+     */
+    save(): void {
+        if (!this.isValidForm()) {
+            return;
+        }
+
+        this.data.save('product', this.product).then(result => {    
+            this.params.data.push(result.products[0]);
+            this.navCtrl.pop(this);
         });
     }
 }

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

@@ -20,24 +20,27 @@
     <ion-searchbar placeholder="Buscar" (ionInput)="search($event)"></ion-searchbar>
     <ion-buttons end>
         <button ion-button (click)="toggleSearch()">
-            <ion-icon name="exit"></ion-icon>
+            <ion-icon name="arrow-forward"></ion-icon>
         </button>
     </ion-buttons>
 </ion-toolbar>
 
 <ion-content>
 
-    <ion-card *ngFor="let p of list()">
+    <ion-card *ngFor="let p of list()" (press)="openItem(p)">
         <ion-item>
             <ion-avatar item-left>
-                <img src="./assets/images/no_product.png" />
+                <img src="./assets/images/product.png" />
             </ion-avatar>
+
             <h2>{{ p.name }}</h2>
+
             <p>
                 <strong>Precio:</strong>
-                {{ p.price }}
+                {{ p.salePrice }}
             </p>
         </ion-item>
+
         <ion-row>
             <ion-col>
                 <button ion-button primary clear small>

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NavController, ModalController, NavParams } from 'ionic-angular';
+import { NavController, ActionSheetController, ActionSheet } from 'ionic-angular';
 import { DefaultListable } from '../../defaults/default-listable';
 import { INavigable } from '../../interfaces/navigable-interface';
 import { Product } from '../../models/product';
@@ -13,9 +13,12 @@ import { DataProvider } from '../../providers/data-provider'
 })
 export class ProductListPage extends DefaultListable<Product> implements INavigable {
 
-    constructor(public navCtrl: NavController, public modalCtrl: ModalController, public data: DataProvider) {
+    constructor(
+        public navCtrl: NavController,
+        public actionSheetCtrl: ActionSheetController,
+        public data: DataProvider
+    ){
         super();
-
         this.initialize();
     }
 
@@ -32,7 +35,40 @@ export class ProductListPage extends DefaultListable<Product> implements INaviga
      * Goto page
      */
     goToPage(page: any) {
-        let modal = this.modalCtrl.create(ProductDetailsPage);
-        modal.present();
+        this.navCtrl.push(ProductDetailsPage, this.elements);
+    }
+
+    /**
+     *
+     */
+    createOptions(): ActionSheet {
+        return this.actionSheetCtrl.create({
+            title: "Opciones",
+            buttons: [
+                {
+                    text: "Eliminar",
+                    icon: "trash",
+                    role: "destructive",
+                    handler: () => {
+                        console.log("Eliminar");
+                    }
+                },
+                {
+                    text: 'Cancel',
+                    role: 'cancel',
+                    handler: () => {
+                        console.log('Cancel clicked');
+                    }
+                }
+            ]
+        });
+    }
+
+    /**
+     *
+     */
+    openItem(product: any) {
+        let options = this.createOptions();
+        options.present();
     }
 }

src/providers/data-provider.ts

@@ -78,8 +78,10 @@ export class DataProvider {
     /**
      *
      */
-    save(type: string, data: any): void {
-        this.data.rel.save(type, data);
+    save(type: string, data: any): any {
+        return new Promise((resolve, reject) => {
+            resolve(this.data.rel.save(type, data));
+        });
     }
 
     /**