#705 restructure frontend app and add navbar and banner to team-manag…

…ement

frontend/src/app/app.component.html

@@ -1 +1,2 @@
+<app-application-top-bar></app-application-top-bar>
 <router-outlet></router-outlet>

frontend/src/app/app.module.ts

@@ -28,7 +28,6 @@ import { MatRadioModule } from '@angular/material/radio';
 import { ConfigService } from './config.service';
 import { firstValueFrom } from 'rxjs';
 import { environment } from '../environments/environment';
-import { ApplicationTopBarComponent } from './components/application-top-bar/application-top-bar.component';
 import { TeamComponent } from './components/team/team.component';
 import { OverviewComponent } from './components/overview/overview.component';
 import { ObjectiveComponent } from './components/objective/objective.component';
@@ -62,6 +61,7 @@ import { CheckInFormMetricComponent } from './components/checkin/check-in-form-m
 import { CheckInFormOrdinalComponent } from './components/checkin/check-in-form-ordinal/check-in-form-ordinal.component';
 import { CheckInFormComponent } from './components/checkin/check-in-form/check-in-form.component';
 import { SidepanelComponent } from './components/sidepanel/sidepanel.component';
+import { ApplicationTopBarComponent } from './components/application-top-bar/application-top-bar.component';
 
 function initOauthFactory(configService: ConfigService, oauthService: OAuthService) {
   return async () => {

frontend/src/app/components/application-banner/application-banner.component.html

@@ -36,13 +36,7 @@
       </section>
     </div>
     <div *ngIf="!isMobileDevice()" class="d-flex justify-content-end">
-      <img
-        alt="okr-tangram"
-        height="140"
-        ngSrc="../../../assets/images/triangles-okr-header.svg"
-        slot="tangram"
-        width="274"
-      />
+      <app-okr-tangram></app-okr-tangram>
     </div>
   </div>
 </div>

frontend/src/app/components/application-banner/application-banner.component.scss

@@ -1,14 +1,5 @@
 @import "../style/variables";
 
-#okrBanner {
-  position: fixed;
-  width: 100%;
-  height: min-content;
-  z-index: 100;
-  transition: 0.5s;
-  background-color: #dcedf9;
-}
-
 .header-content {
   padding-left: 1.5rem;
 }

frontend/src/app/components/application-top-bar/application-top-bar.component.html

@@ -1,8 +1,8 @@
 <div id="topBarHeight">
   <div id="okrTopbar">
-    <span class="d-flex h-100 align-items-center ps-4">
-      <img alt="okr-logo" height="32" ngSrc="../../../assets/images/okr-logo.svg" width="140" />
-    </span>
+    <a class="d-flex h-100 align-items-center ps-4" routerLink="">
+      <img alt="okr-logo" height="32" ngSrc="/assets/images/okr-logo.svg" width="140" />
+    </a>
     <div class="d-flex align-items-center">
       <div>
         <a routerLink="team-management" class="topBarEntry btn" [attr.data-testId]="'team-management'">

frontend/src/app/components/application-top-bar/application-top-bar.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { map } from 'rxjs';
 import { ConfigService } from '../../config.service';
-// import { TeamManagementComponent } from '../shared/dialog/team-management/team-management.component';
-import { Router } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
 import { UserService } from '../../services/user.service';
 import { getFullNameFromUser } from '../../shared/types/model/User';
 
@@ -35,7 +34,16 @@ export class ApplicationTopBarComponent implements OnInit {
       )
       .subscribe();
 
-    this.userFullName = getFullNameFromUser(this.userService.getCurrentUser());
+    this.initUserFullName();
+  }
+
+  private initUserFullName() {
+    // user is loaded on base route resolver. We have to wait until routing is done.
+    this.router.events.subscribe((val) => {
+      if (!this.userFullName && val instanceof NavigationEnd) {
+        this.userFullName = getFullNameFromUser(this.userService.getCurrentUser());
+      }
+    });
   }
 
   logOut() {

frontend/src/app/components/overview/overview.component.html

@@ -1,6 +1,3 @@
-<router-outlet></router-outlet>
-
-<app-application-top-bar></app-application-top-bar>
 <app-application-banner id="bannerComponent"></app-application-banner>
 <div id="overview" class="overviewContainer px-sm-4" [ngStyle]="{ 'padding-top.px': overviewPadding | async }">
   <app-team

frontend/src/app/shared/custom/okr-tangram/okr-tangram.component.html

@@ -0,0 +1 @@
+<img alt="okr-tangram" height="140" ngSrc="/assets/images/triangles-okr-header.svg" slot="tangram" width="274" />

frontend/src/app/shared/custom/okr-tangram/okr-tangram.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-okr-tangram',
+  templateUrl: './okr-tangram.component.html',
+  styleUrl: './okr-tangram.component.css',
+})
+export class OkrTangramComponent {}

frontend/src/app/shared/shared.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { ExampleDialogComponent } from './dialog/example-dialog/example-dialog.component';
 import { ObjectiveFormComponent } from './dialog/objective-dialog/objective-form.component';
 import { UnitValueTransformationPipe } from './pipes/unit-value-transformation/unit-value-transformation.pipe';
@@ -16,6 +16,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatIconModule } from '@angular/material/icon';
+import { OkrTangramComponent } from './custom/okr-tangram/okr-tangram.component';
 
 @NgModule({
   declarations: [
@@ -28,6 +29,7 @@ import { MatIconModule } from '@angular/material/icon';
     ScoringComponent,
     CompleteDialogComponent,
     DialogHeaderComponent,
+    OkrTangramComponent,
   ],
   imports: [
     CommonModule,
@@ -39,6 +41,7 @@ import { MatIconModule } from '@angular/material/icon';
     MatSelectModule,
     MatRadioModule,
     MatIconModule,
+    NgOptimizedImage,
   ],
   exports: [
     ExampleDialogComponent,
@@ -50,6 +53,7 @@ import { MatIconModule } from '@angular/material/icon';
     ScoringComponent,
     CompleteDialogComponent,
     DialogHeaderComponent,
+    OkrTangramComponent,
   ],
 })
 export class SharedModule {}

frontend/src/app/team-management/team-management-banner/team-management-banner.component.html

@@ -0,0 +1,8 @@
+<div id="okrBanner">
+  <div class="d-flex flex-row">
+    <div class="d-flex flex-grow-1"></div>
+    <div *ngIf="!isMobileDevice()" class="d-flex justify-content-end">
+      <app-okr-tangram></app-okr-tangram>
+    </div>
+  </div>
+</div>

frontend/src/app/team-management/team-management-banner/team-management-banner.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { isMobileDevice } from '../../shared/common';
+
+@Component({
+  selector: 'app-team-management-banner',
+  templateUrl: './team-management-banner.component.html',
+  styleUrl: './team-management-banner.component.css',
+})
+export class TeamManagementBannerComponent {
+  protected readonly isMobileDevice = isMobileDevice;
+}

frontend/src/app/team-management/team-management.component.html

@@ -1 +1 @@
-<button (click)="openTeamManagement()">add team</button>
+<app-team-management-banner></app-team-management-banner>

frontend/src/app/team-management/team-management.module.ts

@@ -1,15 +1,16 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { TeamManagementComponent } from './team-management.component';
 import { TeamManagementRoutingModule } from './team-management-routing.module';
 import { AddEditTeamDialog } from './add-edit-team-dialog/add-edit-team-dialog.component';
 import { SharedModule } from '../shared/shared.module';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TeamManagementBannerComponent } from './team-management-banner/team-management-banner.component';
 
 @NgModule({
-  declarations: [TeamManagementComponent, AddEditTeamDialog],
+  declarations: [TeamManagementComponent, AddEditTeamDialog, TeamManagementBannerComponent],
   imports: [
     CommonModule,
     MatDialogModule,
@@ -18,6 +19,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     SharedModule,
     FormsModule,
     ReactiveFormsModule,
+    NgOptimizedImage,
   ],
 })
 export class TeamManagementModule {}

frontend/src/style/styles.scss

@@ -287,3 +287,12 @@ mat-form-field.quarter-filter .mat-mdc-text-field-wrapper {
 .break-word {
   word-break: break-all;
 }
+
+#okrBanner {
+  position: fixed;
+  width: 100%;
+  height: min-content;
+  z-index: 100;
+  transition: 0.5s;
+  background-color: #dcedf9;
+}