zitadel/console/src/app/modules/project-roles-table/project-roles-table.component.html

<cnsl-refresh-table
  [showSelectionActionButton]="showSelectionActionButton"
  *ngIf="projectId"
  (refreshed)="refreshPage()"
  [emitRefreshOnPreviousRoutes]="['/projects/' + projectId + '/roles/create']"
  [selection]="selection"
  [loading]="dataSource.loading$ | async"
  [timestamp]="dataSource.viewTimestamp"
>
  <ng-template cnslHasRole [hasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
    <a
      *ngIf="actionsVisible"
      [disabled]="disabled"
      [routerLink]="['/projects', projectId, 'roles', 'create']"
      color="primary"
      mat-raised-button
      data-e2e="create-project-role-button"
    >
      <div class="cnsl-action-button">
        <mat-icon data-e2e="add-new-role" class="icon">add</mat-icon>
        <span>{{ 'ACTIONS.NEW' | translate }}</span>
        <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', projectId, 'roles', 'create'])">
        </cnsl-action-keys>
      </div>
    </a>
  </ng-template>

  <div class="table-wrapper">
    <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <div class="selection">
            <mat-checkbox
              [disabled]="disabled"
              color="primary"
              (change)="$event ? masterToggle() : null"
              [checked]="isAnySelected() && isAllSelected()"
              [indeterminate]="isAnySelected() && !isAllSelected()"
            >
            </mat-checkbox>
          </div>
        </th>
        <td mat-cell *matCellDef="let row">
          <div class="selection">
            <mat-checkbox
              color="primary"
              [disabled]="disabled"
              (click)="$event.stopPropagation()"
              (change)="$event ? selection.toggle(row.key) : null"
              [checked]="selection.isSelected(row.key)"
            >
            </mat-checkbox>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="key">
        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.KEY' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
          <div class="role-key">
            <cnsl-project-role-chip [roleName]="role.key">{{ role.key }}</cnsl-project-role-chip>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="displayname">
        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">{{ role.displayName }}</td>
      </ng-container>

      <ng-container matColumnDef="group">
        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.GROUP' | translate }}</th>
        <td mat-cell *matCellDef="let role" class="pointer">
          <span
            class="role state"
            [ngClass]="{ 'no-selection': !selectionAllowed }"
            *ngIf="role.group"
            (click)="selectionAllowed ? groupMasterToggle(role.group) : openDetailDialog(role)"
            [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role) : null"
            >{{ role.group }}</span
          >
        </td>
      </ng-container>

      <ng-container matColumnDef="creationDate">
        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CREATIONDATE' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
          <span *ngIf="role?.details?.creationDate">{{
            role.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
          }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="changeDate">
        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CHANGEDATE' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
          <span *ngIf="role?.details?.changeDate">{{
            role.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
          }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="actions" stickyEnd>
        <th mat-header-cell *matHeaderCellDef class="role-table-actions"></th>
        <td mat-cell *matCellDef="let role" class="role-table-actions">
          <cnsl-table-actions>
            <button
              actions
              [disabled]="
                disabled || (['project.role.delete', 'project.role.delete:' + projectId] | hasRole | async) === false
              "
              mat-icon-button
              color="warn"
              matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
              (click)="deleteRole(role)"
            >
              <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 role; columns: displayedColumns"></tr>
    </table>
  </div>

  <div *ngIf="(dataSource.loading$ | async) === false && !dataSource?.totalResult" class="no-content-row">
    <i class="las la-exclamation"></i>
    <span>{{ 'PROJECT.ROLE.EMPTY' | translate }}</span>
  </div>

  <cnsl-paginator
    #paginator
    [timestamp]="dataSource.viewTimestamp"
    [length]="dataSource.totalResult"
    [pageSize]="INITIAL_PAGE_SIZE"
    (page)="changePage()"
    [pageSizeOptions]="[25, 50, 100, 250]"
  >
  </cnsl-paginator>
</cnsl-refresh-table>