From 4fa68ae2ee6af2ccf3bf747f8ead3a033e6af338 Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Thu, 9 Jul 2020 18:02:05 +0200 Subject: [PATCH] fix(console): granted project member actions (create, update, delete) (#438) * project grant members abst * ref name from both project types --- console/src/app/app.component.html | 101 ++++++++-------- .../member-create-dialog.component.ts | 2 + .../project-contributors.component.ts | 34 ++++-- .../project-members-datasource.ts | 11 +- .../project-members.component.html | 2 +- .../project-members.component.ts | 110 ++++++++++-------- .../granted-project-detail.component.html | 4 +- .../granted-projects-routing.module.ts | 2 +- .../project-grant-members.component.ts | 16 +-- console/src/assets/environment.json | 2 +- 10 files changed, 159 insertions(+), 125 deletions(-) diff --git a/console/src/app/app.component.html b/console/src/app/app.component.html index 1176ae74c0..bf7ef131ff 100644 --- a/console/src/app/app.component.html +++ b/console/src/app/app.component.html @@ -52,67 +52,68 @@ [opened]="!(isHandset$ | async)">
- - - {{ 'MENU.PERSONAL_INFO' | translate }} - + + + + {{ 'MENU.PERSONAL_INFO' | translate }} + + -
-
-
+ +
+
+
+ + + {{'MENU.IAM' | translate}} + + - - - {{'MENU.IAM' | translate}} - + + + + {{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}} + + - - - {{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}} - + +
+
+ {{'MENU.PROJECTSSECTION' | translate}} +
+
-
-
- {{'MENU.PROJECTSSECTION' | translate}} -
-
+ + + {{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}} + {{ 'MENU.PROJECT' | translate }} + - - - {{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}} - {{ 'MENU.PROJECT' | translate }} - + + + {{ 'MENU.GRANTEDPROJECT' | translate }} + + - - - {{ 'MENU.GRANTEDPROJECT' | translate }} - + +
+
+ + {{ 'MENU.USERSECTION' | translate }} +
+
-
-
- - {{ 'MENU.USERSECTION' | translate }} -
- -
- - - - {{ 'MENU.USER' | translate }} - + + + {{ 'MENU.USER' | translate }} + +
-
diff --git a/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts b/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts index f64c3027e9..0164cf348d 100644 --- a/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts +++ b/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts @@ -33,6 +33,8 @@ export class MemberCreateDialogComponent { this.creationType = data.creationType; this.projectId = data.projectId; + console.log(this.creationType); + if (this.creationType === CreationType.PROJECT_GRANTED) { this.projectService.GetProjectGrantMemberRoles().then(resp => { this.memberRoleOptions = resp.toObject().rolesList; diff --git a/console/src/app/modules/project-contributors/project-contributors.component.ts b/console/src/app/modules/project-contributors/project-contributors.component.ts index 85441f7f11..7d9ee045c1 100644 --- a/console/src/app/modules/project-contributors/project-contributors.component.ts +++ b/console/src/app/modules/project-contributors/project-contributors.component.ts @@ -24,6 +24,7 @@ import { CreationType, MemberCreateDialogComponent } from '../../modules/add-mem }) export class ProjectContributorsComponent implements OnInit { @Input() public project!: ProjectView.AsObject | ProjectGrantView.AsObject; + @Input() public grantId: string = ''; @Input() public projectType!: ProjectType; @Input() public disabled: boolean = false; @@ -65,7 +66,9 @@ export class ProjectContributorsComponent implements OnInit { public openAddMember(): void { const dialogRef = this.dialog.open(MemberCreateDialogComponent, { data: { - creationType: CreationType.PROJECT_OWNED, + // TODO replace + creationType: this.projectType === ProjectType.PROJECTTYPE_OWNED ? CreationType.PROJECT_OWNED : + ProjectType.PROJECTTYPE_GRANTED ? CreationType.PROJECT_GRANTED : ProjectType.PROJECTTYPE_OWNED, projectId: this.project.projectId, }, width: '400px', @@ -77,12 +80,27 @@ export class ProjectContributorsComponent implements OnInit { const roles: string[] = resp.roles; if (users && users.length && roles && roles.length) { - Promise.all(users.map(user => { - return this.projectService.AddProjectMember(this.project.projectId, user.id, roles); - })).then(() => { - this.toast.showError('members added'); - }).catch(error => { - this.toast.showError(error); + users.forEach(user => { + switch (this.projectType) { + case ProjectType.PROJECTTYPE_OWNED: + return this.projectService.AddProjectMember(this.project.projectId, user.id, roles) + .then(() => { + this.toast.showInfo('members added'); + }).catch(error => { + this.toast.showError(error); + }); + case ProjectType.PROJECTTYPE_GRANTED: + return this.projectService.AddProjectGrantMember( + this.project.projectId, + this.grantId, + user.id, + roles, + ).then(() => { + this.toast.showInfo('members added'); + }).catch(error => { + this.toast.showError(error); + }); + } }); } } @@ -92,7 +110,7 @@ export class ProjectContributorsComponent implements OnInit { public showDetail(): void { if (this.project?.state === ProjectState.PROJECTSTATE_ACTIVE) { if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) { - this.router.navigate(['granted-projects', this.project.projectId, 'members']); + this.router.navigate(['granted-projects', this.project.projectId, 'grant', this.grantId, 'members']); } else if (this.projectType === ProjectType.PROJECTTYPE_OWNED) { this.router.navigate(['projects', this.project.projectId, 'members']); } diff --git a/console/src/app/modules/project-members/project-members-datasource.ts b/console/src/app/modules/project-members/project-members-datasource.ts index 5d44939e8d..d19be7a57a 100644 --- a/console/src/app/modules/project-members/project-members-datasource.ts +++ b/console/src/app/modules/project-members/project-members-datasource.ts @@ -1,7 +1,7 @@ import { DataSource } from '@angular/cdk/collections'; import { BehaviorSubject, from, Observable, of } from 'rxjs'; import { catchError, finalize, map } from 'rxjs/operators'; -import { ProjectMember, ProjectMemberSearchResponse, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb'; +import { ProjectMember, ProjectMemberSearchResponse, ProjectType } from 'src/app/proto/generated/management_pb'; import { ProjectService } from 'src/app/services/project.service'; /** @@ -19,18 +19,19 @@ export class ProjectMembersDataSource extends DataSource super(); } - public loadMembers(project: ProjectView.AsObject, + public loadMembers(projectId: string, projectType: ProjectType, - pageIndex: number, pageSize: number, grantId?: string, sortDirection?: string): void { + pageIndex: number, pageSize: number, grantId?: string): void { const offset = pageIndex * pageSize; this.loadingSubject.next(true); + console.log(grantId); // TODO const promise: Promise | undefined = projectType === ProjectType.PROJECTTYPE_OWNED ? - this.projectService.SearchProjectMembers(project.projectId, pageSize, offset) : + this.projectService.SearchProjectMembers(projectId, pageSize, offset) : projectType === ProjectType.PROJECTTYPE_GRANTED && grantId ? - this.projectService.SearchProjectGrantMembers(project.projectId, + this.projectService.SearchProjectGrantMembers(projectId, grantId, pageSize, offset) : undefined; if (promise) { from(promise).pipe( diff --git a/console/src/app/modules/project-members/project-members.component.html b/console/src/app/modules/project-members/project-members.component.html index 722dfc823a..f1d541ab9c 100644 --- a/console/src/app/modules/project-members/project-members.component.html +++ b/console/src/app/modules/project-members/project-members.component.html @@ -7,7 +7,7 @@
-

{{project?.name}} {{ 'PROJECT.MEMBER.TITLE' | translate }}

+

{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}

{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}

diff --git a/console/src/app/modules/project-members/project-members.component.ts b/console/src/app/modules/project-members/project-members.component.ts index 39c5a21131..2516738813 100644 --- a/console/src/app/modules/project-members/project-members.component.ts +++ b/console/src/app/modules/project-members/project-members.component.ts @@ -1,12 +1,12 @@ import { SelectionModel } from '@angular/cdk/collections'; -import { AfterViewInit, Component, ViewChild } from '@angular/core'; +import { 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 { take, tap } from 'rxjs/operators'; -import { ProjectMember, ProjectType, ProjectView, User } from 'src/app/proto/generated/management_pb'; +import { take } from 'rxjs/operators'; +import { ProjectGrantView, 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'; @@ -18,10 +18,12 @@ import { ProjectMembersDataSource } from './project-members-datasource'; templateUrl: './project-members.component.html', styleUrls: ['./project-members.component.scss'], }) -export class ProjectMembersComponent implements AfterViewInit { - public project!: ProjectView.AsObject; +export class ProjectMembersComponent { + public project!: ProjectView.AsObject | ProjectGrantView.AsObject; public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED; public disabled: boolean = false; + public grantId: string = ''; + public projectName: string = ''; @ViewChild(MatPaginator) public paginator!: MatPaginator; @ViewChild(MatTable) public table!: MatTable; public dataSource!: ProjectMembersDataSource; @@ -42,23 +44,25 @@ export class ProjectMembersComponent implements AfterViewInit { this.getRoleOptions(); 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.grantId = params.grantid; + if (this.projectType === ProjectType.PROJECTTYPE_OWNED) { + this.projectService.GetProjectById(params.projectid).then(project => { + this.project = project.toObject(); + this.projectName = this.project.name; + this.dataSource = new ProjectMembersDataSource(this.projectService); + this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, 25); + }); + } else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) { + console.log(params.projectid, params.grantid); + this.projectService.GetGrantedProjectByID(params.projectid, params.grantid).then(project => { + this.project = project.toObject(); + this.projectName = this.project.projectName; + this.dataSource = new ProjectMembersDataSource(this.projectService); + this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, 25, this.grantId); + }); + } }); }); - - } - - public ngAfterViewInit(): void { - this.paginator.page - .pipe( - tap(() => this.loadMembersPage()), - ) - .subscribe(); - } public getRoleOptions(): void { @@ -77,33 +81,25 @@ export class ProjectMembersComponent implements AfterViewInit { } } - private loadMembersPage(): void { - this.dataSource.loadMembers( - this.project, - this.projectType, - this.paginator.pageIndex, - this.paginator.pageSize, - ); - } - public removeProjectMemberSelection(): void { Promise.all(this.selection.selected.map(member => { - return this.projectService.RemoveProjectMember(this.project.projectId, member.userId).then(() => { - this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true); - }).catch(error => { - this.toast.showError(error); - }); + if (this.projectType === ProjectType.PROJECTTYPE_OWNED) { + return this.projectService.RemoveProjectMember(this.project.projectId, member.userId).then(() => { + this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true); + }).catch(error => { + this.toast.showError(error); + }); + } else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) { + return this.projectService.RemoveProjectGrantMember(this.project.projectId, this.grantId, + member.userId).then(() => { + this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true); + }).catch(error => { + this.toast.showError(error); + }); + } })); } - public removeMember(member: ProjectMember.AsObject): void { - this.projectService.RemoveProjectMember(this.project.projectId, member.userId).then(() => { - this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true); - }).catch(error => { - this.toast.showError(error); - }); - } - public isAllSelected(): boolean { const numSelected = this.selection.selected.length; const numRows = this.dataSource.membersSubject.value.length; @@ -132,7 +128,13 @@ export class ProjectMembersComponent implements AfterViewInit { if (users && users.length && roles && roles.length) { Promise.all(users.map(user => { - return this.projectService.AddProjectMember(this.project.projectId, user.id, roles); + if (this.projectType === ProjectType.PROJECTTYPE_OWNED) { + return this.projectService.AddProjectMember(this.project.projectId, user.id, roles); + + } else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) { + return this.projectService.AddProjectGrantMember(this.project.projectId, this.grantId, + user.id, roles); + } })).then(() => { this.toast.showInfo('PROJECT.TOAST.MEMBERSADDED', true); }).catch(error => { @@ -144,11 +146,21 @@ export class ProjectMembersComponent implements AfterViewInit { } updateRoles(member: ProjectMember.AsObject, selectionChange: MatSelectChange): void { - this.projectService.ChangeProjectMember(this.project.projectId, member.userId, selectionChange.value) - .then((newmember: ProjectMember) => { - this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true); - }).catch(error => { - this.toast.showError(error); - }); + if (this.projectType === ProjectType.PROJECTTYPE_OWNED) { + this.projectService.ChangeProjectMember(this.project.projectId, member.userId, selectionChange.value) + .then((newmember: ProjectMember) => { + this.toast.showInfo('Member changed'); + }).catch(error => { + this.toast.showError(error); + }); + } else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) { + this.projectService.ChangeProjectGrantMember(this.project.projectId, + this.grantId, member.userId, selectionChange.value) + .then((newmember: ProjectMember) => { + this.toast.showInfo('Member changed'); + }).catch(error => { + this.toast.showError(error); + }); + } } } diff --git a/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html index dcbe2f8065..a0476286b1 100644 --- a/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html +++ b/console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html @@ -33,9 +33,9 @@ - + [projectType]="ProjectType.PROJECTTYPE_GRANTED" [project]="project" [grantId]="grantId"> diff --git a/console/src/app/pages/granted-projects/granted-projects-routing.module.ts b/console/src/app/pages/granted-projects/granted-projects-routing.module.ts index be129a9ec8..7811f1b675 100644 --- a/console/src/app/pages/granted-projects/granted-projects-routing.module.ts +++ b/console/src/app/pages/granted-projects/granted-projects-routing.module.ts @@ -22,7 +22,7 @@ const routes: Routes = [ }, }, { - path: ':projectid/members', + path: ':projectid/grant/:grantid/members', data: { type: ProjectType.PROJECTTYPE_GRANTED, }, diff --git a/console/src/app/pages/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.ts b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.ts index bddced9849..e857cf11cc 100644 --- a/console/src/app/pages/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.ts +++ b/console/src/app/pages/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.ts @@ -126,19 +126,19 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit { dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => { if (dataToAdd) { - dataToAdd.userIds.forEach((userid: string) => { - this.projectService.AddProjectGrantMember( + Promise.all(dataToAdd.userIds.map((userid: string) => { + return 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); - }); + ); + })).then(() => { + console.log('this'); + this.toast.showInfo('Project Grant Member successfully added!'); + }).catch(error => { + this.toast.showError(error); }); - } }); } diff --git a/console/src/assets/environment.json b/console/src/assets/environment.json index 6c6684a289..4f1978c3e9 100644 --- a/console/src/assets/environment.json +++ b/console/src/assets/environment.json @@ -3,5 +3,5 @@ "mgmtServiceUrl": "https://api.zitadel.dev", "adminServiceUrl":"https://api.zitadel.dev", "issuer": "https://issuer.zitadel.dev", - "clientid": "63146698922323188@zitadel" + "clientid": "63426288794266821@zitadel" }