Use autocompletion for partner search, WIP

src/app/components/player-registrations/player-registrations.component.html

@@ -16,6 +16,27 @@
                 </div>
                 <div class="col-md-4">
                   @if (eventRegistration.doublesEvent) {
+                    <mat-form-field appearance="fill">
+                      <mat-label>Partner</mat-label>
+                      <input type="text"
+                             matInput
+                             [matAutocomplete]="auto"
+                             [disabled]="!tournamentRegistration.editable || !eventRegistration.registered"
+                             [(ngModel)]="eventRegistration.partner"
+                             (ngModelChange)="onPartnerSearch($event, eventRegistration)">
+<!--                             (focus)="onPartnerInputFocus(eventRegistration)">-->
+                      <mat-autocomplete #auto="matAutocomplete"
+                                        [displayWith]="displayPartnerName.bind(this)"
+                                        (optionSelected)="onPartnerSelected($event, eventRegistration)">
+                        <mat-option [value]="null">Geen</mat-option>
+                        @for (player of getFilteredPlayers(eventRegistration); track player.id) {
+                          <mat-option [value]="player.id">
+                            {{ player | fullName }}
+                          </mat-option>
+                        }
+                      </mat-autocomplete>
+                    </mat-form-field>
+<!--
                     <mat-form-field appearance="fill">
                       <mat-label>Partner</mat-label>
                       <mat-select [value]="eventRegistration.partner" [disabled]="!tournamentRegistration.editable || !eventRegistration.registered" [(ngModel)]="eventRegistration.partner">
@@ -27,6 +48,7 @@
                         }
                       </mat-select>
                     </mat-form-field>
+-->
                   }
                 </div>
                 <div class="col-6"></div>

src/app/components/player-registrations/player-registrations.component.ts

@@ -15,6 +15,9 @@ import {MatAnchor, MatButton} from "@angular/material/button";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {FullNamePipe} from "../../pipes/fullname-pipe";
 import {HeaderService} from "../../service/header.service";
+import {MatAutocomplete, MatAutocompleteTrigger} from "@angular/material/autocomplete";
+import {MatInput} from "@angular/material/input";
+import {NgForOf} from "@angular/common";
 
 @Component({
   selector: 'app-player-registrations',
@@ -30,11 +33,14 @@ import {HeaderService} from "../../service/header.service";
     MatCardActions,
     RouterLink,
     MatOption,
-    MatSelect,
+    // MatSelect,
     MatIcon,
     MatButton,
     MatAnchor,
-    FullNamePipe
+    FullNamePipe,
+    MatAutocomplete,
+    MatAutocompleteTrigger,
+    MatInput,
   ],
   providers: [
     FullNamePipe
@@ -76,6 +82,49 @@ export class PlayerRegistrationsComponent implements OnInit {
     });
   }
 
+  private partnerSearchTerms: Map<number, string> = new Map();
+
+// Add methods
+  onPartnerSearch(searchTerm: string, eventRegistration: EventRegistration) {
+    this.partnerSearchTerms.set(eventRegistration.id, searchTerm?.toLowerCase() || '');
+  }
+
+  getFilteredPlayers(eventRegistration: EventRegistration): Player[] {
+    const allRelevant = this.getRelevantPlayers(eventRegistration.type);
+    const searchTerm = this.partnerSearchTerms.get(eventRegistration.id);
+
+    if (!searchTerm) {
+      return allRelevant;
+    }
+
+    return allRelevant.filter(player => {
+      const fullName = this.fullNamePipe.transform(player).toLowerCase();
+      return fullName.includes(searchTerm);
+    });
+  }
+
+  displayPartnerName(playerId: number | null): string {
+    if (!playerId || !this.allPlayers) return '';
+    const player = this.allPlayers.find(p => p.id === playerId);
+    return player ? this.fullNamePipe.transform(player) : '';
+  }
+
+  onPartnerSelected(event: any, eventRegistration: EventRegistration) {
+    eventRegistration.partner = event.option.value;
+  }
+
+  onPartnerInputFocus(eventRegistration: EventRegistration) {
+    // If there's already a partner selected, use their name as initial filter
+    if (eventRegistration.partner && this.allPlayers) {
+      const partner = this.allPlayers.find(p => p.id === eventRegistration.partner);
+      if (partner) {
+        const partnerName = this.fullNamePipe.transform(partner);
+        eventRegistration.partner = partnerName;
+        this.partnerSearchTerms.set(eventRegistration.id, partnerName.toLowerCase());
+      }
+    }
+  }
+
   saveRegistration(tournamentRegistration: TournamentRegistration, event: MouseEvent) {
     this.waitingForBackend = true;
     this.registrationService.saveTournamentRegistrations(tournamentRegistration, this.player.id).subscribe(data => {