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

Authentication service for usermanagement(oidc client)

  <p-overlayPanel  #auditPanel [dismissable]="true" [showCloseIcon]="true" appendTo='body' [baseZIndex]="baseZIndex">
    <!-- <span> <b>{{displayFieldName}} - Audit Details</b></span> -->
    <div class="implementation ui-fluid audit-trail-containa">
        <div class="ui-g-12 audit-trail-row">
            <div class="ui-g-3"><span style="display: block; margin-top: 4px;">Audit Log Field:</span></div>
            <div class="ui-g-9">
                <p-dropdown [options]="columnOption" placeholder="Please Select" 
                       [showClear]="false" filter="true" filterBy="label" baseZIndex="{{baseZIndex + 1}}"
                       [style]="{'width':'100px'}" (onChange)="columnChange($event)"
                       [(ngModel)]="selectedColumnOption">
                 </p-dropdown>
            </div>
        </div>
        <div class="ui-g-12 audit-trail-row">
            <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>

    </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>