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

* add iam label, user avatar * avatar component * split granted and owned modules * move components to resp module * refactor project contributors, g project nav * rem console logs, add avatar for org members * fix changes loading, auth user page * refactor home, i18n * fix changes side overflow * lint
2026-10-31 19:42:15 +00:00 · 2020-06-26 14:15:05 +02:00
parent ee73dc07dd
commit 0a488eb1fb
141 changed files with 1133 additions and 742 deletions
@@ -1,12 +1,15 @@
 <div class="card" appOutsideClick (clickOutside)="closeCard($event)">
-    <mat-icon class="avatar">account_circle</mat-icon>
+    <app-avatar *ngIf="profile && (profile.displayName || (profile.firstName && profile.lastName))" class="avatar"
+        [name]="profile.displayName ? profile.displayName : (profile.firstName + ' '+ profile.lastName)" [size]="80">
+    </app-avatar>
+
    <span class="u-name">{{profile?.firstName}} {{profile?.lastName}}</span>
    <span class="u-email">{{profile?.userName}}</span>
    <span class="iamuser" *ngIf="iamuser">IAM USER</span>

-    <button color="accent" (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
+    <button color="primary" (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
    <div class="l-accounts">
-        <mat-progress-bar *ngIf="loadingUsers" color="accent" mode="indeterminate"></mat-progress-bar>
+        <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>

@@ -29,5 +32,5 @@
        </a>
    </div>

-    <button color="accent" (click)="logout()" mat-stroked-button>logout everywhere</button>
+    <button color="primary" (click)="logout()" mat-stroked-button>{{'MENU.LOGOUT' | translate}}</button>
 </div>
@@ -10,10 +10,6 @@
    padding: 1rem 0;

    .avatar {
-        height: 80px;
-        width: 80px;
-        border-radius: 50%;
-        line-height: 80px;
        font-size: 80px;
        margin-bottom: 1rem;
    }
@@ -30,9 +26,6 @@

    .iamuser {
        font-size: 1rem;
-        background: -webkit-linear-gradient(rgb(240,140,53), rgb(233, 60, 231));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
    }

    button {
@@ -60,7 +60,7 @@ export class AccountsCardComponent implements OnInit {
    }

    public logout(): void {
-        this.router.navigate(['/']);
+        this.authService.signout();
        this.close.emit();
    }
 }
@@ -6,6 +6,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { TranslateModule } from '@ngx-translate/core';
 import { OutsideClickModule } from 'src/app/directives/outside-click/outside-click.module';

+import { AvatarModule } from '../avatar/avatar.module';
 import { AccountsCardComponent } from './accounts-card.component';

@NgModule({
@@ -18,6 +19,7 @@ import { AccountsCardComponent } from './accounts-card.component';
        MatButtonModule,
        MatProgressBarModule,
        OutsideClickModule,
+        AvatarModule,
        TranslateModule,
    ],
    exports: [
@@ -42,14 +42,12 @@ export class MemberCreateDialogComponent {
        } else if (this.creationType === CreationType.PROJECT_OWNED) {
            this.projectService.GetProjectMemberRoles().then(resp => {
                this.memberRoleOptions = resp.toObject().rolesList;
-                console.log(this.memberRoleOptions);
            }).catch(error => {
                toastService.showError(error.message);
            });
        } else if (this.creationType === CreationType.IAM) {
            this.adminService.GetIamMemberRoles().then(resp => {
                this.memberRoleOptions = resp.toObject().rolesList;
-                console.log(this.memberRoleOptions);
            }).catch(error => {
                toastService.showError(error.message);
            });
@@ -0,0 +1,4 @@
+<div class="avatar-circle dontcloseonclick"
+    [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px'}" [ngClass]="{'active': active}">
+    {{credentials}}
+</div>
@@ -0,0 +1,15 @@
+:host {
+    display: block;
+}
+
+.avatar-circle {
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+
+    &.active:hover  {
+        border: 2px solid #81868a;
+    }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvatarComponent } from './avatar.component';
+
+describe('AvatarComponent', () => {
+    let component: AvatarComponent;
+    let fixture: ComponentFixture<AvatarComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [AvatarComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AvatarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-avatar',
+    templateUrl: './avatar.component.html',
+    styleUrls: ['./avatar.component.scss'],
+})
+export class AvatarComponent implements OnInit {
+    @Input() name: string = '';
+    @Input() credentials: string = '';
+    @Input() size: number = 24;
+    @Input() fontSize: number = 16;
+    @Input() active: boolean = false;
+    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.size > 50) {
+            this.fontSize = 32;
+        }
+    }
+}
@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { AvatarComponent } from './avatar.component';
+
+
+
+@NgModule({
+    declarations: [AvatarComponent],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        AvatarComponent,
+    ],
+})
+export class AvatarModule { }
+
@@ -6,12 +6,11 @@
 }

 .scroll-container {
-    max-height: 540px;
+    max-height: 60vh;
    overflow-y: scroll;

    .item {
        box-sizing: border-box;
-        height: 50px;
        padding: .5rem;
        margin: .25rem 0;
        border-radius: .5rem;
@@ -20,6 +20,7 @@ export class ChangesComponent implements OnInit {
    @Input() public id: string = '';
    @Input() public sortDirectionAsc: boolean = true;
    public errorMessage: string = '';
+    public bottom: boolean = false;

    // Source data
    private _done: BehaviorSubject<any> = new BehaviorSubject(false);
@@ -93,36 +94,36 @@ export class ChangesComponent implements OnInit {
    private mapAndUpdate(col: Promise<Changes>): any {
        if (this._done.value || this._loading.value) { return; }

-        // loading
-        this._loading.next(true);
-
        // Map snapshot with doc ref (needed for cursor)
-        return from(col).pipe(
-            tap((res: Changes) => {
-                console.log('more changes');
-                let values = res.toObject().changesList;
-                // If prepending, reverse the batch order
-                values = false ? values.reverse() : values;
+        if (!this.bottom) {
+            // loading
+            this._loading.next(true);

-                // update source with new values, done loading
-                this._data.next(values);
-                console.log(values);
+            return from(col).pipe(
+                tap((res: Changes) => {
+                    let values = res.toObject().changesList;
+                    // If prepending, reverse the batch order
+                    values = false ? values.reverse() : values;

-                // console.log(values);
-                this._loading.next(false);
+                    // update source with new values, done loading
+                    this._data.next(values);

-                // no more values, mark done
-                if (!values.length) {
-                    this._done.next(true);
-                }
-            }),
-            catchError(err => {
-                console.error(err);
-                this._loading.next(false);
-                this.errorMessage = err.message;
-                return of([]);
-            }),
-            take(1),
-        ).subscribe();
+                    this._loading.next(false);
+
+                    // no more values, mark done
+                    if (!values.length) {
+                        this._done.next(true);
+                    }
+                }),
+                catchError(err => {
+                    console.error(err);
+                    this._loading.next(false);
+                    this.errorMessage = decodeURI(err.message);
+                    this.bottom = true;
+                    return of([]);
+                }),
+                take(1),
+            ).subscribe();
+        }
    }
 }
@@ -3,7 +3,7 @@
        <ng-content></ng-content>
    </div>
    <div class="meta" [ngClass]="{'hidden': hidden}">
-        <button (click)="hidden = !hidden" color="accent" class="hide" mat-icon-button><i
+        <button (click)="hidden = !hidden" color="primary" class="hide" mat-icon-button><i
                class="las la-arrow-right"></i></button>
        <ng-content class="meta-content" select="metainfo"></ng-content>
    </div>
@@ -15,7 +15,6 @@
    }

    .meta {
-        overflow-y: hidden;
        position: relative;
        flex: 1 0 300px;
        background: linear-gradient(to bottom right, #4072b410 20%,transparent 50%);
@@ -0,0 +1,30 @@
+<div class="groups">
+    <span class="header">{{ 'PROJECT.MEMBER.TITLE' | translate }}</span>
+    <span class="sub-header">{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}</span>
+    <div class="people">
+        <div class="img-list">
+            <ng-container *ngIf="totalResult < 10; else compact">
+                <ng-container *ngFor="let member of membersSubject | async">
+                    <div (click)="showDetail()" class="avatar-circle"
+                        matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
+                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
+                            class="avatar dontcloseonclick"
+                            [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
+                            [size]="32">
+                        </app-avatar>
+                    </div>
+                </ng-container>
+            </ng-container>
+            <ng-template #compact>
+                <div (click)="showDetail()" class="avatar-circle" matTooltip="Click to show detail">
+                    <span>{{totalResult}}</span>
+                </div>
+            </ng-template>
+            <button class="add-img" (click)="openAddMember()"
+                [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE" mat-icon-button
+                aria-label="Edit contributors">
+                <mat-icon>add</mat-icon>
+            </button>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,72 @@
+.groups {
+    padding-top: 1rem;
+
+    .header {
+      display: block;
+      margin-bottom: 1rem;
+      font-weight: 400;
+    }
+
+    .sub-header {
+        font-size: .8rem;
+        color: #81868a;
+    }
+  
+    .people {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: 1rem;
+  
+      .owner {
+        margin-right: 1rem;
+      }
+  
+      .img-list {
+        width: 100%;
+        margin-top: 0.5rem;
+        margin-left: 1rem;
+        display: flex;
+        align-items: center;
+  
+        .avatar-img, .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 {
+            float: left;
+            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;
+            align-items: center;
+            justify-content: center;
+            background-color: indianred;
+        }
+  
+        .margin-neg {
+          margin-left: -1rem;
+        }
+      }
+    }
+  }
+  
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectContributorsComponent } from './project-contributors.component';
+
+describe('ProjectContributorsComponent', () => {
+    let component: ProjectContributorsComponent;
+    let fixture: ComponentFixture<ProjectContributorsComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ProjectContributorsComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ProjectContributorsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
@@ -0,0 +1,95 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { BehaviorSubject, from, of } from 'rxjs';
+import { catchError, finalize, map } from 'rxjs/operators';
+import {
+    ProjectGrantView,
+    ProjectMemberSearchResponse,
+    ProjectMemberView,
+    ProjectState,
+    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';
+
+import { CreationType, MemberCreateDialogComponent } from '../../modules/add-member-dialog/member-create-dialog.component';
+
+@Component({
+    selector: 'app-project-contributors',
+    templateUrl: './project-contributors.component.html',
+    styleUrls: ['./project-contributors.component.scss'],
+})
+export class ProjectContributorsComponent implements OnInit {
+    @Input() public project!: ProjectView.AsObject | ProjectGrantView.AsObject;
+    @Input() public projectType!: ProjectType;
+
+    @Input() public disabled: boolean = false;
+
+    public totalResult: number = 0;
+    public membersSubject: BehaviorSubject<ProjectMemberView.AsObject[]>
+        = new BehaviorSubject<ProjectMemberView.AsObject[]>([]);
+    public ProjectState: any = ProjectState;
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+    constructor(private projectService: ProjectService,
+        private dialog: MatDialog,
+        private toast: ToastService,
+        private router: Router) { }
+
+    public ngOnInit(): void {
+        const promise: Promise<ProjectMemberSearchResponse> | undefined =
+            this.projectType === ProjectType.PROJECTTYPE_OWNED ?
+                this.projectService.SearchProjectMembers(this.project.projectId, 100, 0) :
+                this.projectType === ProjectType.PROJECTTYPE_GRANTED ?
+                    this.projectService.SearchProjectGrantMembers(this.project.projectId,
+                        this.project.projectId, 100, 0) : undefined;
+        if (promise) {
+            from(promise).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);
+            });
+        }
+    }
+
+    public openAddMember(): void {
+        const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
+            data: {
+                creationType: CreationType.PROJECT_OWNED,
+                projectId: this.project.projectId,
+            },
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                const users: User.AsObject[] = resp.users;
+                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.message);
+                    });
+                }
+            }
+        });
+    }
+
+    public showDetail(): void {
+        if (this.project?.state === ProjectState.PROJECTSTATE_ACTIVE) {
+            this.router.navigate(['projects', this.project.projectId, 'members']);
+        }
+    }
+}
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { MemberCreateDialogModule } from '../add-member-dialog/member-create-dialog.module';
+import { AvatarModule } from '../avatar/avatar.module';
+import { ProjectContributorsComponent } from './project-contributors.component';
+
+
+
+@NgModule({
+    declarations: [ProjectContributorsComponent],
+    imports: [
+        MemberCreateDialogModule,
+        CommonModule,
+        TranslateModule,
+        MatTooltipModule,
+        MatIconModule,
+        MatButtonModule,
+        AvatarModule,
+    ],
+    exports: [
+        ProjectContributorsComponent,
+    ],
+})
+export class ProjectContributorsModule { }
+
@@ -0,0 +1,67 @@
+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 { 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 ProjectMembersDataSource 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(project: ProjectView.AsObject,
+        projectType: ProjectType,
+        pageIndex: number, pageSize: number, grantId?: string, sortDirection?: string): void {
+        const offset = pageIndex * pageSize;
+
+        this.loadingSubject.next(true);
+        // TODO
+        const promise: Promise<ProjectMemberSearchResponse> | undefined =
+            projectType === ProjectType.PROJECTTYPE_OWNED ?
+                this.projectService.SearchProjectMembers(project.projectId, pageSize, offset) :
+                projectType === ProjectType.PROJECTTYPE_GRANTED && grantId ?
+                    this.projectService.SearchProjectGrantMembers(project.projectId,
+                        grantId, pageSize, offset) : undefined;
+        if (promise) {
+            from(promise).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();
+    }
+}
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ProjectMembersComponent } from './project-members.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ProjectMembersComponent,
+        data: { animation: 'AddPage' },
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class ProjectMembersRoutingModule { }
@@ -0,0 +1,107 @@
+<div class="max-width-container">
+    <div class="container">
+        <div class="left">
+            <a *ngIf="project" [routerLink]="[ '/projects', project.projectId]" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+        </div>
+        <div class="right">
+            <div class="head">
+                <h1>{{project?.name}} {{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
+                <p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
+            </div>
+
+            <div class="table-header-row" *ngIf="project">
+                <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>
+                <ng-template appHasRole
+                    [appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
+                    <button (click)="removeProjectMemberSelection()" color="warn"
+                        matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
+                        *ngIf="selection.hasValue()">
+                        <i class="las la-trash"></i>
+                    </button>
+                </ng-template>
+                <ng-template appHasRole
+                    [appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
+                    <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>
+                </ng-template>
+            </div>
+
+            <div class="table-wrapper">
+                <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
+                    <mat-spinner diameter="50"></mat-spinner>
+                </div>
+                <table mat-table class="background-style full-width-table" aria-label="Elements"
+                    [dataSource]="dataSource">
+                    <ng-container matColumnDef="select">
+                        <th class="selection" mat-header-cell *matHeaderCellDef>
+                            <mat-checkbox (change)="$event ? masterToggle() : null"
+                                [checked]="selection.hasValue() && isAllSelected()"
+                                [indeterminate]="selection.hasValue() && !isAllSelected()">
+                            </mat-checkbox>
+                        </th>
+                        <td class="selection" mat-cell *matCellDef="let row">
+                            <mat-checkbox (click)="$event.stopPropagation()"
+                                (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                            </mat-checkbox>
+                        </td>
+                    </ng-container>
+
+                    <ng-container matColumnDef="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>
+
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                    </tr>
+                </table>
+
+                <mat-paginator class="background-style" #paginator [pageSize]="50"
+                    [pageSizeOptions]="[25, 50, 100, 250]">
+                </mat-paginator>
+            </div>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,123 @@
+.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: #81868a;
+            }
+        }
+    }
+}
+
+.table-header-row {
+  display: flex;
+  align-items: center;
+
+  .col {
+      display: flex;
+      flex-direction: column;
+      .desc {
+          font-size: .8rem;
+          color: #81868a;
+      }
+      .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;
+}
@@ -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 { ProjectMembersComponent } from './project-members.component';
+
+describe('ProjectMembersComponent', () => {
+  let component: ProjectMembersComponent;
+  let fixture: ComponentFixture<ProjectMembersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectMembersComponent],
+      imports: [
+        NoopAnimationsModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTableModule,
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectMembersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,120 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTable } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+import { tap } from 'rxjs/operators';
+import { ProjectMember, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
+import { ProjectService } from 'src/app/services/project.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { ProjectMembersDataSource } from './project-members-datasource';
+
+@Component({
+    selector: 'app-project-members',
+    templateUrl: './project-members.component.html',
+    styleUrls: ['./project-members.component.scss'],
+})
+export class ProjectMembersComponent implements AfterViewInit {
+    public project!: ProjectView.AsObject;
+    public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
+    public disabled: boolean = false;
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
+    public dataSource!: ProjectMembersDataSource;
+    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'];
+
+    constructor(private projectService: ProjectService,
+        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');
+            });
+        });
+    }
+
+    public ngAfterViewInit(): void {
+        this.paginator.page
+            .pipe(
+                tap(() => this.loadMembersPage()),
+            )
+            .subscribe();
+
+    }
+
+    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('Removed successfully');
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
+        }));
+    }
+
+    public removeMember(member: ProjectMember.AsObject): void {
+        this.projectService.RemoveProjectMember(this.project.projectId, 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 openAddMember(): void {
+
+        // TODO
+        // const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
+        //     data: {
+        //         creationType: this.project.type ===
+        //             ProjectType.PROJECTTYPE_GRANTED ? CreationType.PROJECT_GRANTED :
+        //             ProjectType.PROJECTTYPE_OWNED ? CreationType.PROJECT_OWNED : undefined,
+        //         projectId: this.project.id,
+        //     },
+        //     width: '400px',
+        // });
+
+        // dialogRef.afterClosed().subscribe(resp => {
+        //     if (resp) {
+        //         const users: User.AsObject[] = resp.users;
+        //         const roles: string[] = resp.roles;
+
+        //         if (users && users.length && roles && roles.length) {
+        //             Promise.all(users.map(user => {
+        //                 return this.projectService.AddProjectMember(this.project.id, user.id, roles);
+        //             })).then(() => {
+        //                 this.toast.showError('members added');
+        //             }).catch(error => {
+        //                 this.toast.showError(error.message);
+        //             });
+        //         }
+        //     }
+        // });
+    }
+}
@@ -0,0 +1,42 @@
+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 { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+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 { ProjectMembersRoutingModule } from './project-members-routing.module';
+import { ProjectMembersComponent } from './project-members.component';
+
+
+@NgModule({
+    declarations: [ProjectMembersComponent],
+    imports: [
+        ProjectMembersRoutingModule,
+        CommonModule,
+        MatAutocompleteModule,
+        HasRoleModule,
+        MatChipsModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatIconModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTooltipModule,
+        ReactiveFormsModule,
+        MatProgressSpinnerModule,
+        FormsModule,
+        TranslateModule,
+    ],
+})
+export class ProjectMembersModule { }
@@ -31,7 +31,6 @@ export class ProjectRolesDataSource extends DataSource<ProjectRole.AsObject> {
            catchError(() => of([])),
            finalize(() => this.loadingSubject.next(false)),
        ).subscribe(roles => {
-            console.log(roles);
            this.rolesSubject.next(roles);
        });
    }
@@ -48,7 +48,6 @@ export class SearchProjectAutocompleteComponent {
                }),
                // finalize(() => this.isLoading = false),
            ).subscribe((projects) => {
-                console.log(projects.toObject().resultList);
                this.isLoading = false;
                this.filteredProjects = projects.toObject().resultList;
            });
@@ -48,11 +48,9 @@ export class SearchRolesAutocompleteComponent {
                    return from(this.projectService.SearchProjectRoles(this.projectId, 10, 0, [query]));
                }),
            ).subscribe((roles) => {
-                console.log(roles.toObject().resultList);
                this.isLoading = false;
                this.filteredRoles = roles.toObject().resultList;
            }, error => {
-                console.log(error);
                this.isLoading = false;
            });
    }