Merge pull request #1044 from puzzle/feature/987-display-filter

Feature/987 display filter

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

@@ -1,6 +1,6 @@
 <div id="okrBanner" #okrBanner>
   <div class="d-flex flex-row">
-    <div [ngClass]="isMobileDevice() ? 'filters' : 'none'" class="w-100 h-100 m-0 d-flex filters" slot="content">
+    <div class="w-100 h-100 m-0 d-flex" slot="content">
       <section class="d-none d-md-flex">
         <div class="header-content h-100 m-0 pt-3 pb-3 d-flex gap-2 flex-column container-fluid">
           <div class="d-flex align-items-end gap-2">
@@ -35,7 +35,7 @@
         </mat-accordion>
       </section>
     </div>
-    <div *ngIf="!isMobileDevice()" class="d-flex justify-content-end">
+    <div class="d-flex justify-content-end d-none d-md-flex">
       <app-okr-tangram [attr.data-testId]="'okr-logo'"></app-okr-tangram>
     </div>
   </div>

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

@@ -1,3 +1 @@
-<div [style.width]="getWidth()">
-  <img alt="okr-logo" src="{{ this.trianglesSrc$ | async }}" />
-</div>
+<img alt="okr-logo" ngSrc="{{ this.trianglesSrc$ | async }}" width="274" height="140" />

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

@@ -1,11 +0,0 @@
-div {
-  display: block;
-  width: 100px;
-
-  @media (min-width: 576px) {
-    width: 180px;
-  }
-  @media (min-width: 992px) {
-    width: 274px;
-  }
-}

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

@@ -1,31 +1,20 @@
 import { Component } from '@angular/core';
 import { isMobileDevice } from '../../common';
 import { ConfigService } from '../../../services/config.service';
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { BehaviorSubject, map, Observable, Subject, Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-okr-tangram',
   templateUrl: 'okr-tangram.component.html',
   styleUrl: 'okr-tangram.component.scss',
 })
 export class OkrTangramComponent {
-  private readonly MOBILE_WIDTH = 100;
-  private readonly DESKTOP_WIDTH = 274;
+  private readonly DEFAULT_TRIANGLE_SRC = 'assets/images/empty.svg';
+  trianglesSrc$ = new Observable<string>();
 
-  getWidth() {
-    return isMobileDevice() ? this.MOBILE_WIDTH : this.DESKTOP_WIDTH;
-  }
-
-  private subscription?: Subscription;
-  trianglesSrc$ = new BehaviorSubject<String>('assets/images/empty.svg');
-
-  constructor(private configService: ConfigService) {}
-
-  ngOnInit(): void {
-    this.subscription = this.configService.config$.subscribe((config) => {
-      if (config.triangles) {
-        this.trianglesSrc$.next(config.triangles);
-      }
-    });
+  constructor(private readonly configService: ConfigService) {
+    this.trianglesSrc$ = this.configService.config$.pipe(
+      map((config) => config.triangles || this.DEFAULT_TRIANGLE_SRC),
+    );
   }
 }

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

@@ -23,6 +23,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatTableModule } from '@angular/material/table';
 import { testUser, users } from '../shared/testData';
 import { UserService } from '../services/user.service';
+import { ConfigService } from '../services/config.service';
 
 describe('TeamManagementComponent', () => {
   let component: TeamManagementComponent;
@@ -37,6 +38,10 @@ describe('TeamManagementComponent', () => {
     getUsers: () => of(users),
   };
 
+  const configServiceMock = {
+    config$: of({}),
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
@@ -69,6 +74,7 @@ describe('TeamManagementComponent', () => {
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteMock },
         { provide: UserService, useValue: userServiceMock },
+        { provide: ConfigService, useValue: configServiceMock },
       ],
     }).compileComponents();
   });