refactor(web): search people (#9082)

* refactor: search people

* fix: test

* fix: timeout

* fix: callbacks

* fix: simplify

* remove unused var

* refactor: rename file

* fix: focus when deleting last character

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
martin 2024-04-29 23:38:15 +02:00 committed by GitHub
parent 72ce81f0c2
commit 5722c830ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 207 additions and 267 deletions

View file

@ -23,7 +23,7 @@
let suggestedPlaces: PlacesResponseDto[] = [];
let searchWord: string;
let latestSearchTimeout: number;
let showSpinner = false;
let showLoadingSpinner = false;
let suggestionContainer: HTMLDivElement;
let hideSuggestion = false;
let addClipMapMarker: (long: number, lat: number) => void;
@ -74,14 +74,14 @@
if (latestSearchTimeout) {
clearTimeout(latestSearchTimeout);
}
showSpinner = true;
showLoadingSpinner = true;
const searchTimeout = window.setTimeout(() => {
searchPlaces({ name: searchWord })
.then((searchResult) => {
// skip result when a newer search is happening
if (latestSearchTimeout === searchTimeout) {
places = searchResult;
showSpinner = false;
showLoadingSpinner = false;
}
})
.catch((error) => {
@ -89,7 +89,7 @@
if (latestSearchTimeout === searchTimeout) {
places = [];
handleError(error, "Can't search places");
showSpinner = false;
showLoadingSpinner = false;
}
});
}, timeDebounceOnSearch);
@ -121,7 +121,7 @@
<SearchBar
placeholder="Search places"
bind:name={searchWord}
isSearching={showSpinner}
{showLoadingSpinner}
on:reset={() => {
suggestedPlaces = [];
}}

View file

@ -56,7 +56,7 @@
<div id="people-selection" class="-mb-4">
<div class="flex items-center w-full justify-between gap-6">
<p class="immich-form-label py-3">PEOPLE</p>
<SearchBar bind:name placeholder="Filter people" isSearching={false} />
<SearchBar bind:name placeholder="Filter people" showLoadingSpinner={false} />
</div>
<div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar">