feat(profile): allow filtering by name and sorting on profile groups page

* name filter for each of the tables on the page was added
* the membership table can now be sorted by name
* added translation

Author: xflord

apps/user-profile/src/app/components/membership-list/membership-list.component.html

@@ -27,7 +27,7 @@
         </td>
       </ng-container>
       <ng-container matColumnDef="name">
-        <th *matHeaderCellDef mat-header-cell>
+        <th *matHeaderCellDef mat-header-cell mat-sort-header>
           {{'MEMBERSHIP_LIST.NAME' | customTranslate | translate}}
         </th>
         <td *matCellDef="let member" class="static-column-size" mat-cell>{{member.entity.name}}</td>
@@ -43,15 +43,15 @@
           {{'MEMBERSHIP_LIST.EXPIRATION' | customTranslate | translate}}
         </th>
         <td *matCellDef="let membership" mat-cell>
-          {{membership.expirationAttribute | validateExpiration}}
+          {{membership.expirationAttribute | validateExpiration | customTranslate |  translate}}
         </td>
       </ng-container>
       <ng-container matColumnDef="extend">
         <th *matHeaderCellDef mat-header-cell></th>
         <td *matCellDef="let membership" mat-cell>
           <button
             (click)="extend(membership)"
-            [disabled]="(membership.expirationAttribute | validateExpiration) === 'never'"
+            [disabled]="(membership.expirationAttribute | validateExpiration) === 'MEMBERSHIP_LIST.NEVER'"
             color="accent"
             mat-flat-button>
             {{'MEMBERSHIP_LIST.EXTEND' | customTranslate | translate}}

apps/user-profile/src/app/pages/groups-page/groups-page.component.html

@@ -23,21 +23,29 @@ <h1 class="page-title pt-2">{{'GROUPS.TITLE' | customTranslate | translate}}</h1
   <mat-spinner *ngIf="initialLoading" class="me-auto ms-auto"></mat-spinner>
 
   <h4 class="page-subtitle">{{'GROUPS.MEMBER_GROUPS' | customTranslate | translate}}</h4>
+  <perun-web-apps-debounce-filter
+    [placeholder]="'ORGANIZATIONS.FILTER'"
+    (filter)="applyFilter($event)"></perun-web-apps-debounce-filter>
   <div class="position-relative">
     <perun-web-apps-membership-list
       *perunWebAppsLoader="loading; indicator: spinner"
       [members]="userMemberships"
       [selection]="selection"
+      [filterValue]="filterValue"
       [noMembershipFoundAlert]="'GROUPS.NO_GROUPS'"
       [displayedColumns]="['name', 'description', 'expirationAttribute', 'extend']"
       (extendMembership)="extendMembership($event)"></perun-web-apps-membership-list>
   </div>
 
   <h4 class="page-subtitle mt-5">{{'GROUPS.ADMINS_GROUPS' | customTranslate | translate}}</h4>
+  <perun-web-apps-debounce-filter
+    [placeholder]="'ORGANIZATIONS.FILTER'"
+    (filter)="applyAdminFilter($event)"></perun-web-apps-debounce-filter>
   <div class="position-relative">
     <perun-web-apps-membership-list
       *perunWebAppsLoader="loading; indicator: spinner"
       [members]="adminMemberships"
+      [filterValue]="adminFilterValue"
       [noMembershipFoundAlert]="'GROUPS.NO_GROUPS'"
       [displayedColumns]="['name', 'description']"></perun-web-apps-membership-list>
   </div>

apps/user-profile/src/app/pages/groups-page/groups-page.component.ts

@@ -6,7 +6,6 @@ import {
   MembersManagerService,
   UsersManagerService,
   Vo,
-  VosManagerService,
 } from '@perun-web-apps/perun/openapi';
 import { StoreService } from '@perun-web-apps/perun/services';
 import { UntypedFormControl } from '@angular/forms';
@@ -36,13 +35,14 @@ export class GroupsPageComponent implements OnInit {
   adminMemberships: Membership[] = [];
   userMembershipsTemp: Membership[] = [];
   adminMembershipsTemp: Membership[] = [];
+  filterValue = '';
+  adminFilterValue = '';
 
   constructor(
     private usersService: UsersManagerService,
     private memberService: MembersManagerService,
     private groupService: GroupsManagerService,
     private store: StoreService,
-    private vosManagerService: VosManagerService,
     private attributesManagerService: AttributesManagerService
   ) {}
 
@@ -171,9 +171,18 @@ export class GroupsPageComponent implements OnInit {
     window.location.href = `${registrarUrl}?vo=${voShortname}&group=${membership.entity.shortName}`;
   }
 
+  applyFilter(filterValue: string): void {
+    this.filterValue = filterValue;
+  }
+
+  applyAdminFilter(filterValue: string): void {
+    this.adminFilterValue = filterValue;
+  }
+
   private _filter(value: string | Vo): Vo[] {
-    const filterValue = typeof value === 'string' ? value.toLowerCase() : value.name.toLowerCase();
-    return this.vos.filter((option) => option.name.toLowerCase().includes(filterValue));
+    const voFilterValue =
+      typeof value === 'string' ? value.toLowerCase() : value.name.toLowerCase();
+    return this.vos.filter((option) => option.name.toLowerCase().includes(voFilterValue));
   }
 
   private addToLists(): void {

apps/user-profile/src/app/pipes/validate-expiration.pipe.ts

@@ -7,6 +7,6 @@ import { Attribute } from '@perun-web-apps/perun/openapi';
 })
 export class ValidateExpirationPipe implements PipeTransform {
   transform(expirationAttribute: Attribute): string {
-    return (expirationAttribute?.value as string) ?? 'never';
+    return (expirationAttribute?.value as string) ?? 'MEMBERSHIP_LIST.NEVER';
   }
 }

apps/user-profile/src/assets/i18n/cs.json

@@ -90,6 +90,7 @@
   },
   "MEMBERSHIP_LIST": {
     "NAME": "Jméno",
+    "NEVER": "nikdy",
     "DESCRIPTION": "Popis",
     "EXPIRATION": "Expirace členství",
     "EXTEND": "Prodloužit členství"

apps/user-profile/src/assets/i18n/en.json

@@ -92,6 +92,7 @@
   },
   "MEMBERSHIP_LIST": {
     "NAME": "Name",
+    "NEVER": "never",
     "DESCRIPTION": "Description",
     "EXPIRATION": "Expiration",
     "EXTEND": "Extend"