added tenant switch on navbar

This commit is contained in:
Sofia Papacharalampous 2024-04-04 13:21:26 +03:00
parent 199ffef673
commit 527130cb02
7 changed files with 136 additions and 10 deletions

View File

@ -324,6 +324,15 @@ export class AuthService extends BaseService {
this.zone.run(() => this.router.navigate([returnUrl])); 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 { public hasPermission(permission: AppPermission): boolean {
// if (!this.installationConfiguration.appServiceEnabled) { return true; } //TODO: maybe reconsider // if (!this.installationConfiguration.appServiceEnabled) { return true; } //TODO: maybe reconsider
return this.evaluatePermission(this.appAccount?.permissions || [], permission); return this.evaluatePermission(this.appAccount?.permissions || [], permission);

View File

@ -32,7 +32,19 @@
<app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language> <app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language>
</mat-menu> </mat-menu>
</div> </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)"> <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()"> <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> <mat-icon [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn">mail</mat-icon>
</button> </button>
@ -70,30 +82,33 @@
</li> </li>
</ng-template> </ng-template>
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()"> <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 class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
<mat-icon>arrow_drop_down</mat-icon> <mat-icon>arrow_drop_down</mat-icon>
</button> </button>
<mat-menu #languageMenu="matMenu" class="lang-parent"> <mat-menu #languageMenu="matMenu" class="lang-parent">
<app-language (languageChange)="getLanguage($event)"></app-language> <app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu> </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>
<li class="d-flex justify-content-center"> <li class="d-flex justify-content-center">
<button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> <button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
</li> </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> <button type="button" class="default-btn" (click)="logout()">{{ 'USER-DIALOG.LOG-OUT' | translate }}</button>
</li> </li>
</ul> </ul>
</div> </div>
</mat-menu> </mat-menu>
</div> </div>
</nav> </nav>
<div *ngIf="progressIndication" class="progress-bar"> <div *ngIf="progressIndication" class="progress-bar">

View File

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

View File

@ -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>

View File

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

View File

@ -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)
);
}
}

View File

@ -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 { }