tenant configuration changes

dmp-frontend/src/app/app.component.ts

@@ -6,7 +6,7 @@ import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { environment } from '../environments/environment';
-import { AuthService } from './core/services/auth/auth.service';
+import { AuthService, LoginStatus } from './core/services/auth/auth.service';
 import { CultureService } from './core/services/culture/culture-service';
 // import { BreadCrumbResolverService } from './ui/misc/breadcrumb/service/breadcrumb.service';
 import { Title } from '@angular/platform-browser';
@@ -20,6 +20,10 @@ import { MatomoService } from './core/services/matomo/matomo-service';
 import { SideNavService } from './core/services/sidenav/side-nav.sevice';
 import { MatSidenav } from '@angular/material/sidenav';
 import { TimezoneService } from './core/services/timezone/timezone-service';
+import { TenantConfigurationService } from './core/services/tenant-configuration/tenant-configuration.service';
+import { TenantConfigurationType } from './core/common/enum/tenant-configuration-type';
+import { CssColorsTenantConfiguration, TenantConfiguration } from './core/model/tenant-configuaration/tenant-configuration';
+import { nameof } from 'ts-simple-nameof';
 
 
 declare const gapi: any;
@@ -56,6 +60,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 		private configurationService: ConfigurationService,
 		private location: Location,
 		private matomoService: MatomoService,
+		private tenantConfigurationService: TenantConfigurationService,
 		private sidenavService: SideNavService
 	) {
 		this.initializeServices();
@@ -229,6 +234,36 @@ export class AppComponent implements OnInit, AfterViewInit {
 		this.authentication.currentAccountIsAuthenticated() && this.authentication.getUserProfileCulture() ? this.cultureService.cultureSelected(this.authentication.getUserProfileCulture()) : this.cultureService.cultureSelected(this.configurationService.defaultCulture);
 		this.authentication.currentAccountIsAuthenticated() && this.authentication.getUserProfileTimezone() ? this.timezoneService.timezoneSelected(this.authentication.getUserProfileTimezone()) : this.timezoneService.timezoneSelected(this.configurationService.defaultTimezone);
 		this.authentication.currentAccountIsAuthenticated() && this.authentication.getUserProfileLanguage() ? this.language.changeLanguage(this.authentication.getUserProfileLanguage()) : (this.language.getDefaultLanguagesCode());
+
+		this.authentication.getAuthenticationStateObservable().subscribe(authenticationState => {
+			if (authenticationState.loginStatus === LoginStatus.LoggedIn) {
+				this.loadCssColors();
+			}
+		});
+		this.loadCssColors();
+	}
+
+	private loadCssColors() {
+		if (this.authentication.currentAccountIsAuthenticated() && this.authentication.selectedTenant()) {
+			this.tenantConfigurationService.getCurrentTenantType(TenantConfigurationType.CssColors,  [
+				nameof<TenantConfiguration>(x => x.type),
+				[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor)].join('.'),
+				[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor2)].join('.'),
+				[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor3)].join('.'),
+				[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.secondaryColor)].join('.'),
+			])
+			.pipe(map(data => data as TenantConfiguration))
+			.subscribe(
+				data => {
+					if (data?.cssColors) {
+						if (data.cssColors.primaryColor) document.documentElement.style.setProperty(`--primary-color`, data.cssColors.primaryColor);
+						if (data.cssColors.primaryColor2) document.documentElement.style.setProperty(`--primary-color-2`, data.cssColors.primaryColor2);
+						if (data.cssColors.primaryColor3) document.documentElement.style.setProperty(`--primary-color-3`, data.cssColors.primaryColor3);
+						if (data.cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, data.cssColors.secondaryColor);
+					}
+				},
+			);
+		}
 	}
 
 	toggleNavbar(event) {

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

@@ -8,7 +8,9 @@
 				<div class="icon-bar3"></div>
 			</div>
 			<a class="logo" [routerLink]="['home']"><img class="logo-image" src="../../../assets/images/nav-logo.png"></a>
-
+			<ng-container>
+				<a class="extra-logo" [routerLink]="['home']"><img class="extra-logo-image" [src]="extraImageURL"></a>
+			</ng-container>
 			<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
 				<img *ngIf="this.isAuthenticated();else loginoption" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
 			</button>
@@ -39,7 +41,7 @@
 					</button>
 					<mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
 						<app-tenant-switch class="d-lg-block d-none"></app-tenant-switch>
-					</mat-menu>	
+					</mat-menu>
 				</div>
 				<div class="col-auto p-0" *ngIf="isAuthenticated() && authentication.hasPermission(authentication.permissionEnum.ViewMineInAppNotificationPage)">
 					<mat-menu #languageMenu="matMenu" class="nav-mat-menu">
@@ -95,7 +97,7 @@
 								</button>
 								<mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
 									<app-tenant-switch></app-tenant-switch>
-								</mat-menu>	
+								</mat-menu>
 							</ng-container>
 						</li>
 						<li class="d-flex justify-content-center">

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

@@ -34,9 +34,17 @@ $mat-card-header-size: 40px !default;
   margin-left: 5px;
   height: 100%;
 }
+
+.extra-logo {
+  margin-left: 5px;
+  height: 100%;
+}
 .logo-image {
 	height: 100%;
 }
+.extra-logo-image {
+	height: 100%;
+}
 
 .faq-title {
   text-align: left;

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

@@ -5,13 +5,13 @@ import { MatMenuTrigger } from '@angular/material/menu';
 import { Router } from '@angular/router';
 import { AppRole } from '@app/core/common/enum/app-role';
 import { User } from '@app/core/model/user/user';
-import { AuthService } from '@app/core/services/auth/auth.service';
+import { AuthService, LoginStatus } from '@app/core/services/auth/auth.service';
 import { LanguageService } from '@app/core/services/language/language.service';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
 import { ProgressIndicationService } from '@app/core/services/progress-indication/progress-indication-service';
 import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
 import { BaseComponent } from '@common/base/base.component';
-import { takeUntil } from 'rxjs/operators';
+import { map, takeUntil } from 'rxjs/operators';
 import { StartNewDmpDialogComponent } from '../dmp/new/start-new-dmp-dialogue/start-new-dmp-dialog.component';
 import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
 import { UserDialogComponent } from './user-dialog/user-dialog.component';
@@ -19,6 +19,13 @@ import { MineInAppNotificationListingDialogComponent } from '@notification-servi
 import { InAppNotificationService } from '@notification-service/services/http/inapp-notification.service';
 import { timer } from 'rxjs';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
+import { TenantConfigurationService } from '@app/core/services/tenant-configuration/tenant-configuration.service';
+import { LogoTenantConfiguration, TenantConfiguration } from '@app/core/model/tenant-configuaration/tenant-configuration';
+import { TenantConfigurationType } from '@app/core/common/enum/tenant-configuration-type';
+import { nameof } from 'ts-simple-nameof';
+import { StorageFile } from '@app/core/model/storage-file/storage-file';
+import { StorageFileService } from '@app/core/services/storage-file/storage-file.service';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 @Component({
 	selector: 'app-navbar',
@@ -40,6 +47,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 	inAppNotificationCount = 0;
 	@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
 	@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
+	extraImageURL: SafeUrl;
 
 	constructor(location: Location,
 		private element: ElementRef,
@@ -50,8 +58,11 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		private languageService: LanguageService,
 		private matomoService: MatomoService,
 		private sidenavService: SideNavService,
+		private tenantConfigurationService: TenantConfigurationService,
 		private inappNotificationService: InAppNotificationService,
-		private configurationService: ConfigurationService
+		private configurationService: ConfigurationService,
+		private storageFileService: StorageFileService,
+		private sanitizer: DomSanitizer
 	) {
 		super();
 		this.location = location;
@@ -87,6 +98,33 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 			.subscribe(x => {
 				this.countUnreadInappNotifications();
 			});
+		this.authentication.getAuthenticationStateObservable().subscribe(authenticationState => {
+			if (authenticationState.loginStatus === LoginStatus.LoggedIn) {
+				this.loadLogo();
+			}
+		});
+		this.loadLogo();
+	}
+
+	private loadLogo() {
+		if (this.authentication.currentAccountIsAuthenticated() && this.authentication.selectedTenant()) {
+			this.tenantConfigurationService.getCurrentTenantType(TenantConfigurationType.Logo,  [
+				nameof<TenantConfiguration>(x => x.type),
+				[nameof<TenantConfiguration>(x => x.logo), nameof<LogoTenantConfiguration>(x => x.storageFile), nameof<StorageFile>(x => x.id)].join('.'),
+			])
+			.pipe(map(data => data as TenantConfiguration), takeUntil(this._destroyed))
+			.subscribe(
+				data => {
+					if (data?.logo?.storageFile?.id) {
+						this.storageFileService.download(data?.logo?.storageFile?.id).pipe(takeUntil(this._destroyed))
+							.subscribe(response => {
+								const blob = new Blob([response.body]);
+								this.extraImageURL = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(response.body))
+							});
+					}
+				},
+			);
+		}
 	}
 
 	private countUnreadInappNotifications() {