AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Need to figure out how to make search page search without duplicating the api calls and to not have a limit set.

Browse source
This commit is contained in:
Joseph Milazzo 2022-11-10 08:21:57 -06:00
parent a9ca770307
commit 5abc0fefd6
4 changed files with 41 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

1
UI/Web/src/app/_services/search.service.ts
View file

@ -14,6 +14,7 @@ export class SearchService {
private searchSubject: ReplaySubject<string> = new ReplaySubject(1); private searchSubject: ReplaySubject<string> = new ReplaySubject(1);
searchResults$: Observable<SearchResultGroup>; searchResults$: Observable<SearchResultGroup>;
searchTerm$: Observable<string> = this.searchSubject.asObservable();
constructor(private httpClient: HttpClient) { constructor(private httpClient: HttpClient) {
this.searchResults$ = this.searchSubject.pipe( this.searchResults$ = this.searchSubject.pipe(

1
UI/Web/src/app/nav/grouped-typeahead/grouped-typeahead.component.ts
View file

@ -180,6 +180,7 @@ export class GroupedTypeaheadComponent implements OnInit, OnDestroy {
} }
open(event?: FocusEvent) { open(event?: FocusEvent) {
// TODO: Supress showing the groupped results when on the search page directly
this.hasFocus = true; this.hasFocus = true;
this.focusChanged.emit(this.hasFocus); this.focusChanged.emit(this.hasFocus);
this.cdRef.markForCheck(); this.cdRef.markForCheck();

20
UI/Web/src/app/search/search/search.component.html
View file

@ -1,15 +1,13 @@
<!-- <app-card-detail-layout <h3>Search Results: {{searchService.searchTerm$ | async}}</h3>
[isLoading]="loadingSeries" <app-card-detail-layout
[items]="series" [isLoading]="isLoading"
[pagination]="pagination" [items]="(series$ | async) || []"
[filterSettings]="filterSettings"
[trackByIdentity]="trackByIdentity"
[filterOpen]="filterOpen"
[jumpBarKeys]="jumpKeys"
[refresh]="refresh"
(applyFilter)="updateFilter($event)"
> >
<ng-template #cardItem let-item let-position="idx"> <ng-template #cardItem let-item let-position="idx">
<app-series-card [data]="item" [libraryId]="item.libraryId" [suppressLibraryLink]="false" (reload)="loadPage()"[allowSelection]="false"></app-series-card> <app-series-card [data]="item" [libraryId]="item.libraryId" [suppressLibraryLink]="false" (reload)="loadPage()"[allowSelection]="false"></app-series-card>
</ng-template> </ng-template>
</app-card-detail-layout> --> </app-card-detail-layout>
<!-- [pagination]="pagination"
[trackByIdentity]="trackByIdentity"
[refresh]="refresh"-->

36
UI/Web/src/app/search/search/search.component.ts
View file

@ -1,28 +1,52 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { AccountService } from 'src/app/_services/account.service'; import { map, Observable, Subject, switchMap, takeUntil } from 'rxjs';
import { SearchResult } from 'src/app/_models/search-result';
import { SearchService } from 'src/app/_services/search.service';
@Component({ @Component({
selector: 'app-search', selector: 'app-search',
templateUrl: './search.component.html', templateUrl: './search.component.html',
styleUrls: ['./search.component.scss'] styleUrls: ['./search.component.scss']
}) })
export class SearchComponent implements OnInit { export class SearchComponent implements OnInit, OnDestroy {
isLoading: boolean = false;
originalQueryString: string = ''; originalQueryString: string = '';
series$!: Observable<SearchResult[]>;
constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService,) { private onDestroy: Subject<void> = new Subject();
constructor(private route: ActivatedRoute, private router: Router, public searchService: SearchService,) {
} }
ngOnInit(): void { ngOnInit(): void {
const queryString = this.route.snapshot.queryParamMap.get('query'); const queryString = this.route.snapshot.queryParamMap.get('query');
console.log('query: ', queryString) console.log('query: ', queryString)
if (queryString === undefined || queryString === null) { if (queryString === undefined || queryString === null || queryString === '') {
//this.router.navigateByUrl('/libraries'); this.router.navigateByUrl('/libraries');
return; return;
} }
this.originalQueryString = queryString; this.originalQueryString = queryString;
// const searchResults$ = this.searchService.searchTerm$.pipe(
// takeUntil(this.onDestroy),
// switchMap(() =>)
// );
this.series$ = this.searchService.searchResults$.pipe(
takeUntil(this.onDestroy),
map(g => g.series),
);
} }
ngOnDestroy() {
this.onDestroy.next();
this.onDestroy.complete();
}
loadPage() {}
} }