Added update for initial values for filters.
This commit is contained in:
@ -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>
|
||||
|
@ -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());
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user