fix(profile): loading edge cases of Organizations and Groups pages

* Instant spinners were displayed for use cases when array of loaded vos/groups was empty - now the
behavior is fixed also for cases when the user doesn't have any memberhip.
* Also the bug of vos filter on Groups page was fixed (filter wasn't applied if there was no group membership under the selected vo).

Author: HejdaJakub

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

@@ -68,8 +68,6 @@
   </perun-web-apps-table-wrapper>
 </div>
 
-<perun-web-apps-alert
-  *ngIf="!dataSource.filteredData.length"
-  alert_type="warn"
-  >{{'MEMBERSHIP_LIST.NO_MEMBERSHIPS' | customTranslate | translate}}</perun-web-apps-alert
->
+<perun-web-apps-alert *ngIf="!dataSource.filteredData.length" alert_type="warn">
+  {{ noMembershipFoundAlert | customTranslate | translate}}
+</perun-web-apps-alert>

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

@@ -44,6 +44,7 @@ export class MembershipListComponent implements OnChanges, AfterViewInit {
   ];
   @Input() tableId: string;
   @Input() filterValue = '';
+  @Input() noMembershipFoundAlert = '';
   @Output() extendMembership: EventEmitter<Membership> = new EventEmitter<Membership>();
   dataSource: MatTableDataSource<Membership>;
   pageSizeOptions = TABLE_ITEMS_COUNT_OPTIONS;

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

@@ -14,26 +14,21 @@ <h1 class="page-title pt-2">{{'GROUPS.TITLE' | customTranslate | translate}}</h1
       [displayWith]="displayFn"
       (optionSelected)="filterByVo($event)">
       <mat-option value="all">{{'GROUPS.ALL' | customTranslate | translate}}</mat-option>
-      <mat-option *ngFor="let vo of filteredVos | async" [value]="vo">
+      <mat-option *ngFor="let vo of vos" [value]="vo">
         {{vo.name}}
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
 
   <mat-spinner *ngIf="initialLoading" class="me-auto ms-auto"></mat-spinner>
 
-  <perun-web-apps-alert
-    alert_type="warn"
-    *ngIf="!userMemberships.length && !adminMemberships.length && !loading"
-    >{{'GROUPS.NO_GROUPS'| customTranslate | translate}}</perun-web-apps-alert
-  >
-
   <h4 class="page-subtitle">{{'GROUPS.MEMBER_GROUPS' | customTranslate | translate}}</h4>
   <div class="position-relative">
     <perun-web-apps-membership-list
       *perunWebAppsLoader="loading; indicator: spinner"
       [members]="userMemberships"
       [selection]="selection"
+      [noMembershipFoundAlert]="'GROUPS.NO_GROUPS'"
       [displayedColumns]="['name', 'description', 'expirationAttribute', 'extend']"
       (extendMembership)="extendMembership($event)"></perun-web-apps-membership-list>
   </div>
@@ -43,6 +38,7 @@ <h4 class="page-subtitle mt-5">{{'GROUPS.ADMINS_GROUPS' | customTranslate | tran
     <perun-web-apps-membership-list
       *perunWebAppsLoader="loading; indicator: spinner"
       [members]="adminMemberships"
+      [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

@@ -68,14 +68,23 @@ export class GroupsPageComponent implements OnInit {
     this.userMembershipsTemp = [];
     this.adminMembershipsTemp = [];
     const allMemberIds = this.store.getPerunPrincipal().roles['SELF']['Member'];
-    if (!allMemberIds.length) {
+    // finish when the user has no membership
+    if (allMemberIds === undefined || !allMemberIds.length) {
       this.loading = false;
+      this.initialLoading = false;
+      return;
     } else {
       j = allMemberIds.length;
     }
     allMemberIds.forEach((memberId) => {
       j--;
       this.groupService.getMemberGroups(memberId).subscribe((groups) => {
+        // finish when the user has no group membership
+        if (groups.length === 0) {
+          this.initialLoading = false;
+          this.loading = false;
+          return;
+        }
         i += groups.length;
         groups.forEach((group) => {
           this.attributesManagerService
@@ -119,6 +128,10 @@ export class GroupsPageComponent implements OnInit {
       const vo: Vo = event.option.value as Vo;
       this.memberService.getMemberByUser(vo.id, this.userId).subscribe((member) => {
         this.groupService.getMemberGroups(member.id).subscribe((groups) => {
+          // refresh displayed data for vo where user has no group membership
+          if (groups.length === 0) {
+            this.addToLists();
+          }
           let i = groups.length;
           this.loading = i !== 0;
           groups.forEach((group) => {

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

@@ -6,34 +6,26 @@ <h1 class="page-title mt-2">{{'ORGANIZATIONS.TITLE' | customTranslate | translat
 
   <div class="mt-5">
     <h1 class="page-subtitle">{{'ORGANIZATIONS.IS_MEMBER' | customTranslate | translate}}</h1>
-    <div class="position-relative" *ngIf="userMemberships.length || loading">
+    <div class="position-relative">
       <perun-web-apps-membership-list
         *perunWebAppsLoader="loading; indicator: spinner"
         [members]="userMemberships"
         [filterValue]="filterValue"
+        [noMembershipFoundAlert]="'ORGANIZATIONS.NO_VOS_ALERT'"
         [displayedColumns]="['name', 'expirationAttribute', 'extend']"
         (extendMembership)="extendMembership($event)">
       </perun-web-apps-membership-list>
     </div>
-    <perun-web-apps-alert
-      alert_type="warn"
-      *ngIf="userMemberships.length === 0  && !loading"
-      >{{'ORGANIZATIONS.NO_VOS_ALERT' | customTranslate | translate}}</perun-web-apps-alert
-    >
   </div>
 
   <div class="mt-5">
     <h1 class="page-subtitle">{{'ORGANIZATIONS.IS_ADMIN' | customTranslate | translate}}</h1>
-    <perun-web-apps-alert
-      *ngIf="!adminMemberships.length && !loading"
-      alert_type="warn"
-      >{{'ORGANIZATIONS.NO_VOS_ALERT' | customTranslate | translate}}</perun-web-apps-alert
-    >
-    <div class="position-relative" *ngIf="adminMemberships.length || loading">
+    <div class="position-relative">
       <perun-web-apps-membership-list
         *perunWebAppsLoader="loading; indicator: spinner"
         [members]="adminMemberships"
         [filterValue]="filterValue"
+        [noMembershipFoundAlert]="'ORGANIZATIONS.NO_VOS_ALERT'"
         [displayedColumns]="['name']">
       </perun-web-apps-membership-list>
     </div>

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

@@ -70,6 +70,7 @@ export class VosPageComponent implements OnInit {
 
   private fillMemberships(vos: Array<Vo>, memberships: Membership[]): void {
     this.membersService.getMembersByUser(this.userId).subscribe((members) => {
+      if (vos.length === 0) this.loading = false;
       vos.forEach((vo) => {
         const member = members.find((mem) => mem.voId === vo.id);
         if (!member) {

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

@@ -40,7 +40,7 @@
     "FILTER": "Filtrovat dle jména",
     "MEMBER_GROUPS": "Skupiny ve kterých jste členem",
     "ADMINS_GROUPS": "Skupiny ve kterých jste administrátorem",
-    "NO_GROUPS": "Nenalezeny žádné skupiny."
+    "NO_GROUPS": "Nebyly nalezeny žádné skupiny."
   },
   "SERVICES": {
     "TITLE": "Moje služby",
@@ -95,7 +95,6 @@
     "NAME": "Jméno",
     "DESCRIPTION": "Popis",
     "EXPIRATION": "Expirace členství",
-    "NO_MEMBERSHIPS": "Žádné výsledky nesplňují zadané vyhledávací parametry.",
     "EXTEND": "Prodloužit členství"
   },
   "SAMBA_PASSWORD": {

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

@@ -95,7 +95,6 @@
     "NAME": "Name",
     "DESCRIPTION": "Description",
     "EXPIRATION": "Expiration",
-    "NO_MEMBERSHIPS": "No results match current filter",
     "EXTEND": "Extend"
   },
   "SAMBA_PASSWORD": {