feat(admin): consents for assigned members

Show consents on the page with members assigned to the resource.

Author: sarkapalkovicova

apps/admin-gui/src/app/facilities/pages/resource-detail-page/resource-assigned-members/resource-assigned-members.component.html

@@ -1,5 +1,21 @@
 <h1 class="page-subtitle">{{'RESOURCE_DETAIL.ASSIGNED_MEMBERS.TITLE' | translate}}</h1>
 <perun-web-apps-refresh-button (refresh)="refreshTable()"> </perun-web-apps-refresh-button>
+
+<mat-form-field class="mr-2 fix-select" *ngIf="includeConsents">
+  <mat-label>{{'RESOURCE_DETAIL.ASSIGNED_MEMBERS.FILTER_CONSENT_STATUS' | translate}}</mat-label>
+  <mat-select (closed)="changeConsentStatuses()" [formControl]="consentStatuses" multiple>
+    <mat-select-trigger>
+      {{selectedConsentStatuses | selectedConsentStatuses: consentStatusList : consentStatuses.value}}
+    </mat-select-trigger>
+    <mat-option
+      class="resource-theme"
+      *ngFor="let consentStatus of consentStatusList"
+      [value]="consentStatus">
+      {{'CONSENTS.STATUS_' + consentStatus | translate }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+
 <perun-web-apps-debounce-filter
   (filter)="applyFilter($event)"
   [placeholder]="'RESOURCE_DETAIL.ASSIGNED_MEMBERS.FILTER'">
@@ -9,7 +25,7 @@ <h1 class="page-subtitle">{{'RESOURCE_DETAIL.ASSIGNED_MEMBERS.TITLE' | translate
 </ng-template>
 <div class="position-relative">
   <perun-web-apps-members-list
-    [displayedColumns]="['id', 'fullName']"
+    [displayedColumns]="columns"
     (updateTable)="refreshTable()"
     *perunWebAppsLoader="loading; indicator: spinner"
     [disableRouting]="!routeAuth"

apps/admin-gui/src/app/facilities/pages/resource-detail-page/resource-assigned-members/resource-assigned-members.component.ts

@@ -1,29 +1,55 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Resource, ResourcesManagerService, RichMember } from '@perun-web-apps/perun/openapi';
+import {
+  Consent,
+  ConsentsManagerService,
+  Resource,
+  ResourcesManagerService,
+  RichMember,
+} from '@perun-web-apps/perun/openapi';
 import { TABLE_RESOURCE_MEMBERS } from '@perun-web-apps/config/table-config';
-import { EntityStorageService, GuiAuthResolver } from '@perun-web-apps/perun/services';
+import {
+  EntityStorageService,
+  GuiAuthResolver,
+  StoreService,
+} from '@perun-web-apps/perun/services';
+import { MemberWithConsentStatus } from '@perun-web-apps/perun/models';
+import { ConsentStatusIconPipe, SelectedConsentStatusesPipe } from '@perun-web-apps/perun/pipes';
+import { FormControl } from '@angular/forms';
+import { SelectionModel } from '@angular/cdk/collections';
 
 @Component({
   selector: 'app-resource-assigned-members',
   templateUrl: './resource-assigned-members.component.html',
   styleUrls: ['./resource-assigned-members.component.scss'],
+  providers: [ConsentStatusIconPipe, SelectedConsentStatusesPipe],
 })
 export class ResourceAssignedMembersComponent implements OnInit {
   loading = false;
   filterValue = '';
   tableId = TABLE_RESOURCE_MEMBERS;
 
   resource: Resource;
-  members: RichMember[] = [];
+  members: MemberWithConsentStatus[] = [];
+  columns = ['id', 'fullName'];
+  includeConsents = false;
+  consents: Consent[] = [];
+  consentStatuses = new FormControl();
+
+  consentStatusList = ['UNSIGNED', 'GRANTED', 'REVOKED'];
+  selectedConsentStatuses: string[] = [];
+  selection = new SelectionModel<MemberWithConsentStatus>(true, []);
 
   routeAuth: boolean;
 
   constructor(
     private route: ActivatedRoute,
     private resourceService: ResourcesManagerService,
     private authResolver: GuiAuthResolver,
-    private entityStorageService: EntityStorageService
+    private entityStorageService: EntityStorageService,
+    private storeService: StoreService,
+    private consentService: ConsentsManagerService,
+    private consentStatusPipe: ConsentStatusIconPipe
   ) {}
 
   ngOnInit(): void {
@@ -35,21 +61,55 @@ export class ResourceAssignedMembersComponent implements OnInit {
   refreshTable(): void {
     this.loading = true;
     this.resourceService.getAssignedRichMembers(this.resource.id).subscribe((members) => {
-      this.members = members;
-      this.setAuthRights();
-      this.loading = false;
+      this.setAuthRights(members);
+      this.consentService.getConsentHubByResource(this.resource.id).subscribe((hub) => {
+        // include consents if they are turned on and enforced
+        this.includeConsents =
+          this.storeService.getProperty('enforce_consents') && hub.enforceConsents;
+        if (this.includeConsents) {
+          this.columns = ['id', 'fullName', 'consentStatus'];
+          this.consentService
+            .getConsentsForConsentHubByResource(this.resource.id)
+            .subscribe((consents) => {
+              this.consents = consents;
+              this.members = this.getConsentsForMembers(members).filter(
+                (member) =>
+                  !this.selectedConsentStatuses ||
+                  this.selectedConsentStatuses.length === 0 ||
+                  this.selectedConsentStatuses.includes(member.consent)
+              );
+            });
+        } else {
+          this.members = members as MemberWithConsentStatus[];
+        }
+        this.loading = false;
+      });
     });
   }
 
-  setAuthRights(): void {
-    if (this.members.length !== 0) {
-      this.routeAuth = this.authResolver.isAuthorized('getMemberById_int_policy', [
-        this.members[0],
-      ]);
+  setAuthRights(members: RichMember[]): void {
+    if (members.length !== 0) {
+      this.routeAuth = this.authResolver.isAuthorized('getMemberById_int_policy', [members[0]]);
     }
   }
 
   applyFilter(filterValue: string): void {
     this.filterValue = filterValue;
   }
+
+  getConsentsForMembers(members: RichMember[]): MemberWithConsentStatus[] {
+    const result: MemberWithConsentStatus[] = [];
+    members.forEach((member) => {
+      const mwc: MemberWithConsentStatus = member;
+      mwc.consent = this.consentStatusPipe.transform(member.userId, this.consents);
+      result.push(mwc);
+    });
+    return result;
+  }
+
+  changeConsentStatuses(): void {
+    this.selection.clear();
+    this.selectedConsentStatuses = this.consentStatuses.value as string[];
+    this.refreshTable();
+  }
 }

apps/admin-gui/src/assets/i18n/en.json

@@ -253,7 +253,8 @@
     },
     "ASSIGNED_MEMBERS": {
       "TITLE": "Assigned members",
-      "FILTER": "Filter members"
+      "FILTER": "Filter members",
+      "FILTER_CONSENT_STATUS": "Filter by consent"
     },
     "TAGS": {
       "TITLE": "Assigned tags",

libs/perun/components/src/lib/members-list/members-list.component.html

@@ -1,5 +1,5 @@
 <div
-  [hidden]="this.members.length === 0 || !dataSource || dataSource.filteredData.length === 0"
+  [hidden]="!this.members || this.members.length === 0 || !dataSource || dataSource.filteredData.length === 0"
   class="card mt-2">
   <perun-web-apps-table-wrapper
     (exportDisplayedData)="exportDisplayedData($event)"
@@ -134,6 +134,15 @@
         <th *matHeaderCellDef mat-header-cell>{{'MEMBERS_LIST.LOGINS' | translate}}</th>
         <td *matCellDef="let member" mat-cell>{{member | memberLogins}}</td>
       </ng-container>
+      <ng-container matColumnDef="consentStatus">
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>
+          {{'CONSENTS.STATUS' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let member">
+          <perun-web-apps-consent-status
+            [consentStatus]="member.consent"></perun-web-apps-consent-status>
+        </td>
+      </ng-container>
 
       <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
       <tr
@@ -149,11 +158,11 @@
 </div>
 
 <perun-web-apps-alert
-  *ngIf="members.length !== 0 && dataSource.filteredData.length === 0"
+  *ngIf="members && members.length !== 0 && dataSource.filteredData.length === 0"
   alert_type="warn">
   {{'SHARED_LIB.UI.ALERTS.NO_FILTER_RESULTS_ALERT' | translate}}
 </perun-web-apps-alert>
 
-<perun-web-apps-alert *ngIf="members.length === 0" alert_type="warn">
+<perun-web-apps-alert *ngIf="!members || members.length === 0" alert_type="warn">
   {{'SHARED_LIB.UI.ALERTS.NO_MEMBERS' | translate}}
 </perun-web-apps-alert>

libs/perun/components/src/lib/members-list/members-list.component.ts

@@ -11,7 +11,7 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
 import { SelectionModel } from '@angular/cdk/collections';
-import { Member, RichMember } from '@perun-web-apps/perun/openapi';
+import { Member } from '@perun-web-apps/perun/openapi';
 import {
   customDataSourceFilterPredicate,
   customDataSourceSort,
@@ -28,9 +28,14 @@ import {
   ChangeMemberStatusDialogComponent,
   MemberTreeViewDialogComponent,
 } from '@perun-web-apps/perun/dialogs';
-import { GuiAuthResolver, TableCheckbox } from '@perun-web-apps/perun/services';
+import {
+  GuiAuthResolver,
+  PerunTranslateService,
+  TableCheckbox,
+} from '@perun-web-apps/perun/services';
 import { ActivatedRoute } from '@angular/router';
 import { TableWrapperComponent } from '@perun-web-apps/perun/utils';
+import { MemberWithConsentStatus } from '@perun-web-apps/perun/models';
 
 @Component({
   selector: 'perun-web-apps-members-list',
@@ -40,9 +45,10 @@ import { TableWrapperComponent } from '@perun-web-apps/perun/utils';
 export class MembersListComponent implements OnChanges, AfterViewInit {
   @ViewChild(TableWrapperComponent, { static: true }) child: TableWrapperComponent;
   @Input() showGroupStatuses: boolean;
-  @Input() members: RichMember[];
+  @Input() members: MemberWithConsentStatus[] = [];
   @Input() searchString: string;
-  @Input() selection: SelectionModel<RichMember> = new SelectionModel<RichMember>();
+  @Input() selection: SelectionModel<MemberWithConsentStatus> =
+    new SelectionModel<MemberWithConsentStatus>();
   @Input() displayedColumns: string[] = [
     'checkbox',
     'id',
@@ -65,7 +71,7 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
   @Input() filter = '';
   @Output() updateTable = new EventEmitter<boolean>();
 
-  dataSource: MatTableDataSource<RichMember>;
+  dataSource: MatTableDataSource<MemberWithConsentStatus>;
   pageSizeOptions = TABLE_ITEMS_COUNT_OPTIONS;
   disabledRouting: boolean;
   groupId: number;
@@ -76,14 +82,15 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
     private dialog: MatDialog,
     private authResolver: GuiAuthResolver,
     private tableCheckbox: TableCheckbox,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private translateService: PerunTranslateService
   ) {}
 
   @ViewChild(MatSort, { static: true }) set matSort(ms: MatSort) {
     this.sort = ms;
   }
 
-  static getFilterDataForColumn(data: RichMember, column: string): string {
+  static getFilterDataForColumn(data: MemberWithConsentStatus, column: string): string {
     switch (column) {
       case 'fullName':
         if (data.user) {
@@ -99,8 +106,8 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
     }
   }
 
-  static getExportDataForColumn(
-    data: RichMember,
+  static getSortDataForColumn(
+    data: MemberWithConsentStatus,
     column: string,
     showGroupStatuses: boolean
   ): string {
@@ -109,7 +116,7 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
         return data.id.toString();
       case 'fullName':
         if (data.user) {
-          return parseFullName(data.user);
+          return data.user.lastName ? data.user.lastName : data.user.firstName ?? '';
         }
         return '';
       case 'status':
@@ -118,15 +125,15 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
         return parseOrganization(data);
       case 'email':
         return parseEmail(data);
-      case 'logins':
-        return parseLogins(data);
+      case 'consentStatus':
+        return data.consent;
       default:
         return '';
     }
   }
 
-  static getSortDataForColumn(
-    data: RichMember,
+  getExportDataForColumn(
+    data: MemberWithConsentStatus,
     column: string,
     showGroupStatuses: boolean
   ): string {
@@ -135,7 +142,7 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
         return data.id.toString();
       case 'fullName':
         if (data.user) {
-          return data.user.lastName ? data.user.lastName : data.user.firstName ?? '';
+          return parseFullName(data.user);
         }
         return '';
       case 'status':
@@ -144,16 +151,20 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
         return parseOrganization(data);
       case 'email':
         return parseEmail(data);
+      case 'logins':
+        return parseLogins(data);
+      case 'consentStatus':
+        return this.translateService.instant(`CONSENTS.STATUS_${data.consent}`);
       default:
         return '';
     }
   }
 
-  getExportDataForColumnFun = (data: RichMember, column: string): string => {
-    return MembersListComponent.getExportDataForColumn(data, column, this.showGroupStatuses);
+  getExportDataForColumnFun = (data: MemberWithConsentStatus, column: string): string => {
+    return this.getExportDataForColumn(data, column, this.showGroupStatuses);
   };
 
-  getSortDataForColumnFun = (data: RichMember, column: string): string => {
+  getSortDataForColumnFun = (data: MemberWithConsentStatus, column: string): string => {
     return MembersListComponent.getSortDataForColumn(data, column, this.showGroupStatuses);
   };
 
@@ -185,17 +196,20 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
 
   setDataSource(): void {
     if (!this.dataSource) {
-      this.dataSource = new MatTableDataSource<RichMember>();
+      this.dataSource = new MatTableDataSource<MemberWithConsentStatus>();
       this.dataSource.sort = this.sort;
       this.dataSource.paginator = this.child.paginator;
-      this.dataSource.filterPredicate = (data: RichMember, filter: string): boolean =>
+      this.dataSource.filterPredicate = (data: MemberWithConsentStatus, filter: string): boolean =>
         customDataSourceFilterPredicate(
           data,
           filter,
           this.displayedColumns,
           MembersListComponent.getFilterDataForColumn
         );
-      this.dataSource.sortData = (data: RichMember[], sort: MatSort): RichMember[] =>
+      this.dataSource.sortData = (
+        data: MemberWithConsentStatus[],
+        sort: MatSort
+      ): MemberWithConsentStatus[] =>
         customDataSourceSort(data, sort, this.getSortDataForColumnFun);
     }
     this.dataSource.filter = this.filter;
@@ -218,10 +232,10 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
     });
   }
 
-  canBeSelected = (member: RichMember): boolean => member.membershipType === 'DIRECT';
+  canBeSelected = (member: MemberWithConsentStatus): boolean => member.membershipType === 'DIRECT';
 
   isAllSelected(): boolean {
-    return this.tableCheckbox.isAllSelected<RichMember>(
+    return this.tableCheckbox.isAllSelected<MemberWithConsentStatus>(
       this.selection.selected.length,
       this.dataSource,
       this.canBeSelected
@@ -246,8 +260,8 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
   // now if the status is column between displayedColumns, the "disableStatusChange" attribute is also presented
   // so the status change through the icon on this list isn't used anywhere. If this change should be possible
   // in the future, the same logic as in members-dynamic-list should be used (but for this purpose some additional
-  // member attributes have to be presented in RichMember object - at least "isLifecycleAlterable" attribute)
-  changeStatus(event: Event, member: RichMember): void {
+  // member attributes have to be presented in MemberWithConsentStatus object - at least "isLifecycleAlterable" attribute)
+  changeStatus(event: Event, member: MemberWithConsentStatus): void {
     event.stopPropagation();
     if (!this.disableStatusChange) {
       const config = getDefaultDialogConfig();
@@ -263,7 +277,7 @@ export class MembersListComponent implements OnChanges, AfterViewInit {
     }
   }
 
-  viewMemberGroupTree(member: RichMember): void {
+  viewMemberGroupTree(member: MemberWithConsentStatus): void {
     const config = getDefaultDialogConfig();
     config.width = '800px';
     config.data = { member: member, groupId: this.groupId };