aConnect-UX/src/app/transaction-logs/transaction-logs.component.html

<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 class="d-flex align-items-center gap-2">
                          <div class="search-box">
                            <input
                              type="text"
                              class="form-control form-control-sm"
                              [(ngModel)]="searchText"
                              (ngModelChange)="onSearch($event)"
                              placeholder="{{ 'search' | translate }}"
                            />
                            <i class="fas fa-search search-icon"></i>
                          </div>
                          <div class="d-flex align-items-center gap-2">
                            <i
                              (click)="exportDataInExcel()"
                              id="downloadReport"
                              class="fa fa-download"
                            ></i>
                          </div>

                          <i
                            class="materialdesignicons"
                            (click)="toggleTableCard()"
                          >
                            <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>
                        </div>
                      </div>

                      <div
                        class="card-body"
                        *ngIf="
                          transactionDataExpanded && allItems.length;
                          else noRecordsFound
                        "
                      >
                        <div *ngIf="isLoading" class="text-center text-muted">
                          <p>{{ "loadingTransactionLogs" | translate }}</p>
                        </div>

                        <div
                          *ngIf="!isLoading && transactionLog.length === 0"
                          class="text-center text-muted"
                        >
                          <p>{{ "noTransactionLogsFound" | translate }}</p>
                        </div>

                        <div *ngIf="errorMessage" class="alert alert-danger">
                          {{ errorMessage }}
                        </div>

                        <div
                          *ngIf="!isLoading && transactionLog.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>{{ "drPcaGlacode" | translate }}</th>
                                <th>{{ "crPcaglacode" | 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 (
                                    allItems
                                    | tableFilter
                                      : searchText
                                      : [
                                          'logID',
                                          'organization',
                                          'transactionID',
                                          'drAccount',
                                          'drPcaGlacode',
                                          'crPcaglacode',
                                          'crAccount',
                                          '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.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">
                              <ng-select
                                class="form-select-sm"
                                [items]="pageSizeOptions"
                                bindLabel="label"
                                bindValue="value"
                                [(ngModel)]="itemsPerPage"
                                (change)="itemsPerPageChanged()"
                                [searchable]="false"
                                [clearable]="false"
                                [dropdownPosition]="'top'"
                              >
                              </ng-select>
                            </div>

                            <div class="text-muted">
                              {{ "page" | translate }} {{ currentPage }}
                              {{ "of" | translate }} {{ totalPages() }} ({{
                                totalCount
                              }}
                              {{ "totalItems" | translate }})
                            </div>

                            <div class="btn-group">
                              <button
                                class="btn btn-primary waves-effect waves-light"
                                (click)="previousPage()"
                              >
                                {{ "previous" | translate }}
                              </button>
                              <button
                                class="btn btn-primary waves-effect waves-light"
                                (click)="nextPage()"
                              >
                                {{ "next" | translate }}
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<ng-template #noRecordsFound>
  <div
    *ngIf="!isLoading && allItems.length === 0"
    class="text-center text-muted mt-3"
  >
    <p>{{ "noTransactionLogsFound" | translate }}</p>
  </div>
</ng-template>