Added author to search filters.

This commit is contained in:
Tom
2025-06-26 14:32:03 +00:00
parent f735d1631f
commit 1de822da14
3 changed files with 38 additions and 7 deletions

View File

@ -61,6 +61,12 @@ input:focus {
box-shadow: 0 0 4px 3px rgba(31, 128, 255, 0.5);
}
.icon-wrapper>img, .icon-button>img {
display: inline;
vertical-align: middle;
filter: brightness(0) saturate(100%) invert(44%) sepia(0%) saturate(167%) hue-rotate(154deg) brightness(90%) contrast(87%);
}
.icon-button:hover {
cursor: pointer;
}

View File

@ -53,6 +53,14 @@
<option value="40">40</option>
</select>
</div>
<div class="text-wrapper">
<label for="authorInput">Author</label>
<input #authorInput
name="authorInput"
type="text"
placeholder="J. R. R. Tolkien"
[formControl]="author" />
</div>
<div class="text-wrapper">
<label for="isbnInput">ISBN</label>
<input #isbnInput

View File

@ -1,7 +1,7 @@
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';
import { filter, map, Subscription } from 'rxjs';
import { ConfigService } from '../../services/config.service';
import { CommonModule } from '@angular/common';
@ -22,6 +22,7 @@ export class SearchBoxComponent implements AfterViewInit, OnDestroy {
@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('authorInput') private readonly authorRef: ElementRef<HTMLInputElement> = {} as ElementRef;
@ViewChild('isbnInput') private readonly isbnRef: ElementRef<HTMLInputElement> = {} as ElementRef;
config = inject(ConfigService).config;
@ -31,31 +32,47 @@ export class SearchBoxComponent implements AfterViewInit, OnDestroy {
filters = new SearchContextDto();
filtersOutput = output<SearchContextDto>();
isbn = new FormControl<string>('');
author = new FormControl<string>('');
constructor() {
this._zone.runOutsideAngular(() => {
this._subscriptions.push(
this.search.valueChanges.pipe(
filter(value => value != null),
map(value => value!.trim()),
filter(value => value.length > 0),
).subscribe((value) => this.searchOutput.emit(value!))
);
this._subscriptions.push(
this.author.valueChanges.pipe(
filter(value => value != null),
map(value => value!.trim()),
filter(value => value.length > 0),
).subscribe((value) => this.updateFilters('inauthor', { value: value }))
);
this._subscriptions.push(
this.isbn.valueChanges.pipe(
filter(value => value != null),
map(value => value!.trim()),
map(value => value.length == 10 || value.length >= 13 && value.length <= 15 ? value : ''),
filter(value => value.length > 0),
).subscribe((value) => this.updateFilters('isbn', { value: value }))
)
);
});
}
ngAfterViewInit() {
if (this.languageRef)
if (this.languageRef && this.languageRef.nativeElement.value)
this.updateFilters('langRestrict', this.languageRef.nativeElement);
if (this.orderByRef)
if (this.orderByRef && this.orderByRef.nativeElement.value)
this.updateFilters('orderBy', this.orderByRef.nativeElement);
if (this.resultsSizeRef)
if (this.resultsSizeRef && this.resultsSizeRef.nativeElement.value)
this.updateFilters('maxResults', this.resultsSizeRef.nativeElement);
if (this.isbnRef)
if (this.authorRef && this.authorRef.nativeElement.value)
this.updateFilters('inauthor', this.authorRef.nativeElement);
if (this.isbnRef && this.isbnRef.nativeElement.value)
this.updateFilters('isbn', this.isbnRef.nativeElement);
}
@ -71,7 +88,7 @@ export class SearchBoxComponent implements AfterViewInit, OnDestroy {
}
updateFilters(key: string, value: any) {
if (key == 'langRestrict' && value == '') {
if (!value) {
delete this.filters.values[key];
} else {
this.filters.values[key] = value.value;