added tenant switch on navbar

dmp-frontend/src/app/core/services/auth/auth.service.ts

@@ -324,6 +324,15 @@ export class AuthService extends BaseService {
 		this.zone.run(() => this.router.navigate([returnUrl]));
 	}
 	
+	onAuthenticateSuccessReload(): void {
+		this.authState(true);
+		this.uiNotificationService.snackBarNotification(
+			this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-LOGIN'),
+			SnackBarNotificationLevel.Success
+		);
+		window.location.reload();
+	}
+
 	public hasPermission(permission: AppPermission): boolean {
 		// if (!this.installationConfiguration.appServiceEnabled) { return true; } //TODO: maybe reconsider
 		return this.evaluatePermission(this.appAccount?.permissions || [], permission);

dmp-frontend/src/app/ui/navbar/navbar.component.html

@@ -32,7 +32,19 @@
 						<app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language>
 					</mat-menu>
 				</div>
+				<div class="col-md-auto pl-0" *ngIf="isAuthenticated()">
+					<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang">
+						<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
+						<mat-icon class="m-0">arrow_drop_down</mat-icon>
+					</button>
+					<mat-menu #tenantMenu="matMenu" class="lang-parent">
+						<app-tenant-switch class="d-lg-block d-none"></app-tenant-switch>
+					</mat-menu>	
+				</div>
 				<div class="col-auto" *ngIf="isAuthenticated() && authentication.hasPermission(authentication.permissionEnum.ViewMineInAppNotificationPage)">
+					<mat-menu #languageMenu="matMenu" class="lang-parent">
+						<app-language (languageChange)="getLanguage($event)"></app-language>
+					</mat-menu>
 					<button class="col-auto" mat-icon-button matTooltip="{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}" (click)="toggleInAppNotifications()">
 						<mat-icon [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn">mail</mat-icon>
 					</button>
@@ -70,30 +82,33 @@
 							</li>
 						</ng-template>
 						<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
-							<a class="faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
+							<a class="mr-2 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
-							<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang" (click)="$event.stopPropagation();">
+							<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang" (click)="$event.stopPropagation();">
 								<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
 								<mat-icon>arrow_drop_down</mat-icon>
 							</button>
 							<mat-menu #languageMenu="matMenu" class="lang-parent">
 								<app-language (languageChange)="getLanguage($event)"></app-language>
 							</mat-menu>
+							<ng-container *ngIf="isAuthenticated()">
+								<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0">
+									<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
+									<mat-icon class="m-0">arrow_drop_down</mat-icon>
+								</button>
+								<mat-menu #tenantMenu="matMenu" class="lang-parent">
+									<app-tenant-switch></app-tenant-switch>
+								</mat-menu>	
+							</ng-container>
 						</li>
 						<li class="d-flex justify-content-center">
 							<button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
 						</li>
-						<li *ngIf="isAuthenticated()">
+						<li *ngIf="isAuthenticated()" class="d-flex justify-content-center">
 							<button type="button" class="default-btn" (click)="logout()">{{ 'USER-DIALOG.LOG-OUT' | translate }}</button>
 						</li>
 					</ul>
 				</div>
 			</mat-menu>
-
-
-
-
-
-
 		</div>
 	</nav>
 	<div *ngIf="progressIndication" class="progress-bar">

dmp-frontend/src/app/ui/navbar/navbar.module.ts

@@ -5,13 +5,15 @@ import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { LanguageModule } from '../language/language.module';
 import { UserDialogComponent } from './user-dialog/user-dialog.component';
+import { TenantModule } from '../tenant/tenant.module';
 
 @NgModule({
     imports: [
         CommonUiModule,
         CommonFormsModule,
         RouterModule,
-        LanguageModule
+        LanguageModule,
+        TenantModule
     ],
     declarations: [
         NavbarComponent,

dmp-frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.html

@@ -0,0 +1,5 @@
+<mat-button-toggle-group class="tenant-menu" vertical (change)="onTenantSelected($event)" [value]="this.currentTenant">
+	<div *ngFor="let tenant of tenants | async">
+		<mat-button-toggle class="tenant-button" [value]="tenant">{{ tenant }}</mat-button-toggle>
+	</div>
+</mat-button-toggle-group>

dmp-frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.scss

@@ -0,0 +1,9 @@
+::ng-deep.tenant-menu {
+	border-color: transparent;
+	padding: 8px;
+}
+
+::ng-deep.tenant-button {
+	padding-top: 15px;
+	padding-bottom: 15px;
+}

dmp-frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.ts

@@ -0,0 +1,68 @@
+import { Component, EventEmitter, OnInit, Output } from "@angular/core";
+import { MatButtonToggleChange } from "@angular/material/button-toggle";
+import { Router } from "@angular/router";
+import { AuthService } from "@app/core/services/auth/auth.service";
+import { PrincipalService } from "@app/core/services/http/principal.service";
+import { BaseComponent } from "@common/base/base.component";
+import { BaseHttpParams } from "@common/http/base-http-params";
+import { InterceptorType } from "@common/http/interceptors/interceptor-type";
+import { KeycloakService } from "keycloak-angular";
+import { Observable, from } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+
+@Component({
+  selector: 'app-tenant-switch',
+  templateUrl: 'tenant-switch.component.html',
+  styleUrls: ['tenant-switch.component.scss']
+})
+export class TenantSwitchComponent extends BaseComponent implements OnInit {
+	tenants: Observable<Array<string>>;
+
+	constructor(
+		private router: Router,
+    private keycloakService: KeycloakService,
+    private principalService: PrincipalService,
+		private authService: AuthService,
+	) {
+		super();
+	}
+  
+  get currentTenant(): string {
+    return this.authService.selectedTenant();
+  }
+
+	ngOnInit() {
+		this.tenants = this.loadUserTenants(); //TODO
+		//this.tenantChange.emit(this.getCurrentLanguage())
+	}
+
+  loadUserTenants(): Observable<Array<string>> {
+		const params = new BaseHttpParams();
+		params.interceptorContext = {
+			excludedInterceptors: [InterceptorType.TenantHeaderInterceptor]
+		};
+		return this.principalService.myTenants({ params: params });
+	}
+
+	onTenantSelected(selectedTenant: MatButtonToggleChange) {
+    if (selectedTenant.value === undefined || selectedTenant.value === '') return;
+
+    this.formSubmit(selectedTenant.value);
+		this.loadUser();
+	}
+
+	formSubmit(selectedTenant: string): void {
+		this.authService.selectedTenant(selectedTenant);
+	}
+
+	loadUser(): void {
+		this.authService.prepareAuthRequest(from(this.keycloakService.getToken()), {})
+      .pipe(takeUntil(this._destroyed))
+      .subscribe(
+        () => {
+          this.authService.onAuthenticateSuccessReload();
+        }, 
+        (error) => this.authService.onAuthenticateError(error)
+      );
+	}
+}

dmp-frontend/src/app/ui/tenant/tenant.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonUiModule } from '@common/ui/common-ui.module';
+import { TenantSwitchComponent } from './tenant-switch/tenant-switch.component';
+
+
+
+@NgModule({
+    declarations: [
+        TenantSwitchComponent,
+    ],
+    imports: [
+        CommonUiModule
+    ],
+    exports: [
+        TenantSwitchComponent,
+    ]
+})
+export class TenantModule { }