andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-12 00:55:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): split granted from owned project modules, general ui ux fixes (#286)

Browse Source 
* add iam label, user avatar

* avatar component

* split granted and owned modules

* move components to resp module

* refactor project contributors, g project nav

* rem console logs, add avatar for org members

* fix changes loading, auth user page

* refactor home, i18n

* fix changes side overflow

* lint
This commit is contained in:
Max Peintner
2020-06-26 14:15:05 +02:00
committed by GitHub
parent ee73dc07dd
commit 0a488eb1fb
141 changed files with 1133 additions and 742 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/owned-projects/project-grants/project-grants.component.html
+118
View File
@@ -0,0 +1,118 @@
<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()" color="warn">
<i class="las la-trash"></i>
</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">
{{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 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 || element?.roleKeysList?.length === 0"
matTooltip="disabled or no roles defined" mat-icon-button
(click)="addProjectGrantMember(element)">
<mat-icon>add</mat-icon>
</button>
</ng-template>
</div>
<div class="mem-description"
*ngIf="selectedGrantMembers && selectedGrantMembers.length > 0">
<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>