feat(admin): filter groups by role

Enables filter groups by role and its assignment type on vo-groups, group-subgroups, and member-groups page.

Author: sarkapalkovicova

apps/admin-gui/src/app/shared/components/group-roles-filter/group-roles-filter.component.html

@@ -0,0 +1,29 @@
+<mat-form-field class="me-2">
+  <mat-label>{{'SHARED.COMPONENTS.GROUP_ROLES_FILTER.FILTER_ROLES' | translate}}</mat-label>
+  <mat-select (selectionChange)="changeRoles()" [formControl]="roles" multiple>
+    <mat-select-trigger>
+      {{roles.value | selectedRoleFilterValues : rolesList.length | groupRole}}
+    </mat-select-trigger>
+    <mat-option
+      class="{{theme}}"
+      *ngFor="let role of rolesList"
+      [value]="role"
+      >{{role | groupRole}}</mat-option
+    >
+  </mat-select>
+</mat-form-field>
+
+<mat-form-field class="filter-field me-2">
+  <mat-label>{{'SHARED.COMPONENTS.GROUP_ROLES_FILTER.FILTER_ROLE_TYPES' | translate}}</mat-label>
+  <mat-select (selectionChange)="changeRoleTypes()" [formControl]="roleTypes" multiple>
+    <mat-select-trigger>
+      {{roleTypes.value | selectedRoleFilterValues : roleTypesList.length | groupRoleType}}
+    </mat-select-trigger>
+    <mat-option
+      class="{{theme}}"
+      *ngFor="let type of roleTypesList"
+      [value]="type"
+      >{{type | groupRoleType}}</mat-option
+    >
+  </mat-select>
+</mat-form-field>

apps/admin-gui/src/app/shared/components/group-roles-filter/group-roles-filter.component.scss

@@ -0,0 +1,5 @@
+.filter-field {
+  max-width: 250px !important;
+  width: 100% !important;
+  min-width: initial !important;
+}

apps/admin-gui/src/app/shared/components/group-roles-filter/group-roles-filter.component.ts

@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { GroupAdminRoles, RoleAssignmentType } from '@perun-web-apps/perun/openapi';
+
+@Component({
+  selector: 'app-group-roles-filter',
+  templateUrl: './group-roles-filter.component.html',
+  styleUrls: ['./group-roles-filter.component.scss'],
+})
+export class GroupRolesFilterComponent {
+  @Input()
+  theme = '';
+  @Output()
+  filterRoles = new EventEmitter<GroupAdminRoles[]>();
+  @Output()
+  filterRoleTypes = new EventEmitter<RoleAssignmentType[]>();
+  roles = new FormControl<GroupAdminRoles[]>([]);
+  roleTypes = new FormControl<RoleAssignmentType[]>([]);
+  rolesList: GroupAdminRoles[] = [
+    GroupAdminRoles.GROUPADMIN,
+    GroupAdminRoles.GROUPOBSERVER,
+    GroupAdminRoles.GROUPMEMBERSHIPMANAGER,
+  ];
+  roleTypesList: RoleAssignmentType[] = [RoleAssignmentType.DIRECT, RoleAssignmentType.INDIRECT];
+
+  changeRoleTypes(): void {
+    this.filterRoleTypes.emit(this.roleTypes.value);
+  }
+
+  changeRoles(): void {
+    this.filterRoles.emit(this.roles.value);
+  }
+}

apps/admin-gui/src/app/shared/shared.module.ts

@@ -191,6 +191,7 @@ import { AddGroupToVoRegistrationComponent } from './components/dialogs/add-grou
 import { AddGroupToGroupRegistrationComponent } from './components/dialogs/add-group-to-group-registration/add-group-to-group-registration.component';
 import { ApplicationActionsComponent } from './components/application-actions/application-actions.component';
 import { ApplicationsBulkOperationDialogComponent } from './components/dialogs/applications-bulk-operation-dialog/applications-bulk-operation-dialog.component';
+import { GroupRolesFilterComponent } from './components/group-roles-filter/group-roles-filter.component';
 
 @NgModule({
   imports: [
@@ -323,6 +324,7 @@ import { ApplicationsBulkOperationDialogComponent } from './components/dialogs/a
     AddVoBanDialogComponent,
     ApplicationActionsComponent,
     ApplicationsBulkOperationDialogComponent,
+    GroupRolesFilterComponent,
   ],
   declarations: [
     SideMenuComponent,
@@ -474,6 +476,7 @@ import { ApplicationsBulkOperationDialogComponent } from './components/dialogs/a
     AddGroupToGroupRegistrationComponent,
     ApplicationActionsComponent,
     ApplicationsBulkOperationDialogComponent,
+    GroupRolesFilterComponent,
   ],
   providers: [AnyToStringPipe, ExtSourceTypePipe, ConsentRelatedAttributePipe],
 })

apps/admin-gui/src/app/vos/pages/group-detail-page/group-subgroups/group-subgroups.component.html

@@ -25,6 +25,13 @@ <h1 class="page-subtitle">{{'GROUP_DETAIL.SUBGROUPS.TITLE' | translate}}</h1>
       {{'GROUP_DETAIL.SUBGROUPS.DELETE_GROUP' | translate}}
     </button>
   </span>
+
+  <app-group-roles-filter
+    [theme]="'group-theme'"
+    (filterRoles)="applyRoles($event)"
+    (filterRoleTypes)="applyRoleTypes($event)">
+  </app-group-roles-filter>
+
   <perun-web-apps-debounce-filter
     (filter)="applyFilter($event)"
     [placeholder]="'GROUP_DETAIL.SUBGROUPS.FILTER'">

apps/admin-gui/src/app/vos/pages/group-detail-page/group-subgroups/group-subgroups.component.ts

@@ -4,7 +4,12 @@ import { CreateGroupDialogComponent } from '../../../../shared/components/dialog
 import { SelectionModel } from '@angular/cdk/collections';
 import { DeleteGroupDialogComponent } from '../../../../shared/components/dialogs/delete-group-dialog/delete-group-dialog.component';
 import { getDefaultDialogConfig } from '@perun-web-apps/perun/utils';
-import { Group, GroupsManagerService } from '@perun-web-apps/perun/openapi';
+import {
+  Group,
+  GroupAdminRoles,
+  GroupsManagerService,
+  RoleAssignmentType,
+} from '@perun-web-apps/perun/openapi';
 import { Urns } from '@perun-web-apps/perun/urns';
 import { TABLE_GROUP_SUBGROUPS } from '@perun-web-apps/config/table-config';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
@@ -29,6 +34,8 @@ export class GroupSubgroupsComponent implements OnInit {
   group: Group;
   groups: Group[] = [];
   selected = new SelectionModel<Group>(true, []);
+  selectedRoles: GroupAdminRoles[] = [];
+  selectedRoleTypes: RoleAssignmentType[] = [];
   showGroupList = false;
   loading: boolean;
   filtering = false;
@@ -120,15 +127,20 @@ export class GroupSubgroupsComponent implements OnInit {
   refreshTable(): void {
     this.loading = true;
     this.groupService
-      .getAllRichSubGroupsWithGroupAttributesByNames(this.group.id, [
-        Urns.GROUP_DEF_MAIL_FOOTER,
-        Urns.GROUP_SYNC_ENABLED,
-        Urns.GROUP_LAST_SYNC_STATE,
-        Urns.GROUP_LAST_SYNC_TIMESTAMP,
-        Urns.GROUP_STRUCTURE_SYNC_ENABLED,
-        Urns.GROUP_LAST_STRUCTURE_SYNC_STATE,
-        Urns.GROUP_LAST_STRUCTURE_SYNC_TIMESTAMP,
-      ])
+      .getAllRichSubGroupsWithGroupAttributesByNames(
+        this.group.id,
+        [
+          Urns.GROUP_DEF_MAIL_FOOTER,
+          Urns.GROUP_SYNC_ENABLED,
+          Urns.GROUP_LAST_SYNC_STATE,
+          Urns.GROUP_LAST_SYNC_TIMESTAMP,
+          Urns.GROUP_STRUCTURE_SYNC_ENABLED,
+          Urns.GROUP_LAST_STRUCTURE_SYNC_STATE,
+          Urns.GROUP_LAST_STRUCTURE_SYNC_TIMESTAMP,
+        ],
+        this.selectedRoles,
+        this.selectedRoleTypes
+      )
       .subscribe((groups) => {
         this.groups = groups;
         this.selected.clear();
@@ -142,6 +154,16 @@ export class GroupSubgroupsComponent implements OnInit {
     this.filtering = filterValue !== '';
   }
 
+  applyRoles(roles: GroupAdminRoles[]): void {
+    this.selectedRoles = roles;
+    this.refreshTable();
+  }
+
+  applyRoleTypes(types: RoleAssignmentType[]): void {
+    this.selectedRoleTypes = types;
+    this.refreshTable();
+  }
+
   onMoveGroup(group: GroupFlatNode | Group): void {
     const config = getDefaultDialogConfig();
     config.width = '550px';

apps/admin-gui/src/app/vos/pages/member-detail-page/member-groups/member-groups.component.html

@@ -21,9 +21,16 @@ <h1 class="page-subtitle">{{'MEMBER_DETAIL.GROUPS.TITLE' | translate}}</h1>
     {{'MEMBER_DETAIL.GROUPS.REMOVE' | translate}}
   </button>
 </span>
+
+<app-group-roles-filter
+  [theme]="'member-theme'"
+  (filterRoles)="applyRoles($event)"
+  (filterRoleTypes)="applyRoleTypes($event)">
+</app-group-roles-filter>
+
 <perun-web-apps-debounce-filter
   (filter)="applyFilter($event)"
-  [placeholder]="'SHARED_LIB.PERUN.COMPONENTS.RESOURCES_LIST.TABLE_SEARCH'">
+  [placeholder]="'MEMBER_DETAIL.GROUPS.FILTER'">
 </perun-web-apps-debounce-filter>
 <label class="slide-label" (click)="labelToggle()">
   {{'MEMBER_DETAIL.GROUPS.TREE_VIEW' | translate}}

apps/admin-gui/src/app/vos/pages/member-detail-page/member-groups/member-groups.component.ts

@@ -2,9 +2,11 @@ import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import {
   Group,
+  GroupAdminRoles,
   GroupsManagerService,
   Member,
   MembersManagerService,
+  RoleAssignmentType,
 } from '@perun-web-apps/perun/openapi';
 import { TABLE_MEMBER_DETAIL_GROUPS } from '@perun-web-apps/config/table-config';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -42,6 +44,8 @@ export class MemberGroupsComponent implements OnInit {
   tableId = TABLE_MEMBER_DETAIL_GROUPS;
   showGroupList = false;
   selection = new SelectionModel<Group>(true, []);
+  selectedRoles: GroupAdminRoles[] = [];
+  selectedRoleTypes: RoleAssignmentType[] = [];
   addAuth: boolean;
   routeAuth: boolean;
   removeAuth$: Observable<boolean> = this.selection.changed.pipe(
@@ -92,11 +96,16 @@ export class MemberGroupsComponent implements OnInit {
   refreshTable(): void {
     this.loading = true;
     this.groupsService
-      .getMemberRichGroupsWithAttributesByNames(this.member.id, [
-        Urns.MEMBER_DEF_GROUP_EXPIRATION,
-        Urns.MEMBER_GROUP_STATUS,
-        Urns.MEMBER_GROUP_STATUS_INDIRECT,
-      ])
+      .getMemberRichGroupsWithAttributesByNames(
+        this.member.id,
+        [
+          Urns.MEMBER_DEF_GROUP_EXPIRATION,
+          Urns.MEMBER_GROUP_STATUS,
+          Urns.MEMBER_GROUP_STATUS_INDIRECT,
+        ],
+        this.selectedRoles,
+        this.selectedRoleTypes
+      )
       .subscribe({
         next: (groups) => {
           this.selection.clear();
@@ -160,6 +169,16 @@ export class MemberGroupsComponent implements OnInit {
     this.filtering = filterValue !== '';
   }
 
+  applyRoles(roles: GroupAdminRoles[]): void {
+    this.selectedRoles = roles;
+    this.refreshTable();
+  }
+
+  applyRoleTypes(types: RoleAssignmentType[]): void {
+    this.selectedRoleTypes = types;
+    this.refreshTable();
+  }
+
   labelToggle(): void {
     this.showGroupList = !this.showGroupList;
     this.refreshTable();

apps/admin-gui/src/app/vos/pages/vo-detail-page/vo-groups/vo-groups.component.html

@@ -24,6 +24,13 @@ <h1 class="page-subtitle">{{'VO_DETAIL.GROUPS.TITLE' | translate}}</h1>
       {{'VO_DETAIL.GROUPS.DELETE_GROUP' | translate}}
     </button>
   </span>
+
+  <app-group-roles-filter
+    [theme]="'vo-theme'"
+    (filterRoles)="applyRoles($event)"
+    (filterRoleTypes)="applyRoleTypes($event)">
+  </app-group-roles-filter>
+
   <perun-web-apps-debounce-filter
     (filter)="applyFilter($event)"
     [placeholder]="'VO_DETAIL.GROUPS.FILTER'">

apps/admin-gui/src/app/vos/pages/vo-detail-page/vo-groups/vo-groups.component.ts

@@ -11,10 +11,12 @@ import {
 } from '@perun-web-apps/perun/utils';
 import {
   Group,
+  GroupAdminRoles,
   GroupsManagerService,
   GroupsOrderColumn,
   PaginatedRichGroups,
   RichGroup,
+  RoleAssignmentType,
   Vo,
 } from '@perun-web-apps/perun/openapi';
 import { GroupFlatNode, GroupWithStatus, PageQuery } from '@perun-web-apps/perun/models';
@@ -50,6 +52,8 @@ export class VoGroupsComponent implements OnInit {
           offset: pageQuery.offset,
           searchString: pageQuery.searchString,
           sortColumn: pageQuery.sortColumn as GroupsOrderColumn,
+          roles: this.selectedRoles,
+          types: this.selectedRoleTypes,
         },
       })
     ),
@@ -74,7 +78,8 @@ export class VoGroupsComponent implements OnInit {
   filterValue = '';
   tableId = TABLE_VO_GROUPS;
   displayedColumns = ['select', 'id', 'name', 'description', 'menu'];
-
+  selectedRoles: GroupAdminRoles[] = [];
+  selectedRoleTypes: RoleAssignmentType[] = [];
   createAuth: boolean;
   routeAuth: boolean;
   removeAuth$: Observable<boolean> = this.selected.changed.pipe(
@@ -188,7 +193,12 @@ export class VoGroupsComponent implements OnInit {
 
   loadAllGroups(): void {
     this.groupService
-      .getAllRichGroupsWithAttributesByNames(this.vo.id, this.attrNames)
+      .getAllRichGroupsWithAttributesByNames(
+        this.vo.id,
+        this.attrNames,
+        this.selectedRoles,
+        this.selectedRoleTypes
+      )
       .subscribe((groups) => {
         this.groups = groups;
         this.selected.clear();
@@ -202,6 +212,16 @@ export class VoGroupsComponent implements OnInit {
     this.filtering = filterValue !== '';
   }
 
+  applyRoles(roles: GroupAdminRoles[]): void {
+    this.selectedRoles = roles;
+    this.refresh();
+  }
+
+  applyRoleTypes(types: RoleAssignmentType[]): void {
+    this.selectedRoleTypes = types;
+    this.refresh();
+  }
+
   refresh(): void {
     this.loadingSubject$.next(true);
     if (this.showGroupList) {
@@ -227,6 +247,8 @@ export class VoGroupsComponent implements OnInit {
           offset: 0,
           searchString: query.searchString,
           sortColumn: query.sortColumn as GroupsOrderColumn,
+          roles: this.selectedRoles,
+          types: this.selectedRoleTypes,
         },
       })
       .subscribe({