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

<app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
    [selection]="selection" [loading]="dataSource?.loading$ | async" [timestamp]="dataSource?.viewTimestamp">
    <ng-template appHasRole [appHasRole]="['project.role.delete', 'project.role.delete:' + projectId]" actions>
        <button color="warn" class="icon-button" [disabled]="disabled"
            matTooltip="{{'PROJECT.ROLE.DELETE' | translate}}" (click)="deleteSelectedRoles()" mat-icon-button
            *ngIf="selection.hasValue() && actionsVisible">
            <i class="las la-trash"></i>
        </button>
    </ng-template>
    <ng-template appHasRole [appHasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
        <a *ngIf="actionsVisible" [disabled]="disabled" class="rounded-button"
            [routerLink]="[ '/projects', projectId, 'roles', 'create']" color="primary" mat-raised-button>
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
        </a>
    </ng-template>

    <div class="table-wrapper">
        <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
            <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="key">
                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.KEY' | translate }} </th>
                <td (click)="openDetailDialog(role)" mat-cell *matCellDef="let role"> {{role.key}} </td>
            </ng-container>

            <ng-container matColumnDef="displayname">
                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }} </th>
                <td (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">
                    <span class="role app-label" *ngIf="role.group" (click)="selectAllOfGroup(role.group)"
                        [matTooltip]="'PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role">{{role.group}}</span>
                </td>
            </ng-container>

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

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

        <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50"
            [pageSizeOptions]="[25, 50, 100, 250]">
        </mat-paginator>
    </div>
</app-refresh-table>