aConnect-UX/src/app/logging/logging.component.html

<div id="layout-wrapper">
  <div class="inner-pg-sp">
    <div class="container-fluid">
      <!-- SEARCH FORM -->
      <div class="col-xl-12 mt-4">
        <div class="card border">
          <div class="card-body">
            <div class="card-header font-edit-13-child">
              {{ "loggerManager" | translate }}
            </div>

            <form [formGroup]="logsSearchForm">
              <div class="row g-3 mb-3">
                <div class="col-md-6">
                  <label>
                    {{ "fromDate" | translate }}
                    <span class="mandatory">*</span>
                  </label>
                  <input
                    type="date"
                    formControlName="fromDate"
                    class="form-control"
                  />
                </div>

                <div class="col-md-6">
                  <label>
                    {{ "toDate" | translate }} <span class="mandatory">*</span>
                  </label>
                  <input
                    type="date"
                    formControlName="toDate"
                    class="form-control"
                  />
                </div>
              </div>

              <div class="text-end">
                <button
                  class="btn btn-primary"
                  [disabled]="logsSearchForm.invalid"
                  (click)="getlogsData()"
                >
                  {{ "findLogs" | translate }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- TABLE -->
      <div class="col-xl-12 mt-4">
        <div class="card border">
          <div
            class="card-header d-flex justify-content-between align-items-center"
          >
            {{ "loggerManagerDetails" | translate }}

            <div class="d-flex gap-2" *ngIf="allItems.length">
              <input
                type="text"
                class="form-control form-control-sm"
                placeholder="{{ 'search' | translate }}"
                [(ngModel)]="searchText"
                (ngModelChange)="applySearch()"
              />

              <i
                class="fa fa-download cursor-pointer"
                (click)="exportDataInExcel()"
              ></i>

              <i class="cursor-pointer" (click)="toggleTableCard()">
                <i
                  *ngIf="logsDataExpanded; else down"
                  class="dripicons-chevron-up"
                ></i>
                <ng-template #down>
                  <i class="dripicons-chevron-down"></i>
                </ng-template>
              </i>
            </div>
          </div>

          <div class="card-body" *ngIf="logsDataExpanded">
            <!-- NO RECORDS -->
            <div *ngIf="!filteredItems.length" class="text-center text-muted">
              {{ "noLoggingDetailsFound" | translate }}
            </div>

            <!-- TABLE -->
            <div *ngIf="filteredItems.length" class="table-responsive">
              <table class="table table-bordered mb-0">
                <thead class="table-light">
                  <tr>
                    <th>{{ "loggingID" | translate }}</th>
                    <th>{{ "loggingRequestUri" | translate }}</th>
                    <th>{{ "loggingResponseCode" | translate }}</th>
                    <th>{{ "loggingRemoteIP" | translate }}</th>
                    <th>{{ "loggingDateTime" | translate }}</th>
                    <th>{{ "loggingMethod" | translate }}</th>
                  </tr>
                </thead>

                <tbody>
                  <tr *ngFor="let logs of pagedItems">
                    <td>{{ logs.id }}</td>
                    <td>{{ logs.requestUri }}</td>
                    <td>{{ logs.responseCode }}</td>
                    <td>{{ logs.remoteIp }}</td>
                    <td>{{ logs.dateTime | date: "dd-MM-yyyy, hh:mm a" }}</td>
                    <td>{{ logs.method }}</td>
                  </tr>
                </tbody>
              </table>

              <!-- FOOTER -->
              <div
                class="d-flex justify-content-between align-items-center mt-3"
              >
                <ng-select
                [items]="pageSizeOptions"
                bindLabel="label"
                bindValue="value"
                [(ngModel)]="itemsPerPage"
                (change)="itemsPerPageChanged()"
                [searchable]="false"
                [clearable]="false">
                </ng-select>

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

                <div class="btn-group">
                  <button
                    class="btn btn-primary"
                    (click)="previousPage()"
                    [disabled]="currentPage === 1"
                  >
                    {{ "previous" | translate }}
                  </button>

                  <button
                    class="btn btn-primary"
                    (click)="nextPage()"
                    [disabled]="currentPage >= totalPages()"
                  >
                    {{ "next" | translate }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>