Merge pull request #449 from puzzle/feature/refactor-frontend

Feature/refactor frontend

frontend/src/app/app-routing.module.ts

@@ -1,16 +1,39 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { ActivatedRouteSnapshot, ResolveFn, RouterModule, Routes } from '@angular/router';
 import { OverviewComponent } from './overview/overview.component';
-import { ObjectiveDetailComponent } from './objective-detail/objective-detail.component';
-import { KeyresultDetailComponent } from './keyresult-detail/keyresult-detail.component';
+import { EMPTY, of } from 'rxjs';
+import { SidepanelComponent } from './shared/custom/sidepanel/sidepanel.component';
+
+/**
+ * Resolver for get the id from url like `/objective/42` or `/keyresult/42`.
+ */
+export const getIdFromPathResolver: ResolveFn<number> = (route: ActivatedRouteSnapshot) => {
+  try {
+    let id = Number.parseInt(route.url[1].path);
+    return of(id);
+  } catch (error) {
+    console.error('Can not get id from URL:', error);
+    return EMPTY;
+  }
+};
 
 const routes: Routes = [
   {
     path: '',
     component: OverviewComponent,
     children: [
-      { path: 'objective/:id', component: ObjectiveDetailComponent, pathMatch: 'full' },
-      { path: 'keyresult/:id', component: KeyresultDetailComponent, pathMatch: 'full' },
+      {
+        path: 'objective/:id',
+        component: SidepanelComponent,
+        resolve: { id: getIdFromPathResolver },
+        data: { type: 'Objective' },
+      },
+      {
+        path: 'keyresult/:id',
+        component: SidepanelComponent,
+        resolve: { id: getIdFromPathResolver },
+        data: { type: 'KeyResult' },
+      },
     ],
   },
   { path: '**', redirectTo: '', pathMatch: 'full' },

frontend/src/app/app.component.html

@@ -1,28 +1,7 @@
 <div>
   <app-application-top-bar></app-application-top-bar>
-
-  <mat-drawer-container hasBackdrop="true">
-    <mat-drawer
-      (closed)="enableScrolling()"
-      (closedStart)="closeDrawer()"
-      (keydown.enter)="closeDrawer()"
-      (keydown.escape)="closeDrawer()"
-      (keydown.space)="closeDrawer()"
-      [opened]="!!sidenavContentInformation"
-      class="mt-5 position-fixed p-3 col-sm-12 col-md-5"
-      data-test-id="mat-drawer"
-      mode="over"
-      position="end"
-    >
-      <app-drawer-content
-        *ngIf="sidenavContentInformation"
-        [drawerContent]="sidenavContentInformation!"
-      ></app-drawer-content>
-    </mat-drawer>
-    <mat-drawer-content>
-      <app-application-banner id="bannerComponent"></app-application-banner>
-      <div class="mt-header-height"></div>
-      <router-outlet></router-outlet>
-    </mat-drawer-content>
-  </mat-drawer-container>
+  <app-application-banner id="bannerComponent"></app-application-banner>
+  <div class="mt-header-height">
+    <router-outlet></router-outlet>
+  </div>
 </div>

frontend/src/app/app.component.spec.ts

@@ -1,16 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingHarness, RouterTestingModule } from '@angular/router/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
-import { CUSTOM_ELEMENTS_SCHEMA, NgZone } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TranslateTestingModule } from 'ngx-translate-testing';
 import { AuthConfig, OAuthModule, OAuthService } from 'angular-oauth2-oidc';
-import { MatDrawerContainerHarness, MatDrawerHarness } from '@angular/material/sidenav/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 // @ts-ignore
 import * as de from '../assets/i18n/de.json';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { By } from '@angular/platform-browser';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NavigationEnd, Routes } from '@angular/router';
@@ -82,55 +80,4 @@ describe('AppComponent', () => {
   test('should create the app', () => {
     expect(component).toBeTruthy();
   });
-
-  describe('Mat-drawer', () => {
-    test('should open and close mat-drawer', async () => {
-      await loader.getHarness(MatDrawerContainerHarness).then(async (drawerContainer: MatDrawerContainerHarness) => {
-        drawerContainer.getDrawers().then(async (drawers: MatDrawerHarness[]) => {
-          const drawer: MatDrawerHarness = drawers[0];
-          component.openDrawer();
-          fixture.detectChanges();
-          expect(await drawer.isOpen()).toEqual(true);
-          component.closeDrawer();
-          fixture.detectChanges();
-          expect(await drawer.isOpen()).toEqual(false);
-        });
-      });
-    });
-
-    test.each([
-      ['keydown.enter', false],
-      ['keydown.space', false],
-      ['keydown.escape', false],
-      ['', true],
-    ])('close on keyPress', async (event: string, isOpen: boolean) => {
-      await loader.getHarness(MatDrawerContainerHarness).then(async (drawerContainer) => {
-        drawerContainer.getDrawers().then(async (drawers) => {
-          let drawer = drawers[0];
-          component.openDrawer();
-
-          expect(await drawer.isOpen()).toEqual(true);
-          fixture.debugElement.triggerEventHandler(event, { bubbles: true });
-          fixture.detectChanges();
-
-          expect(await drawer.isOpen()).toEqual(isOpen);
-        });
-      });
-    });
-  });
-
-  describe('routing', () => {
-    test('should trigger openDrawer functionality if right path', async () => {
-      const ngZone: NgZone = TestBed.inject(NgZone);
-      const routerTest = await RouterTestingHarness.create();
-
-      await ngZone.run(async () => {
-        await routerTest.navigateByUrl('/objective/3');
-      });
-
-      fixture.detectChanges();
-      const content = fixture.debugElement.query(By.css('app-drawer-content'));
-      expect(content).toBeTruthy();
-    });
-  });
 });

frontend/src/app/app.component.ts

@@ -1,26 +1,20 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { filter, map, Observable } from 'rxjs';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { map } from 'rxjs';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { ConfigService } from './config.service';
-import { NotifierService } from './shared/services/notifier.service';
-import { drawerRoutes, ROUTE_PARAM_REGEX } from './shared/constantLibary';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent implements OnInit, OnDestroy {
-  sidenavContentInformation?: { id: number; type: string };
-  drawerOpen: boolean = false;
-
+export class AppComponent implements OnInit {
   constructor(
     public router: Router,
     private oauthService: OAuthService,
     private configService: ConfigService,
-    private notifierService: NotifierService,
   ) {
     // Try to login via url state
     oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
@@ -43,49 +37,5 @@ export class AppComponent implements OnInit, OnDestroy {
         }),
       )
       .subscribe();
-    this.router.events
-      .pipe(
-        filter((event) => event instanceof NavigationEnd),
-        map((event) => event as NavigationEnd),
-      )
-      .subscribe((event) => {
-        drawerRoutes.forEach((route) => {
-          if (event.url.startsWith(`/${route}/`)) {
-            const match = event.url.match(ROUTE_PARAM_REGEX);
-            if (match) {
-              const id = parseInt(match[1]);
-              this.sidenavContentInformation = { id: id, type: route };
-              this.openDrawer();
-            }
-          }
-        });
-      });
-
-    this.notifierService.closeDetailSubject.subscribe(() => {
-      this.closeDrawer();
-    });
-  }
-
-  ngOnDestroy() {
-    this.notifierService.closeDetailSubject.unsubscribe();
-  }
-
-  enableScrolling() {
-    document.body.setAttribute('style', 'overflow: visible;');
-  }
-
-  private disableScrolling() {
-    document.body.setAttribute('style', 'overflow: hidden;');
-  }
-
-  openDrawer() {
-    this.drawerOpen = true;
-    this.disableScrolling();
-  }
-
-  closeDrawer() {
-    this.drawerOpen = false;
-    this.sidenavContentInformation = undefined;
-    this.router.navigate(['/']);
   }
 }

frontend/src/app/app.module.ts

@@ -39,7 +39,6 @@ import { KeyresultComponent } from './keyresult/keyresult.component';
 import { KeyresultDetailComponent } from './keyresult-detail/keyresult-detail.component';
 import { ObjectiveDetailComponent } from './objective-detail/objective-detail.component';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { DrawerContentComponent } from './drawer-content/drawer-content.component';
 import { ConfidenceComponent } from './confidence/confidence.component';
 import { MatSliderModule } from '@angular/material/slider';
 import { ErrorInterceptor } from './shared/interceptors/error-interceptor.service';
@@ -58,7 +57,9 @@ import { ConfirmDialogComponent } from './shared/dialog/confirm-dialog/confirm-d
 import { CheckInFormComponent } from './shared/dialog/checkin/check-in-form/check-in-form.component';
 import { UnitLabelTransformationPipe } from './shared/pipes/unit-label-transformation/unit-label-transformation.pipe';
 import { ParseUnitValuePipe } from './shared/pipes/parse-unit-value/parse-unit-value.pipe';
-import { ScoringComponent } from './shared/scoring/scoring/scoring.component';
+import { SidepanelComponent } from './shared/custom/sidepanel/sidepanel.component';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
+import { ScoringComponent } from './shared/custom/scoring/scoring.component';
 import { QuarterFilterComponent } from './quarter-filter/quarter-filter.component';
 
 function initOauthFactory(configService: ConfigService, oauthService: OAuthService) {
@@ -102,7 +103,6 @@ export const MY_FORMATS = {
     ScoringComponent,
     KeyresultDetailComponent,
     ObjectiveDetailComponent,
-    DrawerContentComponent,
     ApplicationBannerComponent,
     KeyResultDialogComponent,
     ConfirmDialogComponent,
@@ -118,6 +118,7 @@ export const MY_FORMATS = {
     ParseUnitValuePipe,
     ObjectiveFormComponent,
     QuarterFilterComponent,
+    SidepanelComponent,
   ],
   imports: [
     CommonModule,
@@ -137,6 +138,7 @@ export const MY_FORMATS = {
     MatInputModule,
     MatTooltipModule,
     MatAutocompleteModule,
+    OverlayModule,
     ToastrModule.forRoot(),
     MatProgressSpinnerModule,
     TranslateModule.forRoot({
@@ -157,6 +159,9 @@ export const MY_FORMATS = {
     MatDividerModule,
     MatSidenavModule,
     MatCheckboxModule,
+    CdkOverlayOrigin,
+    CdkConnectedOverlay,
+    CdkOverlayOrigin,
   ],
   providers: [
     {

frontend/src/app/application-top-bar/application-top-bar.component.scss

@@ -1,5 +1,7 @@
+@import "_variables";
+
 #topBarHeight {
-  height: 48px;
+  height: $top-bar-height;
 }
 
 #okrTopbar {

frontend/src/app/confidence/confidence.component.html

@@ -1,4 +1,4 @@
-<div class="d-flex align-items-center" *ngIf="checkIn.confidence">
+<div class="d-flex align-items-center bg-light-gray justify-content-center" *ngIf="checkIn.confidence">
   <div
     [ngClass]="edit ? 'keyResult-attribute-edit' : 'keyResult-attribute-show'"
     [ngStyle]="{ 'background-color': backgroundColor }"

frontend/src/app/confidence/confidence.component.scss

@@ -5,3 +5,7 @@ p {
 mat-slider {
   min-width: 370px;
 }
+
+.bg-light-gray {
+  background-color: #f5f5f5;
+}

frontend/src/app/confidence/confidence.component.ts

@@ -15,7 +15,7 @@ export class ConfidenceComponent implements OnChanges {
   @Input() backgroundColor!: string;
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['checkIn']?.currentValue === undefined || changes['checkIn']?.currentValue === null) {
+    if (!changes['checkIn']?.currentValue) {
       this.checkIn = { confidence: 5 } as CheckInMin;
     }
   }