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

<app-refresh-table [loading]="dataSource?.loading$ | async" *ngIf="projectId" (refreshed)="loadGrantsPage()"
    [dataSize]="dataSource.totalResult" [selection]="selection" [timestamp]="dataSource?.viewTimestamp"
    [emitRefreshOnPreviousRoutes]="refreshOnPreviousRoutes" (refreshed)="getRoleOptions(projectId)">
    <ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']"
        actions>
        <button (click)="deleteSelectedGrants()" [disabled]="disabled" mat-icon-button *ngIf="selection.hasValue()"
            color="warn">
            <i class="las la-trash"></i>
        </button>
    </ng-template>
    <ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']"
        actions>
        <a [disabled]="disabled" color="primary" color="primary" mat-raised-button
            [routerLink]="[ '/projects', projectId, 'grants', 'create']">
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
        </a>
    </ng-template>

    <div class="table-wrapper">
        <table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">

            <ng-container matColumnDef="select">
                <th class="selection" mat-header-cell *matHeaderCellDef>
                    <mat-checkbox [disabled]="disabled" 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 [disabled]="disabled" color="primary" (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 [routerLink]="['/projects',grant.projectId,'grant', grant.grantId]" class="pointer" mat-cell
                    *matCellDef="let grant">
                    {{grant.grantedOrgName}} </td>
            </ng-container>

            <ng-container matColumnDef="dates">
                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.DATES' | translate }} </th>
                <td [routerLink]="['/projects',grant.projectId,'grant', grant.grantId]" class="pointer" mat-cell
                    *matCellDef="let grant">
                    <div class="date-block">
                        <span class="date-sub">{{ 'PROJECT.GRANT.CREATIONDATE' | translate }}:</span>
                        <span>{{grant.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
                    </div>
                    <div class="date-block">
                        <span class="date-sub">{{ 'PROJECT.GRANT.CHANGEDATE' | translate }}</span>
                        <span>{{grant.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
                    </div>
            </ng-container>

            <ng-container matColumnDef="roleNamesList">
                <th mat-header-cell *matHeaderCellDef class="role-row"> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}
                </th>
                <td class="pointer role-row" mat-cell *matCellDef="let grant">
                    <cnsl-form-field class="form-field" appearance="outline" *ngIf="grant.roleKeysList">
                        <cnsl-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</cnsl-label>
                        <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="disabled"
                            (selectionChange)="updateRoles(grant, $event)">
                            <mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
                                {{role.key}}
                            </mat-option>
                        </mat-select>
                    </cnsl-form-field>
                </td>
            </ng-container>

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

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

        <cnsl-paginator class="paginator" #paginator [pageSize]="50" [timestamp]="dataSource?.viewTimestamp" [pageSizeOptions]="[25, 50, 100, 250]"
            [length]="dataSource.totalResult" (page)="loadGrantsPage($event.pageIndex, $event.pageSize)">
        </cnsl-paginator>
    </div>
</app-refresh-table>