cybercinch/openaccounting-web
0
0
Fork 1
mirror of https://github.com/openaccounting/oa-web.git synced 2025-12-09 09:01:24 +13:00
Code Issues Actions Packages Projects Releases Wiki Activity

submit tx on blur

Browse Source
This commit is contained in:
Patrick Nagurny
2019-06-11 17:15:21 -04:00
parent b9a1f35c7c
commit 184a9a4c09
4 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/transaction/autocomplete.html
View File

@@ -1,4 +1,4 @@
<div class="autocomplete" [ngClass]="{visible: visible}"> <div class="autocomplete" [ngClass]="{visible: visible}" (mousedown)="preventBlur()">
<div class="inner"> <div class="inner">
<div class="suggestion" *ngFor="let tx of txs$ | async"> <div class="suggestion" *ngFor="let tx of txs$ | async">
<a (click)="click(tx)">{{tx.description}}</a> <a (click)="click(tx)">{{tx.description}}</a>

7
src/app/transaction/autocomplete.ts
View File

@@ -15,6 +15,7 @@ export class Autocomplete {
@Input() item: TxItem; @Input() item: TxItem;
@Input() accountId: string; @Input() accountId: string;
@Output() tx = new EventEmitter<Transaction>(); @Output() tx = new EventEmitter<Transaction>();
@Output() interact = new EventEmitter<any>();
public visible: boolean; public visible: boolean;
public txs$: Observable<Transaction[]>; public txs$: Observable<Transaction[]>;
@@ -65,4 +66,10 @@ export class Autocomplete {
this.visible = false; 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);
}
} }

24
src/app/transaction/list.html
View File

@@ -36,16 +36,16 @@
<div class="row" (click)="editTransaction(item, $event)" [ngClass]="{odd: !(i % 2), editing: item.editing}"> <div class="row" (click)="editTransaction(item, $event)" [ngClass]="{odd: !(i % 2), editing: item.editing}">
<div class="col custom-3 date"> <div class="col custom-3 date">
<span *ngIf="!item.editing" class="date">{{item.tx.date | date:"M/d/y"}}</span> <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>
<div class="col custom-7 description"> <div class="col custom-7 description">
<div *ngIf="!item.editing">{{item.tx.description}}</div> <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)"/> <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)"></tx-autocomplete> <tx-autocomplete [item]="item" [accountId]="accountId" (tx)="autocomplete(item, $event)" (interact)="preventBlur(item)"></tx-autocomplete>
</div> </div>
<div class="col custom-5 transfer"> <div class="col custom-5 transfer">
<span *ngIf="!item.editing" class="transfer">{{getTransferString(item) | slice:0:50}}</span> <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"> <option *ngFor="let account of selectAccounts" [value]="account.id">
{{account.fullName | slice:0:50}} {{account.fullName | slice:0:50}}
</option> </option>
@@ -53,11 +53,11 @@
</div> </div>
<div class="col custom-3 debit"> <div class="col custom-3 debit">
<span *ngIf="!item.editing" class="debit">{{getDebit(item) | currencyFormat:account.precision:account.currency}}</span> <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>
<div class="col custom-3 credit"> <div class="col custom-3 credit">
<span *ngIf="!item.editing" class="credit">{{getCredit(item) | currencyFormat:account.precision:account.currency}}</span> <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>
<div class="col custom-3 balance" [ngClass]="{'negative': item.balance < 0}"> <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> <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> <a [routerLink]="" (click)="deleteSplit(item, i)" (mousedown)="preventBlur(item)">Remove Split</a>
</div> </div>
<div class="col custom-5"> <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"> <option *ngFor="let account of selectAccounts" [value]="account.id">
{{account.fullName}} {{account.fullName}}
</option> </option>
</select> </select>
</div> </div>
<div class="col custom-3"> <div class="col custom-3 debit">
<input type="text" formControlName="debit" placeholder="Debit" class="form-control" (keyup.enter)="onEnter(item, $event)"/> <input type="text" formControlName="debit" placeholder="Debit" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)"/>
</div> </div>
<div class="col custom-3"> <div class="col custom-3 credit">
<input type="text" formControlName="credit" placeholder="Credit" class="form-control" (keyup.enter)="onEnter(item, $event)"/> <input type="text" formControlName="credit" placeholder="Credit" class="form-control" (keyup.enter)="onEnter(item, $event)" (blur)="onBlur(item, $event)"/>
</div> </div>
<div class="col custom-3 add-split"> <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> --> <!-- <button type="submit">hidden submit</button> -->
</div> </div>
</div> </div>

25
src/app/transaction/list.ts
View File

@@ -452,8 +452,14 @@ export class TxListPage implements OnInit, AfterViewChecked {
item.preventBlur = true; item.preventBlur = true;
} }
onBlur(item: TxItem) { onBlur(item: TxItem, $event) {
this.log.debug('blur2'); 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(() => { setTimeout(() => {
this.log.debug('blur', item.form.pristine); this.log.debug('blur', item.form.pristine);
@@ -462,12 +468,16 @@ export class TxListPage implements OnInit, AfterViewChecked {
return; 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; return;
} }
let elem = document.activeElement as any; if(!item.form.pristine) {
if(elem.form && elem.form.id === 'form' + item.tx.id + item.activeSplitIndex) { // if there are changes, submit the form
$event.target.blur();
this.submit(item);
return; return;
} }
@@ -523,6 +533,12 @@ export class TxListPage implements OnInit, AfterViewChecked {
splits.push(control); splits.push(control);
this.fillEmptySplit(item); 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) { addFirstSplit(item: TxItem) {
@@ -765,6 +781,7 @@ export class TxListPage implements OnInit, AfterViewChecked {
} }
onEnter(item, $event) { onEnter(item, $event) {
item.preventBlur = true;
$event.target.blur(); $event.target.blur();
this.submit(item); this.submit(item);
} }