User and group details, add paginator and filter on permissions list

src/app/app.module.ts

@@ -310,7 +310,6 @@ import { DeletePermissionDialogComponent } from './components/permissions-manage
 import { AddRoleToGroupComponent } from './components/group-details/add-role-to-group/add-role-to-group.component';
 import {MatFormFieldModule} from "@angular/material/form-field";
 import { PermissionsFilterPipe } from './components/permissions-management/permissions-filter.pipe';
-import { PermissionsTypeFilterPipe } from './components/permissions-management/permissions-type-filter.pipe';
 import { DisplayPathPipe } from './components/permissions-management/display-path.pipe';
 import {RolePermissionsComponent} from "@components/role-management/role-detail/role-permissions/role-permissions.component";
 
@@ -535,10 +534,11 @@ import {RolePermissionsComponent} from "@components/role-management/role-detail/
     FilterCompletePipe,
     UserPermissionsComponent,
     PermissionsFilterPipe,
-    PermissionsTypeFilterPipe,
     FilterCompletePipe,
     DisplayPathPipe,
-    RolePermissionsComponent
+    RolePermissionsComponent,
+    DisplayPathPipe,
+    PermissionsFilterPipe,
   ],
   imports: [
     BrowserModule,

src/app/components/permissions-management/permissions-management.component.html

@@ -5,32 +5,21 @@
       (addPermissionEvent)="refresh()"></app-add-permission-line>
   </div>
   <div class="permission-content default-content">
+    <input type="text"
+             matInput
+             name="typeInput"
+             placeholder="Search by name"
+             [(ngModel)]="searchPermissions"
+             [matAutocomplete]="auto"
+             class="permission-filter"
+             (input)="changeAutocomplete($event.target.value)">
+    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+      <mat-option *ngFor="let option of filteredOptions | filterComplete: searchPermissions" [value]="option">
+        {{option.name}}
+      </mat-option>
+    </mat-autocomplete>
 
-
+    <div *ngFor="let permission of permissions | permissionsFilter: searchPermissions?.id | paginator: pageEvent">
-      Filter :
-
-        <mat-select [(ngModel)]="typeFilter" name="type"  placeholder="Type"
-                    (selectionChange)="changeType($event)"
-                    class="permission-filter">
-          <mat-option [value]="{value:'/', view:'/'}" selected>All</mat-option>
-          <mat-option *ngFor="let elt of typeValues" [value]="elt">{{elt.view}}</mat-option>
-        </mat-select>
-
-        <input type="text"
-               matInput
-               name="typeInput"
-               placeholder="Search by name"
-               [(ngModel)]="searchPermissions"
-               [matAutocomplete]="auto"
-               class="permission-filter"
-               (input)="changeAutocomplete($event.target.value)">
-        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-          <mat-option *ngFor="let option of filteredOptions | filterComplete: searchPermissions" [value]="option">
-            {{option.name}}
-          </mat-option>
-        </mat-autocomplete>
-
-    <div *ngFor="let permission of permissions | permissionsTypeFilter: typeFilter?.view | permissionsFilter: searchPermissions?.id | paginator: pageEvent">
       <app-permission-add-edit-line
               [permission]="permission"
               [server]="server"

src/app/components/permissions-management/permissions-management.component.scss

@@ -31,7 +31,6 @@
 
 .permission-filter {
   border-bottom: 1px solid;
-  width : 200px;
   margin: 5px;
   border-bottom-color: #b0bec5;
 }

src/app/components/permissions-management/permissions-management.component.ts

@@ -35,12 +35,6 @@ export class PermissionsManagementComponent implements OnInit {
   pageEvent: PageEvent | undefined;
   filteredOptions: IFormatedList[];
   options: string[] = [];
-  typeFilter: any;
-  typeValues = [
-    {value: '{project_id}', view:'projects'},
-    {value: '{image_path}', view:'images'},
-    {value: '{template_id}', view:'templates'},
-    {value: '{compute_id}', view:'computes'}]
 
   @ViewChild('dynamic', {
     read: ViewContainerRef
@@ -74,18 +68,6 @@ export class PermissionsManagementComponent implements OnInit {
     );
   }
 
-  changeType(typeValue: any) {
-    if (typeValue.value.value.match(this.apiInformationService.bracketIdRegex)) {
-      this.apiInformationService.getListByObjectId(this.server, typeValue.value.value)
-        .subscribe((data) => {
-          this.filteredOptions = data;
-        });
-    } else {
-      this.filteredOptions = this.apiInformationService.getIdByObjNameFromCache('');
-    }
-
-  }
-
   displayFn(value): string {
     return value && value.name ? value.name : '';
   }

src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts

@@ -1,8 +0,0 @@
-import { PermissionsTypeFilterPipe } from './permissions-type-filter.pipe';
-
-describe('PermissionsTypeFilterPipe', () => {
-  it('create an instance', () => {
-    const pipe = new PermissionsTypeFilterPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html

@@ -11,4 +11,5 @@
   <button *ngIf="side === 'LEFT'" mat-button (click)="onClick()">
     <mat-icon>keyboard_arrow_right</mat-icon>
   </button>
+
 </div>

src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts

@@ -28,8 +28,7 @@ export class EditablePermissionComponent implements OnInit {
 
   constructor() { }
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
-  }
 
 
   onClick() {

src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html

@@ -9,6 +9,19 @@
     </div>
     <div class="box deny"></div>
   </div>
+  <input type="text"
+         matInput
+         name="typeInput"
+         placeholder="Search by name"
+         [(ngModel)]="searchPermissions"
+         [matAutocomplete]="auto"
+         class="permission-filter"
+         (input)="changeAutocomplete($event.target.value)">
+  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+    <mat-option *ngFor="let option of filteredOptions | filterComplete: searchPermissions" [value]="option">
+      {{option.name}}
+    </mat-option>
+  </mat-autocomplete>
   <div>
     <button
       mat-button
@@ -23,6 +36,8 @@
     </button>
   </div>
 </div>
+
+
 <div class="editor">
   <div class="column">
     <div class="title">Owned</div>
@@ -31,9 +46,11 @@
       [permission]="permission"
       [server]="server"
       (click)="remove(permission)"
-      *ngFor="let permission of owned">
+      *ngFor="let permission of ownedArray | permissionsFilter: searchPermissions?.id | paginator: pageEventOwned">
 
     </app-editable-permission>
+    <mat-paginator [length]="ownedArray.length" (page)="pageEventOwned = $event"
+                   [pageSizeOptions]="[5, 20, 50, 100]"></mat-paginator>
   </div>
   <mat-divider [vertical]="true"></mat-divider>
   <div class="column">
@@ -43,8 +60,10 @@
       [permission]="permission"
       [server]="server"
       (click)="add(permission)"
-      *ngFor="let permission of available">
+      *ngFor="let permission of availableArray | permissionsFilter: searchPermissions?.id | paginator: pageEventAvailable">
 
     </app-editable-permission>
+    <mat-paginator [length]="availableArray.length" (page)="pageEventAvailable = $event"
+                   [pageSizeOptions]="[5, 20, 50, 100]"></mat-paginator>
   </div>
 </div>

src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss

@@ -7,7 +7,7 @@
 }
 
 .header {
-  margin-top: 5px;
+  margin: 10px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -45,3 +45,10 @@
 .deny {
   background-color: rgba(130, 8, 8, 0.36);
 }
+
+
+.permission-filter {
+  border-bottom: 1px solid;
+  margin: 5px;
+  border-bottom-color: #b0bec5;
+}

src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts

@@ -17,6 +17,8 @@ import {Permission} from "@models/api/permission";
 import {MatDialog} from "@angular/material/dialog";
 import {PermissionEditorValidateDialogComponent} from "@components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component";
 import { EventEmitter } from '@angular/core';
+import {ApiInformationService, IFormatedList} from "@services/api-information.service";
+import {PageEvent} from "@angular/material/paginator";
 
 @Component({
   selector: 'app-permission-editor',
@@ -24,16 +26,22 @@ import { EventEmitter } from '@angular/core';
   styleUrls: ['./permission-editor.component.scss']
 })
 export class PermissionEditorComponent implements OnInit {
-  server: Server;
+
   owned: Set<Permission>;
   available: Set<Permission>;
+  searchPermissions: any;
+  filteredOptions: IFormatedList[];
+  pageEventOwned: PageEvent | undefined;
+  pageEventAvailable: PageEvent | undefined;
 
+  @Input() server: Server;
   @Input() ownedPermissions: Permission[];
   @Input() availablePermissions: Permission[];
   @Output() updatedPermissions: EventEmitter<any> = new EventEmitter();
 
 
-  constructor(private dialog: MatDialog) {}
+  constructor(private dialog: MatDialog,
+              private apiInformationService: ApiInformationService) {}
 
   ngOnInit(): void {
     this.reset();
@@ -88,4 +96,20 @@ export class PermissionEditorComponent implements OnInit {
 
     return {add, remove};
   }
+
+  displayFn(value): string {
+    return value && value.name ? value.name : '';
+  }
+
+  changeAutocomplete(inputText) {
+    this.filteredOptions = this.apiInformationService.getIdByObjNameFromCache(inputText);
+  }
+
+  get ownedArray() {
+    return Array.from(this.owned.values())
+  }
+
+  get availableArray() {
+    return Array.from(this.available.values())
+  }
 }

src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html

@@ -12,5 +12,5 @@
     Edit {{role.name}} role permissions
   </div>
 </div>
-<app-permission-editor [ownedPermissions]="role.permissions" [availablePermissions]="permissions"
+<app-permission-editor [ownedPermissions]="role.permissions" [availablePermissions]="permissions" [server]="server"
 (updatedPermissions)="updatePermissions($event)"></app-permission-editor>

src/app/components/user-management/user-detail/user-detail.component.html

@@ -92,8 +92,10 @@
             <mat-icon>edit</mat-icon>
           </button>
         </div>
+
         <app-editable-permission
           [permission]="permission"
+          [server]="server"
           *ngFor="let permission of permissions">
         </app-editable-permission>
       </mat-tab>

src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html

@@ -12,5 +12,5 @@
     Edit {{user.username}} role permissions
   </div>
 </div>
-<app-permission-editor [ownedPermissions]="userPermissions" [availablePermissions]="permissions"
+<app-permission-editor [ownedPermissions]="userPermissions" [availablePermissions]="permissions" [server]="server"
                        (updatedPermissions)="updatePermissions($event)"></app-permission-editor>