QOL improvements

libs/backend/ranking/src/controllers/upload.controller.ts

@@ -93,6 +93,7 @@ export class UploadRankingController {
             memberId: row['P1Memberid'],
             firstName: row['P1Firstname'],
             lastName: names.join(' '),
+            gender: row['gender'],
             role: 'Competitiespeler',
           } as MembersRolePerGroupData;
         }

libs/backend/ranking/src/services/update-ranking/update-ranking.service.ts

@@ -75,7 +75,9 @@ export class UpdateRankingService {
 
       for (const chunk of chunks) {
         // filter out distinct ids from the chunk
-        const distinctChunkIds = chunk.map((d) => d.memberId).filter((d) => !distinctIds.find((p) => p === d));
+        const distinctChunkIds = chunk
+          .map((d) => d.memberId)
+          .filter((d) => !distinctIds.find((p) => p === d));
 
         const players = await Player.findAll({
           attributes: ['id', 'memberId', 'competitionPlayer', 'gender'],
@@ -137,7 +139,9 @@ export class UpdateRankingService {
       // Update comp status
       this._logger.debug(`Update competition status: ${options.updateCompStatus}`);
       if (options.updateCompStatus) {
-        const memberIdsComp = data?.filter((p) => p.role === 'Competitiespeler')?.map((d) => d.memberId);
+        const memberIdsComp = data
+          ?.filter((p) => p.role === 'Competitiespeler')
+          ?.map((d) => d.memberId);
 
         const newCompPlayers = await Player.findAll({
           attributes: ['id', 'memberId', 'competitionPlayer'],
@@ -273,7 +277,15 @@ export class UpdateRankingService {
           continue;
         }
 
-        player.gender = d.gender == 'M' ? 'M' : 'F';
+        // set the gender
+        switch (d.gender) {
+          case 'M':
+            player.gender = 'M';
+            break;
+          case 'V':
+            player.gender = 'F';
+            break;
+        }
 
         await player.save({ transaction });
       }

libs/frontend/components/src/games/upcoming-games/upcoming-games.component.html

@@ -16,53 +16,74 @@
       >
       <span matListItemLine>
         @if (this.upcommingGames.hasHomeTeam()) {
-          <ng-container [ngTemplateOutlet]="hasHome" [ngTemplateOutletContext]="{ upcoming: upcoming }"></ng-container>
-        }
-        @if (!this.upcommingGames.hasHomeTeam()) {
-          <ng-container [ngTemplateOutlet]="noHome" [ngTemplateOutletContext]="{ upcoming: upcoming }"></ng-container>
+          <ng-container
+            [ngTemplateOutlet]="hasHome"
+            [ngTemplateOutletContext]="{ upcoming: upcoming }"
+          ></ng-container>
+        } @else {
+          <ng-container
+            [ngTemplateOutlet]="noHome"
+            [ngTemplateOutletContext]="{ upcoming: upcoming }"
+          ></ng-container>
         }
       </span>
     </mat-list-item>
   }
   @if (this.upcommingGames.loading()) {
     <badman-loading-block [items]="5" height="56px" />
-  } @else if (this.upcommingGames.endReached()) {
-    <div class="no-more-games" translate="all.competition.no-more-games"></div>
+  } @else {
+    <mat-list-item role="listitem">
+      <!--  a button to load more -->
+      @if (!this.upcommingGames.endReached()) {
+        <button mat-button (click)="loadMore()">
+          {{ 'all.competition.load-more' | translate }}
+        </button>
+      } @else {
+        <span
+          matListItem
+          class="no-more-encounters"
+          translate="all.competition.encounters.no-more"
+        ></span>
+      }
+    </mat-list-item>
   }
-  <mat-list-item role="listitem">
-    <!--  a button to load more -->
-    @if (!this.upcommingGames.endReached() && !this.upcommingGames.loading()) {
-      <button mat-button (click)="loadMore()">
-        {{ 'all.competition.load-more' | translate }}
-      </button>
-    }
-    @if (this.upcommingGames.endReached() && !this.upcommingGames.loading()) {
-      <span matListItemLine class="no-more-encounters" translate="all.competition.encounters.no-more"></span>
-    }
-  </mat-list-item>
 </mat-list>
+
 <ng-template #noHome let-upcoming="upcoming">
   <span
     >{{ upcoming.home?.name }} <span translate="all.competition.vs"></span>
     {{ upcoming.away?.name }}
   </span>
 </ng-template>
+
 <ng-template #hasHome let-upcoming="upcoming">
   <span class="location"
     >{{ 'all.competition.' + (upcoming.showingForHomeTeam ? 'home' : 'away') | translate }}
     -
   </span>
+
   @if (upcoming.showingForHomeTeam && upcoming?.home?.club?.slug) {
-    <a [routerLink]="['/club', upcoming.home.club.slug, 'team', upcoming.home?.slug]">{{ upcoming.home?.name }}</a>
+    <a [routerLink]="['/club', upcoming.home.club.slug, 'team', upcoming.home?.slug]">{{
+      upcoming.home?.name
+    }}</a>
   }
   @if (!upcoming.showingForHomeTeam && upcoming?.away?.club?.slug) {
-    <a [routerLink]="['/club', upcoming.away.club.slug, 'team', upcoming.away?.slug]">{{ upcoming.away?.name }}</a>
+    <a [routerLink]="['/club', upcoming.away.club.slug, 'team', upcoming.away?.slug]">{{
+      upcoming.away?.name
+    }}</a>
   }
+
   <span>&nbsp;{{ 'all.competition.vs' | translate }}&nbsp;</span>
+
+
   @if (upcoming.showingForHomeTeam && upcoming?.away?.club?.slug) {
-    <a [routerLink]="['/club', upcoming.away.club.slug, 'team', upcoming.away?.slug]">{{ upcoming.away?.name }}</a>
+    <a [routerLink]="['/club', upcoming.away.club.slug, 'team', upcoming.away?.slug]">{{
+      upcoming.away?.name
+    }}</a>
   }
   @if (!upcoming.showingForHomeTeam && upcoming?.home?.club?.slug) {
-    <a [routerLink]="['/club', upcoming.home.club.slug, 'team', upcoming.home?.slug]">{{ upcoming.home?.name }}</a>
+    <a [routerLink]="['/club', upcoming.home.club.slug, 'team', upcoming.home?.slug]">{{
+      upcoming.home?.name
+    }}</a>
   }
 </ng-template>

libs/frontend/components/src/selects/select-season/select-season.component.html

@@ -1,15 +1,13 @@
-@if (this.group) {
-  <ng-container [formGroup]="group">
-    <!-- year selection -->
-    @if (this.seasons) {
-      <mat-form-field>
-        <mat-label>{{ 'all.pickers.select-season' | translate }}</mat-label>
-        <mat-select formControlName="season">
-          @for (season of this.seasons(); track season) {
-            <mat-option [value]="season"> {{ season }} - {{ season + 1 }} </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    }
-  </ng-container>
-}
+<ng-container [formGroup]="group">
+  <!-- year selection -->
+  @if (this.seasons) {
+    <mat-form-field>
+      <mat-label>{{ 'all.pickers.select-season' | translate }}</mat-label>
+      <mat-select formControlName="season">
+        @for (season of this.seasons(); track season) {
+          <mat-option [value]="season"> {{ season }} - {{ season + 1 }} </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+</ng-container>

libs/frontend/pages/club/src/pages/detail/club-teams/club-teams.component.html

@@ -29,7 +29,12 @@ <h3>
           <!-- allow editing if the entry is empty -->
           @if (this.whenTeamEdit) {
             <badman-has-claim [any]="[this.clubId() + '_edit:club', 'edit-any:club']">
-              <button mat-icon-button aria-label="edit team" class="edit-button" (click)="this.editTeam(team)">
+              <button
+                mat-icon-button
+                aria-label="edit team"
+                class="edit-button"
+                (click)="this.editTeam(team)"
+              >
                 <mat-icon>edit</mat-icon>
               </button>
             </badman-has-claim>
@@ -46,20 +51,25 @@ <h3>
           {{ 'all.game.recent.title' | translate }}
         </h3>
         @if (isClient) {
-          <badman-recent-games [clubId]="this.clubId()" [teams]="this.clubTeamsService.teams()"></badman-recent-games>
+          <badman-recent-games
+            [clubId]="this.clubId()"
+            [teams]="this.clubTeamsService.teams()"
+          ></badman-recent-games>
         }
       </section>
       <section class="upcoming-games">
         <h3>
           <mat-icon color="primary">calendar_month</mat-icon>
           {{ 'all.game.upcoming.title' | translate }}
         </h3>
-        <badman-upcoming-games [clubId]="this.clubId()" [teams]="this.clubTeamsService.teams()"></badman-upcoming-games>
+        <badman-upcoming-games
+          [clubId]="this.clubId()"
+          [teams]="this.clubTeamsService.teams()"
+        ></badman-upcoming-games>
       </section>
     </section>
   }
-}
-@if (!this.clubTeamsService.loaded()) {
+} @else {
   <section class="teams">
     <h3>
       <mat-icon color="primary">groups</mat-icon>

libs/frontend/pages/club/src/pages/detail/club-teams/club-teams.component.scss

@@ -58,10 +58,12 @@
 
 .recent-games {
   flex: 1 1 auto;
+  max-width: 500px;
 }
 
 .upcoming-games {
   flex: 1 1 250px;
+  max-width: 400px;
 
   @media (max-width: 959.98px) {
     flex: 1;

libs/frontend/pages/competition/event/src/pages/detail-encounter/detail-encounter.page.scss

@@ -11,6 +11,7 @@
 .game {
   display: grid;
   grid-template-columns: 50px 1fr 300px 1fr;
+  max-width: 750px;
 
   .sets {
     display: flex;

libs/frontend/pages/player/src/pages/detail/components/show-level.component.html

@@ -1,9 +1,9 @@
-<div [matTooltip]="tooltip" matTooltipClass="tooltip-multi-line">
+<div [matTooltip]="tooltip()" matTooltipClass="tooltip-multi-line">
   @if (this.showLevelService.rankingPlace()) {
     <div class="level">{{ this.showLevelService.rankingPlace()?.[type] }}</div>
 
     @if (this.showLevelService.rankingPlace()?.[upgrade] !== null) {
-      <span class="points" [ngClass]="{ upgrade: this.canUpgrade }">
+      <span class="points" [ngClass]="{ upgrade: this.canUpgrade() }">
         {{ this.showLevelService.rankingPlace()?.[upgrade] }}
       </span>
     }
@@ -16,7 +16,7 @@
     }
 
     @if (this.showLevelService.rankingPlace()?.[downgrade] !== null) {
-      <span class="points" [ngClass]="{ downgrade: this.canDowngrade }">
+      <span class="points" [ngClass]="{ downgrade: this.canDowngrade() }">
         {{ this.showLevelService.rankingPlace()?.[downgrade] }}
       </span>
     }

libs/frontend/pages/player/src/pages/detail/components/show-level.component.ts

@@ -1,5 +1,15 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Injector, Input, OnInit, effect, inject, Signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Injector,
+  Input,
+  OnInit,
+  Signal,
+  computed,
+  effect,
+  inject,
+} from '@angular/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RankingSystemService } from '@badman/frontend-graphql';
 import { TranslateService } from '@ngx-translate/core';
@@ -28,10 +38,45 @@ export class ShowLevelComponent implements OnInit {
   upgrade!: 'singlePoints' | 'doublePoints' | 'mixPoints';
   downgrade!: 'singlePointsDowngrade' | 'doublePointsDowngrade' | 'mixPointsDowngrade';
 
-  tooltip = '';
+  tooltip = computed(() => {
+    let tooltip = '';
+    if (this.nextLevel()) {
+      tooltip = `${this.translate.instant('all.breakdown.upgrade')}: > ${this.nextLevel()}`;
+    }
+
+    if (this.prevLevel() && this.nextLevel()) {
+      tooltip += '\n';
+    }
+
+    if (this.prevLevel()) {
+      tooltip += `${this.translate.instant('all.breakdown.downgrade')}: < ${this.prevLevel()}`;
+    }
 
-  canUpgrade = false;
-  canDowngrade = false;
+    return tooltip;
+  });
+
+  maxLevel = computed(() => this.rankingService.system()?.amountOfLevels ?? 12);
+  level = computed(() => this.showLevelService.rankingPlace()?.[this.type] ?? this.maxLevel());
+  nextLevel = computed(() =>
+    this.level() == 1
+      ? undefined
+      : this.rankingService.system()!.pointsToGoUp?.[this.maxLevel() - this.level()],
+  );
+  prevLevel = computed(() =>
+    this.level() == this.maxLevel()
+      ? undefined
+      : this.rankingService.system()!.pointsToGoDown?.[this.maxLevel() - (this.level() + 1)],
+  );
+  canUpgrade = computed(() =>
+    this.level() == 1
+      ? false
+      : (this.showLevelService.rankingPlace()?.[this.upgrade] ?? 0) >= (this.nextLevel() ?? -1),
+  );
+  canDowngrade = computed(() =>
+    this.level() == this.maxLevel()
+      ? false
+      : (this.showLevelService.rankingPlace()?.[this.downgrade] ?? 0) <= (this.prevLevel() ?? -1),
+  );
 
   ngOnInit() {
     effect(
@@ -48,37 +93,5 @@ export class ShowLevelComponent implements OnInit {
 
     this.upgrade = `${this.type}Points`;
     this.downgrade = `${this.type}PointsDowngrade`;
-
-    effect(() => this.canUpgradeOrDowngrade(), {
-      injector: this.injector,
-    });
-  }
-
-  canUpgradeOrDowngrade() {
-    this.tooltip = '';
-    const maxLevel = this.rankingService.system()?.amountOfLevels ?? 12;
-
-    const level = this.showLevelService.rankingPlace()?.[this.type] ?? maxLevel;
-
-    const nextLevel = level == 1 ? undefined : this.rankingService.system()!.pointsToGoUp?.[maxLevel - level];
-
-    const prevLevel = this.rankingService.system()!.pointsToGoDown?.[maxLevel - (level + 1)];
-
-    this.canUpgrade =
-      level == 1 ? false : (this.showLevelService.rankingPlace()?.[this.upgrade] ?? 0) >= (nextLevel ?? -1);
-    this.canDowngrade =
-      level == maxLevel ? false : (this.showLevelService.rankingPlace()?.[this.downgrade] ?? 0) <= (prevLevel ?? -1);
-
-    if (nextLevel) {
-      this.tooltip = `${this.translate.instant('all.breakdown.upgrade')}: > ${nextLevel}`;
-    }
-
-    if (prevLevel && nextLevel) {
-      this.tooltip += '\n';
-    }
-
-    if (prevLevel) {
-      this.tooltip += `${this.translate.instant('all.breakdown.downgrade')}: < ${prevLevel}`;
-    }
   }
 }

libs/frontend/pages/player/src/pages/detail/detail.page.scss

@@ -41,6 +41,7 @@
 
 .upcoming-games {
   flex: 1 1 250px;
+  max-width: 400px;
 
   @media (max-width: 959.98px) {
     flex: 1;