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)"
                data-e2e="delete-project-button"
              >
                <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>