Respect user preference when displaying empty VOs

src/app/app.component.html

 <header feudal-header></header>
 <div class="mat-typography" class="body" >
-  <div *ngIf="(userService.userSrc() | async) as user" style="max-width: 800px;" class="centered">
-	<div *ngIf="(userService.sshKeysSrc() | async)?.length > 0; else noCredentials">
-	  <div style="margin-bottom: 50px;">
-		<h3>Your services</h3>
-		<mat-accordion *ngIf="(userService.servicesSrc() | async) as services; else noServices">
-		  <app-service *ngFor="let service of services" [service]="service"></app-service>
-		</mat-accordion>
-		<ng-template #noServices>
-		  <p>
-		  You are not permitted to use any services.
-		  </p>
-		</ng-template>
-	  </div>
-	  <div>
-		<h3>Your Virtual Organisations</h3>
-		<mat-accordion *ngIf="(userService.vosSrc() | async) as vos; else noVOs">
-		  <app-vo-data *ngFor="let vo of vos" [vo]="vo"></app-vo-data>
-		</mat-accordion>
-		<ng-template #noVOs>
-		  <p>
-		  You are not member in any Virtual Organisations.
-		  </p>
+	<div *ngIf="(userService.combiSrc() | async) as combi" style="max-width: 800px;" class="centered">
+		<div *ngIf="(userService.sshKeysSrc() | async)?.length > 0; else noCredentials">
+			<div style="margin-bottom: 50px;">
+				<h3>Your services</h3>
+				<div>
+					<mat-accordion *ngIf="combi.user.services.length > 0; else noServices">
+						<app-service *ngFor="let service of services" [service]="service"></app-service>
+					</mat-accordion>
+				</div>
+				<ng-template #noServices>
+					<p>
+					You are not permitted to use any services.
+					</p>
+				</ng-template>
+			</div>
+			<div>
+				<h3>Your Virtual Organisations</h3>
+				<div>
+					<mat-accordion *ngIf="userService.extractVOs(combi).length > 0; else noVOs">
+						<app-vo-data *ngFor="let vo of userService.extractVOs(combi)" [vo]="vo"></app-vo-data>
+					</mat-accordion>
+				</div>
+				<ng-template #noVOs>
+					<p>
+					You are not member in any Virtual Organisations or all your Virtual Organisations are empty.
+					</p>
+				</ng-template>
+			</div>
+		</div>
+		<ng-template #noCredentials>
+			<app-account></app-account>
+			<!--
+		 <div class="mat-typography">
+		 <div style="margin-bottom: 50px;">
+		 <p>
+		 Before you can start using FEUDAL you need to upload an SSH public key.
+		 Please do so below.
+		 </p>
+		 <p>
+		 Once you have uploaded a key, the SSH Key Management will be available in the toolbar above.
+		 </p>
+		 </div>
+		 <app-sshkeys></app-sshkeys>
+		 </div>
+			-->
 		</ng-template>
-	  </div>
 	</div>
-	<ng-template #noCredentials>
-	  <app-account></app-account>
-	  <!--
-	  <div class="mat-typography">
-		<div style="margin-bottom: 50px;">
-		  <p>
-		  Before you can start using FEUDAL you need to upload an SSH public key.
-		  Please do so below.
-		  </p>
-		  <p>
-		  Once you have uploaded a key, the SSH Key Management will be available in the toolbar above.
-		  </p>
-		</div>
-		<app-sshkeys></app-sshkeys>
-	  </div>
-	  -->
-	</ng-template>
-  </div>
 </div>
 <footer feudal-footer class="footer"></footer>

src/app/user.service.ts

@@ -16,13 +16,17 @@ import {
   VO, User, Update, State, Deployment, DeploymentState, SSHKey, NewSSHKey, IdP, Service, Site, JSONObject
 } from './types/types.module';
 
+export interface Combination {
+  user: User;
+  prefs: Prefs;
+}
 
 @Injectable()
 export class UserService {
   private initialized = false;
   private loggedIn = false;
 
-  private observerDebugging = false;
+  private observerDebugging = true;
 
   // relogin on failed XHR calls
   // is turned off when the user is deactivated
@@ -370,6 +374,18 @@ export class UserService {
     );
   }
 
+  public combiSrc(): Observable<Combination> {
+    return this.user$.asObservable().pipe(
+      combineLatest(
+        this.prefs.connect(),
+        (u, p) => {
+          return {user: u, prefs: p};
+        },
+      ),
+      tap(this.tapLogger('userSrc')),
+    );
+  }
+
   public deploymentsSrc(): Observable<Deployment[]> {
     return this.deployments$.asObservable().pipe(
       tap(this.tapLogger('deploymentsSrc')),
@@ -409,6 +425,22 @@ export class UserService {
     );
   }
 
+  public extractVOs(combi: Combination): VO[] {
+    if (combi.prefs.showEmptyVOs) {
+      // filter out VOs that have no services
+      return combi.user.vos.filter(
+        (vo: VO) => combi.user.services.some(
+          (s: Service) => s.vos.some(
+            svo => svo.id === vo.id,
+          ),
+        ),
+      );
+    }
+
+    return combi.user.vos;
+
+  }
+
   public vosSrc(): Observable<VO[]> {
     return this.prefs.connect().pipe(
       combineLatest(