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

<div class="table-header-row" *ngIf="projectId">
    <div class="col">
        <ng-container *ngIf="!selection.hasValue()">
            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
            <span class="count">{{dataSource.grantsSubject.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>
    <ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']">
        <button [disabled]="disabled" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button"
            mat-icon-button *ngIf="selection.hasValue()">
            <mat-icon>delete_outline</mat-icon>
        </button>
    </ng-template>
    <ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']">
        <a [disabled]="disabled" color="primary" class="add-button" color="primary" mat-raised-button
            [routerLink]="[ '/projects', projectId, 'grants', 'create']">
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
        </a>
    </ng-template>
</div>

<div class="table-wrapper">
    <div class="spinner-container" *ngIf="dataSource.loading$ | async">
        <mat-spinner diameter="50"></mat-spinner>
    </div>
    <table mat-table multiTemplateDataRows 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="grantedOrgName">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORG' | translate }} </th>
            <td class="pointer" mat-cell *matCellDef="let grant">
                {{grant.grantedOrgName}} </td>
        </ng-container>

        <ng-container matColumnDef="grantedOrgDomain">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORGDOMAIN' | translate }} </th>
            <td class="pointer" mat-cell *matCellDef="let grant">
                {{grant.grantedOrgDomain}} </td>
        </ng-container>

        <ng-container matColumnDef="creationDate">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CREATIONDATE' | translate }} </th>
            <td class="pointer" mat-cell *matCellDef="let grant">
                {{dateFromTimestamp(grant.creationDate) | date: 'dd. MMM, HH:mm' }} </td>
        </ng-container>

        <ng-container matColumnDef="changeDate">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
            <td class="pointer" mat-cell *matCellDef="let grant">
                {{dateFromTimestamp(grant.changeDate) | date: 'dd. MMM, HH:mm' }} </td>

        </ng-container>

        <ng-container matColumnDef="roleNamesList">
            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
            <td class="pointer" mat-cell *matCellDef="let grant">
                <span class="role" *ngFor="let role of grant.roleNamesList">{{role}}</span> </td>
        </ng-container>

        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
        <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
                <div *ngIf="projectId" class="element-detail"
                    [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                    <ng-template appHasRole
                        [appHasRole]="['project.grant.member.read:' + projectId,'project.grant.member.read']">
                        <div class="right">
                            <div class="title-row">
                                <span class="mem-title">Members</span>
                                <ng-template appHasRole
                                    [appHasRole]="['project.grant.member.write:' + projectId, 'project.grant.member.write']">
                                    <button [disabled]="disabled" mat-icon-button
                                        (click)="addProjectGrantMember(element)">
                                        <mat-icon>add</mat-icon>
                                    </button>
                                </ng-template>
                            </div>
                            <div class="mem-description">
                                <span *ngFor="let mem of selectedGrantMembers">{{mem.firstName}} {{mem.lastName}}
                                    {{mem.email}} |
                                    <span *ngFor="let role of mem.rolesList">{{role}} </span></span>
                            </div>
                        </div>
                    </ng-template>
                </div>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr class="data-row" mat-row *matRowDef="let element; columns: displayedColumns;" class="element-row"
            [class.expanded-row]="expandedElement === element" (click)="setExpandableRow(element)">
        </tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
    </table>

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