aConnect-UX/src/app/logging/logging.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">
      <!-- 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 mb-3">
              {{ "activityLogs" | 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>
                  <div class="date-input-wrapper">
                    <input
                      type="date"
                      formControlName="fromDate"
                      class="form-control"
                      [max]="maxDate"
                    />
                    <i class="fas fa-calendar calendar-icon"></i>
                  </div>
                  <div class="text-danger"
                    *ngIf="logsSearchForm.get('fromDate')?.touched && logsSearchForm.get('fromDate')?.invalid">
                    {{ 'fieldRequired' | translate }}
                  </div>
                  
                </div>

                <div class="col-md-6">
                  <label>
                    {{ "toDate" | translate }} <span class="mandatory">*</span>
                  </label>
                  <div class="date-input-wrapper">
                    <input
                      type="date"
                      formControlName="toDate"
                      class="form-control"
                      [max]="maxDate"
                    />
                    <i class="fas fa-calendar calendar-icon"></i>
                  </div>
                  <div class="text-danger"
                    *ngIf="logsSearchForm.get('toDate')?.touched && logsSearchForm.get('toDate')?.invalid">
                    {{ 'fieldRequired' | translate }}
                  </div>
                  <div class="text-danger" *ngIf="
                      logsSearchForm.touched &&
                      logsSearchForm.errors?.['fromDateGreaterThanOrEqualToToDate']
                    ">
                    {{ 'toDateInvalidError' | translate }}
                  </div>
                </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-body">
          <div
            class="card-header d-flex justify-content-between align-items-center font-edit-13-child"
          >
            {{ "activityLogDetails" | translate }}

            <div class="d-flex gap-2 align-items-center" *ngIf="allItems.length">
              <div class="search-box">
              <input
                type="text"
                class="form-control form-control-sm"
                placeholder="{{ 'search' | translate }}"
                [(ngModel)]="searchText"
                (ngModelChange)="applySearch()"
              />
              <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="logsDataExpanded; else down">
                <i class="dripicons-chevron-up float-end"></i>
              </ng-container>
                
                <ng-template #down>
                  <i class="dripicons-chevron-down float-end"></i>
                </ng-template>
              </i>
            </div>
          </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>