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

2025-01-03 03:26:42 +00:00 · 2022-02-03 15:42:13 +00:00 · 2022-02-03 15:42:13 +00:00 · 5102039dbd
commit 5102039dbd
parent 7bff9b40de
13 changed files with 78 additions and 64 deletions
--- a/src/app/app.module.ts
+++ b/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,
--- a/src/app/components/permissions-management/permissions-management.component.html
+++ b/src/app/components/permissions-management/permissions-management.component.html
@ -5,17 +5,6 @@
      (addPermissionEvent)="refresh()"></app-add-permission-line>
  </div>
  <div class="permission-content default-content">
-
-
-      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"
@ -30,7 +19,7 @@
      </mat-option>
    </mat-autocomplete>

-    <div *ngFor="let permission of permissions | permissionsTypeFilter: typeFilter?.view | permissionsFilter: searchPermissions?.id | paginator: pageEvent">
+    <div *ngFor="let permission of permissions | permissionsFilter: searchPermissions?.id | paginator: pageEvent">
      <app-permission-add-edit-line
              [permission]="permission"
              [server]="server"
--- a/src/app/components/permissions-management/permissions-management.component.scss
+++ b/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;
 }
--- a/src/app/components/permissions-management/permissions-management.component.ts
+++ b/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 : '';
  }
--- a/src/app/components/permissions-management/permissions-type-filter.pipe.spec.ts
+++ b/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();
-  });
-});
--- a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.html
+++ b/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>
--- a/src/app/components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component.ts
+++ b/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() {
--- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.html
+++ b/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>
--- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.scss
+++ b/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;
+}
--- a/src/app/components/role-management/role-detail/permission-editor/permission-editor.component.ts
+++ b/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())
+  }
 }
--- a/src/app/components/role-management/role-detail/role-permissions/role-permissions.component.html
+++ b/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>
--- a/src/app/components/user-management/user-detail/user-detail.component.html
+++ b/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>
--- a/src/app/components/user-management/user-detail/user-permissions/user-permissions.component.html
+++ b/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>