import { AfterViewInit, Component, ElementRef, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; import { MatDialog } from '@angular/material/dialog'; import { ActivatedRoute, Router } from '@angular/router'; import { Hotkey, HotkeysService } from 'angular2-hotkeys'; import { round } from 'mathjs'; import * as moment from 'moment'; import { BehaviorSubject, Observable, of as observableOf } from 'rxjs'; import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators'; import { AuthService } from '../auth/auth.service'; import { Account } from '../core/account'; import { AccountService } from '../core/account.service'; import { DbFile } from '../core/db-file'; import { Journal } from '../core/journal'; import { ToasterService } from '../core/toaster.service'; import { User } from '../core/user'; import { Voucher } from '../core/voucher'; import { VoucherService } from '../core/voucher.service'; import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component'; import { ImageDialogComponent } from '../shared/image-dialog/image-dialog.component'; import { ImageService } from '../shared/image.service'; import { MathService } from '../shared/math.service'; import { ReceiptDataSource } from './receipt-datasource'; import { ReceiptDialogComponent } from './receipt-dialog.component'; @Component({ selector: 'app-receipt', templateUrl: './receipt.component.html', styleUrls: ['./receipt.component.css'], }) export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild('accountElement', { static: true }) accountElement?: ElementRef; @ViewChild('dateElement', { static: true }) dateElement?: ElementRef; public journalObservable = new BehaviorSubject([]); dataSource: ReceiptDataSource = new ReceiptDataSource(this.journalObservable); form: FormGroup; receiptAccounts: Account[] = []; receiptJournal: Journal = new Journal(); voucher: Voucher = new Voucher(); account: Account | null = null; accBal: any; displayedColumns = ['account', 'amount', 'action']; accounts: Observable; constructor( private route: ActivatedRoute, private router: Router, private fb: FormBuilder, private dialog: MatDialog, private hotkeys: HotkeysService, private toaster: ToasterService, public auth: AuthService, private math: MathService, public image: ImageService, private ser: VoucherService, private accountSer: AccountService, ) { this.form = this.fb.group({ date: '', receiptAccount: '', receiptAmount: { value: '', disabled: true }, addRow: this.fb.group({ account: '', amount: '', }), narration: '', }); this.accBal = null; // Listen to Account Autocomplete Change this.accounts = ((this.form.get('addRow') as FormControl).get( 'account', ) as FormControl).valueChanges.pipe( startWith(null), map((x) => (x !== null && x.length >= 1 ? x : null)), debounceTime(150), distinctUntilChanged(), switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))), ); // Listen to Receipt Account Change (this.form.get('receiptAccount') as FormControl).valueChanges.subscribe((x) => this.router.navigate([], { relativeTo: this.route, queryParams: { a: x }, replaceUrl: true, }), ); } ngOnInit() { this.route.data.subscribe((value) => { const data = value as { voucher: Voucher; receiptAccounts: Account[] }; this.receiptAccounts = data.receiptAccounts; this.loadVoucher(data.voucher); }); this.hotkeys.add( new Hotkey( 'f2', (): boolean => { setTimeout(() => { if (this.dateElement) this.dateElement.nativeElement.focus(); }, 0); return false; // Prevent bubbling }, ['INPUT', 'SELECT', 'TEXTAREA'], ), ); this.hotkeys.add( new Hotkey( 'ctrl+s', (): boolean => { if (this.canSave()) { this.save(); } return false; // Prevent bubbling }, ['INPUT', 'SELECT', 'TEXTAREA'], ), ); this.hotkeys.add( new Hotkey( 'ctrl+p', (): boolean => { if (this.voucher.id && !this.voucher.posted && this.auth.allowed('post-vouchers')) { this.post(); } return false; // Prevent bubbling }, ['INPUT', 'SELECT', 'TEXTAREA'], ), ); } ngAfterViewInit() { this.focusAccount(); } ngOnDestroy() { this.hotkeys.reset(); } loadVoucher(voucher: Voucher) { this.voucher = voucher; [this.receiptJournal] = this.voucher.journals.filter((x) => x.debit === 1); this.form.setValue({ date: moment(this.voucher.date, 'DD-MMM-YYYY').toDate(), receiptAccount: this.receiptJournal.account.id, receiptAmount: this.receiptJournal.amount, addRow: { account: '', amount: 0, }, narration: this.voucher.narration, }); this.dataSource = new ReceiptDataSource(this.journalObservable); this.updateView(); } focusAccount() { setTimeout(() => { if (this.accountElement) this.accountElement.nativeElement.focus(); }, 0); } addRow() { const amount = this.math.parseAmount((this.form.get('addRow') as FormControl).value.amount, 2); const debit = -1; if (this.account === null || amount <= 0) { return; } const oldFiltered = this.voucher.journals.filter( (x) => x.account.id === (this.account as Account).id, ); const old = oldFiltered.length ? oldFiltered[0] : null; if (old && (old.debit === 1 || old.id === this.receiptJournal.id)) { return; } if (old) { old.amount += amount; } else { this.voucher.journals.push( new Journal({ debit, amount, account: this.account, costCentre: null, }), ); } this.resetAddRow(); this.updateView(); } resetAddRow() { (this.form.get('addRow') as FormControl).reset({ account: null, amount: null, }); this.account = null; this.accBal = null; setTimeout(() => { if (this.accountElement) this.accountElement.nativeElement.focus(); }, 0); } updateView() { const journals = this.voucher.journals.filter((x) => x.debit === -1); this.journalObservable.next(journals); this.receiptJournal.amount = round( Math.abs(journals.map((x) => x.amount).reduce((p, c) => p + c, 0)), 2, ); (this.form.get('receiptAmount') as FormControl).setValue(this.receiptJournal.amount); } editRow(row: Journal) { const dialogRef = this.dialog.open(ReceiptDialogComponent, { width: '750px', data: { journal: { ...row }, date: moment((this.form.get('date') as FormControl).value).format('DD-MMM-YYYY'), }, }); dialogRef.afterClosed().subscribe((result: boolean | Journal) => { if (!result) { return; } const j = result as Journal; if ( j.account.id !== row.account.id && this.voucher.journals.filter((x) => x.account.id === j.account.id).length ) { return; } Object.assign(row, j); this.updateView(); }); } deleteRow(row: Journal) { this.voucher.journals.splice(this.voucher.journals.indexOf(row), 1); this.updateView(); } canSave() { if (!this.voucher.id) { return true; } if (this.voucher.posted && this.auth.allowed('edit-posted-vouchers')) { return true; } return ( this.voucher.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers") ); } post() { this.ser.post(this.voucher.id as string).subscribe( (result) => { this.loadVoucher(result); this.toaster.show('Success', 'Voucher Posted'); }, (error) => { this.toaster.show('Danger', error); }, ); } save() { const voucher: Voucher = this.getVoucher(); this.ser.saveOrUpdate(voucher).subscribe( (result) => { this.toaster.show('Success', ''); if (voucher.id === result.id) { this.loadVoucher(result); } else { this.router.navigate(['/receipt', result.id]); } }, (error) => { this.toaster.show('Danger', error); }, ); } getVoucher(): Voucher { const formModel = this.form.value; this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY'); this.receiptJournal.account.id = formModel.receiptAccount; this.voucher.narration = formModel.narration; return this.voucher; } delete() { this.ser.delete(this.voucher.id as string).subscribe( () => { this.toaster.show('Success', ''); this.router.navigate(['/receipt'], { replaceUrl: true }); }, (error) => { this.toaster.show('Danger', error); }, ); } confirmDelete(): void { const dialogRef = this.dialog.open(ConfirmDialogComponent, { width: '250px', data: { title: 'Delete Voucher?', content: 'Are you sure? This cannot be undone.' }, }); dialogRef.afterClosed().subscribe((result: boolean) => { if (result) { this.delete(); } }); } displayFn(account?: Account): string { return account ? account.name : ''; } accountSelected(event: MatAutocompleteSelectedEvent): void { const account = event.option.value; this.account = account; const date = moment((this.form.get('date') as FormControl).value).format('DD-MMM-YYYY'); this.accountSer.balance(account.id as string, date).subscribe((v) => { this.accBal = v; }); } zoomImage(file: DbFile) { this.dialog.open(ImageDialogComponent, { width: '750px', data: file.resized, }); } deleteImage(file: DbFile) { const index = this.voucher.files.indexOf(file); this.voucher.files.splice(index, 1); } }