feat(console): angular 10, iam settings, timestamp to date pipe, org iam indicator, general gui fixes and i18n (#270)

* prettier member dialog, iam indicator

* changes i18n

* fix timestamp conversion, timestamp to date pipe

* rm create, update iam policy

* add iam policy

* add iam section, members component

* add iam contributors

* gen admin protos

* iam member search

* update angular

* update cdk material

* add module for iam members

* add iam roles to member dialog

* home shortcuts

* project view, i18n

* lint

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

@@ -24,17 +24,17 @@
         <div class="text-part">
             <span *ngIf="item.changeDate" class="top">last modified on
                 {{
-                        dateFromTimestamp(item.changeDate) | date: 'EEE dd. MMM, HH:mm'
+                        item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
             }}</span>
             <span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
-            <span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span>
+            <span class="description" *ngIf="item.grantedOrgName">{{item.grantedOrgName}}</span>
+            <!-- <span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span> -->
             <span *ngIf="item.changeDate" class="created">created on
                 {{
-                        dateFromTimestamp(item.creationDate) | date: 'EEE dd. MMM, HH:mm'
+                        item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
             }}</span>
             <span class="fill-space"></span>
             <div class="icons">
-                <mat-icon class="icon">apps</mat-icon>
             </div>
         </div>
         <button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
@@ -53,4 +53,4 @@
         </mat-menu>
     </div>
     <p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
-</div>
+</div>

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

@@ -2,7 +2,6 @@ import { animate, animateChild, query, stagger, style, transition, trigger } fro
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Router } from '@angular/router';
-import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { ProjectGrantView, ProjectState, 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';
@@ -57,9 +56,4 @@ export class GrantedProjectGridComponent {
     public addItem(): void {
         this.newClicked.emit(true);
     }
-
-    public dateFromTimestamp(date: Timestamp.AsObject): any {
-        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
-        return ts;
-    }
 }

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

@@ -78,7 +78,7 @@
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
                 <td mat-cell *matCellDef="let project">
                     <span
-                        *ngIf="project.creationDate">{{dateFromTimestamp(project.creationDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
+                        *ngIf="project.creationDate">{{project.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'}}</span>
                 </td>
             </ng-container>
 
@@ -87,7 +87,7 @@
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
                 <td mat-cell *matCellDef="let project">
                     <span
-                        *ngIf="project.changeDate">{{dateFromTimestamp(project.changeDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
+                        *ngIf="project.changeDate">{{project.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'}}</span>
                 </td>
             </ng-container>
 

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

@@ -5,7 +5,6 @@ import { 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';
@@ -99,11 +98,6 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
         });
     }
 
-    public dateFromTimestamp(date: Timestamp.AsObject): any {
-        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
-        return ts;
-    }
-
     public reactivateSelectedProjects(): void {
         const promises = this.selection.selected.map(project => {
             this.projectService.ReactivateProject(project.id);

console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.html

@@ -25,17 +25,17 @@
         <div class="text-part">
             <span *ngIf="item.changeDate" class="top">last modified on
                 {{
-                        dateFromTimestamp(item.changeDate) | date: 'EEE dd. MMM, HH:mm'
+                        item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
             }}</span>
             <span class="name" *ngIf="item.name">{{ item.name }}</span>
-            <span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span>
+            <!-- <span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span> -->
+
             <span *ngIf="item.changeDate" class="created">created on
                 {{
-                        dateFromTimestamp(item.creationDate) | date: 'EEE dd. MMM, HH:mm'
+                        item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
             }}</span>
             <span class="fill-space"></span>
             <div class="icons">
-                <mat-icon class="icon">apps</mat-icon>
             </div>
         </div>
         <button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
@@ -56,8 +56,10 @@
 
     <p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
 
-    <div class="add-project-button card" (click)="addItem()">
-        <mat-icon class="icon">add</mat-icon>
-        <span>Add new project</span>
-    </div>
-</div>
+    <ng-template appHasRole [appHasRole]="['project.write']">
+        <div class="add-project-button card" (click)="addItem()">
+            <mat-icon class="icon">add</mat-icon>
+            <span>Add new project</span>
+        </div>
+    </ng-template>
+</div>

console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.ts

@@ -2,7 +2,6 @@ import { animate, animateChild, query, stagger, style, transition, trigger } fro
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Router } from '@angular/router';
-import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { ProjectState, 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';
@@ -58,11 +57,6 @@ export class OwnedProjectGridComponent {
         this.newClicked.emit(true);
     }
 
-    public dateFromTimestamp(date: Timestamp.AsObject): any {
-        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
-        return ts;
-    }
-
     public reactivateProjects(selected: ProjectView.AsObject[]): void {
         Promise.all([selected.map(proj => {
             return this.projectService.ReactivateProject(proj.projectId);

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

@@ -30,9 +30,11 @@
                 <mat-icon svgIcon="mdi_light_on"></mat-icon>
             </button>
         </div>
-        <a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
-            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
-        </a>
+        <ng-template appHasRole [appHasRole]="['project.write']">
+            <a class="add-button" [routerLink]="[ '/projects', 'create']" 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="(loading$ | async) || (loading$ | async)">
@@ -69,7 +71,7 @@
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
                 <td mat-cell *matCellDef="let project">
                     <span
-                        *ngIf="project.creationDate">{{dateFromTimestamp(project.creationDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
+                        *ngIf="project.creationDate">{{project.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'}}</span>
                 </td>
             </ng-container>
 
@@ -78,7 +80,7 @@
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
                 <td mat-cell *matCellDef="let project">
                     <span
-                        *ngIf="project.changeDate">{{dateFromTimestamp(project.changeDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
+                        *ngIf="project.changeDate">{{project.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'}}</span>
                 </td>
             </ng-container>
 
@@ -90,4 +92,4 @@
         <mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
             (page)="changePage($event)"></mat-paginator>
     </div>
-</div>
+</div>

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

@@ -5,7 +5,6 @@ import { 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 { ProjectView } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
@@ -103,11 +102,6 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
         this.ownedProjectList = [];
     }
 
-    public dateFromTimestamp(date: Timestamp.AsObject): any {
-        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
-        return ts;
-    }
-
     public reactivateSelectedProjects(): void {
         const promises = this.selection.selected.map(project => {
             this.projectService.ReactivateProject(project.projectId);

console/src/app/pages/projects/project-applications/project-applications.component.html

@@ -12,7 +12,7 @@
     <span class="fill-space"></span>
     <!-- <button [disabled]="disabled" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button"
         mat-icon-button *ngIf="selection.hasValue()">
-        <mat-icon>delete_outline</mat-icon>
+        <i class="las la-trash"></i>
     </button> -->
     <ng-template appHasRole [appHasRole]="['project.app.write']">
         <a [disabled]="disabled" class="add-button" [routerLink]="[ '/projects', projectId, 'apps', 'create']"

console/src/app/pages/projects/project-grant-members/project-grant-members.component.html

@@ -14,8 +14,8 @@
     </div>
     <span class="fill-space"></span>
     <button (click)="removeProjectMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
-        class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
-        <mat-icon>remove_circle</mat-icon>
+        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>

console/src/app/pages/projects/project-grants/project-grants.component.html

@@ -12,8 +12,8 @@
     <span class="fill-space"></span>
     <ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']">
         <button [disabled]="disabled" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button"
-            mat-icon-button *ngIf="selection.hasValue()">
-            <mat-icon>delete_outline</mat-icon>
+            mat-icon-button *ngIf="selection.hasValue()" color="warn">
+            <i class="las la-trash"></i>
         </button>
     </ng-template>
     <ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']">
@@ -59,13 +59,13 @@
         <ng-container matColumnDef="creationDate">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CREATIONDATE' | translate }} </th>
             <td class="pointer" mat-cell *matCellDef="let grant">
-                {{dateFromTimestamp(grant.creationDate) | date: 'dd. MMM, HH:mm' }} </td>
+                {{grant.creationDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="changeDate">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
             <td class="pointer" mat-cell *matCellDef="let grant">
-                {{dateFromTimestamp(grant.changeDate) | date: 'dd. MMM, HH:mm' }} </td>
+                {{grant.changeDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
 
         </ng-container>
 

console/src/app/pages/projects/project-grants/project-grants.component.ts

@@ -4,7 +4,6 @@ import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/cor
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
-import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { tap } from 'rxjs/operators';
 import { ProjectGrant, ProjectMemberView } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
@@ -131,9 +130,4 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
             this.toast.showInfo(error.message);
         });
     }
-
-    public dateFromTimestamp(date: Timestamp.AsObject): any {
-        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
-        return ts;
-    }
 }

console/src/app/pages/projects/project-members/project-members.component.html

@@ -25,10 +25,10 @@
                 <span class="fill-space"></span>
                 <ng-template appHasRole
                     [appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
-                    <button (click)="removeProjectMemberSelection()"
+                    <button (click)="removeProjectMemberSelection()" color="warn"
                         matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
                         *ngIf="selection.hasValue()">
-                        <mat-icon>remove_circle</mat-icon>
+                        <i class="las la-trash"></i>
                     </button>
                 </ng-template>
                 <ng-template appHasRole

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

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from 'src/app/guards/auth.guard';
+import { RoleGuard } from 'src/app/guards/role.guard';
 
 import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
 import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
@@ -14,6 +16,10 @@ const routes: Routes = [
     {
         path: 'create',
         loadChildren: () => import('../project-create/project-create.module').then(m => m.ProjectCreateModule),
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['project.write'],
+        },
     },
     {
         path: ':id/grant/:grantId',

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

@@ -25,6 +25,7 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
 import { ChangesModule } from '../../modules/changes/changes.module';
 import { ProjectRolesModule } from '../../modules/project-roles/project-roles.module';
@@ -95,6 +96,7 @@ import { ProjectsComponent } from './projects.component';
         CardModule,
         MatTooltipModule,
         MatSortModule,
+        PipesModule,
         OrgContributorsModule,
         TranslateModule.forChild({
             loader: {