operaciones crud parcialmente implementado para el modulo de productos

src/defaults/default-listable.ts

@@ -2,13 +2,17 @@ import { IListable } from '../interfaces/listable-interface';
 
 export abstract class DefaultListable<T> implements IListable<T> {
 
-    private isSearch: boolean;
+    private isForSearch: boolean;
+    private isForDelete: boolean;
     private _elements: Array<T>;
+    private _selectedIndex: number;
 
     constructor(
     ) {
-        this.isSearch = false;
-        this.elements = [];
+        this.isForSearch = false;
+        this.isForDelete = false;
+        this._elements = [];
+        this._selectedIndex = -1;
     }
 
     /**
@@ -18,6 +22,13 @@ export abstract class DefaultListable<T> implements IListable<T> {
         this._elements = _elements; 
     }
 
+    /**
+     *
+     */
+    set selectedIndex(_selectedIndex: number) {
+        this._selectedIndex = _selectedIndex;
+    }
+
     /**
      *
      */
@@ -25,7 +36,12 @@ export abstract class DefaultListable<T> implements IListable<T> {
         return this._elements;
     }
 
-    
+    /**
+     *
+     */
+    get selectedIndex(): number {
+        return this._selectedIndex;
+    }
 
     /**
      *
@@ -68,13 +84,33 @@ export abstract class DefaultListable<T> implements IListable<T> {
      *
      */
     toggleSearch(): void {
-        this.isSearch = !this.isSearch;
+        this.isForSearch = !this.isForSearch;
+    }
+
+    /**
+     *
+     */
+    toggleDelete(index: number): void {
+        this.selectedIndex = index;
+
+        if (this.selectedIndex != -1) {
+            this.isForDelete = true;
+        } else {
+            this.isForDelete = !this.isForDelete;
+        }    
     }
 
     /**
      *
      */
     isSearching(): boolean {
-        return this.isSearch;
+        return this.isForSearch;
+    }
+
+    /**
+     *
+     */
+    isDeleting(): boolean {
+        return this.isForDelete;
     }
 }

src/interfaces/deletable-interface.ts

@@ -0,0 +1,12 @@
+export interface IDeletable {
+
+    /**
+     *
+     */
+    toggleDelete(index: number): void;
+
+    /**
+     *
+     */
+    isDeleting(): boolean;
+}

src/interfaces/listable-interface.ts

@@ -1,6 +1,7 @@
 import { ISearchable } from './searchable-interface';
+import { IDeletable } from './deletable-interface';
 
-export interface IListable<T> extends ISearchable<T> {
+export interface IListable<T> extends ISearchable<T>, IDeletable  {
 
     /**
      *

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

@@ -4,7 +4,7 @@
 
         <ion-buttons end>
             <button ion-button (click)="save()">
-                 <ion-icon color="ligth" name="document"></ion-icon>
+                 <ion-icon color="ligth" name="archive"></ion-icon>
             </button>
         </ion-buttons>
     </ion-navbar>

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

@@ -28,10 +28,6 @@ export class ProductDetailsPage {
         public data: DataProvider
     ) { }
 
-    ionViewDidLoad() {
-        console.log(this.params);
-    }
-
     /**
      *
      */

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

@@ -25,9 +25,23 @@
     </ion-buttons>
 </ion-toolbar>
 
+<ion-toolbar color="primary" *ngIf="isDeleting()">
+     <ion-buttons start>
+        <button ion-button (click)="toggleDelete(-1)">
+            <ion-icon name="arrow-back"></ion-icon>
+        </button>
+    </ion-buttons>
+
+    <ion-buttons end>
+        <button ion-button (click)="removeItem()">
+            <ion-icon name="trash"></ion-icon>
+        </button>
+    </ion-buttons>
+</ion-toolbar>
+
 <ion-content>
 
-    <ion-card *ngFor="let p of list()" (press)="openItem(p)">
+    <ion-card *ngFor="let p of list(); let i = index;" (press)="toggleDelete(i)">
         <ion-item>
             <ion-avatar item-left>
                 <img src="./assets/images/product.png" />
@@ -39,6 +53,8 @@
                 <strong>Precio:</strong>
                 {{ p.salePrice }}
             </p>
+
+            <ion-icon name="checkmark-circle" color="primary" item-right *ngIf="i == _selectedIndex"></ion-icon>
         </ion-item>
 
         <ion-row>

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

@@ -1,7 +1,11 @@
 page-product-list {
+    ion-buttons[start] {
+        order: 2;
+    }
+
     ion-buttons button span ion-icon {
         padding: 0 6px !important;
-        font-size: 1.4em !important;
+        font-size: 1.5em !important;
     }
 
     ion-card ion-row ion-col button {

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NavController, ActionSheetController, ActionSheet } from 'ionic-angular';
+import { NavController, AlertController } from 'ionic-angular';
 import { DefaultListable } from '../../defaults/default-listable';
 import { INavigable } from '../../interfaces/navigable-interface';
 import { Product } from '../../models/product';
@@ -15,8 +15,8 @@ export class ProductListPage extends DefaultListable<Product> implements INaviga
 
     constructor(
         public navCtrl: NavController,
-        public actionSheetCtrl: ActionSheetController,
-        public data: DataProvider
+        public data: DataProvider,
+        public alertCtrl: AlertController
     ){
         super();
         this.initialize();
@@ -26,7 +26,7 @@ export class ProductListPage extends DefaultListable<Product> implements INaviga
      * Initialize data list
      */
     initialize(): void {
-        this.data.getAll('product').then(r => { 
+        this.data.getAll("product").then(r => { 
             this.elements = r.products;
         });
     }
@@ -41,34 +41,39 @@ export class ProductListPage extends DefaultListable<Product> implements INaviga
     /**
      *
      */
-    createOptions(): ActionSheet {
-        return this.actionSheetCtrl.create({
-            title: "Opciones",
+    openItem(product: any) {
+        
+    }
+
+    /**
+     *
+     */
+    removeItem() {
+        let confirm = this.alertCtrl.create({
+            title: "Confirmar",
+            message: "Desea borrar este producto?",
             buttons: [
                 {
-                    text: "Eliminar",
-                    icon: "trash",
-                    role: "destructive",
+                    text: "Cancelar",
                     handler: () => {
-                        console.log("Eliminar");
+                        this.toggleDelete(-1);
                     }
                 },
                 {
-                    text: 'Cancel',
-                    role: 'cancel',
+                    text: "Aceptar",
                     handler: () => {
-                        console.log('Cancel clicked');
+                        let item = this.elements[this.selectedIndex];
+
+                        this.data.delete("product", item).then(() => { 
+                            
+                        }).catch(() => {
+
+                        });
                     }
                 }
             ]
         });
-    }
 
-    /**
-     *
-     */
-    openItem(product: any) {
-        let options = this.createOptions();
-        options.present();
+        confirm.present();
     }
 }