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

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

Browse Source 
* 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]>
This commit is contained in:
Max Peintner
2020-07-01 17:48:34 +02:00
committed by GitHub
co-authored by Silvan
parent c5a4eb3555
commit 9c07711aab
135 changed files with 1470 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/accounts-card/accounts-card.component.html
+6 -4
View File
@@ -7,11 +7,13 @@
<span class="u-email">{{profile?.userName}}</span>
<span class="iamuser" *ngIf="iamuser">IAM USER</span>
<button color="primary" (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
<button (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
<div class="l-accounts">
<mat-progress-bar *ngIf="loadingUsers" color="primary" mode="indeterminate"></mat-progress-bar>
<a class="row" *ngFor="let user of users" (click)="selectAccount(user.userName)">
<i class="small-avatar las la-user-circle"></i>
<app-avatar *ngIf="user && (user.displayName || (user.firstName && user.lastName))" class="small-avatar"
[name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)" [size]="32">
</app-avatar>
<div class="col">
<span class="title">{{user.userName}}</span>
@@ -22,7 +24,7 @@
</a>
<a class="row" (click)="selectAccount()">
<div class="icon-wrapper">
<mat-icon>add</mat-icon>
<i class="las la-user-plus"></i>
</div>
<span class="col">
<span class="title">{{'USER.ADDACCOUNT' | translate}}</span>
@@ -32,5 +34,5 @@
</a>
</div>
<button color="primary" (click)="logout()" mat-stroked-button>{{'MENU.LOGOUT' | translate}}</button>
<button (click)="logout()" mat-stroked-button>{{'MENU.LOGOUT' | translate}}</button>
</div>
console/src/app/modules/accounts-card/accounts-card.component.scss
+2 -2
View File
@@ -73,7 +73,7 @@
margin: 0 1rem;
text-align: center;
mat-icon {
i {
margin: auto;
vertical-align: middle;
}
@@ -91,7 +91,7 @@
}
.email {
color: #81868a;
color: #8795a1;
font-size: .8rem;
line-height: 1rem;
}
console/src/app/modules/add-member-dialog/member-create-dialog.component.scss
+1 -1
View File
@@ -3,7 +3,7 @@
}
.desc {
color: #81868a;
color: #8795a1;
font-size: .9rem;
}
console/src/app/modules/avatar/avatar.component.html
+2 -1
View File
@@ -1,4 +1,5 @@
<div class="avatar-circle dontcloseonclick"
[ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px'}" [ngClass]="{'active': active}">
[ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px', 'background-color': color}"
[ngClass]="{'active': active}">
{{credentials}}
</div>
console/src/app/modules/avatar/avatar.component.scss
+1 -1
View File
@@ -10,6 +10,6 @@
text-transform: uppercase;
&.active:hover {
border: 2px solid #81868a;
border: 2px solid #8795a1;
}
}
console/src/app/modules/avatar/avatar.component.ts
+38
View File
@@ -11,16 +11,54 @@ export class AvatarComponent implements OnInit {
@Input() size: number = 24;
@Input() fontSize: number = 16;
@Input() active: boolean = false;
@Input() color: string = '';
constructor() { }
ngOnInit(): void {
if (!this.credentials) {
const split: string[] = this.name.split(' ');
this.credentials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : '');
if (!this.color) {
this.color = this.getColor(this.name);
}
}
if (this.size > 50) {
this.fontSize = 32;
}
}
getColor(userName: string): string {
const colors = [
'#e51c23',
'#e91e63',
'#9c27b0',
'#673ab7',
'#3f51b5',
'#5677fc',
'#03a9f4',
'#00bcd4',
'#009688',
'#259b24',
'#8bc34a',
'#afb42b',
'#ff9800',
'#ff5722',
'#795548',
'#607d8b',
];
let hash = 0;
if (userName.length === 0) {
return colors[hash];
}
for (let i = 0; i < userName.length; i++) {
// tslint:disable-next-line: no-bitwise
hash = userName.charCodeAt(i) + ((hash << 5) - hash);
// tslint:disable-next-line: no-bitwise
hash = hash & hash;
}
hash = ((hash % colors.length) + colors.length) % colors.length;
return colors[hash];
}
}
console/src/app/modules/card/card.component.scss
+1 -1
View File
@@ -34,7 +34,7 @@
.desc {
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
}
console/src/app/modules/changes/changes.component.scss
+3 -3
View File
@@ -17,12 +17,12 @@
display: flex;
flex-direction: column;
.editor {
color: #81868a;
color: #8795a1;
font-size: 12px;
align-self: flex-end;
}
.seq {
color: #81868a;
color: #8795a1;
font-size: 12px;
align-self: flex-end;
}
@@ -41,6 +41,6 @@
.end-container {
font-size: 12px;
color: #81868a;
color: #8795a1;
}
}
console/src/app/modules/meta-layout/meta-layout.component.scss
-13
View File
@@ -17,7 +17,6 @@
.meta {
position: relative;
flex: 1 0 300px;
background: linear-gradient(to bottom right, #4072b410 20%,transparent 50%);
@media only screen and (min-width: 1500px) {
flex-basis: 400px;
@@ -33,7 +32,6 @@
&.hidden {
flex: 0 0 0 !important;
width: 0;
background: linear-gradient(to bottom right, #4072b450,transparent 50%);
.hide {
transform: rotate(180deg);
@@ -48,9 +46,6 @@
top: 0;
left: 0;
height: 50%;
border-left: 2px solid #4072b4;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
}
.hide {
@@ -75,12 +70,4 @@
}
}
}
// @media only screen and (max-width: 700px) {
// flex-direction: column;
// .main-content, .meta {
// overflow-y: visible;
// }
// }
}
console/src/app/modules/project-contributors/project-contributors.component.scss
+2 -15
View File
@@ -9,7 +9,7 @@
.sub-header {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.people {
@@ -29,13 +29,12 @@
display: flex;
align-items: center;
.avatar-img, .avatar-circle {
.avatar-circle {
float: left;
margin: 0 8px 0 -15px;
height: 32px;
width: 32px;
border-radius: 50%;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.add-img {
@@ -43,18 +42,6 @@
margin: 0 8px 0 -15px;
}
.avatar-img {
&:before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
height: 32px;
width: 32px;
}
}
.avatar-circle {
cursor: pointer;
display: flex;
console/src/app/modules/project-contributors/project-contributors.component.ts
+7 -1
View File
@@ -34,6 +34,8 @@ export class ProjectContributorsComponent implements OnInit {
public ProjectState: any = ProjectState;
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public ProjectType: any = ProjectType;
constructor(private projectService: ProjectService,
private dialog: MatDialog,
private toast: ToastService,
@@ -90,7 +92,11 @@ export class ProjectContributorsComponent implements OnInit {
public showDetail(): void {
if (this.project?.state === ProjectState.PROJECTSTATE_ACTIVE) {
this.router.navigate(['projects', this.project.projectId, 'members']);
if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
this.router.navigate(['granted-projects', this.project.projectId, 'members']);
} else if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
this.router.navigate(['projects', this.project.projectId, 'members']);
}
}
}
}
console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
+27
View File
@@ -0,0 +1,27 @@
<h1 mat-dialog-title>
<span class="title">{{'MEMBER.ADD' | translate}}</span>
</h1>
<p class="desc"> {{'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate}}</p>
<div mat-dialog-content>
<app-search-user-autocomplete (selectionChanged)="selectUsers($event)">
</app-search-user-autocomplete>
<mat-form-field class="full-width" appearance="outline">
<mat-label>{{ 'PROJECT.MEMBER.ROLES' | translate }}</mat-label>
<mat-select [(ngModel)]="roleKeyList" multiple>
<mat-option *ngFor="let key of data.roleKeysList" [value]="key">
{{ key }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div mat-dialog-actions class="action">
<button mat-button (click)="closeDialog()">
cancel
</button>
<button [disabled]="userIds.length == 0 || roleKeyList.length == 0" color="primary" mat-raised-button
class="ok-button" (click)="closeDialogWithSuccess()">
Add
</button>
</div>
console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
+16
View File
@@ -0,0 +1,16 @@
.full-width {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
button {
border-radius: 0.5rem;
}
}
console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectGrantMembersCreateDialogComponent } from './project-grant-members-create-dialog.component';
describe('ProjectGrantMembersCreateDialogComponent', () => {
let component: ProjectGrantMembersCreateDialogComponent;
let fixture: ComponentFixture<ProjectGrantMembersCreateDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectGrantMembersCreateDialogComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectGrantMembersCreateDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
+40
View File
@@ -0,0 +1,40 @@
import { Component, Inject } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { User } from 'src/app/proto/generated/management_pb';
export interface ProjectGrantMembersCreateDialogExportType {
userIds: string[];
rolesKeyList: string[];
}
@Component({
selector: 'app-project-grant-members-create-dialog',
templateUrl: './project-grant-members-create-dialog.component.html',
styleUrls: ['./project-grant-members-create-dialog.component.scss'],
})
export class ProjectGrantMembersCreateDialogComponent {
public form!: FormGroup;
public userIds: string[] = [];
public roleKeyList: string[] = [];
constructor(
public dialogRef: MatDialogRef<ProjectGrantMembersCreateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) { }
public selectUsers(users: User.AsObject[]): void {
this.userIds = users.map(user => user.id);
}
public closeDialog(): void {
this.dialogRef.close(false);
}
public closeDialogWithSuccess(): void {
const exportData: ProjectGrantMembersCreateDialogExportType = {
userIds: this.userIds,
rolesKeyList: this.roleKeyList,
};
this.dialogRef.close(exportData);
}
}
console/src/app/modules/project-grant-members/project-grant-members-datasource.ts
+62
View File
@@ -0,0 +1,62 @@
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { ProjectMember } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
/**
* Data source for the ProjectMembers view. This class should
* encapsulate all logic for fetching and manipulating the displayed data
* (including sorting, pagination, and filtering).
*/
export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsObject> {
public totalResult: number = 0;
public membersSubject: BehaviorSubject<ProjectMember.AsObject[]> = new BehaviorSubject<ProjectMember.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
constructor(private projectService: ProjectService) {
super();
}
public loadMembers(projectId: string, grantId: string, pageIndex: number,
pageSize: number, sortDirection?: string): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
console.log(projectId, grantId);
from(this.projectService.SearchProjectGrantMembers(projectId,
grantId, pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
});
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
public connect(): Observable<ProjectMember.AsObject[]> {
return this.membersSubject.asObservable();
}
/**
* Called when the table is being destroyed. Use this function, to clean up
* any open connections or free any held resources that were set up during connect.
*/
public disconnect(): void {
this.membersSubject.complete();
this.loadingSubject.complete();
}
}
console/src/app/modules/project-grant-members/project-grant-members.component.html
+99
View File
@@ -0,0 +1,99 @@
<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" color="warn" mat-icon-button *ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</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"
[ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" [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)">
</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 app-label" *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 [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
console/src/app/modules/project-grant-members/project-grant-members.component.scss
+80
View File
@@ -0,0 +1,80 @@
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.table-wrapper {
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
table, mat-paginator {
width: 100%;
td, th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
console/src/app/modules/project-grant-members/project-grant-members.component.spec.ts
+34
View File
@@ -0,0 +1,34 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProjectGrantMembersComponent } from './project-grant-members.component';
describe('ProjectMembersComponent', () => {
let component: ProjectGrantMembersComponent;
let fixture: ComponentFixture<ProjectGrantMembersComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectGrantMembersComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectGrantMembersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});
console/src/app/modules/project-grant-members/project-grant-members.component.ts
+127
View File
@@ -0,0 +1,127 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { ProjectMember, ProjectType } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import {
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
@Component({
selector: 'app-project-grant-members',
templateUrl: './project-grant-members.component.html',
styleUrls: ['./project-grant-members.component.scss'],
})
export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
@Input() public projectId!: string;
@Input() public grantId!: string;
@Input() public type: ProjectType = ProjectType.PROJECTTYPE_GRANTED;
@Input() public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectGrantMembersDataSource;
public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
public ProjectType: any = ProjectType;
constructor(
private projectService: ProjectService,
private dialog: MatDialog,
private toast: ToastService,
) { }
public ngOnInit(): void {
this.dataSource = new ProjectGrantMembersDataSource(this.projectService);
console.log(this.projectId);
this.dataSource.loadMembers(this.projectId, this.grantId, 0, 25, 'asc');
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadMembersPage()),
)
.subscribe();
}
private loadMembersPage(): void {
this.dataSource.loadMembers(
this.projectId,
this.grantId,
this.paginator.pageIndex,
this.paginator.pageSize,
);
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
return this.projectService.RemoveProjectGrantMember(this.projectId, this.grantId, member.userId).then(() => {
this.toast.showInfo('Removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}));
}
public removeMember(member: ProjectMember.AsObject): void {
this.projectService.RemoveProjectGrantMember(this.projectId, this.grantId, member.userId).then(() => {
this.toast.showInfo('Member removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
}
public async openAddMember(): Promise<any> {
const keysList = (await this.projectService.GetProjectGrantMemberRoles()).toObject();
console.log(keysList);
const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
data: {
roleKeysList: keysList.rolesList,
},
width: '400px',
});
dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
console.log(dataToAdd);
if (dataToAdd) {
dataToAdd.userIds.forEach((userid: string) => {
this.projectService.AddProjectGrantMember(
this.projectId,
this.grantId,
userid,
dataToAdd.rolesKeyList,
).then(() => {
this.toast.showInfo('Project Grant Member successfully added!');
}).catch(error => {
this.toast.showError(error.message);
});
});
}
});
}
}
console/src/app/modules/project-grant-members/project-grant-members.module.ts
+59
View File
@@ -0,0 +1,59 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { SearchUserAutocompleteModule } from '../search-user-autocomplete/search-user-autocomplete.module';
import {
ProjectGrantMembersCreateDialogComponent,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersComponent } from './project-grant-members.component';
@NgModule({
declarations: [ProjectGrantMembersComponent, ProjectGrantMembersCreateDialogComponent],
imports: [
CommonModule,
MatAutocompleteModule,
HasRoleModule,
RouterModule,
MatChipsModule,
MatMenuModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatTableModule,
SearchUserAutocompleteModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
MatDialogModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
],
exports: [
ProjectGrantMembersComponent,
],
})
export class ProjectGrantMembersModule { }
console/src/app/modules/project-members/project-members.component.html
+13 -5
View File
@@ -48,13 +48,13 @@
[dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<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 (click)="$event.stopPropagation()"
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
@@ -94,9 +94,17 @@
<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 app-label" *ngFor="let role of member.rolesList; index as i">
{{ 'ROLES.'+role | translate }}</span>
<td mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline" *ngIf="project">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="(['project.member.write:'+project.projectId] | hasRole) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ 'ROLES.'+role | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
console/src/app/modules/project-members/project-members.component.scss
+3 -8
View File
@@ -36,7 +36,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
}
}
@@ -51,7 +51,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;
@@ -109,15 +109,10 @@
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
}
console/src/app/modules/project-members/project-members.component.ts
+47 -6
View File
@@ -2,9 +2,10 @@ import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { tap } from 'rxjs/operators';
import { take, tap } from 'rxjs/operators';
import { ProjectMember, ProjectType, ProjectView, User } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -25,6 +26,7 @@ export class ProjectMembersComponent implements AfterViewInit {
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectMembersDataSource;
public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
public memberRoleOptions: string[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
@@ -34,13 +36,24 @@ export class ProjectMembersComponent implements AfterViewInit {
private dialog: MatDialog,
private toast: ToastService,
private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.projectService.GetProjectById(params.projectid).then(project => {
this.project = project.toObject();
this.dataSource = new ProjectMembersDataSource(this.projectService);
this.dataSource.loadMembers(this.project, this.projectType, 0, 25, 'asc');
this.route.data.pipe(take(1)).subscribe(data => {
this.projectType = data.type;
console.log(data);
this.getRoleOptions();
this.route.params.subscribe(params => {
console.log(params);
console.log(this.projectType);
this.projectService.GetProjectById(params.projectid).then(project => {
this.project = project.toObject();
this.dataSource = new ProjectMembersDataSource(this.projectService);
this.dataSource.loadMembers(this.project, this.projectType, 0, 25, 'asc');
});
});
});
}
public ngAfterViewInit(): void {
@@ -52,6 +65,22 @@ export class ProjectMembersComponent implements AfterViewInit {
}
public getRoleOptions(): void {
if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
this.projectService.GetProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error.message);
});
} else if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
this.projectService.GetProjectMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error.message);
});
}
}
private loadMembersPage(): void {
this.dataSource.loadMembers(
this.project,
@@ -117,4 +146,16 @@ export class ProjectMembersComponent implements AfterViewInit {
}
});
}
updateRoles(member: ProjectMember.AsObject, selectionChange: MatSelectChange): void {
console.log(member, selectionChange.value);
this.projectService.ChangeProjectMember(this.project.projectId, member.userId, selectionChange.value)
.then((newmember: ProjectMember) => {
console.log(newmember.toObject());
this.toast.showInfo('Member updated!');
}).catch(error => {
this.toast.showError(error.message);
});
}
}
console/src/app/modules/project-members/project-members.module.ts
+6
View File
@@ -5,14 +5,17 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { PipesModule } from 'src/app/pipes/pipes.module';
import { ProjectMembersRoutingModule } from './project-members-routing.module';
import { ProjectMembersComponent } from './project-members.component';
@@ -27,6 +30,8 @@ import { ProjectMembersComponent } from './project-members.component';
HasRoleModule,
MatChipsModule,
MatButtonModule,
MatFormFieldModule,
MatSelectModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
@@ -37,6 +42,7 @@ import { ProjectMembersComponent } from './project-members.component';
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
PipesModule,
],
})
export class ProjectMembersModule { }
console/src/app/modules/project-roles/project-roles.component.html
+3 -3
View File
@@ -33,14 +33,14 @@
<table [dataSource]="dataSource" mat-table class="full-width-table" matSort aria-label="Elements">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<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 (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
console/src/app/modules/project-roles/project-roles.component.scss
+1 -1
View File
@@ -8,7 +8,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;
console/src/app/modules/project-roles/project-roles.component.ts
+1
View File
@@ -31,6 +31,7 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
constructor(private projectService: ProjectService, private toast: ToastService) { }
public ngOnInit(): void {
console.log(this.projectId);
this.dataSource = new ProjectRolesDataSource(this.projectService);
this.dataSource.loadRoles(this.projectId, 0, 25, 'asc');
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
+6 -7
View File
@@ -3,7 +3,7 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@
import { FormControl } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips';
import { from, merge } from 'rxjs';
import { forkJoin, from } from 'rxjs';
import { debounceTime, switchMap, tap } from 'rxjs/operators';
import {
ProjectGrantView,
@@ -47,16 +47,15 @@ export class SearchProjectAutocompleteComponent {
const query = new ProjectSearchQuery();
query.setKey(ProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
query.setValue(value);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
return merge(
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
return forkJoin([
from(this.projectService.SearchGrantedProjects(10, 0, [query])),
from(this.projectService.SearchProjects(10, 0, [query])),
);
]);
}),
// finalize(() => this.isLoading = false),
).subscribe((projects) => {
).subscribe(([granted, owned]) => {
this.isLoading = false;
this.filteredProjects = projects.toObject().resultList;
this.filteredProjects = [...owned.toObject().resultList, ...granted.toObject().resultList];
console.log(this.filteredProjects);
});
}
console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts
+1 -1
View File
@@ -43,7 +43,7 @@ export class SearchRolesAutocompleteComponent {
switchMap(value => {
const query = new ProjectRoleSearchQuery();
query.setKey(ProjectRoleSearchKey.PROJECTROLESEARCHKEY_DISPLAY_NAME);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
query.setValue(value);
return from(this.projectService.SearchProjectRoles(this.projectId, 10, 0, [query]));
}),
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
-5
View File
@@ -17,11 +17,6 @@
(matChipInputTokenEnd)="add($event)" />
</mat-chip-list>
<!-- <mat-hint *ngIf="hint">
{{hint}}
<a (click)=" changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
</mat-hint> -->
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
<mat-option *ngIf="isLoading" class="is-loading">
<mat-spinner diameter="30"></mat-spinner>
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
+2 -2
View File
@@ -3,7 +3,7 @@
}
.target-desc {
color: #81868a;
color: #8795a1;
font-size: .8rem;
margin: 0;
margin-bottom: 1rem;
@@ -42,5 +42,5 @@
.found-label {
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts
+4 -4
View File
@@ -52,7 +52,7 @@ export class SearchUserAutocompleteComponent {
const query = new UserSearchQuery();
query.setKey(UserSearchKey.USERSEARCHKEY_EMAIL);
query.setValue(value);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
if (this.target === UserTarget.SELF) {
return from(this.userService.SearchUsers(10, 0, [query]));
} else {
@@ -117,11 +117,11 @@ export class SearchUserAutocompleteComponent {
this.users = [this.filteredUsers[index]];
}
this.selectionChanged.emit(this.users);
this.usernameInput.nativeElement.value = '';
this.myControl.setValue(null);
}
}
this.usernameInput.nativeElement.value = '';
this.myControl.setValue(null);
}
public changeTarget(): void {
console/src/app/modules/user-grant/user-grant-routing.module.ts
+18
View File
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserGrantComponent } from './user-grant.component';
const routes: Routes = [
{
path: '',
component: UserGrantComponent,
data: { animation: 'AddPage' },
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UserGrantRoutingModule { }
console/src/app/modules/user-grant/user-grant.component.html
+15
View File
@@ -0,0 +1,15 @@
<div class="max-width-container">
<div class="container">
<div class="left">
<a *ngIf="userid" [routerLink]="[ '/users', userid]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
</div>
<div class="right">
<div class="head">
<h1>{{ 'GRANTS.DETAIL.TITLE' | translate }}</h1>
<p class="desc">{{ 'GRANTS.DETAIL.DESCRIPTION' | translate }}</p>
</div>
</div>
</div>
</div>
console/src/app/modules/user-grant/user-grant.component.scss
+43
View File
@@ -0,0 +1,43 @@
.container {
display: flex;
padding-bottom: 3rem;
.left {
width: 100px;
display: flex;
padding: 1rem;
justify-content: center;
a {
margin-top: .2rem;
}
}
.right {
flex: 1;
padding-top: 1rem;
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
margin-bottom: 2rem;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
}
}
}
console/src/app/modules/user-grant/user-grant.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserGrantComponent } from './user-grant.component';
describe('UserGrantComponent', () => {
let component: UserGrantComponent;
let fixture: ComponentFixture<UserGrantComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [UserGrantComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserGrantComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/modules/user-grant/user-grant.component.ts
+44
View File
@@ -0,0 +1,44 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserGrantView } from 'src/app/proto/generated/management_pb';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-user-grant',
templateUrl: './user-grant.component.html',
styleUrls: ['./user-grant.component.scss'],
})
export class UserGrantComponent implements OnInit {
public userid: string = '';
public grantid: string = '';
public grantView!: UserGrantView.AsObject;
constructor(
private mgmtUserService: MgmtUserService,
private route: ActivatedRoute,
private toast: ToastService,
) {
this.route.params.subscribe(params => {
this.userid = params.projectid;
this.grantid = params.grantid;
this.mgmtUserService.UserGrantByID(this.grantid, this.userid).then(resp => {
this.grantView = resp.toObject();
console.log(this.grantView);
});
});
}
ngOnInit(): void {
}
updateGrant(): void {
this.mgmtUserService.UpdateUserGrant(this.grantid, this.userid, this.grantView.roleKeysList).then(() => {
this.toast.showInfo('Roles updated');
}).catch(error => {
this.toast.showError(error.message);
});
}
}
console/src/app/modules/user-grant/user-grant.module.ts
+29
View File
@@ -0,0 +1,29 @@
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpLoaderFactory } from 'src/app/app.module';
import { UserGrantRoutingModule } from './user-grant-routing.module';
import { UserGrantComponent } from './user-grant.component';
@NgModule({
declarations: [UserGrantComponent],
imports: [
CommonModule,
UserGrantRoutingModule,
MatIconModule,
MatButtonModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
}),
],
schemas: [],
})
export class UserGrantModule { }
console/src/app/modules/user-grants/user-grants-datasource.ts
+58
View File
@@ -0,0 +1,58 @@
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { UserGrant, UserGrantSearchKey, UserGrantSearchQuery } from 'src/app/proto/generated/management_pb';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
public totalResult: number = 0;
public grantsSubject: BehaviorSubject<UserGrant.AsObject[]> = new BehaviorSubject<UserGrant.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
constructor(private userService: MgmtUserService) {
super();
}
public loadGrants(filter: UserGrantSearchKey, userId: string, pageIndex: number, pageSize: number): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
const query = new UserGrantSearchQuery();
query.setKey(filter);
query.setValue(userId);
const queries: UserGrantSearchQuery[] = [query];
from(this.userService.SearchUserGrants(10, 0, queries)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
console.log(resp.toObject().resultList);
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(grants => {
this.grantsSubject.next(grants);
});
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
public connect(): Observable<UserGrant.AsObject[]> {
return this.grantsSubject.asObservable();
}
/**
* Called when the table is being destroyed. Use this function, to clean up
* any open connections or free any held resources that were set up during connect.
*/
public disconnect(): void {
this.grantsSubject.complete();
this.loadingSubject.complete();
}
}
console/src/app/modules/user-grants/user-grants.component.html
+109
View File
@@ -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>
console/src/app/modules/user-grants/user-grants.component.scss
+73
View File
@@ -0,0 +1,73 @@
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.table-wrapper {
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
table, mat-paginator {
width: 100%;
background-color: #2d2e30;
td, th {
padding-left: .5rem;
padding-right: .5rem;
&:first-child {
padding-left: 0;
padding-right: .5rem;
}
&:last-child {
padding-right: 0;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
console/src/app/modules/user-grants/user-grants.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserGrantsComponent } from './user-grants.component';
describe('UserGrantsComponent', () => {
let component: UserGrantsComponent;
let fixture: ComponentFixture<UserGrantsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [UserGrantsComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserGrantsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/modules/user-grants/user-grants.component.ts
+106
View File
@@ -0,0 +1,106 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { ProjectGrant, ProjectRoleView, UserGrant, UserGrantSearchKey } from 'src/app/proto/generated/management_pb';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { UserGrantsDataSource } from './user-grants-datasource';
@Component({
selector: 'app-user-grants',
templateUrl: './user-grants.component.html',
styleUrls: ['./user-grants.component.scss'],
})
export class UserGrantsComponent implements OnInit, AfterViewInit {
@Input() filterValue: string = '';
@Input() filter: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID;
public grants: UserGrant.AsObject[] = [];
public dataSource!: UserGrantsDataSource;
public selection: SelectionModel<UserGrant.AsObject> = new SelectionModel<UserGrant.AsObject>(true, []);
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<ProjectGrant.AsObject>;
@Input() allowCreate: boolean = false;
@Input() allowDelete: boolean = false;
public roleOptions: ProjectRoleView.AsObject[] = [];
constructor(
private userService: MgmtUserService,
private projectService: ProjectService,
private toast: ToastService,
) { }
public displayedColumns: string[] = ['select',
'user',
'org',
'projectId', 'creationDate', 'changeDate', 'roleNamesList'];
public ngOnInit(): void {
this.dataSource = new UserGrantsDataSource(this.userService);
this.dataSource.loadGrants(this.filter, this.filterValue, 0, 25);
if (this.filter === UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID) {
this.getRoleOptions(this.filterValue);
}
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadGrantsPage()),
)
.subscribe();
}
private loadGrantsPage(): void {
this.dataSource.loadGrants(
this.filter,
this.filterValue,
this.paginator.pageIndex,
this.paginator.pageSize,
);
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.grantsSubject.value.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.grantsSubject.value.forEach(row => this.selection.select(row));
}
public loadRoleOptions(projectId: string): void {
if (this.filter === UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID) {
this.getRoleOptions(projectId);
}
}
public getRoleOptions(projectId: string): void {
this.projectService.SearchProjectRoles(projectId, 100, 0).then(resp => {
this.roleOptions = resp.toObject().resultList;
console.log(this.roleOptions);
});
}
updateRoles(grant: UserGrant.AsObject, selectionChange: MatSelectChange): void {
console.log(grant, selectionChange.value);
this.userService.UpdateUserGrant(grant.id, grant.userId, selectionChange.value)
.then((newmember: UserGrant) => {
console.log(newmember.toObject());
this.toast.showInfo('Grant updated!');
}).catch(error => {
this.toast.showError(error.message);
});
}
}
console/src/app/modules/user-grants/user-grants.module.ts
+47
View File
@@ -0,0 +1,47 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { PipesModule } from 'src/app/pipes/pipes.module';
import { AvatarModule } from '../avatar/avatar.module';
import { UserGrantsComponent } from './user-grants.component';
@NgModule({
declarations: [UserGrantsComponent],
imports: [
CommonModule,
FormsModule,
AvatarModule,
MatButtonModule,
HasRoleModule,
MatTableModule,
MatPaginatorModule,
MatIconModule,
RouterModule,
MatProgressSpinnerModule,
MatCheckboxModule,
MatTooltipModule,
MatSelectModule,
MatFormFieldModule,
TranslateModule,
PipesModule,
],
exports: [
UserGrantsComponent,
],
})
export class UserGrantsModule { }