fix: make 'All Teams' button work as expected #1675

Author: Miguel7373

backend/src/main/java/ch/puzzle/okr/controller/EvaluationViewController.java

@@ -37,7 +37,7 @@ public EvaluationViewController(EvaluationViewMapper evaluationViewMapper,
             @ApiResponse(responseCode = "404", description = "The quarter or one of the teams were not found", content = @Content),
             @ApiResponse(responseCode = "401", description = "Not Authorized", content = @Content) })
     @GetMapping("")
-    public ResponseEntity<EvaluationDto> getEvaluation(@RequestParam(name = "team")
+    public ResponseEntity<EvaluationDto> getEvaluation(@RequestParam(name = "team", required = false)
     @Parameter(description = "List of Team ids the statistics are requested for") List<Long> teamIds,
                                                        @RequestParam(name = "quarter")
                                                        @Parameter(description = "Quarter id the statistics are requested for ") Long quarterId) {

backend/src/main/java/ch/puzzle/okr/service/validation/EvaluationViewValidationService.java

@@ -15,22 +15,18 @@ public class EvaluationViewValidationService
             ValidationBase<EvaluationView, RowId, EvaluationViewRepository, EvaluationViewPersistenceService> {
 
     private final QuarterValidationService quarterValidationService;
-    private final TeamValidationService teamValidationService;
 
     EvaluationViewValidationService(EvaluationViewPersistenceService persistenceService,
-                                    QuarterValidationService quarterValidationService,
-                                    TeamValidationService teamValidationService) {
+                                    QuarterValidationService quarterValidationService) {
         super(persistenceService);
         this.quarterValidationService = quarterValidationService;
-        this.teamValidationService = teamValidationService;
     }
 
     public void validateOnGet(TeamQuarterFilter filter) {
-        if (filter.quarterId() == null || filter.teamIds().isEmpty()) {
+        if (filter.quarterId() == null) {
             throw new OkrResponseStatusException(HttpStatus.BAD_REQUEST,
-                                                 "Es muss mindestens 1 Team und 1 Quartal ausgewählt sein");
+                                                 "Es muss mindestens 1 Quartal ausgewählt sein");
         }
-        filter.teamIds().forEach(teamValidationService::validateOnGet);
         quarterValidationService.validateOnGet(filter.quarterId());
     }
 

backend/src/test/java/ch/puzzle/okr/service/validation/EvaluationViewValidationServiceTest.java

@@ -26,7 +26,6 @@ class EvaluationViewValidationServiceTest {
     void shouldCallProperMethodsToValidateOnGet() {
         TeamQuarterFilter ids = new TeamQuarterFilter(List.of(1L, 2L), 1L);
         evaluationViewValidationService.validateOnGet(ids);
-        verify(teamValidationService, times(2)).validateOnGet(any());
         verify(quarterValidationService, times(1)).validateOnGet(any());
     }
 }

frontend/src/app/shared/application-page/application-page.component.html

@@ -6,7 +6,8 @@
 >
   <!--  <ng-content select="content"></ng-content>-->
   <ng-content></ng-content>
-  <div *ngIf="(elements$ | async)?.length === 0" class="d-flex align-items-center flex-column pt-5 gap-5">
+  @if ((elements$ | async)?.length === 0 || getFilterPageChange().teamIds.length === 0) {
+  <div class="d-flex align-items-center flex-column pt-5 gap-5">
     <p id="no-team-text">Kein Team ausgewählt</p>
     <img
       src="{{ backgroundLogoSrc$ | async }}"
@@ -15,5 +16,6 @@
       class="puzzle-logo"
     />
   </div>
+  }
 </div>
 <router-outlet></router-outlet>

frontend/src/app/statistics/statistics-information/statistics-information.component.spec.ts

@@ -33,21 +33,18 @@ describe('StatisticsInformationComponent', () => {
       [0,
         50,
         '0px'],
-      [10,
+      [0.5,
         50,
-        '1000px'], // 10 * 100 = 1000px
+        '25px'], // 0.5 * 50 = 25px
       [1,
         50,
-        '100px'], // 1 * 100 = 100px
-      [25,
+        '50px'], // 1 * 50 = 50px
+      [0.75,
         50,
-        '2500px'], // 25 * 100 = 2500px
-      [10,
-        100,
-        '1000px'], // 10 * 100 = 1000px (maxHeightInPx doesn't affect the result)
-      [5,
+        '37.5px'], // 0.75 * 50 = 37.5px
+      [0.5,
         20,
-        '500px'] // 5 * 100 = 500px
+        '10px'] // 0.5 * 20 = 10px
     ])('with chartValue %i and maxHeightInPx %i, should return %s', (chartValue, maxHeightInPx, expectedHeight) => {
       component.chartValue = chartValue;
       component.maxHeightInPx = maxHeightInPx;

frontend/src/app/statistics/statistics-information/statistics-information.component.ts

@@ -20,8 +20,8 @@ export class StatisticsInformationComponent {
   @Input() maxHeightInPx = 50;
 
   get chartHeight(): string {
-    const percentage = this.chartValue / this.maxHeightInPx * 100;
-    const heightInPx = percentage * this.maxHeightInPx;
+    // Chart value is already a percentage. We can expect it to never be higher than 1.
+    const heightInPx = this.chartValue * this.maxHeightInPx;
     return heightInPx + 'px';
   }
 }

frontend/src/app/statistics/statistics.component.html

@@ -20,18 +20,21 @@ <h1> Auswertung </h1>
         Quartal
         <app-quarter-filter [showBacklog]="false"></app-quarter-filter>
       </div>
-      <app-team-filter [minTeams]="1"></app-team-filter>
+      <app-team-filter></app-team-filter>
     </div>
 
 
-    <div *ngIf="statistics| async as statistics;" class="d-flex flex-column ">
+    @if (activeFilter?.teamIds?.length != 0) {
+    @if (statistics | async; as statistics) {
+    <div class="d-flex flex-column ">
+      @if (statistics.objectiveAmount == 0 && statistics.keyResultAmount == 0) {
       <div
         class="alert alert-warning bg-warning-subtle"
-        *ngIf="statistics.objectiveAmount ==0 && statistics.keyResultAmount ==0"
         [attr.data-testId]="'no-data-banner'"
       >
         Für dieses Team ist im ausgewählten Zeitraum kein Objective vorhanden.
       </div>
+      }
       <div class="row row-cols-1 row-cols-md-2 row-cols-xxl-3  g-4">
         <app-statistics-card [title]="'Objectives und Key Results'" [attr.data-testId]="'objectives-key-results'">
           <app-statistics-information [topContent]="'Objectives'"> {{ statistics.objectiveAmount }}
@@ -74,9 +77,9 @@ <h1> Auswertung </h1>
           </app-statistics-information>
         </app-statistics-card>
 
+        @if (krRelation(statistics.keyResultsMetricAmount, statistics.keyResultsOrdinalAmount); as relation) {
         <app-statistics-card
           [attr.data-testId]="'kr-type-relation'"
-          *ngIf="krRelation(statistics.keyResultsMetricAmount, statistics.keyResultsOrdinalAmount) as relation"
           [title]="'Verhältnis metrische vs. ordinale Key Results'"
           [barProgress]="relation.metric"
           [barColorPreset]="'relation'"
@@ -88,12 +91,13 @@ <h1> Auswertung </h1>
             {{ statistics.keyResultsOrdinalAmount }}
           </app-statistics-information>
         </app-statistics-card>
+        }
 
+        @if (krProgressRelation(statistics); as relation) {
         <app-statistics-card
           [attr.data-testId]="'kr-progress-relation'"
           [title]="'Verteilung der Key Results'"
           [subtitle]="'Nur eingecheckte Key Results berücksichtigt'"
-          *ngIf="krProgressRelation(statistics) as relation"
         >
           <app-statistics-information
             [topContent]="statistics.keyResultsInFailAmount"
@@ -132,8 +136,11 @@ <h1> Auswertung </h1>
             {{ relation.stretch | percent : '1.0-1' }}
           </app-statistics-information>
         </app-statistics-card>
+        }
       </div>
     </div>
+    }
+    }
   </div>
 
 </app-application-page>

frontend/src/app/statistics/statistics.component.ts

@@ -14,9 +14,12 @@ export class StatisticsComponent {
 
   statistics = new Observable<Statistics>();
 
-  loadOverview(filterpage: FilterPageChange) {
+  activeFilter: FilterPageChange | undefined;
+
+  loadOverview(filterPage: FilterPageChange) {
+    this.activeFilter = filterPage;
     this.statistics = this.evaluationService
-      .getStatistics(filterpage.quarterId, filterpage.teamIds)
+      .getStatistics(filterPage.quarterId, filterPage.teamIds)
       .pipe(catchError(() => {
         return EMPTY;
       }));