lead form actions design and double tap directive improved

src/directives/double-tap.ts

@@ -24,17 +24,15 @@ export class DoubleTap implements OnInit, OnDestroy {
         this.tapGesture = new Gesture(this.el);
         this.tapGesture.listen();
         this.tapGesture.on("tap", e => {
-            if (this.lastTimeStamp == 0) {
+            let delay = e.timeStamp - this.lastTimeStamp;
+            
+            if (this.lastTimeStamp == 0 || delay > 500) {
                 this.lastTimeStamp = e.timeStamp;
                 return;
             }
-
-            let delay = e.timeStamp - this.lastTimeStamp;
+            
             this.lastTimeStamp = 0;
-
-            if (delay <= 500) {
-                this.doubleTap.emit(e);
-            }
+            this.doubleTap.emit(e);
         });
     }   
     

src/pages/lead/lead.html

@@ -2,45 +2,50 @@
     <ion-navbar>
         <ion-title>{{ title }}</ion-title>
         <ion-buttons end>
-            <button ion-button icon-only type="submit" form="details-form">
+            <button ion-button icon-only type="submit" form="details-form" [disabled]="!formIsValid()">
                 <i class="fa fa-save fa-lg"></i>
             </button>
         </ion-buttons>
     </ion-navbar>
 </ion-header>
 <ion-content>
-    <form id="details-form">
+    <form id="details-form" (ngSubmit)="submit()">
         <ion-item>
             <ion-label stacked>Asunto</ion-label>
-            <ion-input type="text"></ion-input>
+            <ion-input type="text" [(ngModel)]="lead.name" name="name"></ion-input>
         </ion-item>
-        <ion-item (tap)="selectCustomer()">
+        <ion-item>
             <ion-label stacked>Cliente</ion-label>
-            <ion-input type="text" value="{{ lead.customer.name }}"></ion-input>
+            <ion-input type="text" [value]="lead.customer?.name" name="customer"></ion-input>
         </ion-item>
         <ion-item>
             <ion-label stacked>Dirección</ion-label>
-            <ion-input type="text"></ion-input>
+            <ion-input type="text" [(ngModel)]="lead.street" name="street"></ion-input>
         </ion-item>
         <ion-item>
             <ion-label stacked>Ciudad</ion-label>
-            <ion-input type="text"></ion-input>
+            <ion-input type="text" [(ngModel)]="lead.city" name="city"></ion-input>
         </ion-item>
         <ion-item>
             <ion-label stacked>Nombre de Contacto</ion-label>
-            <ion-input type="text"></ion-input>
+            <ion-input type="text" [(ngModel)]="lead.contact_name" name="lead.contact_name"></ion-input>
         </ion-item>
         <ion-item>
             <ion-label stacked>Correo Electrónico</ion-label>
-            <ion-input type="text"></ion-input>
+            <ion-input type="text" [(ngModel)]="lead.email" name="lead.email"></ion-input>
         </ion-item>
         <ion-item>
             <ion-label stacked>Teléfono</ion-label>
-            <ion-input type="text"></ion-input>
+            <ion-input type="text" [(ngModel)]="lead.phone" name="lead.phone"></ion-input>
         </ion-item>
         <ion-item>
             <ion-label stacked>Celular</ion-label>
-            <ion-input type="text"></ion-input>
+            <ion-input type="text" [(ngModel)]="lead.mobile" name="lead.mobile"></ion-input>
         </ion-item>
     </form>
+    <ion-fab right bottom>
+        <button ion-fab (click)="selectCustomer()">
+            <ion-icon name="person"></ion-icon>
+        </button>
+    </ion-fab>
 </ion-content>

src/pages/lead/lead.ts

@@ -14,7 +14,7 @@ import { EventsManager } from "../../base/events/event-manager";
 })
 export class LeadPage extends BaseDetailsView<Lead> {
 
-    lead: any = {};
+    lead: any;
 
     constructor(
         public navCtrl: NavController,
@@ -24,6 +24,8 @@ export class LeadPage extends BaseDetailsView<Lead> {
 
         let titleKind = super.getKind() === "lead" ? "Iniciativa" : "Oportunidad";
         super.setTitle(super.itemExists() ? "Editar " + titleKind : "Crear " + titleKind);
+
+        this.lead = {}
     }
 
     /**
@@ -31,7 +33,14 @@ export class LeadPage extends BaseDetailsView<Lead> {
      */
     ionViewDidLoad() {
         EventsManager.subscribe("app:select", data => { 
-            this.lead.customer = data;
+            this.lead.customer = data.item;
+
+            this.lead.street = this.lead.customer.street;
+            this.lead.city = this.lead.customer.city;
+            this.lead.contact_name = this.lead.customer.name;
+            this.lead.email = this.lead.customer.email;
+            this.lead.phone = this.lead.customer.phone;
+            this.lead.mobile = this.lead.customer.mobile;
         });
     }
 
@@ -46,4 +55,17 @@ export class LeadPage extends BaseDetailsView<Lead> {
         });
     }
 
+    /**
+     * 
+     */
+    formIsValid(): boolean {
+        return !!this.lead.name && !!this.lead.customer;
+    }
+
+    /**
+     * 
+     */
+    submit(): void {
+        console.log(this.lead);
+    }
 }