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

@@ -52,67 +52,68 @@
             [opened]="!(isHandset$ | async)">
             <div class="side-column">
                 <div class="list">
-                    <a *ngIf="authService.authenticationChanged | async" class="nav-item"
-                        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
-                        [routerLink]="['/user/me']">
-                        <i class="icon las la-user-circle"></i>
-                        <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
-                    </a>
+                    <ng-container *ngIf="authService.authenticationChanged | async">
+                        <a class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
+                            [routerLink]="['/user/me']">
+                            <i class="icon las la-user-circle"></i>
+                            <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
+                        </a>
+                    </ng-container>
 
-                    <div *ngIf="authService.authenticationChanged | async" class="divider">
-                        <div class="line"></div>
-                    </div>
+                    <ng-container *ngIf="iamreadwrite">
+                        <div class="divider">
+                            <div class="line"></div>
+                        </div>
+                        <a class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/iam']">
+                            <i class="icon las la-gem"></i>
+                            <span class="label">{{'MENU.IAM' | translate}}</span>
+                        </a>
+                    </ng-container>
 
-                    <a *ngIf="iamreadwrite" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/iam']">
-                        <i class="icon las la-gem"></i>
-                        <span class="label">{{'MENU.IAM' | translate}}</span>
-                    </a>
+                    <ng-container *ngIf="showOrgSection">
+                        <a class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/org']">
+                            <i class="icon las la-archway"></i>
+                            <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
+                        </a>
+                    </ng-container>
 
-                    <a *ngIf="showOrgSection" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/org']">
-                        <i class="icon las la-archway"></i>
-                        <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
-                    </a>
+                    <ng-container *ngIf="showProjectSection">
+                        <div class="divider">
+                            <div class="line"></div>
+                            <span>{{'MENU.PROJECTSSECTION' | translate}}</span>
+                            <div class="line"></div>
+                        </div>
 
-                    <div *ngIf="showOrgSection" class="divider">
-                        <div class="line"></div>
-                        <span>{{'MENU.PROJECTSSECTION' | translate}}</span>
-                        <div class="line"></div>
-                    </div>
+                        <a class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/projects']">
+                            <i class="icon las la-layer-group"></i>
+                            <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}
+                                {{ 'MENU.PROJECT' | translate }}</span>
+                        </a>
 
-                    <a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
-                        [routerLink]="[ '/projects']">
-                        <i class="icon las la-layer-group"></i>
-                        <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}
-                            {{ 'MENU.PROJECT' | translate }}</span>
-                    </a>
+                        <a class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/granted-projects']">
+                            <i class="icon las la-layer-group"></i>
+                            <span class="label">{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
+                        </a>
+                    </ng-container>
 
-                    <a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
-                        [routerLink]="[ '/granted-projects']">
-                        <i class="icon las la-layer-group"></i>
-                        <span class="label">{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
-                    </a>
+                    <ng-container *ngIf="showUserSection">
+                        <div class="divider">
+                            <div class="line"></div>
+                            <span class="label">
+                                {{ 'MENU.USERSECTION' | translate }}</span>
+                            <div class="line"></div>
+                        </div>
 
-                    <div *ngIf="showProjectSection" class="divider">
-                        <div class="line"></div>
-                        <span class="label">
-                            {{ 'MENU.USERSECTION' | translate }}</span>
-                        <div class="line"></div>
-
-                    </div>
-
-                    <a *ngIf="showUserSection" class="nav-item" [routerLinkActive]="['active']"
-                        [routerLink]="[ '/users']" [routerLinkActiveOptions]="{ exact: true }">
-                        <i class="icon las la-users"></i>
-                        <span class="label">{{ 'MENU.USER' | translate }}</span>
-                    </a>
+                        <a class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/users']"
+                            [routerLinkActiveOptions]="{ exact: true }">
+                            <i class="icon las la-users"></i>
+                            <span class="label">{{ 'MENU.USER' | translate }}</span>
+                        </a>
+                    </ng-container>
 
                     <span class="fill-space"></span>
                 </div>
                 <span class="fill-space"></span>
-                <!-- <div class="footer">
-                <a href="https://caos.ch/impressum/" target="_blank" rel="noreferrer">AGB</a>
-                <a href="https://caos.ch/impressum/" target="_blank" rel="noreferrer">Impressum</a>
-            </div> -->
             </div>
         </mat-drawer>
         <mat-drawer-content class="content">

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;

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']);
             }

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<ProjectMember.AsObject>
         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<ProjectMemberSearchResponse> | 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(

console/src/app/modules/project-members/project-members.component.html

@@ -7,7 +7,7 @@
         </div>
         <div class="right">
             <div class="head">
-                <h1>{{project?.name}} {{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
+                <h1>{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
                 <p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
             </div>
 

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<ProjectMember.AsObject>;
     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);
+                });
+        }
     }
 }

console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html

@@ -33,9 +33,9 @@
 
         <mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
             <mat-tab label="Details">
-                <app-project-contributors *ngIf="project"
+                <app-project-contributors *ngIf="project && grantId"
                     [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
-                    [projectType]="ProjectType.PROJECTTYPE_GRANTED" [project]="project">
+                    [projectType]="ProjectType.PROJECTTYPE_GRANTED" [project]="project" [grantId]="grantId">
                 </app-project-contributors>
             </mat-tab>
             <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">

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,
         },

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);
                 });
-
             }
         });
     }

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"
 }