UIAngular/Client/src/app/components/add-transaction-page/add-transaction-popup/add-transaction-popup.compo...

102 lines
3.3 KiB
TypeScript

import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material';
import { contributorValidator } from '../contributor-validator';
import { Transaction } from '../transaction';
export interface ValDisplay {
value: number;
display: string;
}
export interface DialogData {
contributors: ValDisplay[],
funds: ValDisplay[],
types: ValDisplay[],
contributor: ValDisplay,
date: string,
typeId: number,
fundId: number,
checkNumber: string,
description: string,
taxYear: number
}
@Component({
selector: 'app-add-transaction-popup',
templateUrl: './add-transaction-popup.component.html',
styleUrls: ['./add-transaction-popup.component.css']
})
export class AddTransactionPopupComponent implements OnInit {
form: FormGroup;
saveBtnDisabled: boolean = false;
saveBtnTxt: string = 'Save';
saveAndAddBtnTxt: string = 'Save & Add';
contributors: ValDisplay[] = [];
filteredContributors: ValDisplay[]
funds: ValDisplay[];
types: ValDisplay[];
constructor(private formBuilder: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: DialogData, private dialogRef:MatDialogRef<AddTransactionPopupComponent>) {
this.contributors = this.data.contributors || [];
this.funds = this.data.funds || [];
this.types = this.data.types || [];
const date = new Date();
const dte = date.getFullYear() + "-" + (date.getMonth()<10?'0':'') + (date.getMonth() + 1) + "-" + (date.getDate()<10?'0':'') + date.getDate();
this.form = this.formBuilder.group({
date: [this.data.date || dte, [Validators.required]],
contributor: [this.data.contributor, [Validators.required, contributorValidator(this.contributors)]],
typeId: [this.data.typeId || 1, [Validators.required]],
fundId: [this.data.fundId || 1, [Validators.required]],
checkNumber: [this.data.checkNumber],
description: [this.data.description],
amount: ['', [Validators.required]],
taxYear: [this.data.taxYear || new Date().getFullYear(), [Validators.required]]
});
}
ngOnInit() {
}
contributorDisplayFn(contributor?: {value:number,display:string}): string | undefined {
return contributor ? contributor.display : undefined;
}
onContributorChange(event) {
if (event && event.value) {
if (event.value === -1) {
// Open new user dialog
}
event = event.display;
}
const filterValue = event.toLowerCase();
this.filteredContributors = this.contributors.filter(option => option.display.toLowerCase().indexOf(filterValue) >= 0);
if (this.filteredContributors.length === 0) {
this.filteredContributors.push({value:-1, display:'Add New Contributor'});
}
}
onSubmit(saveAndAdd: boolean = false) {
const trans = new Transaction();
trans.amount = this.form.value.amount;
trans.checkNumber = this.form.value.checkNumber;
trans.contributorId = this.form.value.contributor.value;
trans.date = this.form.value.date;
trans.description = this.form.value.description;
trans.fundId = this.form.value.fundId;
trans.taxYear = this.form.value.taxYear;
trans.typeId = this.form.value.typeId;
this.dialogRef.close({transaction:trans,saveAndAdd:saveAndAdd});
}
cancel() {
this.dialogRef.close();
}
}