+71
-65
@@ -1,83 +1,89 @@
|
||||
<div class="container">
|
||||
<h2 mat-title *ngIf="transactionType.withdrawal">Withdraw Money From Saving Account</h2>
|
||||
<h2 mat-title *ngIf="transactionType.deposit">Deposit Money To Saving Account</h2>
|
||||
|
||||
<form [formGroup]="savingAccountTransactionForm" (ngSubmit)="submit()">
|
||||
<mat-card>
|
||||
|
||||
<mat-card-content fxLayout="column">
|
||||
<h2 mat-title *ngIf="transactionType.withdrawal">Withdraw Money From Saving Account</h2>
|
||||
<h2 mat-title *ngIf="transactionType.deposit">Deposit Money To Saving Account</h2>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Transaction Date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
|
||||
formControlName="transactionDate" required>
|
||||
<mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dueDatePicker></mat-datepicker>
|
||||
<mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
|
||||
Transaction Date is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<form [formGroup]="savingAccountTransactionForm" (ngSubmit)="submit()">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Transaction Amount</mat-label>
|
||||
<input type="number" formControlName="transactionAmount" required matInput />
|
||||
<mat-error *ngIf="savingAccountTransactionForm.controls.transactionAmount.hasError('required')">
|
||||
Transaction Amount is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-card-content fxLayout="column">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Payment Type</mat-label>
|
||||
<mat-select formControlName="paymentTypeId">
|
||||
<mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
|
||||
{{ paymentType.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Transaction Date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
|
||||
formControlName="transactionDate" required>
|
||||
<mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dueDatePicker></mat-datepicker>
|
||||
<mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
|
||||
Transaction Date is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column">
|
||||
<mat-label fxFlexAlign="center">Show Payment Details</mat-label>
|
||||
<button type="button" mat-mini-fab color="primary" (click)="addPaymentDetails()">
|
||||
<fa-icon icon="plus-circle" size="lg"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<mat-label>Transaction Amount</mat-label>
|
||||
<input type="number" formControlName="transactionAmount" required matInput />
|
||||
<mat-error *ngIf="savingAccountTransactionForm.controls.transactionAmount.hasError('required')">
|
||||
Transaction Amount is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Payment Type</mat-label>
|
||||
<mat-select formControlName="paymentTypeId">
|
||||
<mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
|
||||
{{ paymentType.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['accountNumber']">
|
||||
<mat-label>Account Number</mat-label>
|
||||
<input type="number" formControlName="accountNumber" matInput />
|
||||
</mat-form-field>
|
||||
<div fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column">
|
||||
<mat-label fxFlexAlign="center">Show Payment Details</mat-label>
|
||||
<button type="button" mat-mini-fab color="primary" (click)="addPaymentDetails()">
|
||||
<fa-icon icon="plus-circle" size="lg"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['checkNumber']">
|
||||
<mat-label>Cheque</mat-label>
|
||||
<input type="number" formControlName="checkNumber" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['accountNumber']">
|
||||
<mat-label>Account Number</mat-label>
|
||||
<input type="number" formControlName="accountNumber" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['routingCode']">
|
||||
<mat-label>Routing Code</mat-label>
|
||||
<input formControlName="routingCode" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['checkNumber']">
|
||||
<mat-label>Cheque</mat-label>
|
||||
<input type="number" formControlName="checkNumber" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['receiptNumber']">
|
||||
<mat-label>Receipt Number</mat-label>
|
||||
<input formControlName="receiptNumber" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['routingCode']">
|
||||
<mat-label>Routing Code</mat-label>
|
||||
<input formControlName="routingCode" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['bankNumber']">
|
||||
<mat-label>Bank</mat-label>
|
||||
<input formControlName="bankNumber" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['receiptNumber']">
|
||||
<mat-label>Receipt Number</mat-label>
|
||||
<input formControlName="receiptNumber" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="savingAccountTransactionForm.controls['bankNumber']">
|
||||
<mat-label>Bank</mat-label>
|
||||
<input formControlName="bankNumber" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Notes</mat-label>
|
||||
<textarea formControlName="note" matInput></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Notes</mat-label>
|
||||
<textarea formControlName="note" matInput></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">Submit</button>
|
||||
</mat-card-actions>
|
||||
<mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
|
||||
<button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">Submit</button>
|
||||
</mat-card-actions>
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
</form>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</mat-card-content>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
.container{
|
||||
width: 70%;
|
||||
.container {
|
||||
width: 37rem;
|
||||
}
|
||||
|
||||
+7
-9
@@ -53,20 +53,18 @@ export class SavingsAccountTransactionsComponent implements OnInit {
|
||||
private router: Router,
|
||||
private datePipe: DatePipe,
|
||||
private savingsService: SavingsService) {
|
||||
this.route.data.subscribe((data: { savingAccountTransactionTemplate: any }) => {
|
||||
this.paymentTypeOptions = data.savingAccountTransactionTemplate.paymentTypeOptions;
|
||||
this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
|
||||
this.paymentTypeOptions = data.savingsAccountActionData.paymentTypeOptions;
|
||||
});
|
||||
this.transactionCommand = this.route.snapshot.params['name'].toLowerCase();
|
||||
this.transactionType[this.transactionCommand] = true;
|
||||
this.savingAccountId = this.route.parent.snapshot.params['savingAccountId'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the Saving account transaction form when component loads.
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.route.queryParams.subscribe(params => {
|
||||
this.transactionType[params.type] = true;
|
||||
this.transactionCommand = params.type;
|
||||
});
|
||||
this.savingAccountId = this.route.snapshot.params['savingAccountId'];
|
||||
this.createSavingAccountTransactionForm();
|
||||
}
|
||||
|
||||
@@ -115,8 +113,8 @@ export class SavingsAccountTransactionsComponent implements OnInit {
|
||||
const transactionData = this.savingAccountTransactionForm.value;
|
||||
transactionData.locale = 'en';
|
||||
transactionData.dateFormat = dateFormat;
|
||||
this.savingsService.makeTransaction(this.transactionCommand, this.savingAccountId, transactionData).subscribe(res => {
|
||||
this.router.navigate(['../'], { relativeTo: this.route });
|
||||
this.savingsService.executeSavingsAccountTransactionsCommand(this.savingAccountId, this.transactionCommand, transactionData).subscribe(res => {
|
||||
this.router.navigate(['../../'], { relativeTo: this.route });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user