fix(console): distinct user grant searches and creates, project grant member edit, import cleanup (#342)

* project grant member edit * project grant member dialog, import cleanup * readd project roles * user login-methods cleanup * fix sw config, user grant context * delete user grants, context for creation, search * contributor box shadow * password to detail view * user detail notification * lint
2026-11-08 07:05:12 +00:00 · 2020-07-06 16:17:06 +02:00
parent c8cdbe136c
commit 9935784461
56 changed files with 910 additions and 573 deletions
@@ -11,8 +11,8 @@
    <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)">
-            <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 *ngIf="user && user.displayName" class="small-avatar"
+                [name]="user.displayName ? user.displayName : ''" [size]="32">
            </app-avatar>

            <div class="col">
@@ -17,10 +17,7 @@ export class AccountsCardComponent implements OnInit {
    @Output() public close: EventEmitter<void> = new EventEmitter();
    public users: UserSessionView.AsObject[] = [];
    public loadingUsers: boolean = false;
-    constructor(public authService: AuthService, private router: Router, private userService: AuthUserService) { }
-
-    public ngOnInit(): void {
-        this.loadingUsers = true;
+    constructor(public authService: AuthService, private router: Router, private userService: AuthUserService) {
        this.userService.getMyUserSessions().then(sessions => {
            this.users = sessions.toObject().userSessionsList;

@@ -33,6 +30,10 @@ export class AccountsCardComponent implements OnInit {
        });
    }

+    public ngOnInit(): void {
+        this.loadingUsers = true;
+    }
+
    public editUserProfile(): void {
        this.router.navigate(['user/me']);
        this.close.emit();
@@ -23,12 +23,10 @@ export class ChangesComponent implements OnInit {
    @Input() public sortDirectionAsc: boolean = true;
    public bottom: boolean = false;

-    // Source data
    private _done: BehaviorSubject<any> = new BehaviorSubject(false);
    private _loading: BehaviorSubject<any> = new BehaviorSubject(false);
    private _data: BehaviorSubject<any> = new BehaviorSubject([]);

-    // Observable data
    loading: Observable<boolean> = this._loading.asObservable();
    public data!: Observable<Change.AsObject[]>;
    public changes!: Changes.AsObject;
@@ -19,6 +19,4 @@ export class MetaLayoutComponent {
        .pipe(map(result => {
            return result.matches;
        }));
-
-
 }
@@ -7,10 +7,8 @@
                <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)); else thumbavatar"
-                            class="avatar dontcloseonclick"
-                            [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
+                        <app-avatar *ngIf="member && member.firstName && member.lastName; else thumbavatar"
+                            class="avatar dontcloseonclick" [name]="member.firstName + ' '+ member.lastName"
                            [size]="32">
                        </app-avatar>
                        <ng-template #thumbavatar>
@@ -30,11 +30,16 @@
        align-items: center;
  
        .avatar-circle {
-          float: left;
-          margin: 0 8px 0 -15px;
-          height: 32px;
-          width: 32px;
-          border-radius: 50%;
+            float: left;
+            margin: 0 8px 0 -15px;
+            height: 32px;
+            width: 32px;
+            border-radius: 50%;
+            &:not(:first-child) {
+                -webkit-box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
+                -moz-box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
+                box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
+            }
        }

        .add-img {
@@ -1,27 +0,0 @@
-<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>
@@ -1,16 +0,0 @@
-.full-width {
-    width: 100%;
-}
-  
-.action {
-    display: flex;
-    justify-content: flex-end;
-  
-    .ok-button {
-      margin-left: 0.5rem;
-    }
-  
-    button {
-      border-radius: 0.5rem;
-    }
-}
@@ -1,25 +0,0 @@
-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();
-    });
-});
@@ -1,40 +0,0 @@
-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);
-    }
-}
@@ -1,62 +0,0 @@
-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();
-    }
-}
@@ -1,99 +0,0 @@
-<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>
@@ -1,80 +0,0 @@
-    
-.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;
-}
@@ -1,34 +0,0 @@
-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();
-    });
-});
@@ -1,127 +0,0 @@
-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);
-                    });
-                });
-
-            }
-        });
-    }
-}
@@ -1,59 +0,0 @@
-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 { }
@@ -38,7 +38,6 @@ export class ProjectMembersComponent implements AfterViewInit {
        private route: ActivatedRoute) {
        this.route.data.pipe(take(1)).subscribe(data => {
            this.projectType = data.type;
-            console.log(data);

            this.getRoleOptions();

@@ -156,6 +155,5 @@ export class ProjectMembersComponent implements AfterViewInit {
            }).catch(error => {
                this.toast.showError(error.message);
            });
-
    }
 }
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+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';
@@ -28,6 +29,7 @@ import { ProjectRolesComponent } from './project-roles.component';
        HasRoleModule,
        MatTableModule,
        MatPaginatorModule,
+        MatDialogModule,
        MatFormFieldModule,
        FormsModule,
        ReactiveFormsModule,
@@ -1,9 +1,21 @@
 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 {
+    UserGrant,
+    UserGrantSearchKey,
+    UserGrantSearchQuery,
+    UserGrantSearchResponse,
+} from 'src/app/proto/generated/management_pb';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';

+export enum UserGrantContext {
+    // AUTHUSER = 'authuser',
+    USER = 'user',
+    OWNED_PROJECT = 'owned',
+    GRANTED_PROJECT = 'granted',
+}
+
 export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
    public totalResult: number = 0;
    public grantsSubject: BehaviorSubject<UserGrant.AsObject[]> = new BehaviorSubject<UserGrant.AsObject[]>([]);
@@ -14,17 +26,54 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
        super();
    }

-    public loadGrants(filter: UserGrantSearchKey, userId: string, pageIndex: number, pageSize: number): void {
+    public loadGrants(
+        context: UserGrantContext,
+        pageIndex: number,
+        pageSize: number,
+        data: {
+            projectId?: string;
+            grantId?: string;
+            userId?: string;
+        },
+        queries?: UserGrantSearchQuery[],
+    ): void {
        const offset = pageIndex * pageSize;

        this.loadingSubject.next(true);

-        const query = new UserGrantSearchQuery();
-        query.setKey(filter);
-        query.setValue(userId);
+        switch (context) {
+            case UserGrantContext.USER:
+                if (data && data.userId) {
+                    const userfilter = new UserGrantSearchQuery();
+                    userfilter.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID);
+                    userfilter.setValue(data.userId);
+                    if (queries) {
+                        queries.push(userfilter);
+                    } else {
+                        queries = [userfilter];
+                    }

-        const queries: UserGrantSearchQuery[] = [query];
-        from(this.userService.SearchUserGrants(10, 0, queries)).pipe(
+                    const promise = this.userService.SearchUserGrants(10, 0, queries);
+                    this.loadResponse(promise);
+                }
+                break;
+            case UserGrantContext.OWNED_PROJECT:
+                if (data && data.projectId) {
+                    const promise1 = this.userService.SearchProjectUserGrants(data.projectId, 10, 0, queries);
+                    this.loadResponse(promise1);
+                }
+                break;
+            case UserGrantContext.GRANTED_PROJECT:
+                if (data && data.grantId) {
+                    const promise2 = this.userService.SearchProjectGrantUserGrants(data.grantId, 10, 0, queries);
+                    this.loadResponse(promise2);
+                }
+                break;
+        }
+    }
+
+    private loadResponse(promise: Promise<UserGrantSearchResponse>): void {
+        from(promise).pipe(
            map(resp => {
                this.totalResult = resp.toObject().totalResult;
                console.log(resp.toObject().resultList);
@@ -11,11 +11,11 @@
    </div>
    <span class="fill-space"></span>
    <button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button
-        *ngIf="selection.hasValue() && allowDelete">
+        (click)="deleteGrantSelection()" *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-raised-button [routerLink]="routerLink">
        <mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
    </a>
 </div>
@@ -86,7 +86,7 @@
                    </button>
                </ng-container>
                <ng-template #showOptions>
-                    <mat-form-field class="form-field" appearance="outline" *ngIf="filterValue">
+                    <mat-form-field class="form-field" appearance="outline" *ngIf="projectId">
                        <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
                        <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
                            (selectionChange)="updateRoles(grant, $event)">
@@ -4,12 +4,12 @@ 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 { ProjectGrant, ProjectRoleView, UserGrant } 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';
+import { UserGrantContext, UserGrantsDataSource } from './user-grants-datasource';

@Component({
    selector: 'app-user-grants',
@@ -17,8 +17,9 @@ import { UserGrantsDataSource } from './user-grants-datasource';
    styleUrls: ['./user-grants.component.scss'],
 })
 export class UserGrantsComponent implements OnInit, AfterViewInit {
-    @Input() filterValue: string = '';
-    @Input() filter: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID;
+    // @Input() filterValue: string = '';
+    // @Input() filter: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID;
+    @Input() context: UserGrantContext = UserGrantContext.USER;
    public grants: UserGrant.AsObject[] = [];

    public dataSource!: UserGrantsDataSource;
@@ -29,7 +30,12 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
    @Input() allowCreate: boolean = false;
    @Input() allowDelete: boolean = false;

+    @Input() userId: string = '';
+    @Input() projectId: string = '';
+    @Input() grantId: string = '';
+
    public roleOptions: ProjectRoleView.AsObject[] = [];
+    public routerLink: any = [''];

    constructor(
        private userService: MgmtUserService,
@@ -44,11 +50,35 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {

    public ngOnInit(): void {
        this.dataSource = new UserGrantsDataSource(this.userService);
-        this.dataSource.loadGrants(this.filter, this.filterValue, 0, 25);
+        const data = {
+            projectId: this.projectId,
+            grantId: this.grantId,
+            userId: this.userId,
+        };
+        console.log(this.context);

-        if (this.filter === UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID) {
-            this.getRoleOptions(this.filterValue);
+        switch (this.context) {
+            case UserGrantContext.OWNED_PROJECT:
+                if (this.projectId) {
+                    this.getRoleOptions(this.projectId);
+                    this.routerLink = ['/grant-create', 'project', this.projectId];
+                }
+                break;
+            case UserGrantContext.GRANTED_PROJECT:
+                if (data && data.grantId) {
+                    this.routerLink = ['/grant-create', 'project', this.projectId, 'grant', this.grantId];
+                }
+                break;
+            case UserGrantContext.USER:
+                if (this.userId) {
+                    this.routerLink = ['/grant-create', 'user', this.userId];
+                }
+                break;
+            default:
+                this.routerLink = ['/grant-create'];
        }
+        console.log(data);
+        this.dataSource.loadGrants(this.context, 0, 25, data);
    }

    public ngAfterViewInit(): void {
@@ -61,10 +91,13 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {

    private loadGrantsPage(): void {
        this.dataSource.loadGrants(
-            this.filter,
-            this.filterValue,
+            this.context,
            this.paginator.pageIndex,
            this.paginator.pageSize,
+            {
+                projectId: this.projectId,
+                grantId: this.grantId,
+            },
        );
    }

@@ -81,7 +114,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
    }

    public loadRoleOptions(projectId: string): void {
-        if (this.filter === UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID) {
+        if (this.context === UserGrantContext.USER) {
            this.getRoleOptions(projectId);
        }
    }
@@ -103,4 +136,13 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
                this.toast.showError(error.message);
            });
    }
+
+    deleteGrantSelection(): void {
+        this.userService.BulkRemoveUserGrant(this.selection.selected.map(grant => grant.id)).then(() => {
+            this.toast.showInfo('Grants deleted');
+            this.loadGrantsPage();
+        }).catch(error => {
+            this.toast.showError(error.message);
+        });
+    }
 }