Added update for initial values for filters.

This commit is contained in:
Tom
2025-06-25 14:50:31 +00:00
parent 7875c5407c
commit 60e179cd13
2 changed files with 32 additions and 11 deletions

View File

@ -24,7 +24,8 @@
[class.collapsed]="!filtersEnabled.value">
<div class="select-wrapper">
<label for="languageSelect">Language</label>
<select name="languageSelect"
<select #languageSelect
name="languageSelect"
(change)="updateFilters('langRestrict', $event.target)">
<option value="">All</option>
@for (language of provider.languages | keyvalue; track language.key) {
@ -34,7 +35,8 @@
</div>
<div class="select-wrapper">
<label for="orderBySelect">Order By</label>
<select name="orderBySelect"
<select #orderBySelect
name="orderBySelect"
(change)="updateFilters('orderBy', $event.target)">
<option value="relevance">Relevance</option>
<option value="newest">Newest</option>
@ -42,7 +44,8 @@
</div>
<div class="select-wrapper">
<label for="resultsSizeSelect">Results Size</label>
<select name="resultsSizeSelect"
<select #resultsSizeSelect
name="resultsSizeSelect"
(change)="updateFilters('maxResults', $event.target)">
<option value="10">10</option>
<option value="20">20</option>
@ -51,8 +54,10 @@
</select>
</div>
<div class="text-wrapper">
<label for="resultsSizeSelect">ISBN</label>
<input type="text"
<label for="isbnInput">ISBN</label>
<input #isbnInput
name="isbnInput"
type="text"
placeholder="ISBN-10 or ISBN-13"
[formControl]="isbn" />
</div>

View File

@ -1,4 +1,4 @@
import { Component, inject, NgZone, OnDestroy, output } from '@angular/core';
import { AfterViewInit, Component, ElementRef, inject, NgZone, OnDestroy, output, ViewChild } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { SearchContextDto } from '../../shared/dto/search-context.dto';
import { filter, Subscription } from 'rxjs';
@ -15,10 +15,15 @@ import { CommonModule } from '@angular/common';
templateUrl: './search-box.component.html',
styleUrl: './search-box.component.css'
})
export class SearchBoxComponent implements OnDestroy {
export class SearchBoxComponent implements AfterViewInit, OnDestroy {
private readonly _subscriptions: Subscription[] = [];
private readonly _zone = inject(NgZone);
@ViewChild('languageSelect') private readonly languageRef: ElementRef<HTMLSelectElement> = {} as ElementRef;
@ViewChild('orderBySelect') private readonly orderByRef: ElementRef<HTMLSelectElement> = {} as ElementRef;
@ViewChild('resultsSizeSelect') private readonly resultsSizeRef: ElementRef<HTMLSelectElement> = {} as ElementRef;
@ViewChild('isbnInput') private readonly isbnRef: ElementRef<HTMLInputElement> = {} as ElementRef;
config = inject(ConfigService).config;
filtersEnabled = new FormControl<boolean>(false);
search = new FormControl<string>('');
@ -43,6 +48,21 @@ export class SearchBoxComponent implements OnDestroy {
});
}
ngAfterViewInit() {
if (this.languageRef)
this.updateFilters('langRestrict', this.languageRef.nativeElement);
if (this.orderByRef)
this.updateFilters('orderBy', this.orderByRef.nativeElement);
if (this.resultsSizeRef)
this.updateFilters('maxResults', this.resultsSizeRef.nativeElement);
if (this.isbnRef)
this.updateFilters('isbn', this.isbnRef.nativeElement);
}
ngOnDestroy(): void {
this._subscriptions.forEach(s => s.unsubscribe());
}
get provider() {
switch (this.config.providers.default) {
case 'google': return this.config.providers.google;
@ -58,8 +78,4 @@ export class SearchBoxComponent implements OnDestroy {
}
this.filtersOutput.emit(this.filters);
}
ngOnDestroy(): void {
this._subscriptions.forEach(s => s.unsubscribe());
}
}