Merge pull request #141 from gctools-outilsgc/banner-update

setup banner in route data

src/app/app-routing.module.ts

@@ -11,6 +11,8 @@ import { UnauthorizedComponent } from './shared/components/unauthorized/unauthor
 import { ForbiddenComponent } from './shared/components/forbidden/forbidden.component';
 import { Translations } from './core/services/translations.service';
 
+import { Banner } from './shared/components/banner/banner.component';
+
 let translations = Translations.getInstance();
 
 const routes: Routes = [
@@ -36,7 +38,8 @@ const routes: Routes = [
     canActivate: [InterceptorGuard],
     data: {
       title: translations.titles.home, 
-      breadcrumb: translations.titles.home
+      breadcrumb: translations.titles.home,
+      banner: new Banner('./assets/svg/banner.svg', translations.banner.welcome, translations.banner.gccollab)
     }
   },
   {

src/app/app.component.html

@@ -2,17 +2,16 @@
             (headerToggleEvent)="headerToggleEvent($event)" 
             [activeRoute]="activeRoute">
 </app-header>
-<app-banner *ngIf="showHeaderFooter" 
-            [headerExpanded]="showSearchBar"
-            [textTop]="translations.banner.welcome | translate"
-            [textBottom]="translations.banner.gccollab | translate">
+<app-banner *ngIf="showBanner" 
+            [model]="banner"
+            [headerExpanded]="showSearchBar">
 </app-banner>
 
 <!-- <app-page-title *ngIf="showHeaderFooter" 
                 [headerExpanded]="showSearchBar">
 </app-page-title> -->
 
-<div [ngClass]="{'gcc-main': showHeaderFooter}">
+<div [ngClass]="showHeaderFooter ? 'gcc-main' + (banner ? '' : (showSearchBar ? ' gcc-header-expanded' : ' gcc-header'))  : ''">
     <router-outlet></router-outlet>
 </div>
 

src/app/app.component.scss

@@ -1,8 +1,17 @@
 @import '../assets//scss/partials/layout';
+@import "../assets/scss/partials/header";
 
 .gcc-main {
     flex: 1;
     width: calc(100% - ($gutter-desktop * 2));
     margin: 0 auto;
     padding: $padding-vertical 0;
+}
+
+.gcc-header {
+    margin-top: $header-height-desktop;
+}
+
+.gcc-header-expanded {
+    margin-top: $header-height-expanded-desktop;
 }

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router, RouterEvent }from '@angular/router';
+import { ActivatedRoute, NavigationEnd, NavigationStart, Router, RouterEvent }from '@angular/router';
 import { filter, Subscription } from 'rxjs';
 import { CoreRoutes } from './core/constants/routes.constants';
 
@@ -8,6 +8,7 @@ import { OidcSecurityService } from 'angular-auth-oidc-client';
 import { TranslateService } from "@ngx-translate/core";
 import { LanguageStorageService } from './core/services/language-storage.service';
 import { Translations } from './core/services/translations.service';
+import { Banner } from './shared/components/banner/banner.component';
 
 
 @Component({
@@ -19,7 +20,10 @@ export class AppComponent implements OnDestroy {
 
   showHeaderFooter: boolean = true;
   showSearchBar: boolean = false;
+  showBanner: boolean = false;
   activeRoute: string = CoreRoutes.Home;
+  banner: Banner | undefined;
+
   private checkAuthSub!: Subscription;
   private langChangeSub!: Subscription;
   private routeChangeSub!: Subscription;
@@ -28,6 +32,7 @@ export class AppComponent implements OnDestroy {
               public translations: Translations,
               private translateService: TranslateService,
               private languageStorageService: LanguageStorageService,
+              private activatedRoute: ActivatedRoute,
               private router: Router) {
 
   }
@@ -85,13 +90,31 @@ export class AppComponent implements OnDestroy {
       let queryIndex = url.indexOf('?');
       url = url.substring(1, queryIndex > -1 ? queryIndex : undefined);
 
-      if (url === CoreRoutes.Splash) 
+      if (url === CoreRoutes.Splash) {
         this.showHeaderFooter = false;
-      else
+      } 
+      else {
         this.showHeaderFooter = true;
+      }
 
       this.activeRoute = url;
-     });
+
+      this.banner = this.getRouteData('banner');
+      this.showBanner = this.banner instanceof Banner;
+    });
+  }
+
+  getRouteData(key: string) {
+    let child = this.activatedRoute.firstChild;
+    while (child) {
+      if (child.firstChild) {
+        child = child.firstChild;
+      } else if (child.snapshot.data && child.snapshot.data[key]) {
+        return child.snapshot.data[key];
+      } else {
+        return null;
+      }
+    }
   }
 
   headerToggleEvent(toggled: boolean): void {

src/app/shared/components/banner/banner.component.html

@@ -1,15 +1,15 @@
 <div class="banner" 
      [ngClass]="headerExpanded ? 'gcc-header-expanded' : 'gcc-header'"
-     [ngStyle]="{'background': 'url(' + imgUrl + ')'}">
-  <div class="banner-text-container">
+     [ngStyle]="{'background': 'url(' + model?.backgroundImage + ')'}">
+  <div *ngIf="model" class="banner-text-container">
     <div class="top">
       <div>
-        {{ textTop }}
+        {{ model.textTop | translate }}
       </div>
     </div>
     <div class="bottom">
       <div>
-        {{ textBottom }}
+        {{ model.textBottom | translate }}
       </div>
     </div>
   </div>

src/app/shared/components/banner/banner.component.ts

@@ -11,11 +11,22 @@ import { Translations } from 'src/app/core/services/translations.service';
 
 export class BannerComponent {
 
+  @Input() model: Banner | undefined;
   @Input() headerExpanded: boolean = false;
-  @Input() textTop: string = '';
-  @Input() textBottom: string = '';
-  @Input() imgUrl: string = '../../../../assets/svg/banner.svg';
 
   constructor(public translations: Translations) {}
 
 }
+
+export class Banner {
+
+  textTop: string;
+  textBottom: string;
+  backgroundImage: string = '../../../../assets/svg/banner.svg';
+
+  constructor(backgroundImage: string, textTop: string = '', textBottom: string = '') {
+    this.backgroundImage = backgroundImage;
+    this.textTop = textTop;
+    this.textBottom = textBottom;
+  }
+}