From 184a9a4c095cc9e4600135d7060525c793918a58 Mon Sep 17 00:00:00 2001
From: Patrick Nagurny <patrick@openaccounting.io>
Date: Tue, 11 Jun 2019 17:15:21 -0400
Subject: [PATCH] submit tx on blur

---
 src/app/transaction/autocomplete.html |  2 +-
 src/app/transaction/autocomplete.ts   |  7 +++++++
 src/app/transaction/list.html         | 24 ++++++++++++------------
 src/app/transaction/list.ts           | 25 +++++++++++++++++++++----
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/app/transaction/autocomplete.html b/src/app/transaction/autocomplete.html
index 256c318..c51ab06 100644
--- a/src/app/transaction/autocomplete.html
+++ b/src/app/transaction/autocomplete.html
@@ -1,4 +1,4 @@
-<div class="autocomplete" [ngClass]="{visible: visible}">
+<div class="autocomplete" [ngClass]="{visible: visible}" (mousedown)="preventBlur()">
   <div class="inner">
     <div class="suggestion" *ngFor="let tx of txs$ | async">
       <a (click)="click(tx)">{{tx.description}}</a>
diff --git a/src/app/transaction/autocomplete.ts b/src/app/transaction/autocomplete.ts
index f9842fd..167a39f 100644
--- a/src/app/transaction/autocomplete.ts
+++ b/src/app/transaction/autocomplete.ts
@@ -15,6 +15,7 @@ export class Autocomplete {
   @Input() item: TxItem;
   @Input() accountId: string;
   @Output() tx = new EventEmitter<Transaction>();
+  @Output() interact = new EventEmitter<any>();
   public visible: boolean;
   public txs$: Observable<Transaction[]>;
 
@@ -65,4 +66,10 @@ export class Autocomplete {
     this.visible = false;
   }
 
+  preventBlur() {
+    // used to notify parent that autocomplete has been interacted with and
+    // that it should not try to do any onBlur() stuff
+    this.interact.emit(true);
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/transaction/list.html b/src/app/transaction/list.html
index 48ac783..2b74137 100644
--- a/src/app/transaction/list.html
+++ b/src/app/transaction/list.html
@@ -36,16 +36,16 @@
           <div class="row" (click)="editTransaction(item, $event)" [ngClass]="{odd: !(i % 2), editing: item.editing}">
             <div class="col custom-3 date">
               <span *ngIf="!item.editing" class="date">{{item.tx.date | date:"M/d/y"}}</span>
-              <input *ngIf="item.editing" type="date" formControlName="date" placeholder="Date" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item)"/>
+              <input *ngIf="item.editing" type="date" formControlName="date" placeholder="Date" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)"/>
             </div>
             <div class="col custom-7 description">
               <div *ngIf="!item.editing">{{item.tx.description}}</div>
-              <input *ngIf="item.editing" type="text" formControlName="description" placeholder="Description" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item)"/>
-              <tx-autocomplete [item]="item" [accountId]="accountId" (tx)="autocomplete(item, $event)"></tx-autocomplete>
+              <input *ngIf="item.editing" type="text" formControlName="description" placeholder="Description" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)"/>
+              <tx-autocomplete [item]="item" [accountId]="accountId" (tx)="autocomplete(item, $event)" (interact)="preventBlur(item)"></tx-autocomplete>
             </div>
             <div class="col custom-5 transfer">
               <span *ngIf="!item.editing" class="transfer">{{getTransferString(item) | slice:0:50}}</span>
-              <select *ngIf="item.editing" class="form-control" formControlName="accountId" [attr.disabled]="item.showSplits ? '' : null" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item)">
+              <select *ngIf="item.editing" class="form-control" formControlName="accountId" [attr.disabled]="item.showSplits ? '' : null" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)">
                 <option *ngFor="let account of selectAccounts" [value]="account.id">
                   {{account.fullName | slice:0:50}}
                 </option>
@@ -53,11 +53,11 @@
             </div>
             <div class="col custom-3 debit">
               <span *ngIf="!item.editing" class="debit">{{getDebit(item) | currencyFormat:account.precision:account.currency}}</span>
-              <input *ngIf="item.editing" type="text" formControlName="debit" placeholder="Debit" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item)"/>
+              <input *ngIf="item.editing" type="text" formControlName="debit" placeholder="Debit" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)"/>
             </div>
             <div class="col custom-3 credit">
               <span *ngIf="!item.editing" class="credit">{{getCredit(item) | currencyFormat:account.precision:account.currency}}</span>
-              <input *ngIf="item.editing" type="text" formControlName="credit" placeholder="Credit" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item)"/>
+              <input *ngIf="item.editing" type="text" formControlName="credit" placeholder="Credit" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)"/>
             </div>
             <div class="col custom-3 balance" [ngClass]="{'negative': item.balance < 0}">
               <span *ngIf="!item.editing" class="balance">{{item.balance | currencyFormat:account.precision:account.currency}}</span>
@@ -82,20 +82,20 @@
               <a [routerLink]="" (click)="deleteSplit(item, i)" (mousedown)="preventBlur(item)">Remove Split</a>
             </div>
             <div class="col custom-5">
-              <select class="form-control" formControlName="accountId" (keyup.enter)="onEnter(item, $event)">
+              <select class="form-control" formControlName="accountId" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)">
                 <option *ngFor="let account of selectAccounts" [value]="account.id">
                   {{account.fullName}}
                 </option>
               </select>
             </div>
-            <div class="col custom-3">
-              <input type="text" formControlName="debit" placeholder="Debit" class="form-control" (keyup.enter)="onEnter(item, $event)"/>
+            <div class="col custom-3 debit">
+              <input type="text" formControlName="debit" placeholder="Debit" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)"/>
             </div>
-            <div class="col custom-3">
-              <input type="text" formControlName="credit" placeholder="Credit" class="form-control" (keyup.enter)="onEnter(item, $event)"/>
+            <div class="col custom-3 credit">
+              <input type="text" formControlName="credit" placeholder="Credit" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)"/>
             </div>
             <div class="col custom-3 add-split">
-              <a *ngIf="i === item.form.get('splits').controls.length - 1" [routerLink]="" (click)="addSplit(item)" (mousedown)="preventBlur(item)">Add Split</a>
+              <a *ngIf="i === item.form.get('splits').controls.length - 1" [routerLink]="" (click)="addSplit(item)">Add Split</a>
               <!-- <button type="submit">hidden submit</button> -->
             </div>
           </div>
diff --git a/src/app/transaction/list.ts b/src/app/transaction/list.ts
index 0a53177..6135d99 100644
--- a/src/app/transaction/list.ts
+++ b/src/app/transaction/list.ts
@@ -452,8 +452,14 @@ export class TxListPage implements OnInit, AfterViewChecked {
     item.preventBlur = true;
   }
 
-  onBlur(item: TxItem) {
+  onBlur(item: TxItem, $event) {
     this.log.debug('blur2');
+    let elem = document.activeElement as any;
+
+    if(elem.form && elem.form.id === 'form' + item.tx.id + item.activeSplitIndex) {
+      // no blur if newly clicked element is in the same form
+      return;
+    }
 
     setTimeout(() => {
       this.log.debug('blur', item.form.pristine);
@@ -462,12 +468,16 @@ export class TxListPage implements OnInit, AfterViewChecked {
         return;
       }
 
-      if(!item.form.pristine) {
+      let elem = document.activeElement as any;
+      if(elem.form && elem.form.id === 'form' + item.tx.id + item.activeSplitIndex) {
+        // no blur if newly clicked element is in the same form
         return;
       }
 
-      let elem = document.activeElement as any;
-      if(elem.form && elem.form.id === 'form' + item.tx.id + item.activeSplitIndex) {
+      if(!item.form.pristine) {
+        // if there are changes, submit the form
+        $event.target.blur();
+        this.submit(item);
         return;
       }
 
@@ -523,6 +533,12 @@ export class TxListPage implements OnInit, AfterViewChecked {
     splits.push(control);
 
     this.fillEmptySplit(item);
+    // TODO how to focus newly created split in non-hacky way?
+    setTimeout(() => {
+      let rows: HTMLElement[] = Array.from(document.querySelectorAll('#form' + item.tx.id + item.activeSplitIndex + ' .row'));
+      let input: any = rows[rows.length - 1].querySelectorAll('.debit input')[0];
+      input && input.focus();
+    }, 10);
   }
 
   addFirstSplit(item: TxItem) {
@@ -765,6 +781,7 @@ export class TxListPage implements OnInit, AfterViewChecked {
   }
 
   onEnter(item, $event) {
+    item.preventBlur = true;
     $event.target.blur();
     this.submit(item);
   }