refactor(ui): use paginated author query for metadata autocomplete

Author: alexhb1

frontend/src/app/features/author-browser/data/author-autocomplete.service.ts

@@ -0,0 +1,51 @@
+import {computed, inject, Injectable, signal} from '@angular/core';
+import type {ScrollerOptions} from '@openng/optimus-ui/api';
+import type {ScrollerScrollEvent} from '@openng/optimus-ui/types/scroller';
+import {injectInfiniteQuery} from '@tanstack/angular-query-experimental';
+
+import {AuthorQueryService} from './author-query.service';
+import {DEFAULT_AUTHOR_SORT_TERMS, EMPTY_AUTHOR_FACET_SELECTION} from './author-query-params';
+
+const PAGE_SIZE = 20;
+
+@Injectable()
+export class AuthorAutocompleteService {
+  private readonly authorQueryService = inject(AuthorQueryService);
+  private readonly searchTerm = signal('');
+  private readonly query = injectInfiniteQuery(() => {
+    const query = this.searchTerm();
+    return {
+      ...this.authorQueryService.infinitePage({
+        query,
+        facets: EMPTY_AUTHOR_FACET_SELECTION,
+        facetLogic: 'and',
+        sort: DEFAULT_AUTHOR_SORT_TERMS,
+        size: PAGE_SIZE,
+      }),
+      enabled: query.length > 0,
+    };
+  });
+
+  readonly suggestions = computed(() => {
+    if (this.searchTerm().length === 0 || this.query.isError()) return [];
+    return this.query.data()?.pages.flatMap(page => page.content.map(author => author.name)) ?? [];
+  });
+  readonly virtualScrollOptions: ScrollerOptions = {
+    onScroll: (event: ScrollerScrollEvent) => this.loadMore(event),
+  };
+
+  search(query: string): void {
+    this.searchTerm.set(query.trim());
+  }
+
+  reset(): void {
+    this.searchTerm.set('');
+  }
+
+  private loadMore(event: ScrollerScrollEvent): void {
+    const element = event.originalEvent?.target as HTMLElement | null;
+    if (!element || element.scrollTop + element.clientHeight < element.scrollHeight - 1) return;
+    if (!this.query.hasNextPage() || this.query.isFetchingNextPage()) return;
+    void this.query.fetchNextPage();
+  }
+}

frontend/src/app/features/book/components/add-physical-book-dialog/add-physical-book-dialog.component.html

@@ -103,11 +103,14 @@ <h2 class="panel-title">{{ t('title') }}</h2>
               [multiple]="true"
               [fluid]="true"
               [dropdown]="false"
-              [suggestions]="filteredAuthors"
+              [suggestions]="authorAutocomplete.suggestions()"
               [forceSelection]="false"
               [showClear]="false"
+              [virtualScroll]="true"
+              [virtualScrollItemSize]="40"
+              [virtualScrollOptions]="authorAutocomplete.virtualScrollOptions"
               [placeholder]="t('authorsPlaceholder')"
-              (completeMethod)="filterAuthors($event)"
+              (completeMethod)="authorAutocomplete.search($event.query)"
               (onKeyUp)="onAutoCompleteKeyUp('authors', $event)"
               (onSelect)="onAutoCompleteSelect('authors', $event)">
             </p-autoComplete>

frontend/src/app/features/book/components/add-physical-book-dialog/add-physical-book-dialog.component.spec.ts

@@ -10,6 +10,7 @@ import {Library} from '../../model/library.model';
 import {BookMetadataService} from '../../service/book-metadata.service';
 import {BookService} from '../../service/book.service';
 import {LibraryService} from '../../service/library.service';
+import {AuthorAutocompleteService} from '../../../author-browser/data/author-autocomplete.service';
 import {AddPhysicalBookDialogComponent} from './add-physical-book-dialog.component';
 
 describe('AddPhysicalBookDialogComponent', () => {
@@ -83,6 +84,7 @@ describe('AddPhysicalBookDialogComponent', () => {
         {provide: BookService, useValue: {uniqueMetadata, createPhysicalBook}},
         {provide: BookMetadataService, useValue: {lookupByIsbn}},
         {provide: LibraryService, useValue: {libraries}},
+        {provide: AuthorAutocompleteService, useValue: {reset: vi.fn()}},
       ],
     });
 
@@ -141,13 +143,11 @@ describe('AddPhysicalBookDialogComponent', () => {
     expect(component.selectedLibraryId).toBe(1);
   });
 
-  it('filters authors and categories with case-insensitive substring matches', () => {
+  it('filters categories with case-insensitive substring matches', () => {
     const {component} = createHarness();
 
-    component.filterAuthors({query: 'taV', originalEvent: new Event('input')} as AutoCompleteCompleteEvent);
     component.filterCategories({query: 'fic', originalEvent: new Event('input')} as AutoCompleteCompleteEvent);
 
-    expect(component.filteredAuthors).toEqual(['Octavia Butler']);
     expect(component.filteredCategories).toEqual(['Science Fiction']);
   });
 

frontend/src/app/features/book/components/add-physical-book-dialog/add-physical-book-dialog.component.ts

@@ -14,6 +14,7 @@ import {LibraryService} from '../../service/library.service';
 import {Library} from '../../model/library.model';
 import {CreatePhysicalBookRequest} from '../../model/book.model';
 import {TranslocoDirective} from '@jsverse/transloco';
+import {AuthorAutocompleteService} from '../../../author-browser/data/author-autocomplete.service';
 
 @Component({
   selector: 'app-add-physical-book-dialog',
@@ -31,13 +32,15 @@ import {TranslocoDirective} from '@jsverse/transloco';
     TranslocoDirective
   ],
   styleUrl: './add-physical-book-dialog.component.scss',
+  providers: [AuthorAutocompleteService],
 })
 export class AddPhysicalBookDialogComponent {
   private dynamicDialogRef = inject(DynamicDialogRef);
   private dialogConfig = inject(DynamicDialogConfig);
   private bookService = inject(BookService);
   private bookMetadataService = inject(BookMetadataService);
   private libraryService = inject(LibraryService);
+  readonly authorAutocomplete = inject(AuthorAutocompleteService);
 
   selectedLibraryId: number | null = null;
   title: string = '';
@@ -51,9 +54,7 @@ export class AddPhysicalBookDialogComponent {
   categories: string[] = [];
 
   private readonly metadata = computed(() => this.bookService.uniqueMetadata());
-  get allAuthors(): string[] { return this.metadata().authors; }
   get allCategories(): string[] { return this.metadata().categories; }
-  filteredAuthors: string[] = [];
   filteredCategories: string[] = [];
 
   coverUrl: string | null = null;
@@ -79,13 +80,6 @@ export class AddPhysicalBookDialogComponent {
     return this.libraryService.libraries();
   }
 
-  filterAuthors(event: AutoCompleteCompleteEvent): void {
-    const query = event.query.toLowerCase();
-    this.filteredAuthors = this.allAuthors.filter((author) =>
-      author.toLowerCase().includes(query)
-    );
-  }
-
   filterCategories(event: AutoCompleteCompleteEvent): void {
     const query = event.query.toLowerCase();
     this.filteredCategories = this.allCategories.filter((category) =>
@@ -103,6 +97,7 @@ export class AddPhysicalBookDialogComponent {
           this[fieldName] = [...values, value];
         }
         input.value = '';
+        if (fieldName === 'authors') this.authorAutocomplete.reset();
       }
     }
   }
@@ -113,6 +108,7 @@ export class AddPhysicalBookDialogComponent {
       this[fieldName] = [...values, event.value];
     }
     (event.originalEvent.target as HTMLInputElement).value = '';
+    if (fieldName === 'authors') this.authorAutocomplete.reset();
   }
 
   fetchMetadataByIsbn(): void {

frontend/src/app/features/metadata/component/book-metadata-center/metadata-editor/metadata-editor.component.html

@@ -232,10 +232,14 @@
                       class="author-add-input"
                       [(ngModel)]="authorInputValue"
                       [ngModelOptions]="{ standalone: true }"
-                      [suggestions]="filteredAuthors"
+                      [suggestions]="authorAutocomplete.suggestions()"
                       [forceSelection]="false"
                       [dropdown]="false"
-                      (completeMethod)="filterAuthors($event)"
+                      [virtualScroll]="true"
+                      [virtualScrollItemSize]="40"
+                      [virtualScrollOptions]="authorAutocomplete.virtualScrollOptions"
+                      (completeMethod)="authorAutocomplete.search($event.query)"
+                      (onClear)="resetAuthorAutocomplete()"
                       (onKeyUp)="onAuthorInputKeyUp($event)"
                       (onSelect)="onAuthorInputSelect($event)"
                       placeholder="Add author..."

frontend/src/app/features/metadata/component/book-metadata-center/metadata-editor/metadata-editor.component.scss

@@ -263,10 +263,12 @@ label {
 }
 
 .author-add-input {
-  flex: 1 1 5.25rem;
-  min-width: 5.25rem;
+  flex: 1 1 12rem;
+  min-width: min(12rem, 100%);
 
   ::ng-deep input {
+    width: 100%;
+    min-width: 0;
     border: none !important;
     background: transparent !important;
     padding: 0.2188rem;

frontend/src/app/features/metadata/component/book-metadata-center/metadata-editor/metadata-editor.component.ts

@@ -32,6 +32,7 @@ import {AppSettingsService} from '../../../../../shared/service/app-settings.ser
 import {MetadataProviderSpecificFields} from '../../../../../shared/model/app-settings.model';
 import {TranslocoDirective, TranslocoService} from '@jsverse/transloco';
 import {CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray} from '@angular/cdk/drag-drop';
+import {AuthorAutocompleteService} from '../../../../author-browser/data/author-autocomplete.service';
 
 @Component({
   selector: "app-metadata-editor",
@@ -56,6 +57,7 @@ import {CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray} from '@angular/cdk/d
     CdkDrag,
     CoverComponent,
   ],
+  providers: [AuthorAutocompleteService],
 })
 export class MetadataEditorComponent implements OnInit {
   private currentBook: Book | null = null;
@@ -102,6 +104,7 @@ export class MetadataEditorComponent implements OnInit {
   private destroyRef = inject(DestroyRef);
   private appSettingsService = inject(AppSettingsService);
   private readonly t = inject(TranslocoService);
+  readonly authorAutocomplete = inject(AuthorAutocompleteService);
   private readonly uniqueMetadata = computed(() => this.bookService.uniqueMetadata());
 
   metadataForm: FormGroup;
@@ -119,14 +122,12 @@ export class MetadataEditorComponent implements OnInit {
 
   originalMetadata!: BookMetadata;
 
-  get allAuthors(): string[] { return this.uniqueMetadata().authors; }
   get allCategories(): string[] { return this.uniqueMetadata().categories; }
   get allMoods(): string[] { return this.uniqueMetadata().moods; }
   get allTags(): string[] { return this.uniqueMetadata().tags; }
   get allPublishers(): string[] { return this.uniqueMetadata().publishers; }
   get allSeries(): string[] { return this.uniqueMetadata().series; }
   filteredCategories: string[] = [];
-  filteredAuthors: string[] = [];
   authorInputValue = '';
   filteredMoods: string[] = [];
   filteredTags: string[] = [];
@@ -187,13 +188,6 @@ export class MetadataEditorComponent implements OnInit {
     );
   }
 
-  filterAuthors(event: { query: string }) {
-    const query = event.query.toLowerCase();
-    this.filteredAuthors = this.allAuthors.filter((cat) =>
-      cat.toLowerCase().includes(query)
-    );
-  }
-
   dropAuthor(event: CdkDragDrop<string[]>) {
     const authors = [...(this.metadataForm.get('authors')?.value ?? [])];
     moveItemInArray(authors, event.previousIndex, event.currentIndex);
@@ -217,7 +211,7 @@ export class MetadataEditorComponent implements OnInit {
           this.metadataForm.get('authors')?.setValue([...authors, value]);
           this.metadataForm.get('authors')?.markAsDirty();
         }
-        this.authorInputValue = '';
+        this.resetAuthorAutocomplete();
       }
     }
   }
@@ -229,7 +223,12 @@ export class MetadataEditorComponent implements OnInit {
       this.metadataForm.get('authors')?.setValue([...authors, value]);
       this.metadataForm.get('authors')?.markAsDirty();
     }
-    setTimeout(() => this.authorInputValue = '');
+    setTimeout(() => this.resetAuthorAutocomplete());
+  }
+
+  resetAuthorAutocomplete() {
+    this.authorInputValue = '';
+    this.authorAutocomplete.reset();
   }
 
   filterMoods(event: { query: string }) {

frontend/src/app/features/metadata/component/book-metadata-center/metadata-picker/metadata-picker.component.html

@@ -282,10 +282,14 @@
                           class="author-add-input"
                           [(ngModel)]="authorInputValue"
                           [ngModelOptions]="{ standalone: true }"
-                          [suggestions]="getFiltered('authors')"
+                          [suggestions]="authorAutocomplete.suggestions()"
                           [forceSelection]="false"
                           [dropdown]="false"
-                          (completeMethod)="filterItems($event, 'authors')"
+                          [virtualScroll]="true"
+                          [virtualScrollItemSize]="40"
+                          [virtualScrollOptions]="authorAutocomplete.virtualScrollOptions"
+                          (completeMethod)="authorAutocomplete.search($event.query)"
+                          (onClear)="resetAuthorAutocomplete()"
                           (onKeyUp)="onAuthorInputKeyUp($event)"
                           (onSelect)="onAuthorInputSelect($event)"
                           placeholder="Add author..."

frontend/src/app/features/metadata/component/book-metadata-center/metadata-picker/metadata-picker.component.scss

@@ -640,10 +640,12 @@
 }
 
 .author-add-input {
-  flex: 1 1 5.25rem;
-  min-width: 5.25rem;
+  flex: 1 1 12rem;
+  min-width: min(12rem, 100%);
 
   ::ng-deep input {
+    width: 100%;
+    min-width: 0;
     border: none !important;
     background: transparent !important;
     padding: 0.2188rem;

frontend/src/app/features/metadata/component/book-metadata-center/metadata-picker/metadata-picker.component.spec.ts

@@ -15,6 +15,7 @@ import {AppSettingsService} from '../../../../../shared/service/app-settings.ser
 import {UrlHelperService} from '../../../../../shared/service/url-helper.service';
 import {MetadataFormBuilder} from '../../../../../shared/metadata';
 import {MetadataUtilsService} from '../../../../../shared/metadata/metadata-utils.service';
+import {AuthorAutocompleteService} from '../../../../author-browser/data/author-autocomplete.service';
 import {MetadataPickerComponent} from './metadata-picker.component';
 
 describe('MetadataPickerComponent', () => {
@@ -103,6 +104,7 @@ describe('MetadataPickerComponent', () => {
         },
         {provide: MessageService, useValue: {add: messageAdd}},
         {provide: TranslocoService, useValue: {translate}},
+        {provide: AuthorAutocompleteService, useValue: {reset: vi.fn()}},
       ]
     });
   });