services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<section class="audit-table-wrapper" id="scrolling" [ngClass]="{'scroll': auditData?.length > 6}">
  <table mat-table [dataSource]="auditData" class="data-grid audit mat-elevation-z6">

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef class="th_date label-header">
        <div class="label"><span class="text">Date</span></div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span>more_vert</span>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element"> {{element.timestamp | localDate : 'short'}} </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer">
      </td>
    </ng-container>

    <ng-container matColumnDef="user">
      <th mat-header-cell *matHeaderCellDef class="th_user label-header" [ngStyle]="{'z-index': 99}">
        <div class="label"><span class="audit-user"> User</span></div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filterAuditData.users.length > 0; else user_filtered">filter_list</span>
            <ng-template #user_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element" class="th_user">
        <div class="table-item-wrapper">
          <span class="table-item user-col">{{element.user || 'N/A'}}</span>
        </div>
      </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef class="th_action label-header" [ngStyle]="{'zIndex': 98, 'display': 'sticky'}">
        <div class="label">
          <span class="text"> Action </span>
        </div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span>more_vert</span>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef=" let element" class="th_action">
        <div class="action-wrapper">
          <span
            class="ellipsis"
            [matTooltip]="element.action | convertaction"
            [matTooltipClass]="'full-size-tooltip'"
            matTooltipPosition="above"
            [matTooltipDisabled]="element.action?.length < 12"
          >{{element.action | convertaction }}</span>
          <div class="audit-info" (click)="openActionInfo(element)" *ngIf="element.info">
            <i class="material-icons">info</i>
          </div>
        </div>
      </td>
      <td mat-footer-cell *matFooterCellDef  class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="project">
      <th mat-header-cell *matHeaderCellDef class="th_project label-header">
        <div class="label"><span class="text">Project</span></div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filterAuditData.projects.length > 0; else user_filtered">filter_list</span>
            <ng-template #user_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element" class="th_project">
        <div class="table-item-wrapper">
          <span class="table-item project">{{element.project || 'N/A'}}</span>
        </div>
      </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
    </ng-container>

    <ng-container matColumnDef="resource-type">
      <th mat-header-cell *matHeaderCellDef class="th_resource-type label-header">
        <div class="label"><span class="text">Resource type</span></div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filterAuditData.resource_types.length > 0; else user_filtered">filter_list</span>
            <ng-template #user_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element" class="th_resource-type">
        <div class="table-item-wrapper">
          <span class="table-item">
            {{element.type ? (element.type | convertaction) : 'N/A'}}
          </span>
        </div>
      </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer" [colSpan]="3" >
        <div class="pagination-wrapper">
          <div class="selected-items-wrapper">
            <span>Items per page:</span>
            <div class="select-wrapper">
              <div class="mat-reset">
                <div class="control selector-wrapper">
                  <mat-form-field>
                    <mat-label></mat-label>
                    <mat-select [(value)]="showItemsPrPage">
                      <mat-option *ngFor="let item of itemsPrPage" [value]="item" (click)="setItemsPrPage(item)">
                        {{ item }}</mat-option>
                    </mat-select>
                    <button class="caret">
                      <i class="material-icons">keyboard_arrow_down</i>
                    </button>
                  </mat-form-field>
                </div>
              </div>
            </div>
          </div>
          <span>
            <span>{{firstItem}}</span> - <span>{{(lastItem < allItems) ? lastItem: allItems}}</span> of <span>{{allItems}}</span>
          </span>
          <span>
            <span [ngClass]="{'not-active':  !isNavigationDisabled || firstItem === 1}">
              <span class="navigation-butts" (click)="loadItemsForPage('first')" [ngClass]="{'not-allowed': firstItem === 1 || !isNavigationDisabled}">
                <i class="material-icons">first_page</i>
              </span>
            </span>
            <span [ngClass]="{'not-active': firstItem === 1 || !isNavigationDisabled}">
              <span class="navigation-butts" (click)="loadItemsForPage('previous')" [ngClass]="{'not-allowed': firstItem === 1 || !isNavigationDisabled}">
                <i class="material-icons">keyboard_arrow_left</i>
              </span>
            </span>
            <span [ngClass]="{'not-active': lastItem >= allItems || !isNavigationDisabled}">
              <span class="navigation-butts" (click)="loadItemsForPage('next')" [ngClass]="{'not-allowed': lastItem >= allItems || !isNavigationDisabled}">
                <i class="material-icons">keyboard_arrow_right</i>
              </span>
            </span>
            <span [ngClass]="{'not-active': lastItem >= allItems || !isNavigationDisabled}">
              <span class="navigation-butts" (click)="loadItemsForPage('last')" [ngClass]="{'not-allowed': lastItem >= allItems || !isNavigationDisabled}">
                <i class="material-icons">last_page</i>
              </span>
            </span>
          </span>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="resource">
      <th mat-header-cell *matHeaderCellDef class="th_resource label-header">
        <div class="label"><span class="text">Resource</span></div>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filterAuditData.resources.length > 0; else user_filtered">filter_list</span>
            <ng-template #user_filtered>more_vert</ng-template>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element" class="th_resource">
        <div class="table-item-wrapper">
          <span 
            class="ellipsis"
            [matTooltip]="element.resourceName || 'N/A'"
            matTooltipPosition="above">
            {{element.resourceName || 'N/A'}}
          </span>
        </div>
      </td>
      <td mat-footer-cell *matFooterCellDef class="table-footer" [hidden]="true">

      </td>
    </ng-container>

    <ng-container matColumnDef="buttons">
      <th mat-header-cell *matHeaderCellDef class="th_buttons label-header"></th>
      <td mat-cell *matCellDef="let element"></td>
      <td mat-footer-cell *matFooterCellDef class="table-footer" [hidden]="true">
      </td>
    </ng-container>

<!--   AUDIT FILTER-->
    <ng-container matColumnDef="user-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'users'"
                               [items]="filterConfiguration.users" [model]="filterAuditData.users"></multi-select-dropdown>
      </th>
    </ng-container>

    <ng-container matColumnDef="project-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'projects'"
                               [items]="filterConfiguration.projects" [model]="filterAuditData.projects"></multi-select-dropdown>
      </th>
    </ng-container>

    <ng-container matColumnDef="resource-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown
          class="audit-resources"
          *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'resources'"
                               [items]="filterConfiguration.resources" [model]="filterAuditData.resources"></multi-select-dropdown>
      </th>
    </ng-container>

    <ng-container matColumnDef="resource-type-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'resource_types'"
                               [items]="filterConfiguration.resource_types" [model]="filterAuditData.resource_types"></multi-select-dropdown>
      </th>
    </ng-container>

    <ng-container matColumnDef="actions-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">

      </th>
    </ng-container>

    <ng-container matColumnDef="date-filter">
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
      </th>
    </ng-container>

    <ng-container matColumnDef="filter-buttons" stickyEnd>
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <div class="actions audit-actions">
          <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()" [disabled]="!isFilterSelected">
            <i class="material-icons">close</i>
          </button>

          <button mat-icon-button class="btn apply" (click)="buildAuditGrid(true)" [disabled]="isNavigationDisabled">
            <i class="material-icons">done</i>
          </button>
        </div>
      </th>
    </ng-container>

    <ng-container matColumnDef="placeholder">
      <td mat-footer-cell *matFooterCellDef colspan="7" class="info">
        <span *ngIf="!filterConfiguration.users?.length;else noMatch">No data available</span>
        <ng-template #noMatch>
          <span>No matches found</span>
        </ng-template>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>

    <tr [hidden]="!collapseFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
      class="filter-row"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="content-row"></tr>
    <tr [hidden]="!auditData?.length" mat-footer-row *matFooterRowDef="displayedColumns"></tr>

    <tr [hidden]="auditData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
  </table>
</section>