transaction log Api integration
#28
Merged
naeem.ullah
merged 1 commits from mazdak/UX-1887 into dev-pending-01-01-2026 4 weeks ago
@ -0,0 +1,24 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { map, Observable } from 'rxjs';
|
||||
import { URIKey } from '../../utils/uri-enums';
|
||||
import { HttpErrorResponse, HttpParams } from '@angular/common/http';
|
||||
import { HttpURIService } from '../../app.http.uri.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class TransactionLogService {
|
||||
|
||||
constructor(private httpUriService: HttpURIService) { }
|
||||
|
||||
getTransactionLogs(): Observable<any[]> {
|
||||
const params = new HttpParams();
|
||||
return this.httpUriService.requestGET(URIKey.TRANSACTION_LOGS, params).pipe(map((response: any) => {
|
||||
if (!(response instanceof HttpErrorResponse)) {
|
||||
return Array.isArray(response) ? response : [];
|
||||
}
|
||||
return [];
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
<div id="layout-wrapper">
|
||||
<div class="inner-pg-sp">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-sm-flex align-items-center justify-content-between navbar-header p-0">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="col-xl-12 mt-4">
|
||||
<div class="card border">
|
||||
<div class="card-body">
|
||||
<div class="table-section">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card-body mt-2 p-0">
|
||||
<div class="card mb-0 mt-2">
|
||||
<div class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
|
||||
{{'transactionLogs' | translate}}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div *ngIf="isLoading" class="text-center text-muted">
|
||||
<p>{{'loadingTransactionLogs' | translate}}</p>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isLoading && logs.length === 0" class="text-center text-muted">
|
||||
<p>{{'noTransactionLogsFound' | translate}}</p>
|
||||
</div>
|
||||
|
||||
<div *ngIf="errorMessage" class="alert alert-danger">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isLoading && logs.length > 0" class="table-responsive">
|
||||
<table class="table mb-0 border">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>{{'logID' | translate}}</th>
|
||||
<th>{{'organization' | translate}}</th>
|
||||
<th>{{'transactionID' | translate}}</th>
|
||||
<th>{{'drAccount' | translate}}</th>
|
||||
<th>{{'crAccount' | translate}}</th>
|
||||
<th>{{'paymentMode' | translate}}</th>
|
||||
<th>{{'date' | translate}}</th>
|
||||
<th>{{'channel' | translate}}</th>
|
||||
<th>{{'createdAt' | translate}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let log of logs">
|
||||
<td>{{ log.logId }}</td>
|
||||
<td>{{ log.porOrgacode }}</td>
|
||||
<td>{{ log.transactionID }}</td>
|
||||
<td>{{ log.drMbmbkmsnumber || '-' }}</td>
|
||||
<td>{{ log.crMbmbkmsnumber || '-' }}</td>
|
||||
<td>{{ log.ppmPymdcode }}</td>
|
||||
<td>{{ log.sgtGntrdate | date: 'MMM dd, yyyy' }}</td>
|
||||
<td>{{ log.channelCode }}</td>
|
||||
<td>{{ log.createdAt | date: 'MMM dd, yyyy HH:mm' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TransactionLogsComponent } from './transaction-logs.component';
|
||||
|
||||
describe('TransactionLogsComponent', () => {
|
||||
let component: TransactionLogsComponent;
|
||||
let fixture: ComponentFixture<TransactionLogsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [TransactionLogsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TransactionLogsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,56 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { TransactionLogService } from '../shared/services/transaction-log.service';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
interface TransactionLog {
|
||||
logId: number;
|
||||
porOrgacode: string;
|
||||
drMbmbkmsnumber: string;
|
||||
crMbmbkmsnumber: string;
|
||||
crPcaglacode: string;
|
||||
drPcaGlacode: string;
|
||||
ppmPymdcode: string;
|
||||
sgtGntrdate: string;
|
||||
sgtGntrcreateat: string;
|
||||
channelCode: string;
|
||||
transactionID: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-transaction-logs',
|
||||
templateUrl: './transaction-logs.component.html',
|
||||
providers: [TransactionLogService],
|
||||
imports:[CommonModule, TranslateModule]
|
||||
})
|
||||
export class TransactionLogsComponent implements OnInit {
|
||||
|
||||
logs: TransactionLog[] = [];
|
||||
isLoading = false;
|
||||
errorMessage: string = '';
|
||||
|
||||
constructor(private transactionLogService: TransactionLogService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadLogs();
|
||||
}
|
||||
|
||||
loadLogs() {
|
||||
this.isLoading = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
this.transactionLogService.getTransactionLogs().subscribe({
|
||||
next: (res) => {
|
||||
this.logs = res;
|
||||
this.isLoading = false;
|
||||
},
|
||||
error: (err) => {
|
||||
console.error('Failed to load transaction logs', err);
|
||||
this.errorMessage = 'Failed to load transaction logs. Please try again.';
|
||||
this.isLoading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue