diff --git a/src/app/transaction/autocomplete.html b/src/app/transaction/autocomplete.html index c51ab06..256c318 100644 --- a/src/app/transaction/autocomplete.html +++ b/src/app/transaction/autocomplete.html @@ -1,4 +1,4 @@ -
+
{{tx.description}} diff --git a/src/app/transaction/autocomplete.ts b/src/app/transaction/autocomplete.ts index 167a39f..544af63 100644 --- a/src/app/transaction/autocomplete.ts +++ b/src/app/transaction/autocomplete.ts @@ -15,7 +15,6 @@ export class Autocomplete { @Input() item: TxItem; @Input() accountId: string; @Output() tx = new EventEmitter(); - @Output() interact = new EventEmitter(); public visible: boolean; public txs$: Observable; @@ -65,11 +64,4 @@ export class Autocomplete { this.tx.emit(tx); 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 2b74137..a9c553e 100644 --- a/src/app/transaction/list.html +++ b/src/app/transaction/list.html @@ -36,16 +36,16 @@
{{item.tx.date | date:"M/d/y"}} - +
-
{{item.tx.description}}
- - +
{{item.tx.description}}
+ +
{{getTransferString(item) | slice:0:50}} - @@ -53,11 +53,11 @@
{{getDebit(item) | currencyFormat:account.precision:account.currency}} - +
{{getCredit(item) | currencyFormat:account.precision:account.currency}} - +
{{item.balance | currencyFormat:account.precision:account.currency}} @@ -70,33 +70,29 @@
-
-
- +
- +
diff --git a/src/app/transaction/list.ts b/src/app/transaction/list.ts index 6135d99..cd717a7 100644 --- a/src/app/transaction/list.ts +++ b/src/app/transaction/list.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit, ViewChild, ElementRef, AfterViewChecked, Renderer } from '@angular/core'; +import { Component, Input, OnInit, ViewChild, ElementRef, AfterViewChecked, Renderer, HostListener} from '@angular/core'; import { Logger } from '../core/logger'; import { ActivatedRoute } from '@angular/router'; import { TransactionService } from '../core/transaction.service'; @@ -57,7 +57,8 @@ export class TxListPage implements OnInit, AfterViewChecked { private accountService: AccountService, private fb: FormBuilder, private renderer: Renderer, - private modalService: NgbModal + private modalService: NgbModal, + private eRef: ElementRef ) { this.items = []; this.limit = 50; @@ -124,6 +125,42 @@ export class TxListPage implements OnInit, AfterViewChecked { }); } + @HostListener('document:click', ['$event']) + clickout(event) { + let clickedForm = false; + let txId = undefined; + let autocomplete = false; + event.path.forEach((elem) => { + if(elem.classList && elem.classList.contains('autocomplete')) { + autocomplete = true; + } + if(elem.id && elem.id.indexOf('form') === 0) { + clickedForm = true; + if(elem.id.indexOf('undefined') === -1) { + txId = elem.id.substring(4, 36); + } + } + }); + + if(autocomplete) { + return; + } + + this.items.forEach(item => { + if(item.editing && (item.tx.id !== txId || !clickedForm)) { + if(!item.form.pristine) { + this.submit(item); + } + + item.form = this.fb.group({ + splits: this.fb.array([]) + }); + + item.editing = false; + } + }); + } + fetchMoreTransactions() { this.fetching = true; this.log.debug('Fetching ' + this.limit + ' more transactions'); @@ -446,49 +483,6 @@ export class TxListPage implements OnInit, AfterViewChecked { // }) item.edit$.next(null); } - - preventBlur(item: TxItem) { - this.log.debug('prevent blur'); - item.preventBlur = true; - } - - 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); - if(item.preventBlur) { - item.preventBlur = false; - return; - } - - 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; - } - - if(!item.form.pristine) { - // if there are changes, submit the form - $event.target.blur(); - this.submit(item); - return; - } - - item.form = this.fb.group({ - splits: this.fb.array([]) - }); - - item.editing = false; - }, 100); // timeout needs to be longer than in editTransaction - } - deleteSplit(item: TxItem, index) { item.form.markAsDirty(); this.log.debug('delete split'); @@ -623,6 +617,7 @@ export class TxListPage implements OnInit, AfterViewChecked { this.log.debug(item.form.value); if(item.form.pristine) { + item.editing = false; return; } @@ -781,8 +776,6 @@ export class TxListPage implements OnInit, AfterViewChecked { } onEnter(item, $event) { - item.preventBlur = true; - $event.target.blur(); this.submit(item); } @@ -851,6 +844,7 @@ export class TxListPage implements OnInit, AfterViewChecked { let formDate = Util.getDateFromLocalDateString(item.form.value.date); item.tx = new Transaction( { + id: item.tx.id, date: this.computeTransactionDate(formDate, new Date()), description: tx.description, splits: tx.splits @@ -871,7 +865,6 @@ export class TxListPage implements OnInit, AfterViewChecked { this.log.debug(tx); item.editing = false; - item.preventBlur = true; this.editTransaction(item, {target: {className: 'description', classList: ['description']}}); item.form.markAsDirty(); } diff --git a/src/app/transaction/txitem.ts b/src/app/transaction/txitem.ts index 34aac9f..ed48b54 100644 --- a/src/app/transaction/txitem.ts +++ b/src/app/transaction/txitem.ts @@ -9,6 +9,5 @@ export class TxItem { form: FormGroup; balance: number; editing: boolean; - preventBlur: boolean; edit$: Subject; } \ No newline at end of file