fix(console): project member grants, user grants (#329)

* checkbox color

* project grant preview

* project grante expandable row

* add grant detail component

* proto regen

* project grant members shared module

* fix project grant members dialog

* fix create dialog

* lint

* add avatar colors, meta component styling

* light theme

* dl report

* styles

* move grants out of user context, grant detail

* i18n grant pipe

* lint

* user grants

* clear expandable view project grants

* fix project member routing

* fix granted members routing

* fix group label

* rename project grant

* disable zitadel grant members

* fix routing user grant creation

* rest member writes

* ignore case searches

* forkjoin observables for project search

* fix grant creation with users

* fix projectid reference

* formfield table style, user grant dynamic load

* show key if no displayvalue is set

* Delete report.20200630.163913.44081.0.001.json

Co-authored-by: Silvan <[email protected]>

console/src/app/modules/user-grants/user-grants.component.html

@@ -0,0 +1,109 @@
+<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.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>
+    <button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button
+        *ngIf="selection.hasValue() && allowDelete">
+        <i class="las la-trash"></i>
+    </button>
+    <a *ngIf="allowCreate" matTooltip="{{'GRANTS.ADD' | translate}}" color="primary" class="add-button" color="primary"
+        mat-raised-button [routerLink]="['/grant-create', {filter: filter, filterValue: filterValue}]">
+        <mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | 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 multiTemplateDataRows class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
+
+        <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)">
+                    <app-avatar *ngIf="row && (row?.displayName || (row.firstName && row.lastName))" class="avatar"
+                        [name]="row.displayName ? row.displayName : (row.firstName + ' '+ row.lastName)" [size]="32">
+                    </app-avatar>
+                </mat-checkbox>
+            </td>
+        </ng-container>
+
+
+        <ng-container matColumnDef="user">
+            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.USER' | translate }} </th>
+            <td class="pointer" mat-cell *matCellDef="let grant">
+                {{grant?.firstName}} {{grant?.lastName}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="org">
+            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORGDOMAIN' | translate }} </th>
+            <td class="pointer" mat-cell *matCellDef="let grant">
+                {{grant.orgDomain}} {{grant.orgName}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="projectId">
+            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.PROJECTNAME' | translate }} </th>
+            <td class="pointer" mat-cell *matCellDef="let grant">
+                {{grant.projectName}} </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">
+                {{grant.creationDate | timestampToDate | 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">
+                {{grant.changeDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
+
+        </ng-container>
+
+        <ng-container matColumnDef="roleNamesList">
+            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
+            <td mat-cell *matCellDef="let grant">
+                <!-- TODO check behaviour for empty role projects -->
+                <ng-container *ngIf="roleOptions.length === 0; else showOptions">
+                    <span class="role app-label" *ngFor="let role of grant.roleKeysList">{{role}}</span>
+                    <button mat-icon-button (click)="loadRoleOptions(grant.projectId)">
+                        <mat-icon>edit</mat-icon>
+                    </button>
+                </ng-container>
+                <ng-template #showOptions>
+                    <mat-form-field class="form-field" appearance="outline" *ngIf="filterValue">
+                        <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
+                        <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
+                            (selectionChange)="updateRoles(grant, $event)">
+                            <mat-option *ngFor="let role of roleOptions" [value]="role.key">
+                                {{ role.displayName }} {{role.key}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </ng-template>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row">
+        </tr>
+    </table>
+
+    <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
+    </mat-paginator>
+</div>