ekangularbase/src/audit-trail-popup/audit-trail-popup.component.html

Authentication service for usermanagement(oidc client)

  <p-overlayPanel  #auditPanel [dismissable]="true" [showCloseIcon]="true" appendTo='body' [baseZIndex]="baseZIndex">
    <span> <b>Audit Details: {{displayFieldName}}</b></span>
    <div class="content-section implementation ui-fluid">

       <p-table #dt [columns]="cols" [value]="auditList" [paginator]="true" [rows]="10" dataKey="id" [loading]="loading" [rowsPerPageOptions]="[5,10,20,50,100]"
          [pageLinks]="3" [responsive]="true" sortMode="multiple" selectionMode="single" [style]="{width: '410px'}">

          <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <ng-container *ngFor="let col of columns">
                    <col *ngIf="col.visible" [style.width.px]="col.width">
                </ng-container>
            </colgroup>
        </ng-template>
        
         <ng-template pTemplate="header" let-columns>

              <tr>

                  <ng-container *ngFor="let col of columns">

                      <th *ngIf="col.visible" [pSortableColumn]="col.field" class="audit-trail-header">

                          {{col.header}}

                          <p-sortIcon [field]="col.field"></p-sortIcon>

                      </th>
                  </ng-container>

              </tr>

          </ng-template>

          <ng-template pTemplate="body" let-rowData let-columns="columns" >

              <tr [pSelectableRow]="rowData">
                  <ng-container *ngFor="let col of columns" [ngSwitch]="col.field">
                    <ng-container *ngSwitchCase="'changeDate'">

                        <td *ngIf="col.visible">

                            <span class="ui-column-title">{{col.header}}</span>

                            {{rowData[col.field] + 'Z' | date: 'yyyy-MM-dd HH:mm:ss'}}

                        </td>

                    </ng-container>
                    <ng-container *ngSwitchDefault>
                        <td *ngIf="col.visible" >
                            <span class="ui-column-title">{{col.header}}</span>
                            {{rowData[col.field]}}
                        </td>
                    </ng-container>


                  </ng-container>

              </tr>

          </ng-template>

      </p-table>

    </div>
  </p-overlayPanel>

  <a href="javascript:void(0)" (click)="showAuditTrailEvent($event,auditPanel)"  title="show audit trail" >
       <span><b> <i class="pi pi-circle-on audit-trail-popup-icon"></i></b></span>
    </a>