Add a search field for filtering clubs when editing or creating a DSB member.

Filter clubs by name, identifier, and region while keeping the selected club visible in the dropdown.

Author: malte2121

bogenliga/src/app/modules/verwaltung/components/dsb-mitglied/dsb-mitglied-detail/dsb-mitglied-detail.component.html

@@ -135,14 +135,24 @@
           <span> *</span>
         </label>
         <div class="col-sm-9">
+          <input type="text"
+                 class="form-control mb-2"
+                 id="dsbMitgliedVereinSuche"
+                 name="dsbMitgliedVereinSuche"
+                 [(ngModel)]="vereinSearchTerm"
+                 (ngModelChange)="onVereinSearch($event)"
+                 placeholder="{{ 'SELECTIONLIST.SEARCH_PLACEHOLDER' | translate }}"
+                 autocomplete="off"
+                 data-cy="detail-vereine-dsb-search"
+                 [readonly]="isReadOnly">
           <select class="form-control"
                   id="dsbMitgliedVerein"
                   name="dsbMitgliedVerein"
                   #dsbMitgliedVerein="ngModel"
                   [(ngModel)]="currentVerein"
                   data-cy="detail-vereine-dsb"
                   [disabled]="isReadOnly">
-            <option [ngValue]="verein" *ngFor="let verein of vereine"> {{verein.name}}</option>
+            <option [ngValue]="verein" *ngFor="let verein of filteredVereine"> {{verein.name}}</option>
           </select>
           <div class="invalid-feedback">
             {{ 'MANAGEMENT.DSBMITGLIEDER_DETAIL.FORM.VEREIN.ERROR' | translate }}

bogenliga/src/app/modules/verwaltung/components/dsb-mitglied/dsb-mitglied-detail/dsb-mitglied-detail.component.ts

@@ -48,9 +48,9 @@ export class DsbMitgliedDetailComponent extends CommonComponentDirective impleme
   public ButtonType = ButtonType;
   public currentMitglied: DsbMitgliedDO = new DsbMitgliedDO();
   public currentVerein: VereinDO = new VereinDO();
-  // public vereine: Array<VereinDO> = [new VereinDO()];
-  public vereine: VereinDO[];
-  // public currentVerein: VereinDO;
+  public vereine: VereinDO[] = [];
+  public filteredVereine: VereinDO[] = [];
+  public vereinSearchTerm = '';
 
   public dsbMitgliedNationalitaet: string[];
   public loadingVereine = true;
@@ -373,6 +373,7 @@ export class DsbMitgliedDetailComponent extends CommonComponentDirective impleme
 
       }
     });
+    this.applyVereinFilter();
   }
 
   private handleFailure(response: BogenligaResponse<DsbMitgliedDO>) {
@@ -432,13 +433,43 @@ export class DsbMitgliedDetailComponent extends CommonComponentDirective impleme
         if (this.currentUserService.hasPermission(UserPermission.CAN_CREATE_VEREIN_DSBMITGLIEDER)) {
           response.payload = response.payload.filter((entry) => this.currentUserService.getVerein() === entry.id);
         }
-        // this.currentVerein = response.payload[0];
         this.vereine = response.payload;
+        this.applyVereinFilter();
         this.loadingVereine = false;
         this.vereineLoaded = true;
       })
       .catch((response: BogenligaResponse<VereinDTO[]>) => {
         this.vereine = response.payload;
+        this.applyVereinFilter();
       });
   }
+
+  public onVereinSearch(searchTerm: string): void {
+    this.vereinSearchTerm = searchTerm;
+    this.applyVereinFilter();
+  }
+
+  private applyVereinFilter(): void {
+    const normalizedSearchTerm = (this.vereinSearchTerm || '').trim().toLocaleLowerCase();
+
+    if (!normalizedSearchTerm) {
+      this.filteredVereine = [...this.vereine];
+      return;
+    }
+
+    this.filteredVereine = this.vereine.filter((verein: VereinDO) => this.matchesVereinSearch(verein, normalizedSearchTerm));
+
+    if (this.currentVerein?.id && !this.filteredVereine.some((verein: VereinDO) => verein.id === this.currentVerein.id)) {
+      const selectedVerein = this.vereine.find((verein: VereinDO) => verein.id === this.currentVerein.id);
+      if (selectedVerein) {
+        this.filteredVereine = [selectedVerein, ...this.filteredVereine];
+      }
+    }
+  }
+
+  private matchesVereinSearch(verein: VereinDO, normalizedSearchTerm: string): boolean {
+    return [verein.name, verein.identifier, verein.regionName]
+      .filter((value: string) => !!value)
+      .some((value: string) => value.toLocaleLowerCase().includes(normalizedSearchTerm));
+  }
 }