feat: add recurring deposit account (transactions tab action) (#1043)
Fixes: #1042
This commit is contained in:
Muskan Khedia
+80
@@ -0,0 +1,80 @@
|
||||
<div class="container">
|
||||
|
||||
<mat-card>
|
||||
|
||||
<form [formGroup]="editTransactionForm" (ngSubmit)="submit()">
|
||||
|
||||
<mat-card-content fxLayout="column">
|
||||
|
||||
<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="editTransactionForm.controls.transactionDate.hasError('required')">
|
||||
Transaction Date is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Transaction Amount</mat-label>
|
||||
<input type="number" formControlName="transactionAmount" required matInput />
|
||||
<mat-error *ngIf="editTransactionForm.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>
|
||||
|
||||
<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]="!addPaymentDetailsFlag ? 'plus-circle' : 'minus-circle'" size="lg"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
|
||||
<mat-label>Account Number</mat-label>
|
||||
<input type="number" formControlName="accountNumber" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editTransactionForm.controls['checkNumber']">
|
||||
<mat-label>Cheque</mat-label>
|
||||
<input type="number" formControlName="checkNumber" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editTransactionForm.controls['routingCode']">
|
||||
<mat-label>Routing Code</mat-label>
|
||||
<input formControlName="routingCode" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editTransactionForm.controls['receiptNumber']">
|
||||
<mat-label>Receipt Number</mat-label>
|
||||
<input formControlName="receiptNumber" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editTransactionForm.controls['bankNumber']">
|
||||
<mat-label>Bank</mat-label>
|
||||
<input formControlName="bankNumber" matInput />
|
||||
</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]="!editTransactionForm.valid">Submit</button>
|
||||
</mat-card-actions>
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
</form>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
.container {
|
||||
width: 37rem;
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EditTransactionComponent } from './edit-transaction.component';
|
||||
|
||||
describe('EditTransactionComponent', () => {
|
||||
let component: EditTransactionComponent;
|
||||
let fixture: ComponentFixture<EditTransactionComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ EditTransactionComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EditTransactionComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { DatePipe } from '@angular/common';
|
||||
|
||||
/** Custom Services */
|
||||
import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
|
||||
|
||||
/**
|
||||
* Edit Transaction component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-edit-transaction',
|
||||
templateUrl: './edit-transaction.component.html',
|
||||
styleUrls: ['./edit-transaction.component.scss']
|
||||
})
|
||||
export class EditTransactionComponent implements OnInit {
|
||||
|
||||
/** Minimum Due Date allowed. */
|
||||
minDate = new Date(2000, 0, 1);
|
||||
/** Maximum Due Date allowed. */
|
||||
maxDate = new Date();
|
||||
/** Recurring Deposits transaction form. */
|
||||
editTransactionForm: FormGroup;
|
||||
/** Recurring Deposits transaction payment options. */
|
||||
paymentTypeOptions: {
|
||||
id: number,
|
||||
name: string,
|
||||
description: string,
|
||||
isCashPayment: boolean,
|
||||
position: number
|
||||
}[];
|
||||
/** Flag to enable payment details fields. */
|
||||
addPaymentDetailsFlag: Boolean = false;
|
||||
/** Recurring deposit account's Id */
|
||||
recurringDepositAccountId: string;
|
||||
/** Transaction Template */
|
||||
transactionTemplateData: any;
|
||||
|
||||
/**
|
||||
* Retrieves the Recurring Deposit Account transaction template data from `resolve`.
|
||||
* @param {FormBuilder} formBuilder Form Builder.
|
||||
* @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service.
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
* @param {DatePipe} datePipe DatePipe.
|
||||
* @param {Router} router Router for navigation.
|
||||
*/
|
||||
constructor(private formBuilder: FormBuilder,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private datePipe: DatePipe,
|
||||
private recurringDepositsService: RecurringDepositsService) {
|
||||
this.route.data.subscribe((data: { recurringDepositsAccountTransactionTemplate: any }) => {
|
||||
this.transactionTemplateData = data.recurringDepositsAccountTransactionTemplate;
|
||||
this.paymentTypeOptions = this.transactionTemplateData.paymentTypeOptions;
|
||||
});
|
||||
this.recurringDepositAccountId = this.route.parent.parent.snapshot.params['recurringDepositAccountId'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the Recurring Deposits account transaction form when component loads.
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.createEditTransactionForm();
|
||||
this.editTransactionForm.patchValue({
|
||||
'transactionDate': this.transactionTemplateData.date && new Date(this.transactionTemplateData.date),
|
||||
'transactionAmount': this.transactionTemplateData.amount,
|
||||
'paymentTypeId': this.transactionTemplateData.paymentTypeId
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create Edit Recurring Deposit Account Transaction Form.
|
||||
*/
|
||||
createEditTransactionForm() {
|
||||
this.editTransactionForm = this.formBuilder.group({
|
||||
'transactionDate': ['', Validators.required],
|
||||
'transactionAmount': ['', Validators.required],
|
||||
'paymentTypeId': [''],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Add payment detail fields to the UI.
|
||||
*/
|
||||
addPaymentDetails() {
|
||||
this.addPaymentDetailsFlag = !this.addPaymentDetailsFlag;
|
||||
if (this.addPaymentDetailsFlag) {
|
||||
this.editTransactionForm.addControl('accountNumber', new FormControl(''));
|
||||
this.editTransactionForm.addControl('checkNumber', new FormControl(''));
|
||||
this.editTransactionForm.addControl('routingCode', new FormControl(''));
|
||||
this.editTransactionForm.addControl('receiptNumber', new FormControl(''));
|
||||
this.editTransactionForm.addControl('bankNumber', new FormControl(''));
|
||||
} else {
|
||||
this.editTransactionForm.removeControl('accountNumber');
|
||||
this.editTransactionForm.removeControl('checkNumber');
|
||||
this.editTransactionForm.removeControl('routingCode');
|
||||
this.editTransactionForm.removeControl('receiptNumber');
|
||||
this.editTransactionForm.removeControl('bankNumber');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit the transaction details.
|
||||
*/
|
||||
submit() {
|
||||
const prevTransactionDate: Date = this.editTransactionForm.value.transactionDate;
|
||||
// TODO: Update once language and date settings are setup
|
||||
const dateFormat = 'dd-MM-yyyy';
|
||||
this.editTransactionForm.patchValue({
|
||||
transactionDate: this.datePipe.transform(prevTransactionDate, dateFormat)
|
||||
});
|
||||
const transactionData = this.editTransactionForm.value;
|
||||
transactionData.locale = 'en';
|
||||
transactionData.dateFormat = dateFormat;
|
||||
this.recurringDepositsService.executeRecurringDepositsAccountTransactionsCommand(this.recurringDepositAccountId, 'modify', transactionData, this.transactionTemplateData.id)
|
||||
.subscribe(res => {
|
||||
this.router.navigate(['../'], { relativeTo: this.route });
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
+2
-2
@@ -37,10 +37,10 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+4
-1
@@ -6,10 +6,13 @@
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
.select-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.strike {
|
||||
text-decoration: line-through;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
<div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%"
|
||||
*ngIf="!(transactionData.reversed)">
|
||||
<span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
|
||||
<button mat-raised-button color="primary"
|
||||
*ngIf="!(transactionData.transactionType.value == 'Transfer' || transactionData.reversed == 'true')"
|
||||
[routerLink]="'edit'">
|
||||
<fa-icon icon="edit"></fa-icon> Edit
|
||||
</button>
|
||||
</span>
|
||||
<button mat-raised-button color="warn"
|
||||
*mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
|
||||
(click)="undoTransaction()">
|
||||
<fa-icon icon="undo"></fa-icon> Undo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<mat-card>
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
<div fxLayout="row wrap" class="content">
|
||||
|
||||
<div fxFlex="50%" class="mat-body-strong">
|
||||
Transaction Id
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%">
|
||||
{{ transactionData.id }}
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%" class="mat-body-strong">
|
||||
Type
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%">
|
||||
{{ transactionData.transactionType.value }}
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%" class="mat-body-strong">
|
||||
Transaction Date
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%">
|
||||
{{ transactionData.date | date }}
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%" class="mat-body-strong">
|
||||
Currency
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%">
|
||||
{{ transactionData.currency.displayLabel }}
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%" class="mat-body-strong">
|
||||
Amount
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%">
|
||||
{{ transactionData.amount }}
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
|
||||
Note
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%" *ngIf="transactionData.note">
|
||||
{{ transactionData.note }}
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="transactionData.paymentDetailData">
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
|
||||
Payment Type
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
|
||||
{{ transactionData.paymentDetailData.paymentType.name }}
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
|
||||
Account No.
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
|
||||
{{ transactionData.paymentDetailData.accountNumber }}
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
|
||||
Cheque Number
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
|
||||
{{ transactionData.paymentDetailData.checkNumber }}
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
|
||||
Routing Code
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
|
||||
{{ transactionData.paymentDetailData.routingCode }}
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
|
||||
Receipt No.
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
|
||||
{{ transactionData.paymentDetailData.receiptNumber }}
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
|
||||
Bank No.
|
||||
</div>
|
||||
|
||||
<div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
|
||||
{{ transactionData.paymentDetailData.bankNumber }}
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
|
||||
.content {
|
||||
div {
|
||||
margin: 1rem 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ViewTransactionComponent } from './view-transaction.component';
|
||||
|
||||
describe('ViewTransactionComponent', () => {
|
||||
let component: ViewTransactionComponent;
|
||||
let fixture: ComponentFixture<ViewTransactionComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ViewTransactionComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ViewTransactionComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
/** Angular Imports */
|
||||
import { Component } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { DatePipe } from '@angular/common';
|
||||
|
||||
/** Custom Services */
|
||||
import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
|
||||
|
||||
/** Custom Dialogs */
|
||||
import { RecurringDepositConfirmationDialogComponent } from '../../custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
|
||||
|
||||
/**
|
||||
* View Transaction Component.
|
||||
* TODO: Add support for account transfers.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-view-transaction',
|
||||
templateUrl: './view-transaction.component.html',
|
||||
styleUrls: ['./view-transaction.component.scss']
|
||||
})
|
||||
export class ViewTransactionComponent {
|
||||
|
||||
/** Transaction data. */
|
||||
transactionData: any;
|
||||
|
||||
/**
|
||||
* Retrieves the Transaction data from `resolve`.
|
||||
* @param {RecurringDepositsService} recurringDepositsService Savings Service
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
* @param {Router} router Router for navigation.
|
||||
* @param {MatDialog} dialog Dialog reference.
|
||||
* @param {DatePipe} datePipe DatePipe.
|
||||
*/
|
||||
constructor(private recurringDepositsService: RecurringDepositsService,
|
||||
private route: ActivatedRoute,
|
||||
private datePipe: DatePipe,
|
||||
private router: Router,
|
||||
public dialog: MatDialog) {
|
||||
this.route.data.subscribe((data: { recurringDepositsAccountTransaction: any }) => {
|
||||
this.transactionData = data.recurringDepositsAccountTransaction;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Undo the recurring deposits transaction
|
||||
*/
|
||||
undoTransaction() {
|
||||
const accountId = this.route.parent.snapshot.params['recurringDepositAccountId'];
|
||||
const undoTransactionAccountDialogRef = this.dialog.open(RecurringDepositConfirmationDialogComponent, { data: { heading: 'Undo Transaction', dialogContext: 'Are you sure you want to undo this transaction ?' } });
|
||||
undoTransactionAccountDialogRef.afterClosed().subscribe((response: any) => {
|
||||
if (response.confirm) {
|
||||
const locale = 'en';
|
||||
const dateFormat = 'dd MMMM yyyy';
|
||||
const data = {
|
||||
transactionDate: this.datePipe.transform(this.transactionData.date && new Date(this.transactionData.date), dateFormat),
|
||||
transactionAmount: 0,
|
||||
dateFormat,
|
||||
locale
|
||||
};
|
||||
this.recurringDepositsService.executeRecurringDepositsAccountTransactionsCommand(accountId, 'undo', data, this.transactionData.id).subscribe(() => {
|
||||
this.router.navigate(['../'], { relativeTo: this.route });
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user