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

<h1>{{project?.name}} {{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
<p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>

<div class="table-header-row">
    <div class="col">
        <ng-container *ngIf="!selection.hasValue()">
            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
            <span class="count">{{dataSource?.membersSubject.value.length}}</span>
        </ng-container>
        <ng-container *ngIf="selection.hasValue()">
            <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
            <span class="count">{{selection?.selected?.length}}</span>
        </ng-container>
    </div>
    <span class="fill-space"></span>
    <button (click)="removeProjectMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
        class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
        <mat-icon>remove_circle</mat-icon>
    </button>
    <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
        mat-raised-button>
        <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
    </a>
</div>

<div class="table-wrapper">
    <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
        <mat-spinner diameter="50"></mat-spinner>
    </div>
    <table mat-table class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
        <ng-container matColumnDef="select">
            <th class="selection" mat-header-cell *matHeaderCellDef>
                <mat-checkbox (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 (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)">
                </mat-checkbox>
            </td>
        </ng-container>

        <ng-container matColumnDef="firstname">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
            <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
                {{member.firstName}} </td>
        </ng-container>

        <ng-container matColumnDef="lastname">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
            <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
                {{member.lastName}} </td>
        </ng-container>

        <ng-container matColumnDef="username">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
            <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
                {{member.userName}} </td>
        </ng-container>

        <ng-container matColumnDef="email">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
            <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
                {{member.email}}
            </td>
        </ng-container>

        <ng-container matColumnDef="roles">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
            <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
                <span class="role" *ngFor="let role of member.rolesList; index as i">
                    {{ 'ROLES.'+role | translate }}</span>
            </td>
        </ng-container>

        <ng-container matColumnDef="action" stickyEnd>
            <th class="action" mat-header-cell *matHeaderCellDef></th>
            <td class="action" mat-cell *matCellDef="let member">
                <button [disabled]="disabled" [matMenuTriggerFor]="menu" mat-icon-button>
                    <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item [routerLink]="['/user', member.userId]">Edit Member</button>
                    <button mat-menu-item (click)="removeMember(member)">
                        Remove Member
                    </button>
                </mat-menu>
            </td>
        </ng-container>

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

    <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
    </mat-paginator>
</div>