gerrit.onap Code Review - portal/sdk.git/blob

   1 <div>
   2   <div class="table-search-box">
   3     <mat-form-field *ngIf="isSearchEnabled">
   4       <input matInput *ngIf="!isServerSidePaginationEnabled" type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table">
   5       <input matInput *ngIf="isServerSidePaginationEnabled"  type="text" #input placeholder="Search in entire table">
   6     </mat-form-field>
   7     <button *ngIf="showAddButton" type="button" style="float: right;" class="btn btn-primary" (click)="openEditModalPopup('')">
   8       <i class="icon ion-md-person-add"></i>&nbsp;Add
   9     </button>
  10   </div>
  11   <span class="rdp-spinner" *ngIf="showSpinner"></span>
  12   <!-- <rdp-scroll-container [more]="hasMore()" [scrollOffset]="2500" [scrollDelay]="3000" (scrolled)="handleScroll($event)"
  13     [class.full]="full" [class.part]="!full"> -->
  14     <table mat-table #table [dataSource]="dataSource" style="width: 100%" matSort>
  15       <rdp-column *ngFor="let column of columnsInfoList" name="{{column.title}}"
  16         label="{{column.dispalyTitle | titlecase }}" sort="{{column.sort}}">
  17       </rdp-column>
  18
  19       <!--Edit column will be displayed only if displayedColumns has Delete-->
  20       <ng-container matColumnDef="edit">
  21         <th mat-header-cell *matHeaderCellDef id="heading5">Edit</th>
  22         <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
  23           <span class="icon-trash" id="{{i}}-button-role-edit" (click)="openEditModalPopup(rowData)">
  24             <i class="ion ion-md-create"></i>
  25           </span>
  26         </td>
  27       </ng-container>
  28       <!--End of Edit Column-->
  29
  30       <!--Delete column will be displayed only if displayedColumns has Delete-->
  31       <ng-container matColumnDef="delete">
  32         <th mat-header-cell *matHeaderCellDef id="heading6">Delete</th>
  33         <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
  34           <span class="icon-trash" id="{{i}}-button-role-remove" (click)="deleteRow(rowData)">
  35             <i class="icon ion-md-trash"></i>
  36           </span>
  37         </td>
  38       </ng-container>
  39       <!--End of Delete Column-->
  40
  41       <!--Toggle column will be displayed only if displayedColumns has toggle-->
  42       <ng-container matColumnDef="toggle">
  43         <th mat-header-cell *matHeaderCellDef id="heading6">Active?</th>
  44         <td mat-cell *matCellDef="let rowData">
  45           <mat-slide-toggle [(ngModel)]="rowData.active" (change)="toggleUserActive(rowData)"></mat-slide-toggle>
  46         </td>
  47       </ng-container>
  48       <!--End of Toggle Column-->
  49
  50       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  51       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  52     </table>
  53   <!-- </rdp-scroll-container> -->
  54   <div *ngIf="isPaginationRequired">
  55     <mat-paginator [length]="totalRowsCount" #paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="pageSize"
  56     (page)="pageEvent = $event; onPaginationChange($event)"></mat-paginator>
  57   </div>
  58 </div>