services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.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.
  -->

<table mat-table [dataSource]="dataSource" class="projects-table mat-elevation-z6 selection">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef class="name"> Project name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="endpoints">
    <th mat-header-cell *matHeaderCellDef class="endpoints"> Endpoints </th>
    <td mat-cell *matCellDef="let element">
      <mat-chip-list>
        <mat-chip *ngFor="let endpoint of element.endpoints">{{ endpoint }}</mat-chip>
      </mat-chip-list>
    </td>
  </ng-container>

  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef class="status"> Status </th>
    <td mat-cell *matCellDef="let element" class="status" ngClass="{{ element.status.toLowerCase() || '' }}">
      {{ element.status.toLowerCase() }}
    </td>
  </ng-container>

  <ng-container matColumnDef="groups">
    <th mat-header-cell *matHeaderCellDef class="groups"> Groups </th>
    <td mat-cell *matCellDef="let element">
      <mat-chip-list>
        <mat-chip *ngFor="let group of element.groups">{{ group }}</mat-chip>
      </mat-chip-list>
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef class="project-actions"></th>
    <td mat-cell *matCellDef="let element" class="project-actions">
      <span>
        <a class="start-stop-action">
          <mat-icon *ngIf="element.status === 'ACTIVE'" (click)="toggleProjectStatus(element, 'stop')">
            pause_circle_outline
          </mat-icon>
          <mat-icon *ngIf="element.status === 'STOPPED'" (click)="toggleProjectStatus(element, 'start')">
            play_circle_outline
          </mat-icon>
        </a>
      </span>
      <span [ngClass]="{'not-active' : element.status !== 'ACTIVE' }">
        <a [ngClass]="{'not-allowed' : element.status !== 'ACTIVE' }"
          (click)="element.status === 'ACTIVE' && editProject(element)">
          <mat-icon>mode_edit</mat-icon>
        </a>
      </span>
      <span (click)="deleteProject(element)">
        <mat-icon>delete_forever</mat-icon>
      </span>
    </td>

  </ng-container>

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