@ -3,9 +3,7 @@
< 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 class = "d-sm-flex align-items-center justify-content-between navbar-header p-0" > < / div >
< / div >
< / div >
< / div >
@ -19,9 +17,7 @@
< 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"
>
< div class = "card-header font-edit-13-child d-flex justify-content-between align-items-center" >
{{ "transactionLogs" | translate }}
< div class = "d-flex align-items-center gap-2" >
@ -32,169 +28,164 @@
[(ngModel)]="searchText"
(ngModelChange)="onSearch($event)"
placeholder="{{ 'search' | translate }}"
[disabled]="isLoading"
/>
< i class = "fas fa-search search-icon" > < / i >
< / div >
< div class = "d-flex align-items-center gap-2" >
< i
< button
class="btn btn-sm btn-outline-success"
(click)="exportDataInExcel()"
id="downloadReport"
class="fa fa-download"
>< / i >
[disabled]="isLoading || transactionLog.length === 0"
title="Export to Excel"
>
< i class = "fa fa-download" > < / i >
< / button >
< / div >
< i
class="materialdesignicons "
< button
class="btn btn-sm btn-outline-secondary "
(click)="toggleTableCard()"
[title]="(transactionDataExpanded ? 'collapse' : 'expand') | translate"
>
< ng-container
*ngIf="
transactionDataExpanded;
else collapsedIcon
"
>
< i class = "dripicons-chevron-up float-end" > < / i >
< / ng-container >
< ng-template # collapsedIcon >
< i class = "dripicons-chevron-down float-end" > < / i >
< / ng-template >
< / i >
< i * ngIf = "transactionDataExpanded" class = "dripicons-chevron-up" > < / i >
< i * ngIf = "!transactionDataExpanded" class = "dripicons-chevron-down" > < / i >
< / button >
< / div >
< / div >
< div
class="card-body"
*ngIf="
transactionDataExpanded & & allItems.length;
else noRecordsFound
"
*ngIf="transactionDataExpanded; else collapsedTable"
>
< div * ngIf = "isLoading" class = "text-center text-muted" >
< p > {{ "loadingTransactionLogs" | translate }}< / p >
<!-- Loading State -->
< div * ngIf = "isLoading" class = "text-center py-5" >
< div class = "spinner-border text-primary" role = "status" >
< span class = "visually-hidden" > Loading...< / span >
< / div >
< div
*ngIf="!isLoading & & transactionLog.length === 0"
class="text-center text-muted"
>
< p > {{ "noTransactionLogsFound" | translate }}< / p >
< p class = "text-muted mt-2" > {{ "loadingTransactionLogs" | translate }}< / p >
< / div >
< div * ngIf = "errorMessage" class = "alert alert-danger" >
<!-- Error Message -->
< div * ngIf = "!isLoading && errorMessage" class = "alert alert-danger alert-dismissible fade show" role = "alert" >
{{ errorMessage }}
< button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "Close" ( click ) = " errorMessage = '' " > < / button >
< / div >
< div
*ngIf="!isLoading & & transactionLog.length > 0"
class="table-responsive"
>
< table class = "table mb-0 border" >
<!-- No Data Found -->
< div * ngIf = "!isLoading && !errorMessage && transactionLog.length === 0" class = "text-center py-5 text-muted" >
< i class = "fas fa-database fa-3x mb-3 opacity-50" > < / i >
< h5 > {{ "noTransactionLogsFound" | translate }}< / h5 >
< / div >
<!-- Data Table -->
< div * ngIf = "!isLoading && !errorMessage && transactionLog.length > 0" class = "table-responsive" >
< table class = "table table-hover table-bordered mb-0" >
< 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 > {{ "drPcaGlacode" | translate }}< / th >
< th > {{ "crPcaglacode" | translate }}< / th >
< th > {{ "transactionUri" | translate }}< / th >
< th > {{ "transactionCode" | translate }}< / th >
< th > {{ "paymentMode" | translate }}< / th >
< th > {{ "date" | translate }}< / th >
< th > {{ "channel" | translate }}< / th >
< th > {{ "createdAt" | translate }}< / th >
< th scope = "col" > {{ "logID" | translate }}< / th >
< th scope = "col" > {{ "organization" | translate }}< / th >
< th scope = "col" > {{ "transactionID" | translate }}< / th >
< th scope = "col" > {{ "drAccount" | translate }}< / th >
< th scope = "col" > {{ "crAccount" | translate }}< / th >
< th scope = "col" > {{ "drPcaGlacode" | translate }}< / th >
< th scope = "col" > {{ "crPcaglacode" | translate }}< / th >
< th scope = "col" > {{ "transactionUri" | translate }}< / th >
< th scope = "col" > {{ "transactionCode" | translate }}< / th >
< th scope = "col" > {{ "paymentMode" | translate }}< / th >
< th scope = "col" > {{ "date" | translate }}< / th >
< th scope = "col" > {{ "channel" | translate }}< / th >
< th scope = "col" > {{ "createdAt" | translate }}< / th >
< / tr >
< / thead >
< tbody >
< tr
*ngFor="
let log of (
allItems
| tableFilter
: searchText
: [
'logID',
'organization',
< tr * ngFor = "let log of filteredItems | tableFilter: searchText: [
'logId',
'porOrgacode',
'transactionID',
'drAccount',
'drMbmbkmsnumber',
'crMbmbkmsnumber',
'drPcaGlacode',
'crPcaglacode',
'crAccount',
'transactionUri',
'transactionCode',
'paymentMode',
'date',
'channel',
'createdAt',
]
).slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
)
"
>
< td > {{ log.logId }}< / td >
< td > {{ log.porOrgacode }}< / td >
< td > {{ log.transactionID }}< / td >
< td > {{ log.drMbmbkmsnumber || "-" }}< / td >
< td > {{ log.crMbmbkmsnumber || "-" }}< / td >
< td > {{ log.drPcaGlacode || "-" }}< / td >
< td > {{ log.crPcaglacode || "-" }}< / td >
< td > {{ log.transactionUri || "N/A"}}< / td >
< td > {{ log.transactionCode || "N/A"}}< / 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 >
'ppmPymdcode',
'sgtGntrdate',
'channelCode',
'createdAt'
]">
< td > < code > {{ log.logId || '-' }}< / code > < / td >
< td > {{ log.porOrgacode || '-' }}< / td >
< td > < strong > {{ log.transactionID || '-' }}< / strong > < / td >
< td > {{ log.drMbmbkmsnumber || '-' }}< / td >
< td > {{ log.crMbmbkmsnumber || '-' }}< / td >
< td > {{ log.drPcaGlacode || '-' }}< / td >
< td > {{ log.crPcaglacode || '-' }}< / td >
< td > < small class = "text-muted" > {{ log.transactionUri || 'N/A' }}< / small > < / td >
< td > < span class = "badge bg-secondary" > {{ log.transactionCode || 'N/A' }}< / span > < / 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
class="d-flex justify-content-between align-items-center mt-3"
>
< div class = "form-group mb-0" >
<!-- Pagination -->
< div class = "d-flex justify-content-between align-items-center mt-3 flex-wrap" >
<!-- Items per page -->
< div class = "d-flex align-items-center gap-2 mb-2 mb-md-0" >
< span class = "text-muted small" > {{ "show" | translate }}< / span >
< div style = "width: 120px;" >
< ng-select
class="form-select-sm"
[items]="pageSizeOptions"
bindLabel="label"
bindValue="value"
[(ngModel)]="itemsPerPage"
(change)="itemsPerPageChanged()"
[searchable]="false"
[clearable]="false"
[dropdownPosition]="'top'"
[disabled]="isLoading"
>
< ng-template ng-option-tmp let-item = "item" >
{{ item.value }} {{ "entries" | translate }}
< / ng-template >
< ng-template ng-label-tmp let-item = "item" >
{{ item.value }} {{ "entries" | translate }}
< / ng-template >
< / ng-select >
< / div >
< / div >
< div class = "text-muted" >
<!-- Page info -->
< div class = "text-muted mb-2 mb-md-0" >
{{ "page" | translate }} {{ currentPage }}
{{ "of" | translate }} {{ totalPages() }} ({{
totalCount
}}
{{ "totalItems" | translate }})
{{ "of" | translate }} {{ totalPages() }}
< span class = "d-none d-md-inline" >
({{ totalCount }} {{ "totalItems" | translate }})
< / span >
< / div >
<!-- Pagination buttons -->
< div class = "btn-group" >
< button
class="btn btn-primary waves-effect waves-light "
class="btn btn-outline-primary btn-sm "
(click)="previousPage()"
[disabled]="currentPage === 1 || isLoading"
>
< i class = "fas fa-chevron-left me-1" > < / i >
{{ "previous" | translate }}
< / button >
< button
class="btn btn-primary waves-effect waves-light "
class="btn btn-outline-primary btn-sm "
(click)="nextPage()"
[disabled]="currentPage === totalPages() || isLoading"
>
{{ "next" | translate }}
< i class = "fas fa-chevron-right ms-1" > < / i >
< / button >
< / div >
< / div >
@ -211,11 +202,13 @@
< / div >
< / div >
< / div >
< ng-template # noRecordsFound >
< div
*ngIf="!isLoading & & allItems.length === 0"
class="text-center text-muted mt-3"
>
< p > {{ "noTransactionLogsFound" | translate }}< / p >
< ng-template # collapsedTable >
< div class = "card-body text-center py-4 text-muted" * ngIf = "!isLoading" >
< i class = "dripicons-chevron-down fa-2x mb-2" > < / i >
< p > {{ "tableCollapsed" | translate }}< / p >
< button class = "btn btn-sm btn-outline-primary" ( click ) = " toggleTableCard ( ) " >
{{ "showTable" | translate }}
< / button >
< / div >
< / ng-template >
Naeem Ullah
6 days ago