juice-shop/juice-shop

<!--
  ~ Copyright (c) 2014-2024 Bjoern Kimminich & the OWASP Juice Shop contributors.
  ~ SPDX-License-Identifier: MIT
  -->

<mat-card class="mat-elevation-z6 mat-own-card">
  <h1 translate>TITLE_ADMINISTRATION</h1>
  <div class="container" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">

    <div class="user-container" fxFlexAlign="center">
      <div class="user-table">
        <div class="heading">
          <span translate>SECTION_USER</span>
        </div>
        <mat-table [dataSource]="userDataSource" style="height: 700px;">

          <ng-container matColumnDef="user">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let user" style="vertical-align: middle">
              <i *ngIf="doesUserHaveAnActiveSession(user)" class="fas fa-user fa-lg confirmation"></i>
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef translate></mat-header-cell>
            <mat-cell *matCellDef="let user" [innerHTML]="user.email" style="vertical-align: middle"></mat-cell>
          </ng-container>

          <ng-container matColumnDef="user_detail">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let user">
              <button mat-button (click)="showUserDetail(user.id)"><i class="fas fa-eye"></i></button>
            </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="userColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: userColumns; "></mat-row>

        </mat-table>

        <mat-paginator #paginatorUsers
                       [pageSize]="10"
                       [length]="resultsLengthUser"
                       class="mat-elevation-z0"
                       color="accent">
        </mat-paginator>
      </div>
      <mat-table [dataSource]="userDataSourceHidden" style="visibility: hidden; height: 0px;">

        <ng-container matColumnDef="user">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let user" style="vertical-align: middle">
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="email">
          <mat-header-cell *matHeaderCellDef translate></mat-header-cell>
          <mat-cell *matCellDef="let user" [innerHTML]="user.email" style="vertical-align: middle"></mat-cell>
        </ng-container>

        <ng-container matColumnDef="user_detail">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let user">
            <button mat-button (click)="showUserDetail(user.id)"><i class="fas fa-eye"></i></button>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="userColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: userColumns; "></mat-row>

      </mat-table>

    </div>

    <div class="customer-container" fxFlexAlign.lt-md="center">
      <div class="customer-table">
        <div class="heading">
          <span translate>SECTION_CUSTOMER_FEEDBACK</span>
        </div>
        <mat-table [dataSource]="feedbackDataSource" style="height: 700px;">

          <ng-container matColumnDef="user">
            <mat-header-cell *matHeaderCellDef translate></mat-header-cell>
            <mat-cell *matCellDef="let feedback"> {{feedback.UserId}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="comment">
            <mat-header-cell *matHeaderCellDef translate></mat-header-cell>
            <mat-cell *matCellDef="let feedback" (click)="showFeedbackDetails(feedback.comment, feedback.UserId)"><p
              [innerHTML]="feedback.comment" matTooltip="Click for more information" matTooltipPosition="above"></p>
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="rating">
            <mat-header-cell *matHeaderCellDef translate></mat-header-cell>
            <mat-cell *matCellDef="let feedback">
              <mat-icon *ngFor="let i of times(feedback.rating)">
                star_rate
              </mat-icon>
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="remove">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let feedback">
              <button mat-button (click)="deleteFeedback(feedback.id)"><i class="fas fa-trash-alt"></i></button>
            </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="feedbackColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: feedbackColumns;"></mat-row>
        </mat-table>
        <mat-paginator #paginatorFeedb
                       [pageSize]="10"
                       [length]="resultsLengthFeedback"
                       class="mat-elevation-z0"
                       color="accent">
        </mat-paginator>

      </div>
    </div>
    <img src="assets/public/images/padding/19px.png"/>
  </div>
</mat-card>