Resolve 2 bugs and add feature for sorting selected teams correctly

puzzle · Nov 13, 2024 · 1e1edb8 · 1e1edb8
1 parent d0cfe9b
commit 1e1edb8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/frontend/src/app/components/application-banner/application-banner.component.html b/frontend/src/app/components/application-banner/application-banner.component.html
@@ -34,9 +34,9 @@
               </mat-panel-title>
             </mat-expansion-panel-header>
             <div class="d-flex gap-2 flex-column filter-container">
-              <app-objective-filter class="m-2"></app-objective-filter>
-              <app-quarter-filter (quarterLabel$)="quarterLabel$.next($event)" class="m-2"></app-quarter-filter>
-              <app-team-filter [showMoreTeams]="false" class="m-2"></app-team-filter>
+              <app-objective-filter></app-objective-filter>
+              <app-quarter-filter (quarterLabel$)="quarterLabel$.next($event)"></app-quarter-filter>
+              <app-team-filter id="team-filter" class="m-2"></app-team-filter>
             </div>
           </mat-expansion-panel>
         </mat-accordion>

diff --git a/frontend/src/app/components/team-filter/team-filter.component.html b/frontend/src/app/components/team-filter/team-filter.component.html
@@ -1,6 +1,6 @@
 <mat-chip-listbox class="chip-list overflow-hidden w-100 d-grid">
   <!-- Button to select all teams -->
-  <button (click)="toggleAll()" class="icon-button team-button focus-outline d-none d-sm-block">
+  <button (click)="toggleAll()" class="icon-button team-button focus-outline d-none d-sm-block mt-1 me-1">
     <mat-chip
       [attr.data-testId]="'team-filter-alle'"
       [highlighted]="activeTeams.length == (this.teams$ | async)?.length"
@@ -10,11 +10,11 @@
   </button>
   <button
     (click)="toggleSelection(team.id)"
-    *ngFor="let team of (teams$ | async)?.slice(0, showMoreTeams ? (teams$ | async)?.length : 6); trackBy: trackByFn"
+    *ngFor="let team of (teams$ | async)?.slice(0, showMoreTeams ? (teams$ | async)?.length : 5); trackBy: trackByFn"
     [attr.data-testId]="'team-filter-chip'"
     [matTooltip]="team.name"
     matTooltipPosition="above"
-    class="icon-button focus-outline m-1"
+    class="icon-button focus-outline mt-1 me-1"
   >
     <mat-chip [highlighted]="activeTeams.includes(team.id)" color="primary">
       <p class="d-sm-none d-block text-truncate chip-team-name">{{ getTeamName(team.id) }}</p>
@@ -23,8 +23,8 @@
   </button>
   <button
     (click)="showMoreTeams = !showMoreTeams"
-    [attr.data-testId]="'team-filter-chip'"
-    class="icon-button focus-outline m-1 d-block d-sm-none"
+    id="toggle-show-more-teams"
+    class="icon-button focus-outline m-1 d-block d-md-none"
   >
     <a class="primary-a-tag">{{ showMoreTeams ? "Weniger" : "Mehr" }}</a>
   </button>

diff --git a/frontend/src/app/components/team-filter/team-filter.component.ts b/frontend/src/app/components/team-filter/team-filter.component.ts
@@ -59,6 +59,7 @@ export class TeamFilterComponent implements OnInit, OnDestroy {
         } else {
           this.activeTeams = knownTeams;
         }
+        this.teams$.next(this.sortTeamsToggledPriority());
         this.changeTeamFilterParams();
       });
   }
@@ -85,6 +86,7 @@ export class TeamFilterComponent implements OnInit, OnDestroy {
       this.activeTeams.push(id);
     }
 
+    this.teams$.next(this.sortTeamsToggledPriority());
     this.changeTeamFilterParams();
   }
 
@@ -105,4 +107,17 @@ export class TeamFilterComponent implements OnInit, OnDestroy {
     let teamName = this.teams$.getValue().find((team) => team.id === id)?.name;
     return teamName ?? 'no team name';
   }
+
+  sortTeamsToggledPriority() {
+    return this.teams$.getValue().sort((a, b) => {
+      const aToggled = this.activeTeams.includes(a.id) ? 0 : 1;
+      const bToggled = this.activeTeams.includes(b.id) ? 0 : 1;
+
+      if (aToggled !== bToggled) {
+        return aToggled - bToggled;
+      }
+
+      return a.name.localeCompare(b.name);
+    });
+  }
 }