feat(console): user memberships, generic member create dialog, fix user autocomplete emitter (#606)

* load manager mgmtservice, user service

* add org memberships

* membership component, generic member creation

* refactor member create dialog

* project autocomplete context

* create batch managers in user component

* project context wrapper

* emit on user removal, preselect user on init

* membership avatar style, service

* auth user memberships, navigate to target

* cursor fix, avatar gen

* lint

* i18n fix

* remove role translations

* membership detail page, i18n

* fix role label i18n, after view init loader

* remove projectid from grant remove

* fix iam race condition

* refresh table ts, fix no permission project search

* change membership colors

* refresh table everywhere, replace assets, routing

* fix logo header size

* lint, fix project grant removal

* timestmp for p mem, user list, grants, p list (#615)

* npm audit

* update deps, resolve vulnerability

* fix tslint config

* update lock

* load 20 changes at once

* Update console/src/assets/i18n/de.json

Co-authored-by: Florian Forster <[email protected]>

* Update console/src/assets/i18n/de.json

Co-authored-by: Florian Forster <[email protected]>

* Update console/src/assets/i18n/en.json

Co-authored-by: Florian Forster <[email protected]>

* membership i18n

Co-authored-by: Florian Forster <[email protected]>

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

@@ -132,7 +132,6 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
         const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
             data: {
                 creationType: CreationType.PROJECT_GRANTED,
-                projectId: this.project.projectId,
             },
             width: '400px',
         });

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

@@ -9,88 +9,66 @@
 </div>
 
 <div *ngIf="!grid && grantedProjectList">
-    <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?.data?.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>
+    <app-refresh-table (refreshed)="refreshPage()" [dataSize]="totalResult" [timestamp]="viewTimestamp"
+        [selection]="selection" [loading]="loading$ | async">
+
+        <div class="table-wrapper">
+            <table class="table background-style" mat-table [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="name">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
+                    <td mat-cell *matCellDef="let project"> {{project.projectName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="resourceOwnerName">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
+                    <td class="pointer" mat-cell *matCellDef="let project">
+                        {{project.resourceOwnerName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="state">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let project"><span
+                            *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
+                </ng-container>
+
+                <ng-container matColumnDef="creationDate">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let project">
+                        <span
+                            *ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+                    </td>
+                </ng-container>
+
+
+                <ng-container matColumnDef="changeDate">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let project">
+                        <span
+                            *ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                    [routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
+
+            </table>
+            <mat-paginator class="paginator background-style" #paginator [length]="totalResult" [pageSize]="10"
+                [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
         </div>
-        <span class="fill-space"></span>
-        <div @list class="action-btns" *ngIf="selection.hasValue()">
-            <button @animate (click)="deactivateSelectedProjects()"
-                matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
-                <mat-icon svgIcon="mdi_light_off"></mat-icon>
-            </button>
-            <button @animate (click)="reactivateSelectedProjects()"
-                matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
-                <mat-icon svgIcon="mdi_light_on"></mat-icon>
-            </button>
-        </div>
-    </div>
-    <div class="table-wrapper">
-        <div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
-            <mat-spinner diameter="50"></mat-spinner>
-        </div>
-        <table class="table background-style" mat-table [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="name">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
-                <td mat-cell *matCellDef="let project"> {{project.projectName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="resourceOwnerName">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let project">
-                    {{project.resourceOwnerName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="state">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
-                <td mat-cell *matCellDef="let project"><span
-                        *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
-            </ng-container>
-
-            <ng-container matColumnDef="creationDate">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
-                <td mat-cell *matCellDef="let project">
-                    <span
-                        *ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
-                </td>
-            </ng-container>
-
-
-            <ng-container matColumnDef="changeDate">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
-                <td mat-cell *matCellDef="let project">
-                    <span
-                        *ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
-                </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
-                [routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
-
-        </table>
-        <mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
-    </div>
+    </app-refresh-table>
 </div>

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.scss

@@ -10,47 +10,9 @@
   }
 }
 
-.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;
-  }
-
-  .action-btns {
-    display: flex;
-    align-items: center;
-  }
-
-  .icon-button {
-    margin-right: .5rem;
-  }
-}
-
 .table-wrapper {
   overflow: auto;
 
-  .spinner-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .table,
   .paginator {
     width: 100%;

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.ts

@@ -1,10 +1,11 @@
 import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { PageEvent } from '@angular/material/paginator';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { ProjectGrantView } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
@@ -36,8 +37,11 @@ import { ToastService } from 'src/app/services/toast.service';
 })
 export class GrantedProjectListComponent implements OnInit, OnDestroy {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
+
     public dataSource: MatTableDataSource<ProjectGrantView.AsObject> =
         new MatTableDataSource<ProjectGrantView.AsObject>();
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
 
     public grantedProjectList: ProjectGrantView.AsObject[] = [];
     public displayedColumns: string[] = ['select', 'name', 'resourceOwnerName', 'state', 'creationDate', 'changeDate'];
@@ -86,8 +90,12 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
     private async getData(limit: number, offset: number): Promise<void> {
         this.loadingSubject.next(true);
         this.projectService.SearchGrantedProjects(limit, offset).then(res => {
-            this.grantedProjectList = res.toObject().resultList;
-            this.totalResult = res.toObject().totalResult;
+            const response = res.toObject();
+            this.grantedProjectList = response.resultList;
+            this.totalResult = response.totalResult;
+            if (response.viewTimestamp) {
+                this.viewTimestamp = response.viewTimestamp;
+            }
             if (this.totalResult > 5) {
                 this.grid = false;
             }
@@ -100,28 +108,8 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
         });
     }
 
-    public reactivateSelectedProjects(): void {
-        const promises = this.selection.selected.map(project => {
-            this.projectService.ReactivateProject(project.id);
-        });
-
-        Promise.all(promises).then(() => {
-            this.toast.showInfo('PROJECT.TOAST.REACTIVATED', true);
-        }).catch(error => {
-            this.toast.showError(error);
-        });
-    }
-
-
-    public deactivateSelectedProjects(): void {
-        const promises = this.selection.selected.map(project => {
-            this.projectService.DeactivateProject(project.id);
-        });
-
-        Promise.all(promises).then(() => {
-            this.toast.showInfo('PROJECT.TOAST.DEACTIVATED', true);
-        }).catch(error => {
-            this.toast.showError(error);
-        });
+    public refreshPage(): void {
+        this.selection.clear();
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
     }
 }

console/src/app/pages/projects/granted-projects/granted-projects.module.ts

@@ -22,6 +22,7 @@ import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { ContributorsModule } from 'src/app/modules/contributors/contributors.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { ProjectRolesModule } from 'src/app/modules/project-roles/project-roles.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
@@ -73,6 +74,7 @@ import { GrantedProjectsComponent } from './granted-projects.component';
         SharedModule,
         LocalizedDatePipeModule,
         MemberCreateDialogModule,
+        RefreshTableModule,
     ],
 })
 export class GrantedProjectsModule { }