fix(console): cleanup structure, role guard, paginated requests, cleanup policies, toast i18n, view timestamp, preloading strategy, maennchenfindings, fix passwordchange (#483)

* routes, move grid to list comopnent

* rename app list component, move to project sub

* add owned-project-detail child module

* seperate pipes

* set password validators only if needed

* create org initialize without pwd

* no caps

* self xss message

* fix user table

* fix project member paginator

* fix project members pagination, user grant pag

* move project grants, fix imports

* fix owned project detail imports

* use pipe and directives

* ng content bindings, rem custom schemas

* i18n, fix error toast parameter

* toast i18n

* side background

* fix: sequence, add timestamp

* audit

* fix metanav background

* org domain label

* cleanup policy component

* shorten user grant roles, mk cols visible as bind

* move user components, show otp only if available

* preload modules

* fix password change

* fix org create buttons

* class css

console/src/app/modules/project-members/project-members-datasource.ts

@@ -25,8 +25,7 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
         const offset = pageIndex * pageSize;
 
         this.loadingSubject.next(true);
-        console.log(grantId);
-        // TODO
+
         const promise: Promise<ProjectMemberSearchResponse> | undefined =
             projectType === ProjectType.PROJECTTYPE_OWNED ?
                 this.projectService.SearchProjectMembers(projectId, pageSize, offset) :

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

@@ -98,7 +98,7 @@
                             <mat-form-field class="form-field" appearance="outline" *ngIf="project">
                                 <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
                                 <mat-select [(ngModel)]="member.rolesList" multiple
-                                    [disabled]="(['project.member.write:'+project.projectId] | hasRole) == false"
+                                    [disabled]="([('project.member.write:' + project.projectId)] | hasRole | async) == false"
                                     (selectionChange)="updateRoles(member, $event)">
                                     <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
                                         {{ 'ROLES.'+role | translate }}
@@ -113,8 +113,9 @@
                     </tr>
                 </table>
 
-                <mat-paginator class="background-style" #paginator [pageSize]="50"
-                    [pageSizeOptions]="[25, 50, 100, 250]">
+                <mat-paginator *ngIf="dataSource" class="background-style" #paginator [pageSize]="INITIALPAGESIZE"
+                    [length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]"
+                    (page)="changePage($event)">
                 </mat-paginator>
             </div>
         </div>

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

@@ -1,7 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
 import { MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
@@ -13,12 +13,14 @@ import { ToastService } from 'src/app/services/toast.service';
 import { CreationType, MemberCreateDialogComponent } from '../add-member-dialog/member-create-dialog.component';
 import { ProjectMembersDataSource } from './project-members-datasource';
 
+
 @Component({
     selector: 'app-project-members',
     templateUrl: './project-members.component.html',
     styleUrls: ['./project-members.component.scss'],
 })
 export class ProjectMembersComponent {
+    public INITIALPAGESIZE: number = 25;
     public project!: ProjectView.AsObject | ProjectGrantView.AsObject;
     public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
     public disabled: boolean = false;
@@ -50,15 +52,19 @@ export class ProjectMembersComponent {
                         this.project = project.toObject();
                         this.projectName = this.project.name;
                         this.dataSource = new ProjectMembersDataSource(this.projectService);
-                        this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, 25);
+                        this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, this.INITIALPAGESIZE);
                     });
                 } else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
-                    console.log(params.projectid, params.grantid);
                     this.projectService.GetGrantedProjectByID(params.projectid, params.grantid).then(project => {
                         this.project = project.toObject();
                         this.projectName = this.project.projectName;
                         this.dataSource = new ProjectMembersDataSource(this.projectService);
-                        this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, 25, this.grantId);
+                        this.dataSource.loadMembers(this.project.projectId,
+                            this.projectType,
+                            0,
+                            this.INITIALPAGESIZE,
+                            this.grantId,
+                        );
                     });
                 }
             });
@@ -149,7 +155,7 @@ export class ProjectMembersComponent {
         if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
             this.projectService.ChangeProjectMember(this.project.projectId, member.userId, selectionChange.value)
                 .then((newmember: ProjectMember) => {
-                    this.toast.showInfo('Member changed');
+                    this.toast.showInfo('PROJECT.TOAST.MEMBERCHANGED', true);
                 }).catch(error => {
                     this.toast.showError(error);
                 });
@@ -157,10 +163,14 @@ export class ProjectMembersComponent {
             this.projectService.ChangeProjectGrantMember(this.project.projectId,
                 this.grantId, member.userId, selectionChange.value)
                 .then((newmember: ProjectMember) => {
-                    this.toast.showInfo('Member changed');
+                    this.toast.showInfo('PROJECT.TOAST.MEMBERCHANGED', true);
                 }).catch(error => {
                     this.toast.showError(error);
                 });
         }
     }
+
+    public changePage(event: PageEvent): void {
+        this.dataSource.loadMembers(this.project.projectId, this.projectType, event.pageIndex, event.pageSize, this.grantId);
+    }
 }

console/src/app/modules/project-members/project-members.module.ts

@@ -15,7 +15,7 @@ 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 { PipesModule } from 'src/app/pipes/pipes.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
 
 import { ProjectMembersRoutingModule } from './project-members-routing.module';
 import { ProjectMembersComponent } from './project-members.component';
@@ -42,7 +42,7 @@ import { ProjectMembersComponent } from './project-members.component';
         MatProgressSpinnerModule,
         FormsModule,
         TranslateModule,
-        PipesModule,
+        HasRolePipeModule,
     ],
 })
 export class ProjectMembersModule { }