Merge pull request #29 from Gepardec/feature/686

Feature/686

src/app/app.component.spec.ts

@@ -69,13 +69,6 @@ describe('AppComponent', () => {
     spyOn(authService, 'loadDiscoveryDocumentAndTryLogin').and.returnValue(new Promise(() => Promise.resolve()));
 
     fixture.detectChanges();
-    component.ngOnInit().then(() => {
-      expect(component.configServiceSubscription).toBeTruthy();
-      expect(component.configServiceSubscription.closed).toBeFalse();
-      component.ngOnDestroy();
-
-      expect((component as any).configServiceSubscription.closed).toBeTrue();
-    });
   });
 
   class ConfigServiceMock {

src/app/app.component.ts

@@ -1,12 +1,13 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {OAuthService} from 'angular-oauth2-oidc';
 import {authConfig, cypressAuthConfig} from '@mega/shared/util-auth';
-import {Router} from '@angular/router';
-import {ConfigService, UserService} from '@mega/shared/data-service';
-import {firstValueFrom, Subscription} from 'rxjs';
+import {ConfigService, ErrorService, UserService} from '@mega/shared/data-service';
+import {catchError, firstValueFrom, of, switchMap, timer} from 'rxjs';
 import {TranslateService} from '@ngx-translate/core';
-import { InfoComponent } from './domains/shared/ui-common/info/info.component';
-import { HeaderComponent } from './domains/shared/ui-common/header/header.component';
+import {HeaderComponent, InfoComponent} from '@mega/shared/ui-common';
+import {HttpErrorResponse} from '@angular/common/http';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {HealthResponse} from './domains/shared/data-model/HealthResponse';
 
 @Component({
     selector: 'app-root',
@@ -15,18 +16,34 @@ import { HeaderComponent } from './domains/shared/ui-common/header/header.compon
     standalone: true,
     imports: [HeaderComponent, InfoComponent]
 })
+export class AppComponent implements OnInit {
+  constructor(
+    private oAuthService: OAuthService,
+    private configService: ConfigService,
+    private userService: UserService,
+    private translate: TranslateService,
+    private errorService: ErrorService,
+  ) {
+    this.translate.addLangs(['de']);
+    this.translate.setDefaultLang('de');
 
-export class AppComponent implements OnInit, OnDestroy {
-
-  configServiceSubscription: Subscription;
-
-  constructor(private router: Router,
-              private oAuthService: OAuthService,
-              private configService: ConfigService,
-              private userService: UserService,
-              private translate: TranslateService) {
-    translate.addLangs(['de']);
-    translate.setDefaultLang('de');
+    // Query wellness endpoint every minute
+    timer(0, 60 * 1000)
+      .pipe(
+        takeUntilDestroyed(),
+        switchMap(() =>
+          this.configService
+            .getWellness()
+            .pipe(
+              catchError((error: HttpErrorResponse) =>
+                of(error.error as HealthResponse)
+              )
+            )
+        )
+      )
+      .subscribe((wellnessResponse) =>
+        this.errorService.setWellnessResponse(wellnessResponse)
+      );
   }
 
   async ngOnInit(): Promise<void> {
@@ -47,8 +64,4 @@ export class AppComponent implements OnInit, OnDestroy {
       this.userService.loginUser();
     }
   }
-
-  ngOnDestroy(): void {
-    this.configServiceSubscription?.unsubscribe();
-  }
 }

src/app/domains/monthly-report/feature-monthly-report/bills/bills.component.html

@@ -10,7 +10,6 @@
       </ng-template>
     </mat-card-title>
   </mat-card-header>
-
   <mat-card-content [class.no-warnings]="!billInfo?.hasAttachmentWarnings && billInfo?.sumBills === 0 && !billInfo.employeeHasCreditCard" >
     <ng-container *ngIf="!billInfo">
       <ngx-skeleton-loader [theme]="{ height: '56px' }"
@@ -27,7 +26,6 @@
     <ng-container *ngIf="billInfo?.sumBills > 0 || billInfo?.employeeHasCreditCard">
       <div *ngIf="billInfo">
         <mat-table *ngIf="billInfo" [dataSource]="toBillsData(billInfo)" class="mat-elevation-z1">
-
           <ng-container matColumnDef="icon">
             <mat-header-cell *matHeaderCellDef></mat-header-cell>
             <mat-cell *matCellDef="let row">
@@ -36,22 +34,18 @@
               </ng-container>
             </mat-cell>
           </ng-container>
-
           <ng-container matColumnDef="description">
             <mat-header-cell *matHeaderCellDef></mat-header-cell>
             <mat-cell *matCellDef="let row">{{ row.description }}</mat-cell>
           </ng-container>
-
           <ng-container matColumnDef="value">
             <mat-header-cell *matHeaderCellDef></mat-header-cell>
             <mat-cell *matCellDef="let row">{{ row.value }}</mat-cell>
           </ng-container>
-
           <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
         </mat-table>
       </div>
     </ng-container>
-
     <div *ngIf="billInfo?.employeeHasCreditCard" class="credit-card-warning">
       <app-credit-card-warning></app-credit-card-warning>
     </div>

src/app/domains/monthly-report/feature-monthly-report/feature-monthly-report.component.html

@@ -3,7 +3,11 @@
     [monthlyReport]="monthlyReport"
     (refreshMonthlyReport)="emitRefreshMonthlyReport()"/>
 
-  <div [ngClass]="'mega-dash-grid'">
+  <div *ngIf="errorService.isDown()">
+    <app-third-party-service-error [extraClasses]="'fill-parent full-height'"></app-third-party-service-error>
+  </div>
+
+  <div *ngIf="errorService.isUp()" [ngClass]="'mega-dash-grid'">
     <app-time-check
       [monthlyReport]="monthlyReport"
       [ngClass]="'time-check-grid'"/>

src/app/domains/monthly-report/feature-monthly-report/feature-monthly-report.component.ts

@@ -1,6 +1,5 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, DestroyRef, OnInit} from '@angular/core';
 import {MonthlyReport} from '@mega/monthly-report/data-model';
-import {Subscription} from 'rxjs';
 import {MonthlyReportService} from '@mega/monthly-report/data-service';
 import {JourneyCheckComponent} from './journey-check/journey-check.component';
 import {GeneralInfoComponent} from './general-info/general-info.component';
@@ -9,7 +8,11 @@ import {TimeCheckComponent} from './time-check/time-check.component';
 import {InformationTopBarComponent} from './information-top-bar/information-top-bar.component';
 import {NgClass, NgIf} from '@angular/common';
 import {LeadsComponent} from './leads/leads.component';
-import {BillsComponent} from "./bills/bills.component";
+import {BillsComponent} from './bills/bills.component';
+import {ErrorService} from '@mega/shared/data-service';
+import {
+  ThirdPartyServiceErrorComponent
+} from '../../project-management/ui-common/third-party-service-error/third-party-service-error.component';
 
 @Component({
   selector: 'app-monthly-report',
@@ -25,15 +28,17 @@ import {BillsComponent} from "./bills/bills.component";
     JourneyCheckComponent,
     LeadsComponent,
     BillsComponent,
+    ThirdPartyServiceErrorComponent,
     NgIf
   ]
 })
 export class FeatureMonthlyReportComponent implements OnInit {
 
   public monthlyReport: MonthlyReport;
-  private monthlyReportSubscription: Subscription;
 
-  constructor(private monthlyReportService: MonthlyReportService) {
+  constructor(private monthlyReportService: MonthlyReportService,
+              public errorService: ErrorService,
+              private destroyRef: DestroyRef) {
   }
 
   emitRefreshMonthlyReport() {
@@ -45,14 +50,14 @@ export class FeatureMonthlyReportComponent implements OnInit {
   }
 
   getAllTimeEntriesByDate(year: number, month: number): void {
-    this.monthlyReportSubscription = this.monthlyReportService.getAllByDate(year, month)
+    this.monthlyReportService.getAllByDate(year, month)
       .subscribe((monthlyReport: MonthlyReport) => {
         this.monthlyReport = monthlyReport;
       });
   }
 
   getAllTimeEntries(): void {
-    this.monthlyReportSubscription = this.monthlyReportService.getAll()
+    this.monthlyReportService.getAll()
       .subscribe((monthlyReport: MonthlyReport) => {
         if (monthlyReport) {
           this.monthlyReport = monthlyReport;

src/app/domains/office-management/data-service/office-management/office-management.service.spec.ts

@@ -96,7 +96,8 @@ describe('OfficeManagementService', () => {
         entryDate: '2021-10-01',
         finishedComments: 10,
         nonBillableTime: '14',
-        totalComments: 20
+        totalComments: 20,
+        percentageOfHoursSpentInThisProject: 11
       }
     ]
   }

src/app/domains/office-management/feature-office-management/feature-office-management.component.html

@@ -4,7 +4,14 @@
     <app-datepicker-month-year (dateChanged)="dateChanged($event)" [date]="date" [maxMonth]="maxMonthDate"></app-datepicker-month-year>
   </div>
 </mat-toolbar>
-<app-enterprise-card></app-enterprise-card>
-<app-projects-without-leads-card></app-projects-without-leads-card>
-<app-project-overview-card></app-project-overview-card>
-<app-employee-card></app-employee-card>
+
+<div *ngIf="errorService.isUp()">
+  <app-projects-without-leads-card></app-projects-without-leads-card>
+  <app-project-overview-card></app-project-overview-card>
+  <app-employee-card></app-employee-card>
+</div>
+
+<div *ngIf="errorService.isDown()">
+  <app-enterprise-card></app-enterprise-card>
+  <app-third-party-service-error [extraClasses]="'mat-elevation-z6 mt-10 full-width bigger-font'"></app-third-party-service-error>
+</div>

src/app/domains/office-management/feature-office-management/feature-office-management.component.ts

@@ -12,6 +12,11 @@ import {EnterpriseCardComponent} from './enterprise-card/enterprise-card.compone
 import {DatepickerMonthYearComponent} from '@mega/shared/ui-common';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {ErrorService} from '@mega/shared/data-service';
+import {NgIf} from '@angular/common';
+import {
+  ThirdPartyServiceErrorComponent
+} from '../../project-management/ui-common/third-party-service-error/third-party-service-error.component';
 
 const moment = _moment;
 
@@ -29,6 +34,8 @@ const moment = _moment;
     EmployeeCardComponent,
     TranslateModule,
     MatBottomSheetModule,
+    ThirdPartyServiceErrorComponent,
+    NgIf,
   ]
 })
 export class FeatureOfficeManagementComponent implements OnInit, OnDestroy {
@@ -38,7 +45,9 @@ export class FeatureOfficeManagementComponent implements OnInit, OnDestroy {
   dateSelectionSub: Subscription;
   maxMonthDate: number = 1;
 
-  constructor(private omService: OfficeManagementService) {
+  constructor(private omService: OfficeManagementService,
+              public errorService: ErrorService
+  ) {
   }
 
   get date() {

src/app/domains/office-management/feature-office-management/project-overview-card/project-overview-card.component.spec.ts

@@ -196,7 +196,8 @@ describe('ProjectOverviewCardComponent', () => {
         entryDate: '2021-10-2',
         finishedComments: 11,
         nonBillableTime: '15',
-        totalComments: 22
+        totalComments: 22,
+        percentageOfHoursSpentInThisProject: 11
       },
       {
         employee: EmployeeMock.employee,
@@ -208,7 +209,8 @@ describe('ProjectOverviewCardComponent', () => {
         entryDate: '2021-10-2',
         finishedComments: 11,
         nonBillableTime: '15',
-        totalComments: 22
+        totalComments: 22,
+        percentageOfHoursSpentInThisProject: 11
       },
       {
         employee: EmployeeMock.employee,
@@ -220,7 +222,8 @@ describe('ProjectOverviewCardComponent', () => {
         entryDate: '2021-10-2',
         finishedComments: 11,
         nonBillableTime: '15',
-        totalComments: 22
+        totalComments: 22,
+        percentageOfHoursSpentInThisProject: 11
       },
     ];
   }

src/app/domains/project-management/data-service/project-management/project-management.service.spec.ts

@@ -94,7 +94,8 @@ describe('ProjectManagementService', () => {
         entryDate: '2021-10-01',
         finishedComments: 10,
         nonBillableTime: '14',
-        totalComments: 20
+        totalComments: 20,
+        percentageOfHoursSpentInThisProject: 11
       }
     ];
 

src/app/domains/project-management/feature-project-management/feature-project-management.component.html

@@ -15,7 +15,11 @@ <h2>{{'project-management.actions' | translate}}</h2>
       </mat-toolbar-row>
     </mat-toolbar>
   </div>
-  <div class="mat-elevation-z6">
+
+  <div *ngIf="this.errorService.isDown()">
+    <app-third-party-service-error [extraClasses]="'mat-elevation-z6 mt-10 full-width bigger-font'"></app-third-party-service-error>
+  </div>
+  <div class="mat-elevation-z6" *ngIf="this.errorService.isUp()">
     <mat-card *ngIf="!pmEntries; else datatable">
       <mat-card-content>
         <ngx-skeleton-loader [theme]="{ height: '125px' }"

src/app/domains/project-management/feature-project-management/feature-project-management.component.spec.ts

@@ -524,7 +524,8 @@ describe('FeatureProjectManagementComponent', () => {
         entryDate: '2021-10-2',
         finishedComments: 11,
         nonBillableTime: '15',
-        totalComments: 22
+        totalComments: 22,
+        percentageOfHoursSpentInThisProject: 11
       },
       {
         employee: ProjectManagementMock.employeeHuber,
@@ -536,7 +537,8 @@ describe('FeatureProjectManagementComponent', () => {
         entryDate: '2021-10-01',
         finishedComments: 10,
         nonBillableTime: '14',
-        totalComments: 20
+        totalComments: 20,
+        percentageOfHoursSpentInThisProject: 11
       },
       {
         employee: ProjectManagementMock.employeeHuber,
@@ -548,7 +550,8 @@ describe('FeatureProjectManagementComponent', () => {
         entryDate: '2021-10-01',
         finishedComments: 10,
         nonBillableTime: '14',
-        totalComments: 20
+        totalComments: 20,
+        percentageOfHoursSpentInThisProject: 11
       }
     ];
 

src/app/domains/project-management/feature-project-management/feature-project-management.component.ts

@@ -16,6 +16,7 @@ import {ProjectManagementService} from '@mega/project-management/data-service';
 import {
   CommentService,
   ConfigService,
+  ErrorService,
   ProjectCommentService,
   ProjectEntriesService,
   SnackbarService,
@@ -41,6 +42,9 @@ import {MatCardModule} from '@angular/material/card';
 import {MatButtonModule} from '@angular/material/button';
 import {NgClass, NgFor, NgIf} from '@angular/common';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {
+  ThirdPartyServiceErrorComponent
+} from '../ui-common/third-party-service-error/third-party-service-error.component';
 
 const moment = _moment;
 
@@ -71,7 +75,8 @@ const moment = _moment;
     DoneCommentsIndicatorComponent,
     BillableTimesComponent,
     BillableTimesFractionComponent,
-    TranslateModule
+    TranslateModule,
+    ThirdPartyServiceErrorComponent
   ]
 })
 export class FeatureProjectManagementComponent implements OnInit, OnDestroy {
@@ -108,7 +113,8 @@ export class FeatureProjectManagementComponent implements OnInit, OnDestroy {
               private projectEntryService: ProjectEntriesService,
               private snackbarService: SnackbarService,
               private translate: TranslateService,
-              private projectCommentService: ProjectCommentService) {
+              private projectCommentService: ProjectCommentService,
+              public errorService: ErrorService) {
   }
 
   get date() {

src/app/domains/project-management/ui-common/third-party-service-error/third-party-service-error.component.html

@@ -0,0 +1,10 @@
+<mat-card  [ngClass]="this.extraClasses">
+  <mat-card-content>
+    <div class="third-party-service-error__content_container">
+      <span class="error-message_container">
+        <mat-icon color="primary">sentiment_very_dissatisfied</mat-icon>
+          {{'error.thirdPartyDown' | translate}}
+      </span>
+    </div>
+  </mat-card-content>
+</mat-card>