zitadel/console/src/app/pages/projects/project-list/project-list.component.html

<div class="projects-table-wrapper" *ngIf="projectType$ | async as type">
  <cnsl-refresh-table [hideRefresh]="true" (refreshed)="refreshPage(type)" [dataSize]="totalResult"
    [timestamp]="viewTimestamp" [selection]="selection" [loading]="loading$ | async">

    <cnsl-filter-project actions *ngIf="!selection.hasValue()" (filterChanged)="applySearchQuery(type, $any($event))"
      (filterOpen)="filterOpen = $event"></cnsl-filter-project>

    <ng-template actions cnslHasRole [hasRole]="['project.create']">
      <a *ngIf="type === ProjectType.PROJECTTYPE_OWNED" [routerLink]="[ '/projects', 'create']" color="primary"
        mat-raised-button class="cnsl-action-button">
        <mat-icon class="icon">add</mat-icon>
        <span>{{ 'ACTIONS.NEW' | translate }}</span>
        <cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/projects', 'create'])">
        </cnsl-action-keys>
      </a>
    </ng-template>
    <div class="table-wrapper">
      <table class="table" mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="select">
          <th class="selection" mat-header-cell *matHeaderCellDef>
            <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
              [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
          </th>
          <td class="selection" mat-cell *matCellDef="let row">
            <mat-checkbox color="primary" (click)="$event.stopPropagation()"
              (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
            </mat-checkbox>
          </td>
        </ng-container>

        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
          <td class="pointer"
            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
            mat-cell *matCellDef="let project">
            <span *ngIf="project.name">{{project.name}}</span>
            <span *ngIf="project.projectName">{{project.projectName}}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="projectOwnerName">
          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
          <td class="pointer" mat-cell *matCellDef="let project">
            {{project.projectOwnerName}} </td>
        </ng-container>

        <ng-container matColumnDef="state">
          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
          <td class="pointer"
            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
            mat-cell *matCellDef="let project">
            <span class="state"
              [ngClass]="{'active': project.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECT_STATE_INACTIVE}"
              *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span>
          </td>
        </ng-container>


        <ng-container matColumnDef="creationDate">
          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
          <td class="pointer"
            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
            mat-cell *matCellDef="let project">
            <span *ngIf="project.details.creationDate">{{project.details.creationDate | timestampToDate |
              localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
          </td>
        </ng-container>


        <ng-container matColumnDef="changeDate">
          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
          <td class="pointer"
            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
            mat-cell *matCellDef="let project">
            <span *ngIf="project.details.changeDate">{{project.details.changeDate | timestampToDate |
              localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="actions" stickyEnd>
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let project">
            <cnsl-table-actions>
              <button actions *ngIf="project.id !== zitadelProjectId" color="warn" mat-icon-button
                matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject(project.id, project.name)">
                <i class="las la-trash"></i>
              </button>
            </cnsl-table-actions>
          </td>
        </ng-container>

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

    <div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
      <i class="las la-exclamation"></i>
      <span>{{'PROJECT.TABLE.EMPTY' | translate}}</span>
    </div>
    <cnsl-paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult" [pageSize]="20"
      [pageSizeOptions]="[10, 20, 50, 100]" (page)="changePage(type)"></cnsl-paginator>
  </cnsl-refresh-table>
</div>