Skip to content

Commit 4cb9673

Browse files
authored
Filters (#38)
* Updated payment hub filters * implemented end date * Updated Pending and incomplete state * bulk batch export test * Batch summary api fix * Batch summary api fix * Resolved review fixes
1 parent def43cd commit 4cb9673

7 files changed

+277
-35
lines changed

src/app/payment-hub/paymenthub.component.html

+1-19
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
<div class="container">
2-
32
<mat-card>
4-
5-
<div fxLayout="row" fxLayout.lt-md="column">
6-
3+
<div fxLayout="row" fxLayout.lt-md="column" class="payment-hub-ee-wrap">
74
<div fxFlex="50%">
8-
95
<mat-nav-list>
10-
116
<mat-list-item [routerLink]="['incomingtransactions']">
127
<mat-icon matListIcon>
138
<fa-icon icon="search" size="sm"></fa-icon>
@@ -23,15 +18,11 @@ <h4 matLine>Search Incoming Transactions</h4>
2318
<h4 matLine>Search Outgoing Transactions</h4>
2419
<p matLine>Advanced search option for outgoing transactions</p>
2520
</mat-list-item>
26-
2721
</mat-nav-list>
28-
2922
</div>
3023

3124
<div fxFlex="50%">
32-
3325
<mat-nav-list>
34-
3526
<mat-list-item [routerLink]="['incomingrequesttopay']">
3627
<mat-icon matListIcon>
3728
<fa-icon icon="search" size="sm"></fa-icon>
@@ -47,14 +38,10 @@ <h4 matLine>Search Incoming Request to Pay</h4>
4738
<h4 matLine>Search Outgoing Request to Pay</h4>
4839
<p matLine>Advanced search option for outgoing request to pays</p>
4940
</mat-list-item>
50-
5141
</mat-nav-list>
52-
5342
</div>
5443
<div fxFlex="50%">
55-
5644
<mat-nav-list>
57-
5845
<mat-list-item [routerLink]="['incomingrequesttopayexport']">
5946
<mat-icon matListIcon>
6047
<fa-icon icon="download" size="sm"></fa-icon>
@@ -68,13 +55,8 @@ <h4 matLine>Export Incoming Request to Pay</h4>
6855
</mat-icon>
6956
<h4 matLine>Export Outgoing Request to Pay</h4>
7057
</mat-list-item>
71-
7258
</mat-nav-list>
73-
7459
</div>
75-
7660
</div>
77-
7861
</mat-card>
79-
8062
</div>
+13-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
.green {
2-
color: green;
3-
}
4-
5-
.red { color:red;}
6-
7-
.orange { color:orange;}
2+
color: green;
3+
}
4+
5+
.red {
6+
color: red;
7+
}
8+
9+
.orange {
10+
color: orange;
11+
}
12+
.payment-hub-ee-wrap {
13+
flex-wrap: wrap;
14+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<div class="container bulk-btn">
2+
<div>
3+
<mat-form-field appearance="fill">
4+
<mat-label>Choose an Option</mat-label>
5+
<mat-select [formControl]="template" multiple>
6+
<mat-option
7+
*ngFor="let templateItem of templates"
8+
[value]="templateItem"
9+
>{{ templateItem }}</mat-option
10+
>
11+
</mat-select>
12+
</mat-form-field>
13+
<button mat-raised-button color="primary">Download CSV Template</button>
14+
</div>
15+
<div class="form-group">
16+
<input
17+
type="file"
18+
class="file-input"
19+
(change)="onFileSelected($event)"
20+
#fileUpload
21+
/>
22+
23+
<div class="file-upload">
24+
{{ fileName || "No file uploaded yet." }}
25+
26+
<button
27+
mat-mini-fab
28+
color="primary"
29+
class="upload-btn"
30+
(click)="fileUpload.click()"
31+
>
32+
<mat-icon>attach_file</mat-icon>
33+
</button>
34+
</div>
35+
</div>
36+
</div>
37+
<div class="container">
38+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
39+
<ng-container matColumnDef="position">
40+
<th mat-header-cell *matHeaderCellDef>No.</th>
41+
<td mat-cell *matCellDef="let element">{{ element.position }}</td>
42+
</ng-container>
43+
44+
<ng-container matColumnDef="transactionId">
45+
<th mat-header-cell *matHeaderCellDef>Transaction Id</th>
46+
<td mat-cell *matCellDef="let element">{{ element.transactionId }}</td>
47+
</ng-container>
48+
49+
<ng-container matColumnDef="startedAt">
50+
<th mat-header-cell *matHeaderCellDef>Started At</th>
51+
<td mat-cell *matCellDef="let element">{{ element.startedAt }}</td>
52+
</ng-container>
53+
54+
<ng-container matColumnDef="completedAt">
55+
<th mat-header-cell *matHeaderCellDef>Completed At</th>
56+
<td mat-cell *matCellDef="let element">{{ element.completedAt }}</td>
57+
</ng-container>
58+
<ng-container matColumnDef="status">
59+
<th mat-header-cell *matHeaderCellDef>Status</th>
60+
<td mat-cell *matCellDef="let element">{{ element.status }}</td>
61+
</ng-container>
62+
63+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
64+
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
65+
</table>
66+
67+
<form
68+
class="batch-summary-wrap"
69+
#batchSummaryForm="ngForm"
70+
(ngSubmit)="getBatchSummary(batchSummaryForm.value)"
71+
>
72+
<mat-form-field class="example-full-width" appearance="fill">
73+
<mat-label>Enter Batch ID</mat-label>
74+
<input
75+
matInput
76+
class="form-control col-sm-4 batch-summary-id"
77+
ngModel
78+
name="batchid"
79+
id="batch-id"
80+
/>
81+
</mat-form-field>
82+
83+
<button
84+
mat-raised-button
85+
color="primary"
86+
type="submit"
87+
[disabled]="!batchSummaryForm.valid"
88+
>
89+
View Batch Details
90+
</button>
91+
</form>
92+
<p>Batch summary</p>
93+
94+
<div *ngFor="let batches of BatchSummaryData">
95+
<li>Batch Id : {{ batches.batch_id }}</li>
96+
<li>Request Id : {{ batches.request_id }}</li>
97+
<li>Total : {{ batches.total }}</li>
98+
<li>Amount Total : {{ batches.totalAmount }}</li>
99+
<li>Status : {{ batches.status }}</li>
100+
<li>Successful : {{ batches.successful }}</li>
101+
<li>Failed : {{ batches.failed }}</li>
102+
<li>Ongoing : {{ batches.ongoing }}</li>
103+
</div>
104+
</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.bulk-btn {
2+
margin-bottom: 20px;
3+
}
4+
.file-input {
5+
display: none;
6+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Component } from "@angular/core";
2+
import {
3+
HttpClient,
4+
HttpParams,
5+
HttpHeaders,
6+
JsonpClientBackend,
7+
} from "@angular/common/http";
8+
import { FormControl } from "@angular/forms";
9+
export interface PeriodicElement {
10+
position: number;
11+
transactionId: string;
12+
status: string;
13+
completedAt: number;
14+
startedAt: number;
15+
}
16+
const ELEMENT_DATA: PeriodicElement[] = [
17+
{
18+
position: 1,
19+
transactionId: "e5eea064-1445-4d32-bc55-bd9826c779a0",
20+
startedAt: 1629130966000,
21+
completedAt: 1629130967000,
22+
status: "IN_PROGRESS",
23+
},
24+
{
25+
position: 2,
26+
transactionId: "3cc88b24-1df6-48e2-8b1f-5dbd02ba96b7",
27+
startedAt: 1629130966000,
28+
completedAt: 1629150766000,
29+
status: "IN_PROGRESS",
30+
},
31+
];
32+
33+
@Component({
34+
selector: "mifosx-bulk-batch-export",
35+
templateUrl: "./bulk-batch-export.component.html",
36+
styleUrls: ["./bulk-batch-export.component.scss"],
37+
})
38+
export class BulkBatchExportComponent {
39+
template = new FormControl("");
40+
templates: string[] = ["Mojaloo", "Program"];
41+
fileToUpload: File | null = null;
42+
displayedColumns: string[] = [
43+
"position",
44+
"transactionId",
45+
"completedAt",
46+
"startedAt",
47+
"status",
48+
];
49+
BatchSummaryData: any[] = [];
50+
batchId: string;
51+
dataSource = ELEMENT_DATA;
52+
handleFileInput(files: FileList) {
53+
this.fileToUpload = files.item(0);
54+
}
55+
fileName = "";
56+
57+
constructor(private http: HttpClient) {}
58+
59+
onFileSelected(event: any) {
60+
const file: File = event.target.files[0];
61+
62+
if (file) {
63+
this.fileName = file.name;
64+
65+
const formData = new FormData();
66+
67+
formData.append("thumbnail", file);
68+
69+
const upload$ = this.http.post("/api/thumbnail-upload", formData);
70+
71+
upload$.subscribe();
72+
}
73+
}
74+
75+
getBatchSummary(batchIdName: any) {
76+
const url = `/api/v1/batch?batchId=${batchIdName.batchid}`;
77+
console.log(url);
78+
this.http.get(url).subscribe((data) => {
79+
this.BatchSummaryData.push(data);
80+
});
81+
}
82+
}

src/app/payment-hub/request-to-pay/incoming-request-export/incoming-request-export.component.html

+49-4
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
name="transactionid"
2626
placeholder="comma-separated-list"
2727
id="transactionid"
28-
(keyup)="arrayConvert($event)"
2928
/>
3029
</mat-form-field>
3130
<mat-form-field>
@@ -38,7 +37,6 @@
3837
name="externalid"
3938
placeholder="comma-separated-list"
4039
id="externalid"
41-
(keyup)="arrayConvert($event)"
4240
/>
4341
</mat-form-field>
4442
<mat-form-field>
@@ -51,7 +49,6 @@
5149
name="workflowinstancekey"
5250
placeholder="comma-separated-list"
5351
id="workflowinstancekey"
54-
(keyup)="arrayConvert($event)"
5552
/>
5653
</mat-form-field>
5754
<mat-form-field>
@@ -64,7 +61,18 @@
6461
name="startdate"
6562
placeholder="comma-separated-list"
6663
id="startdate"
67-
(keyup)="arrayConvert($event)"
64+
/>
65+
</mat-form-field>
66+
<mat-form-field>
67+
<mat-label>END DATE</mat-label>
68+
<input
69+
matInput
70+
type="textArea"
71+
class="form-control col-sm-4"
72+
ngModel
73+
name="enddate"
74+
placeholder="comma-separated-list"
75+
id="enddate"
6876
/>
6977
</mat-form-field>
7078
<mat-form-field>
@@ -79,8 +87,45 @@
7987
<option value="">STATUS</option>
8088
<option value="ACCEPTED">ACCEPTED</option>
8189
<option value="FAILED">FAILED</option>
90+
<option value="IN_PROGRESS">PENDING/INCOMPLETE</option>
8291
</select>
8392
</mat-form-field>
93+
<mat-form-field>
94+
<mat-label>Error Description</mat-label>
95+
<input
96+
matInput
97+
type="textArea"
98+
class="form-control col-sm-4"
99+
ngModel
100+
name="errordescription"
101+
placeholder="comma-separated-list"
102+
id="errordescription"
103+
/>
104+
</mat-form-field>
105+
<mat-form-field>
106+
<mat-label>Payer Id</mat-label>
107+
<input
108+
matInput
109+
type="textArea"
110+
class="form-control col-sm-4"
111+
ngModel
112+
name="payerid"
113+
placeholder="comma-separated-list"
114+
id="payerid"
115+
/>
116+
</mat-form-field>
117+
<mat-form-field>
118+
<mat-label>Payee Id</mat-label>
119+
<input
120+
matInput
121+
type="textArea"
122+
class="form-control col-sm-4"
123+
ngModel
124+
name="payeeid"
125+
placeholder="comma-separated-list"
126+
id="payeeid"
127+
/>
128+
</mat-form-field>
84129
</div>
85130

86131
<button mat-stroked-button type="submit" [disabled]="!postForm.valid">

0 commit comments

Comments
 (0)