From acaf308c2e326fbdbc21359d4071fb5a14ccf2c3 Mon Sep 17 00:00:00 2001
From: Fesaa <77553571+Fesaa@users.noreply.github.com>
Date: Sun, 23 Mar 2025 14:38:19 +0100
Subject: [PATCH] Ability to Search on Localized Name in Series Relationships
 (#3560)

---
 .../edit-series-relation.component.html                  | 9 +++++++--
 .../edit-series-relation.component.ts                    | 4 +++-
 .../app/typeahead/_components/typeahead.component.html   | 4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.html b/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.html
index 538387ada..c2be04a55 100644
--- a/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.html
+++ b/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.html
@@ -17,8 +17,13 @@
             <ng-template #badgeItem let-item let-position="idx">
               {{item.name}} ({{libraryNames[item.libraryId]}})
             </ng-template>
-            <ng-template #optionItem let-item let-position="idx">
-              {{item.name}} ({{libraryNames[item.libraryId]}})
+            <ng-template #optionItem let-item let-position="idx" let-value="value">
+              @if (item.name.toLowerCase().trim().indexOf(value.toLowerCase().trim()) >= 0) {
+                {{item.name}}
+              } @else {
+                {{item.localizedName}}
+              }
+              ({{libraryNames[item.libraryId]}})
             </ng-template>
           </app-typeahead>
         </div>
diff --git a/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.ts b/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.ts
index d14541415..3707ea6b2 100644
--- a/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.ts
+++ b/UI/Web/src/app/cards/edit-series-relation/edit-series-relation.component.ts
@@ -153,7 +153,9 @@ export class EditSeriesRelationComponent implements OnInit {
     );
 
     seriesSettings.compareFn = (options: SearchResult[], filter: string) => {
-      return options.filter(m => this.utilityService.filter(m.name, filter));
+      return options.filter(m => {
+        return this.utilityService.filter(m.name, filter) || this.utilityService.filter(m.localizedName, filter);
+      });
     }
 
     seriesSettings.selectionCompareFn = (a: SearchResult, b: SearchResult) => {
diff --git a/UI/Web/src/app/typeahead/_components/typeahead.component.html b/UI/Web/src/app/typeahead/_components/typeahead.component.html
index e70ba1193..b34d925d8 100644
--- a/UI/Web/src/app/typeahead/_components/typeahead.component.html
+++ b/UI/Web/src/app/typeahead/_components/typeahead.component.html
@@ -8,7 +8,7 @@
       </ng-container>
       <div class="typeahead-input" [ngClass]="{'disabled': disabled}" (click)="onInputFocus($event)">
         <app-tag-badge *ngFor="let option of optionSelection.selected(); let i = index" fillStyle="filled">
-          <ng-container [ngTemplateOutlet]="badgeTemplate" [ngTemplateOutletContext]="{ $implicit: option, idx: i }"></ng-container>
+          <ng-container [ngTemplateOutlet]="badgeTemplate" [ngTemplateOutletContext]="{ $implicit: option, idx: i, value:  typeaheadControl.value }"></ng-container>
           <i class="fa fa-times" *ngIf="!disabled" (click)="toggleSelection(option)" tabindex="0" [attr.aria-label]="t('close')"></i>
         </app-tag-badge>
         <input #input [id]="settings.id" type="text" autocomplete="off" formControlName="typeahead" *ngIf="!disabled">
@@ -31,7 +31,7 @@
           <li *ngFor="let option of options; let index = index; trackBy: settings.trackByIdentityFn" (click)="handleOptionClick(option)"
               class="list-group-item" role="option" [attr.data-index]="index"
               (mouseenter)="focusedIndex = index + (showAddItem ? 1 : 0); updateHighlight();">
-            <ng-container [ngTemplateOutlet]="optionTemplate" [ngTemplateOutletContext]="{ $implicit: option, idx: index }"></ng-container>
+            <ng-container [ngTemplateOutlet]="optionTemplate" [ngTemplateOutletContext]="{ $implicit: option, idx: index, value:  typeaheadControl.value }"></ng-container>
           </li>
           <li *ngIf="options.length === 0 && !showAddItem" class="list-group-item no-hover" role="status">
             {{t('no-data')}}{{this.settings.addIfNonExisting ? t('add-custom-item') : ''}}